Project-03-Dynamic-Drawing

var r = 254;
var g = 247;
var b = 255;
var angle = 0;

function setup() {
    createCanvas(600, 450);
    background(220);
    frameRate(20);
}

function draw() {
    //bg color change
    background(r, g - (mouseX / 15), b - (mouseY / 20));
    //spinning rect
    push();
    fill(225, 250, 220, 50);
    rectMode(CENTER);
    translate(300, 225);
    rotate(radians(angle));
    rect(0, 0, 800, 20);
    rect(0, 0, 20, 800);
    pop();
    angle += 5;
    //rotating stars
    push();
    translate(width / 2, height / 2);
    rotate(radians(mouseX / 7));
    //blue stars
    fill(227, 252, 250);
    for (let i = 0; i < 6; i++){ 
        push();
        rotate(radians(60 * i));
        translate(200 , 0);
        star();
        pop();
    }
    //pink stars
    fill(255, 240, 240);
    for (let i = 0; i < 6; i++){ 
        push();
        rotate(radians(60 * i + 30));
        translate(200 , 0);
        star();
        pop();
    }
    pop();
    
    //back circle
    noStroke();
    fill(255, 247, 204, 30);
    circle(width / 2, height / 2, min(mouseX, 350));
    fill(255, 247, 204, 70);
    circle(width / 2, height / 2, min(mouseX, 300));
    fill(240, 230, 122);
    circle(width / 2, height / 2, 230);
  
    //Drawing Grandma
    //body
    push();
    var y = constrain(mouseY, 200, 400);
    noStroke();
    fill(247, 126, 142);
    rect(width/2 - 120, y + 30, 240, y + 200, 80);
    fill(245, 238, 164);
    circle(width/2, y + 120, 10);
    circle(width/2, y + 150, 10);
    circle(width/2, y + 180, 10);
    //head
    noStroke();
    fill(250, 231, 217);
    ellipse(width/2, y, 200, 200);
    //ears
    ellipse((width/2)-90, y, 50, 50);
    ellipse((width/2)+90, y, 50, 50);
    //glasses
    strokeWeight(1);
    noFill();
    stroke(30);
    arc(width/2, y, 20, 20, PI, 0);
    fill(235, 241, 255);
    ellipse(width/2 - 20, y, 25, 25);
    ellipse(width/2 + 20, y, 25, 25);
    //nose
    stroke(240, 208, 189);
    strokeWeight(20);
    strokeJoin(ROUND);
    fill(240, 208, 189);
    triangle(width/2, y + 5, width/2 - 10, y+20 ,width/2 + 10, y+20);
    //hair
    fill(214);
    noStroke();
    ellipse(width/2, y - 130, 60, 65);
    push();
    translate (width/2 + 50, y - 80);
    rotate(radians(120));
    ellipse (0, 0, 50, 130);
    pop();
    push();
    translate (width/2 - 50, y - 80);
    rotate(radians(-120));
    ellipse (0, 0, 50, 130);
    pop();
    pop();
   
}

function star() {
    //drawing the star
    push();
    rectMode(CENTER);
    square(0, 0, 20);
    rotate(radians(45));
    square(0, 0, 20);
    pop();
}