Week 3- Interactive Animation

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.

Titol: " Night Star Cat"

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();

}