ICM- Co-Creating a Sketch in p5.js

After scheming with Nicolas, we decided that I’d be responsible for the button and he, the algorithm. Then, we’d get together after fulfilling our responsibilities and combine into one giant, maybe beautiful (?), mess.

I wanted to understand how to make a rollover and a switch, so I made a random color-pulling switch that makes you eyes sort of hurt. As I played around, I thought it would be fun to make the rollover button almost disappear when it was clicked.

Here, I set up my canvas, set my variable “on” to false. I understand the logic when watching and reading about this code, but I’m still absorbing it, to be honest. I also wanted to pull in some random colors for my clicked background and rollover, so I set those variables as well.

Thanks to an example sketch, I was able to seek out the circle rollover code 🙂 But I also remember that formula from geometry, I think… is that right? That was errr 18 years ago? God.

I used the conditional statement, if the mouse is on the circle, fill it with random colors, otherwise fill it with light grey.

For mousePressed, the conditional states: if the mouse clicks anywhere on the circle, “on” = true, therefore draw the background in random colors. That way, the circle disappears into the ether of random rgb values.

Tomorrow, I will combine my code with my partners to see what Frankenstein sketch we get!

We decided to give each other our codes to each make two different interpretations.

Here is my original: “Lauren – Nico”

Here is my combined sketch: “Lauren + Nico”

Here is Nico’s original: “Nico – Lauren”

Here is Nico’s combined sketch: “Nico + Lauren”

We both ended up making rollovers and his rolled over to black. Since mine was a switch that made the rollover effect the background, I thought it’d make sense to be able to click his and make the background black.

I created a new variable called “night” so that when you click his rollover, it makes the background black. Then, I added an “else if” statement to my original conditional, that gave the option for a black background as long as mouseX and Y were over his rollover.

Under the mousePressed function, I added another “else if” that turned on the night background if the mouse is pressed over Nico’s rollover. I’ve been wondering all week how to make dual rollovers, so I’m pretty stoked I was able to figure it out!

Leave a Reply

Your email address will not be published. Required fields are marked *