Week One proved to be a difficult one, and since I felt very restricted by my drawing with 2D primitives, I decided to abandon it completely and try something new for week two. The criteria of this week’s sketch made me think of ripples. My goal was to have each click of the mouse create an ellipse. The ellipse would grow until it is not visible on the screen. Here was my plan of how to satisfy each criteria:
One element controlled by the mouse: A clicked mouse initializes the start of the ripple.
One element that changes over time, independently of the mouse: The ripple enlarges by itself.
One element that is different every time you run the sketch: The background color is a different shade of blue at each start of the program.
Step 1: make a circle grow
I started with the element that I thought would be the easiest - making an ellipse grow, since we have had a bit of practice in class changing objects on the canvas over time. This program uses variables and the looping draw() function in p5.js.
With this code, the ellipse is a perfect circle starting in the center of the canvas. The width and height increase by 1 pixel every frame as indicated by lines 13 and 14. BUT How can I make the mouse trigger this event/growing circle?
Step 2: mousePressed()
This is a function I didn’t know how to use before, so I had to read up from the p5.js documentation about different functions used to cause events. The mousePressed() or mouseClicked() functions do just this. The former triggers an even when the mouse is clicked, the latter after a mouse is clicked and released. Either would work for what I was trying to do.
In a separate program I wrote code that would create an ellipse when the mouse was clicked to practice this element of my future ripple program.
This code creates an ellipse of 80 width and 80 height anywhere the mouse indicates position using built in variables mouseX and mouseY. With each click, a new ellipse is created. Next I needed to figure out how to combine these two events, so that the mouse created an ellipse that would then grow on its own.
Step 3: mouse triggered ripple
In order to combine the two programs above, the draw() function would have to contain the ellipse making instructions, otherwise mousePressed() or mouseClicked() wouldn’t trigger a growing ellipse, just a stagnant one. With the help of this code, I learned that you can create a sort of on/off switch in the mouseClicked() function. Line 24 “start = !start;” indicates this start or stop of the drawing loop with each click of the mouse. It is setting the variable “start” to not start, meaning that mouseClicked() triggers the opposite of the current state. If start is true, mouse click will produce false start or stop. If at stop, the mouse click will produce start.
Although, I was able to make the animation of the ripple begin with a mouseClick, I faced a huge challenge of knowing where to place mouseX and mouse Y. I didn’t want the ellipse to follow my mouse every frame as shown below:
My goal was to be able to click the mouse to indicate position and essentially leave the ellipse in that place. Ironically, it wasn’t until I wrote some things down on paper that I started to make sense of it all. I realized that I wanted where mouse indicated starting position to happen ONLY ONCE. That was my epiphany. If the mouse indicates the position of the ellipse only once, I could move the mouse and the ellipse would grow from the originally clicked place.
When I figured out that the position of mouseX and mouseY should occur only once and be indicated by the mouse click, I realized that I could create my own variables for mouse x and y position and these should be set in the mouseClicked() function as opposed to the looping draw() function. This changed everything and allowed me to move my cursor away from its initial start, but the ripple would continue to expand on its own from that postion.
Step 4: creating an element that is different every time
This step was made for the random() function. I applied this to the background color. By randomizing just the red and green values but keeping blue the same, the background color varies from shades of pinks, purples, and blues, kind of like water at sunset. See the final program in the p5.js web editor here.
FINAL THOUGHTS:
This program is not complete, but I’ve reached a standstill in my current knowledge. My eventual goal is to have the mouse move anywhere and create new ripples with each click. This would make the program constantly interactive. However, to achieve this I need the mouse click to trigger the same animation over and over again. It’s kind of like I need to loop the loop. But I also need to store each ripple so that it finishes out its expansion and doesn’t disappear with a new click. Initial research has shown that an array would be able to accomplish such a task, but I don’t know how to implement this yet. I would love to come back to this program and add this last element to truly make it what I wanted it to be.