This week the assignment was to create a sketch that includes:
One element controlled by the mouse.
One element that changes over time, independently of the mouse.
One element that is different every time you run the sketch.
In my sketch you can control the background color by moving the mouse around, while at the same time controlling the color of the circle. In order to satisfy the other two points, the squares in the center rotate independently of the mouse, and they also become a different color every time you run the sketch.
Click here to view the sketch in the p5.js web editor.
One of the other things we were to aim for was to avoid using hard numbers. My previous sketch satisfied this, because a fixed inadequate resolution made me uncomfortable as a photographer. So, instead of using pixel coordinates to define shapes and locations I’ve been using width and height to indicate this. — meaning, instead of telling the program to create a square at 300 pixels in and 200 pixels down, I would tell it to create a square at width * 0.5 and height * 0.5 (halfway in and halfway down).
I used kind of a shortcut to keep the changing colors of the background and the circle separate. Rather than make a unique set of variables to make a sort of “Random V2” (which is the only way I currently know how to make two separate objects random colors without them being the same color at the same time), I modified the variables with some little math tweaks. Since the circle was set to random variables for red, green and blue values, I set the background randomness to basically “red random value divided by 0.5” and “blue random value divided by 2.” Also I should point out that the colors aren’t actually random, they are dictated by the X and Y position of the mouse cursor. I just said random for ease of conversation.
The code looks like this:
r = map(mouseX, 0, windowWidth, 230,0);
g = map(mouseY, 0, windowHeight, 30, 255);
b = map(mouseX, 0, windowWidth, 255, 70);
background(r/0.5, g, b/2);
fill(r,g,b);
noStroke();
ellipse(mouseX, mouseY, width * 0.05, height * 0.075);
I was also trying to figure out how to get the circle cursor to leave the frame. It works naturally on the right and bottom, but not the other sides. I was trying to use some boolean code to reduce the cursor’s opacity when it approached the edge of the frame, but I couldn’t get it to work. Looks like we’re going to diving deeper into the if, else boolean action pretty soon here, so I look forward to that. In other news, I finally feel like I’m starting to screw up where the curly brackets go much less often. So that’s a win. On to the next coding adventure!