Week 2
Assignment #1
First step:
- One element controlled by the mouse.
- One element that changes over time, independently of the mouse.
I based this code on my notes from class, basically copying and pasting out of my notes and then editing the parameters manually to better understand the basic elements. In this one the first ellipse just moves on the Y axis.
createCanvas(400, 400);
}
function draw() {
background(250, 120, 200);
ellipse(width * 0.27, mouseY, 150, 150);
ellipse(frameCount, height / 2, 200, 200);
ellipse(frameCount, height / 2, frameCount * 0.2, 100);
}
On p5.js.org: Source
Now to add the part that acts randomly...
- One element that is different every time you run the sketch.
Finally, I figured out how to make the canvas a different size every time you run the script. Surely it gets more creative than this! But this is the only thing I could get to work after adding the random function to various parameters. Adding the random function to the color or size of the ellipse or background would make it cycle rapidly between the parameters. I would like to learn how to make an element change randomly just once upon running the script (like color or size of a shape) without making it strobe or flicker between values.
Update 9/19: I edited this second one so that the ellipse that moves with the mouse changes size depending on the randomly generated size of the canvas, and also moves on both the X and Y axes. I still would like to figure out how to change the color of an element upon refreshing the sketch and/or get it to work so that I can click on one of the ellipses or the background to make it change color one color at a time. When I tried doing this in the same way as I did in the exercises above, the code appeared to then be broken/not work. Something about combining the different functions together I'm not grasping yet.
function setup() {
createCanvas(random(350,700), (350,700));
}
function draw() {
background('rgba(200,25,250,0.5)');
ellipse(frameCount, height / 2, 200, 200);
ellipse(frameCount, height / 2, frameCount * 0.2, 100);
ellipse(mouseX, mouseY, width*.444, width*.444);
}
On p5.js.org: Source
Now to rewatch and watch the next few of Shiffman's videos!!