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. 

Concept and Description:

For this mini project, I created a generative landscape that generates a slightly different sketch every time it’s played. My landscape consists of a ferris wheel, sun, clouds, birds, stars, and balloons. Most objects are generative, so they are in different positions and/or different colors when played. Some other notable objects or elements in my sketch are the time of day (day, sunset, night), weather (clear, rain, fog), and the location of my egg in the ferris wheel. 

Here are 9 out of many possibilities of my landscape:

Coding:

First, I created different variables for different elements since I would need to either move some around or generate randomness.To generate randomness, I initialized my variables inside the setup and had them declared before setup since I only wanted to generate randomness once. One example would be for translateX and translateY, which would generate the random position of the sun. 

 

I wanted to generate different times of day based on the sun’s Y position, so if the sun was below 200, it would be day; if it was between 201 and 300, then it would be during sunset; and anything above 300 would be nighttime with stars that were generated with a for loop. I also changed the color of the grass, sun based on translateY to match the time of day.

For the ferris wheel, I used shapes, lines, and arcs. I also placed eggs inside the ferris wheel, as suggested by Professor Leon.  The eggs are in the cart by probability, where I declared a variable that randomly chooses a number from 0 to 99. If the number is below 50, then the eggs will appear in certain carts; if the number is between 50 and 60, it will appear in other carts; and any other number would be another set of eggs in different carts. 

I also did probability for the fog and snow. There would be fog if the number was larger than 10 and smaller than 20, and snow if the number was below 35.

Another place where I used a for loop is the position and slight bouncing of the balloons.

Line 210 updates the vertical position of the balloon based on the cos() function of the angle. Then, cos(angle) is multiplied by 10 to control the amplitude of the motion, and the result is added to 300 to determine the base position of the balloon, so the balloon oscillates vertically.

 

Conclusion:

How is drawing by hand from observation different from programming the computer to draw for you? Can you think of some commonalities as well?

When you draw by hand, you can control how fast you move your pen as well as what direction you want to go, but with the computer, you have to code for the speed and direction you can go. Additionally, drawing by hand gives you more freedom as you can draw anything you would like, but with programming, you have to follow a set of rules, and there are sometimes limitations. But programming allows you to be more exploratory since you can play around with the values and variables to achieve different outputs and effects. As for commonalities, both allow you to be creative and understand composition and design. Additionally, there is an iterative process because they both have an iterative process for refinement where you can make adjustments to get your desired outcome.

What properties have you manipulated in the repetition? Describe your observations and visual outcomes during the process.

Properties that were manipulated in my landscape were translation variables, color, randomization, movement, and drawing shapes. The visual outcomes would be the sun, clouds, bird, and balloon in different places throughout the canvas. The random appearance of eggs on the ferris wheel and changing colors of objects make the canvas more fun and colorful. Additionally, the occasional fog or snow effects add to the atmosphere and depth. 

What makes a good generative pattern?

Creating a good generative pattern involves a combination of technical skill and an understanding of aesthetic principles. For the generative pattern itself, there should be variety, randomness, balance, repetition, interactivity, and more. This way, it keeps the viewer engaged and curious about the artwork.

 

Sketch 1: 

This sketch generates a series of circles with varying sizes and colors, where each circle’s size is influenced by a sine wave function. I used the variables sinInput, sinInput2, sinInput3, etc. to control the phase of the sine wave for each circle’s size. As for drawing the circle, its size is determined by the sine value of its respective sinInput variable multiplied by a random value between 50 and 200. The colors of the circles also change randomly on each frame, creating variation and visual interest, making it generative. 

Sketch 2:

This sketch is a dynamic visual scene with moving shapes with changing transparency. crossX and crossY to determine the initial position of the central circle, speedX and speedY determine the initial movement speed in the horizontal and vertical directions, and transparency initializes the transparency value.  The background color is also randomized and not redrawn on each frame, which allows the shapes to leave a trail as they move. If the shape goes beyond canvas boundaries, it will reappear. The background is not redrawn on each frame, allowing shapes to leave a trail as they move. Additionally, the transparency of the shape gradually increases over time, which gives it a semi-illusion of shooting stars.

 

Sketch 3:

This sketch generates shapes with changing colors and positions based on trigonometric functions. Variable sinInput controls the phase of the sine wave, which affects the position and color of shapes, while sinSpeed determines the speed at which sinInput changes, which is initialized with a random value between 0.01 and 0.05. The background color is set based on the value of sinInput, which results in a grayscale background that changes over time. As the background changes, the colors of the shapes change as well, their initial color will become their complementary color. 

I am considering incorporating this sketch into Project A because I find it intriguing how the colors of the shapes shift based on grayscale. In my project, I envision the imaginary creature I create adapting its color or motion in response to changes in grayscale or other variables I define. Since this sketch is relatively simple, it provides a great opportunity for experimentation with various shapes to enhance the complexity and diversity of the composition. I plan to introduce interactive elements such as mouse or keyboard controls to allow users to manipulate the shapes’ parameters and motion patterns, adding an engaging layer of interactivity. Additionally, to further enhance the visual appeal of my creature, I will explore different color schemes and blending modes to create captivating and dynamic visuals.

Introduction

Anna Ridler is an artist and researcher known for her desire to work with art technologies, machine learning, and AI/generative algorithms. She is interested in ideas from the natural world, so her works often revolve around nature and collections of datasets to create unique and unusual narratives.

For example, one of her most famous works is Mosaic Virus, which explores themes related to capitalism. In this project, she utilizes machine learning algorithms to generate images of tulips. By training algorithms on datasets containing images of tulips from the Tulip Mania era, Ridler creates digital representations of these blooms, exploring the intersection of nature, economics, and technology.

Concept and Description:

For this mini-project 2, I had to recreate a memory of Zora and Princess, our campus cats! To make this memory interactive, I changed the background of Zora’s self-portrait and made the background blue with some reoccurring clouds. When frame count is at 150, the cat will “meow,” and when I move Zora to the left side of the canvas towards the meow, “click ‘c’ to find Princess” pops up.  Then, I will be able to click ‘c’ and Princess will appear. When Princess appears, Zora’s facial expression changes to happy and shocked. Here is Zora’s original self-portrait below:

Additionally, Princess only appears when ‘c’ is clicked, so when ‘c’ is not clicked, Princess disappears. When Princess is not there, Zora’s expression will also go back to her default expression. Here is a demo video of my project below.

Coding:

For this mini-project, I had to create variables to be able to move the clouds and self-portrait. Additionally, I made variables for the cat so I could easily adjust the position of that cat since I did not know where to position it when I started coding. Here are my variables:

The most challenging and time-consuming part was having Zora’s self-portrait follow my mouse, so I had to make all her x values into mouseX with a few adjustments based on their location away from the mouse. I struggled a bit with the eyebrows and making the lines move with my mouse, but thanks to Leon, I was able to figure out how to move them.

For the clouds, I had to make them reappear, and I wanted them to move at different speeds, so I had to create variables for each of the 3 clouds, including their x values and speed.  I wanted the clouds to reappear on the left side when they were completely out of the frame and have them come into the frame so the action looked smoother so I had to adjust some values. Here is my code for my variables:

Another struggle I had was to make the text disappear at a certain frame count, but I was not sure how I was able to do that, so I had to cover up the text with a rectangle that matches the background color.

 

Reflection:

What have you learned throughout the process of using the setup and draw functions, as well as variables and conditionals?

I learned that although it may look easy when the professor demonstrates in class, the real challenge is using what I learned in class and applying it to this mini-project. I also learned that there are many possibilities for creating different things, even if what we are learning are the basics and foundations.

Reflect on the language your partner used to describe the memory or dream and your interpretation of it using code.

Zora said that it was a great touch to build a scene with a sky and clouds.  She also likes the appearance change to show her emotion when she finds Princess. The text instruction is clear to her, but a small suggestion she gave me was to declare that the mouse should be pressed before clicking “c” to find Princess, but an easy solution to that is clicking on the canvas after pressing start to activate the canvas.

What are your thoughts on digital interactions and real-world interactions? After using mouse and keyboard interaction, describe an interactive device — one that doesn’t exist yet — that could let you better recreate the memory or dream in p5.js

I think that digital interactions can make our real-world interactions more interesting. It also allows us to be more creative and think about how we could recreate real-world interactions with code. An interactive device that could let me better recreate a memory or dream is maybe one with an interface where I could type and describe my feelings or sounds from the memory or dream, and the device would help me visualize it.

Concept and Description:

For this self portrait assignment, I decided to take a realistic approach of what I look like using basic shapes such as rectangles, circles, ellipses and triangles. For an example, I used a rectangle to create my hair, a circle to create my head, an ellipse to create my eyes, a triangle to create my bangs, etc. I also added small details such as eyelashes, dimples, dyed hair and a necklace to make the self portrait similar to me. 

Coding:

As for the coding portion, everything was pretty straightforward since I was able to create this self portrait using shapes we learned in class. Although there were a few parts of the mini project that took longer compared to other parts. For an example, when creating my nose and dimples, instead of using arcs, I used an ellipse with stroke and filling that is the same as my skin color and then created another ellipse that also matched the color of my skin but with no stroke. I had to overlap the ellipse with no stroke and scale the size down and layer it on top of the eclipse with the stroke in order to create the nose.

Additionally,  in order to create the heart necklace, I made the heart out of two circles and a triangle while the chain was made out of an ellipse that had no fill and a strokeWeight.

Reflection:

Initially uncertain about creating a self-portrait using just shapes, I surprised myself through experimentation and discovered the versatility of simple shapes in creating diverse designs. This process not only honed my technical skills but also provided valuable insights into my preferred creative approach.

Through this mini project, I realized my preference for a blend of reference and exploratory programming. While references offer specific guidance, exploratory programming fuels my creativity and enables me to think innovatively. For instance, while referencing an ellipse aids in accuracy, creating unique elements like a necklace requires experimentation and outside-the-box thinking.

While drawing on paper offered the freedom to create any shape, programming posed challenges in replicating certain designs. However, I found programming advantageous for its flexibility in easily manipulating shapes and experimenting with different configurations. This efficiency made programming preferable when it came to refining designs and testing various iterations.

Overall, this mini project was an enjoyable journey, allowing me to experiment with shapes and ultimately design my self portrait.