What is Net Art?

Also known as internet art, which is a form of artistic expression that uses digital technologies like algorithms, software, code, websites, bots, and images found online. It’s created, shared, and experienced primarily through the internet, pushing the boundaries of traditional art forms and embracing the unique possibilities of digital platforms. The nature of net art is constantly evolving and changing, meaning it doesn’t have a strict aesthetic. It evolves in a constant process and is able to adapt its visual language to technological and social changes.

Yehwan Song

Yehwan Song is a Korean-born, New York-based graphic designer, web designer, and web developer who creates unconventional and diverse internet spaces that foster new interactions between users and devices, including performances. She focuses on critiquing the overgeneralization of users and templated websites by creating non-generic web interfaces and performing with these websites and devices. Therefore, her work spans websites, performances, installations, sculptures, and visualizations, bridging online and physical spaces.

Her goal is to change the way people use websites and the website design industry in general, since it is currently highly mass-produced by large companies. Through her own work, she hopes to break this individual barrier of web design to encourage people to create and be creative instead of adhering to a “template”. 

Here are some of her works below:

Discussion

Yehwan Song’s work challenges the standardization of web interfaces and online experiences, highlighting the diversity of users and the societal factors influencing digital interactions. Her cultural background has driven her to seek ways to break this isolation for ignored users or cultures, aiming to broaden accessibility. The message is to encourage inclusivity and diversity in web design and the user experience. Her work also illustrates the potential of web design and how it does not have to be confined to a certain aesthetic. 

Yehwan Song values several key features of the web. Firstly, she prioritizes creating inclusive web environments that embrace minority cultures, aiming to break isolation and enhance accessibility. Secondly, she appreciates the flexibility and creativity of coding, especially in visual applications to explore coding’s artistic possibilities. Thirdly, Yehwan values the cultural diversity of the internet, engaging with diverse backgrounds to enrich her understanding of web dynamics and societal structures. 

Yehwan’s work aligns with the concepts taught in CCLab, focusing on creating interactive and visually engaging digital experiences. Her work serves as inspiration, reflecting the spirit of exploration and experimentation encouraged in CCLab. Through her work, we learn about inclusivity in web design, creative coding for artistic expression, community engagement for innovation, user-centered design for the user experience, and the importance of exploration and experimentation for continuous learning and innovation in digital projects.

Conclusion

From a personal point of view, I find Yehwan’s approach and work inspiring, especially her emphasis on inclusivity and challenging the possibilities of web design. Her exploration of creative coding and engagement made me realize the impact of her work.

Reading about Yehwan’s work has encouraged me to think beyond traditional design boundaries, consider diverse user perspectives, and explore creative coding techniques for visual storytelling. For Project B, I aim to think outside the box and embrace experimentation. Drawing inspiration from Yehwan’s work and that of other artists, I will explore innovative approaches to create an  engaging digital experience.

 

Presentation Slides

Concept & Description

For this mini project, I created an object dancer using OOP.  When dancing, there are many different motions so I tried to incorporate them into my object dancer to make it more playful. My object dancer has 5 motions, including the movement of its eyes, mouth, arms, legs and body as a whole. The eyes move back and forth, making it seem like my dancer is looking around. The mouth moves up and down, which can make it look like the dancer is either talking or singing. The arms and legs go up and down, which is the main movement of the dancer. Since the legs are going up and down, it would not be complete if it didn’t bounce, so I added a bounce to make it look like the dancer is jumping up and down. Additionally, I added a hat to give it more character.

GitHib Link

Coding

Since I had difficulty coming up with what I wanted my dancer to look like, I kept it simple and focused on the movements. For the constructors, I added this.bounceSpeed to control the speed on my dancers bounce, this.bounceRange to control the range the dancer bounced in, this.mouthY for the vertical position of the mouth, and this.mouthDirection to control the direction of the mouth.

For the update function, I had to update all of the movements, including the movement of the eyes, legs, arms, mouth and position of the dancer. For the majority of them, I used sin and frameCount to have the movement oscillate back and forth. For the mouth, I made sure that this.mouthDirection would switch directions once this.mouseY was either more than 13 or less than 5.

Reflection

The benefit of my class not relying on any code outside of its own definition is that it becomes a standalone entity that can be used in various parts of my program or even in other programs without causing conflicts or dependencies on external code For example,  when the professor combines everyone’s dancers into the same program, there are no conflicts or issues due to dependencies on external code.

The challenge in writing code that harmonizes with others’ code lies in the diverse coding styles, potentially leading to variables sharing names but serving different purposes. This discrepancy can cause conflicts when integrating code, posing compatibility issues.

Modularity in the dancer class means breaking code into smaller parts for easier management, such as my update and display functions. The update function manages the behaviors and movements, while the display function manages the appearance of my dancer. Reusability refers to using the same code for different dancers with minimal changes. For example, I can create multiple instances of EllenDancer class, each with different bounce speeds, bounce ranges, and more. These instances represent different dancers with distinct characteristics, all using the same code structure defined in my dancer class.

Ellen Wang,  Blobby’s Wonderland

Short Description:

The amusement park is home to a pink glutenous creature named Blobby. Blobby’s wonderland is where it thrives, showcasing its playful nature, love for bubbles, and unique abilities such as teleportation and color-changing emotions. 

Abstract:

Blobby is a whimsical creature that embodies the spirit of fun and adventure. Discovered in 2024 at an amusement park by a team of adventurous scientists and children, Blobby has charmed many with its playful demeanor and captivating appearance. This project immerses you in Blobby’s world, exploring its habitat, appearance, and key characteristics. From its love for bubbles to its unique abilities like teleportation and color-changing emotions, Blobby’s Wonderland invites everyone to join in the enchantment. Discover the magic of Blobby as you explore its gelatinous world and uncover the mysteries of this unique creature.

Images:

Instructions on how to interact with Blobby

Creating bubbles for Blobby!

One of the many expressions of Blobby

Process: Design and Composition

For the design of my project, I knew the vibe and feel I wanted to go for were more on the cartoon and colorful side to give my project a fun and playful vibe. Since I had already created my generative landscape for mini project 4, I was able to use that as a foundation and focus on creating Blobby.

When I was creating Blobby, I originally wanted it to be shaped like an actual blob that had many curves but I realized that it was quite difficult to achieve that shape. While I was searching up images of blobs on the internet, I came across a pudding, and ultimately, I took inspiration from that. To make Blobby more generative, I gave it different expressions so every time my sketch generates, its facial expression is different. 

In my initial draft of Blobby for Interaction Day, I had its arms move according to the movement of the cursor and had the user create bubbles for Blobby. But after feedback from peers, I decided to add more interactions, such as Blobby absorbing the bubbles and growing, as well as having its eyes follow the cursor so it looks like it is looking at the user creating bubbles, giving it more life.

As for the generative background, I wanted to make it more lively, so I decided to animate the clouds, birds, and ferris wheel. The position of the clouds is random so the clouds are in different positions in each sketch, which makes it more interesting. The ferris wheel moves clockwise, which gives the sketch dimension because my original generative background has no movement aside from the balloons. Below are a few screenshots of my generative background.

Process: Technical

When adding interactive features such as changing Blobby’s color, I encountered some technical difficulties because when I clicked on my creature, it wouldn’t change color. To address this issue, I had to abandon the random color change feature for my creature and instead opt to make it change to specific colors based on the number of times the mouse is clicked.

I also had to figure out how to change Blobby’s expression and I realized I could change its expression by using the if and else statement to check the color of Blobby. 

Another difficult part of creating interactions for Blobby was the absorbing bubbles part because, originally, I wanted the bubbles to pop when it was near its mouth but because of scaling and other factors, I was not able to make it look like it was eating it so I just made the bubbles pop when Blobby moved towards it to give it that absorbing effect. Below is the code for Blobby absorbing the bubbles, which is similar to adding bubbles but using splice instead of push bubbles, and also a for loop to loop through the array to find the correct bubble to pop.

Most of my time was spent cleaning up the code and creating functions to ensure that the draw function looked cleaner. For the bird, I drew inspiration from the noise slides posted for CCLab. At first, I made it go in a straight line but I quickly realized it was not very bird-like so adding noise was what made the bird on my sketch more lively. This code is similar to the ones on the slides; I just changed some of the values as well as the shapes so it was a bird instead of an ellipse.

As for the ferris wheel, it was a tedious process as I had to use push, pop, and translate for each of the lines and carts in order for the ferris wheel to rotate. I also used frameCount to rotate the lines and carts, which turned out to be a lifesaver because it is constantly increasing. I also multiplied it by 0.5 so the ferris wheel spins slower. 

Reflection and Future Development

All in all, I feel like I learned a lot from doing this project because I had to apply what I learned in class to my project. Additionally, I could visualize what I wanted my canvas to look like but when it came to coding, it was challenging for me. But if I had an idea that I was not sure how to code, I would look for p5 references or search online to help me further. I like my generative background for my project but one thing I’m not too satisfied with is how Blobby moves. If I had more time to improve, I would definitely improve the movement for Blobby.

For feedback, I received really insightful and constructive feedback from my classmates, Leon, Moon, and Carrot. Carrot suggested that Blobby could interact more with the background, such as going into the ferris wheel or the balloons, which is something I wanted to do but found difficult because I was unsure how to code it. However, this is something I will definitely explore in the future. Additionally, Leon mentioned that it would be better if Blobby only moved on the x-axis, which I also agreed with because Blobby originally only moved on the x-axis. Still, in order for Blobby to eat all the bubbles, I had to make it move on both axes.

If I had the chance to implement my project further, I would continue to explore new ways to enhance Blobby’s interactions and animations with the background to create a more immersive and engaging experience for users. Additionally, instead of using arrow keys to control Blobby, I would most likely make its motion randomized so it could eat bubbles itself.

In the future, I will keep all the feedback I got for this project in mind to improve on my future projects.

Credits & References

Special thanks to Professor Leon for answering any questions I had about the project and for helping me fix my code. I also want to thank Danni for assisting me in figuring out how to make my creature change colors randomly when the mouse is pressed. Additionally, I am grateful to my classmates who gave me suggestions on interaction day, as well as to my friend Queena. They all contributed ideas for interactions I could implement for Blobby, such as eating bubbles and growing in size. Their support and input were invaluable in creating a more engaging and dynamic experience for Blobby’s Wonderland.

I also used resources from CCLAB slides, especially for the noise, it helped me greatly. Additionally, I used to p5 to help me with mapping and splicing.