xxxxxxxxxx
97
// DONE. One element controlled by the mouse. Mouse track in top and stroke weight.
// DONE. One element that changes over time, independently of the mouse. Bouncing form.
// DONE. One element that is different every time you run the sketch. (Squares vs. circles)
let width = 800;
let height = 600;
let half = width / 2;
let xPos = (half / 2) - 5;
let yPos = (height * .75) - 5;
let xSpeed = 1;
let ySpeed = 1;
let randInt;
let color1 = [255, 100, 100];
let color2 = [40, 150, 100];
function setup() {
createCanvas(width, height);
noStroke();
randInt = int(random(5,10));
}
function draw() {
background(255, 255, 240);
//Set up backgrounds
fill(color1);
rect(0, 0, half, height);
fill(color2);
rect(0, 0, half, height / 2);
fill("white");
//Something controlled by the mouse
if (mouseX < half && mouseY < height / 2) {
if (randInt % 2) {
ellipse(mouseX, mouseY, 20);
} else {
rect(mouseX-10, mouseY-10, 20, 20);
}
}
//Something that changes over time
if (randInt % 2){
ellipse(xPos, yPos, 10);
} else {
rect(xPos, yPos, 10, 10);
}
xPos += xSpeed;
yPos += ySpeed;
if ((yPos > height-5) || (yPos < (height/2)+5)){
ySpeed = -1 * ySpeed;
}
if ((xPos > half-5) || (xPos < 5)){
xSpeed = -1 * xSpeed;
}
//Something different everytime you run the sketch and something controlled by mouse (right side of page)
for (i = 0; i < randInt; i++){
fill(255,255,255,i);
if (i % 2){
stroke(color1);
} else {
stroke(color2);
}
let xVal = map(mouseX, 0, height, 2, 20);
strokeWeight(xVal);
if (randInt % 2) {
ellipse(half+half/2, height/2, i*30, i*30);
} else {
push()
rectMode(CENTER);
rect(half+half/2, height/2, i*30, i*30);
pop()
}
}
noStroke()
}
//REFERENCES: https://editor.p5js.org/icm/sketches/BJKWv5Tn