var canvasW = 480
var canvasH = 640
function setup() {
createCanvas(canvasW, canvasH);
}
function draw() {
var drinkY = 300;
var drinkH = 200;
var drinkOpacity = 200 - (mouseY / 8);
background(100 + (mouseX / 10), 150 + (mouseX / 10), 255);
// background color changes with mouseX
noStroke();
fill(255, 200, 200);
ellipse(canvasW / 2, 240, 300, 300);
noStroke();
fill(0);
ellipse(180, 160, 15, 15);
noStroke();
fill(0);
ellipse(300, 160, 15, 15);
noStroke();
fill(0);
rect(235, 190, 10, 305);
stroke(0);
strokeWeight(4);
line(210, 190, 270, 190);
noStroke();
fill(240, 130, 30, drinkOpacity);
rect(170, drinkY + (mouseY / 4), 140, drinkH - (mouseY / 10));
// drink height and opacity changes with mouseY
noStroke();
fill(60);
rect(0, 500, canvasW, canvasH - 500);
stroke(255);
strokeWeight(4);
noFill();
rect(170, 250, 140, 250);
push();
translate(0, (mouseY / 4.3));
rectMode(CENTER);
noStroke();
fill(255, 255, 255, 100);
rect(200, 292, 50 - (mouseY / 100), 50 - (mouseY / 100), 5);
pop();
push();
translate(0, (mouseY / 5));
rectMode(CENTER);
noStroke();
fill(255, 255, 255, 100);
rect(250, 320, 50 - (mouseY / 100), 50 - (mouseY / 100), 5);
pop();
push();
translate(0, (mouseY / 4.3));
rectMode(CENTER);
noStroke();
fill(255, 255, 255, 100);
rect(280, 292, 50 - (mouseY / 100), 50 - (mouseY / 100), 5);
pop();
// ice cubes change size and position
}
This project was a really interesting way to experiment with changing shapes, colors, opacity, size, and position in a piece. I really enjoyed learning some new functions, and some other things I wish I could’ve implemented are rotations (in the ice cubes) and some more complex figures.