I converted week 3 code to p5js. I tried also with Brackets but for some reason it didn’t show and also it did not say any error. I tried to do better than last one so the background is in it's right form.
This is the code:
var a=1;
var b=1;
function setup() {
createCanvas(500, 500);
}
function draw() {
background(233,229,247,30);
stroke(252, 252, 244);
fill(19,67,110);
rect(-5,435,510,435);
push();
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);
pop();
push();// 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);
pop();
//ears of the cat face
fill(77, 28, 57);
triangle(285, 201, 235, 250, 285, 250);
triangle(335, 210, 339, 250, 300, 250);
//Colour
push();
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);
fill(random*567, random*120);
pop();
//stars in the background
fill(255, random(238), 157);
push();
translate(mouseX*a, mouseY*b);
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();
pop();
push();
rotate(mouseX/8);
translate(mouseX*a, mouseY*b);
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);
pop();
push();
rotate(mouseX/9);
translate(mouseX*a, mouseY*b);
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();
pop();
push();
let t = frameCount / 50; // update time
rotate(mouseX/9);
translate(mouseX*a, mouseY*b);
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();
pop();
push();
rotate(mouseX/9);
translate(mouseX*a, mouseY*b);
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();
pop();
push();
rotate(mouseX/9);
translate(mouseX*a, mouseY*b);
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();
pop();
//Details of the cat face
push();
fill(77, 28, 57);
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, +mouseY*-0.03); //eyes
fill(77, 28, 57);
ellipse(298, 243, 10, +mouseY*0.03);//eyes
ellipse(258,259,+mouseY*0.03,+mouseY*0.03);// mouth
stroke(2);
pop();
//stars inside of the cup
push();
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);
pop();
push();
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();
pop();
push();
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();
pop();
push();
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();
pop();
push();
translate(250, 430);
scale(0.2);
rotate(mouseX/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();
pop();
push();
console.log("Starrysky")
}