Category: Nature of Code

My sketch is based on the review we had about basic p5 coding in class.

The changes that I have made are:

1. Instead of drawing all the ellipses in the same size, I modified the “mouseDragged” function so that there would be circles in different sizes when the mouse was dragged.
2. In terms of the color, the r, g, and b values for each circle would vary. And the opacity value was set to 100.
3. “frameCount” is used to control the speed of the white bubbles appearing.
4. Also, I found it fun to add a sound effect to the process of drawing. Since the semi-transparent circles in varied sizes look like bubbles, I added a bubble sound effect when each stroke was done.

(But to use the audio file requires the function “preload()” and needs to open the webpage with a local server.)

---

Demo:

Sound on, please 😀

Date: 02-17-2019

Click here to visit on p5 Web Editor

Above is a demo video of me playing with the bouncing cube I made with p5 Web Editor. It features a squarish object bouncing up and down the screen. Its color changes based on its position on the x-axis and y-axis. The gravity changes direction upon every mouse click, or whenever the cube touches the blinking red spot on the side of the screen. When gravity changes, so does the background color. It leaves a trace because of the opacity of the background color. 

A newly added feature, which was not included in the video, is that the size of the cube changes based on the X and Y position of the mouse, using a map function to adjust the ratio of its size change.

There is a bug that the object will get stuck at the top or the bottom of the screen if it bounces too fast. I have not found a good way to solve it yet.

I decided to use function draw() to create automatically updated colorful bubbles using p5. 

1. I first used the random() function to create bubbles that appear in random positions on the screen with random colors.
2. I also want to make the bubbles appear randomly in different sizes within a certain range.
3. I found that the bubbles would be circles or ellipses randomly. But I want them to be circles in different sizes. So I used “let” to assign x with a certain range of numbers and put x in ellipse().
4. I also want the bubbles to be a little bit transparent. I looked up in p5 and learned about alpha that controls the opacity of colors.
5. I adjusted the size of the bubbles to make them smaller like little dots and used “windowWidth” and “WindowHeight”so that the effect looks better.

To enable Nature of Code Category