This week work, was to do a simple interactive animation, for practise on how to give interaction to elements on the code we create by giving simple comandas like translate, scale or .
In my case I opted for doing a simple animation.
I used a reference for inspiration for this interactive animation which is this illustration above by Nkim.
The attempt was to made the eyes of the cat to be bigger depending on how you move the stars, but somehow I did not get the results I was looking for. The rotation of the stars inside of the cup are only pure decoration.
Code:
void setup() {
size(500, 500);
background(233,229,247);
stroke(252, 252, 244);
fill(19,67,110);
rect(-5,435,510,435);
}
void draw() {
pushMatrix();
noStroke();
//floor
//color change of the strips in the bottom
strokeWeight(0);
fill(48, mouseX, mouseY);
quad(197,436,235,436,225,500,85,500);
strokeWeight(0);
fill (250, mouseX, mouseY);
quad(235,436,265,436,295,500,190,500);
strokeWeight(0);
fill (88, mouseX,mouseY);
quad(265,436,300,436,375,500,295,500);
strokeWeight(0);
fill (247, mouseX, mouseY);
quad(300,436,340,436,480,500,375,500);
popMatrix();
pushMatrix();// this section are transformations of the cup
stroke(252, 252, 244);
strokeWeight(2);
fill(77 - 28, 57 - mouseX, random(247), 200);
quad(185, 255, 345, 256, 320, 459, 215, 459);
strokeWeight(0);
fill(254 - 236, mouseY - mouseX, random(127), 200);
quad(200, 349, 332, 349, 320, 459, 215, 459);
popMatrix();
//ears of the cat face
triangle(285, 201, 235, 250, 285, 250);
triangle(335, 210, 339, 250, 300, 250);
//Colour
pushMatrix();
fill(233, 229, 217);
stroke(252, 252, 244);
strokeWeight(2);
ellipse(265, 250, 160, 50);
fill(77, 28, 57);
fill(mouseX - mouseY, mouseY - mouseX, random(500), 200);
random(#00ADEF, #FFF100);
popMatrix();
//stars in the background
pushMatrix();
rotate(mouseX/4);
translate(67,45);
scale(0.5);
beginShape();
vertex(0, -50);
vertex(14, -20);
vertex(47, -15);
vertex(23, 7);
vertex(29, 40);
vertex(0, 25);
vertex(-29, 40);
vertex(-23, 7);
vertex(-47, -15);
vertex(-14, -20);
endShape();
popMatrix();
pushMatrix();
rotate(mouseX/4);
translate(234,250);
scale(0.2);
strokeWeight(2);
beginShape();
vertex(0, -50);
vertex(14, -20);
vertex(47, -15);
vertex(23, 7);
vertex(29, 40);
vertex(0, 25);
vertex(-29, 40);
vertex(-23, 7);
vertex(-47, -15);
vertex(-14, -20);
endShape(CLOSE);
popMatrix();
pushMatrix();
rotate(mouseX/4);
translate(259, 123);
scale(0.3);
beginShape();
vertex(0, -50);
vertex(14, -20);
vertex(47, -15);
vertex(23, 7);
vertex(29, 40);
vertex(0, 25);
vertex(-29, 40);
vertex(-23, 7);
vertex(-47, -15);
vertex(-14, -20);
endShape();
popMatrix();
pushMatrix();
rotate(mouseX/4);
translate(230, 126);
scale(0.2);
beginShape();
vertex(0, -50);
vertex(14, -20);
vertex(47, -15);
vertex(23, 7);
vertex(29, 40);
vertex(0, 25);
vertex(-29, 40);
vertex(-23, 7);
vertex(-47, -15);
vertex(-14, -20);
endShape();
popMatrix();
pushMatrix();
rotate(mouseX/4);
translate(456, 325);
scale(0.3);
beginShape();
vertex(0, -50);
vertex(14, -20);
vertex(47, -15);
vertex(23, 7);
vertex(29, 40);
vertex(0, 25);
vertex(-29, 40);
vertex(-23, 7);
vertex(-47, -15);
vertex(-14, -20);
endShape();
popMatrix();
pushMatrix();
rotate(mouseX/4);
translate(120, 256);
scale(0.2);
beginShape();
vertex(0, -50);
vertex(14, -20);
vertex(47, -15);
vertex(23, 7);
vertex(29, 40);
vertex(0, 25);
vertex(-29, 40);
vertex(-23, 7);
vertex(-47, -15);
vertex(-14, -20);
endShape();
popMatrix();
//Details of the cat face
pushMatrix();
ellipse(253,235,90,20);//circle in the face of the cat which also change colour
stroke(77, 28, 57);
strokeWeight(0.1);
fill(252, 252, 244);
ellipse(249.5, 238.5, 9, mouseX*-0.03); //eyes
fill(77, 28, 57);
ellipse(298, 243, 10, mouseX*0.03);//eyes
ellipse(258,259,mouseX*0.03,mouseX*0.03);// mouth
stroke(2);
popMatrix();
//stars inside of the cup
pushMatrix();
translate(216,363);
scale(-0.2);
rotate(mouseX/8);//rotate the stars inside of the cup
fill(255, 238, 157);
stroke(13, 48, 88);
strokeWeight(2);
beginShape();
vertex(0, -50);
vertex(14, -20);
vertex(47, -15);
vertex(23, 7);
vertex(29, 40);
vertex(0, 25);
vertex(-29, 40);
vertex(-23, 7);
vertex(-47, -15);
vertex(-14, -20);
endShape(CLOSE);
popMatrix();
pushMatrix();
translate(255, 390);
scale(0.2);
rotate(mouseX/8);
beginShape();
vertex(0, -50);
vertex(14, -20);
vertex(47, -15);
vertex(23, 7);
vertex(29, 40);
vertex(0, 25);
vertex(-29, 40);
vertex(-23, 7);
vertex(-47, -15);
vertex(-14, -20);
endShape();
popMatrix();
pushMatrix();
translate(300, 407);
scale(0.3);
rotate(mouseX/8);
beginShape();
vertex(0, -50);
vertex(14, -20);
vertex(47, -15);
vertex(23, 7);
vertex(29, 40);
vertex(0, 25);
vertex(-29, 40);
vertex(-23, 7);
vertex(-47, -15);
vertex(-14, -20);
endShape();
popMatrix();
pushMatrix();
translate(270, 360);
scale(0.1);
rotate(mouseX/8);
beginShape();
vertex(0, -50);
vertex(14, -20);
vertex(47, -15);
vertex(23, 7);
vertex(29, 40);
vertex(0, 25);
vertex(-29, 40);
vertex(-23, 7);
vertex(-47, -15);
vertex(-14, -20);
endShape();
popMatrix();
pushMatrix();
translate(250, 430);
scale(0.2);
rotate(mouseX/8);
beginShape();
vertex(0, -50);
vertex(14, -20);
vertex(47, -15);
vertex(23, 7);
vertex(29, 40);
vertex(0, 25);
vertex(-29, 40);
vertex(-23, 7);
vertex(-47, -15);
vertex(-14, -20);
endShape();
popMatrix();
}