Category: Project-03-Dynamic-Drawing

Project 03 – Dynamic Drawing

peachp3
var angle = 0
var move = 0


function setup() {
  createCanvas(600, 450);
}

function draw() {
  //background changes color
  background(217, (constrain(mouseY,200,450)), 250);
 
  //ring appears
    if (mouseY<height/2){
    noFill();
    stroke(255, 248, 156)
    ellipse(width/2, height/2, 300)
    }
  else {
    noFill();
    stroke(255,248,156);
    ellipse(width/2, height/2, 500);
  }
  //body
  noStroke()
    fill(32, 70, 133)
    triangle(width/2, height/2 - 70, 220, 400, 380, 400)
 
  //table
  fill(250, 204, 177);
    rect(0, height/4*3, width, height/4*3);
  fill(168, 112, 74)
    rect(0, 430, width, 20)
 
  //head
  fill(255, 235, 186);
    ellipse(width/2, 200, 170);
 
  //hair
  fill(0)
  arc(width/2, constrain(mouseY-100, 100, 170), 180,180, PI, 0)
 
  //left arm
  push();
    translate(width/2, height/2+70)
  fill(32, 70, 133)
    rotate(radians(mouseX/100*5))
      rect(-100,0, 100, 30);
  fill(255, 235, 186)
    ellipse(-100,15, 28)
  pop();
 
  //right arm
  push();
    translate(width/2, height/2+70)
  fill(32, 70, 133)
    rotate(radians(-mouseX/100*5))
      rect(0,0, 100, 30);
  fill(255, 235, 186)
    ellipse(100,15, 28)
  pop();
 
  //eyes
  noFill()
  stroke(0)
  strokeWeight(3)
    arc(width/2-35, 190, 40,40, PI, 0);
    arc(width/2+35, 190, 40,40, PI, 0);

//mouth
if (mouseY < height/2){
  push();
translate(300,240)
  scale (1.2)
    fill(0)
    ellipse(0,0, 60);
  fill(242, 117, 92)
  ellipse(0,10,40,20)
  pop();
}
  else {
    push();
    translate(300,240)
    scale(0.75);
  fill(0)
      ellipse(0,0,60);
  fill(242, 117, 92)
    ellipse(0,10,40,20)
    pop();
  }
//tomato
  if (mouseY<height/2){
    push();
      noStroke();
      fill(255,0,0)
        ellipseMode(CENTER)
      translate(480,150)
    scale(2.5)
      rotate(radians(angle));
        ellipse(0,0,30);
    noStroke();
      fill(0,255,0)
        ellipse(0,-10,10,5);
    pop();
    angle +=8
  }
   
  else {
 
    push();
    noStroke();
    fill(255,0,0)
      ellipseMode(CENTER)
    translate(480,350)
    scale(1.4)
    rotate(radians(angle));
      ellipse(0,0,30);
    noStroke();
    fill(0,255,0)
      ellipse(0,-10,10,5);
    pop();
      angle -=10
  }
//orange
    if (mouseY<height/2){
      push();
   translate(120,300)
    scale(2.0);
    noStroke();
    fill(245, 188, 103)
      ellipseMode(CENTER)

    rotate(radians(-angle));
      ellipse(0,0,30);
    noStroke();
    fill(150, 136, 114)
      ellipse(0,-10,5, 10);
      pop();  
    angle-=5
    }
 
    else {
      push();
    translate(120,100)
    scale(3.0);
      noStroke();
    fill(245, 188, 103)
      ellipseMode(CENTER)
    rotate(radians(-angle));
      ellipse(0,0,30);
    noStroke();
    fill(150, 136, 114)
      ellipse(0,-10,5, 10);

      pop();
      angle += 5
     
    }
  fill(250)
  noStroke()
  ellipse(move, 380, 70,30)
  noFill()
  strokeWeight(3)
  stroke(200)
  ellipse(move, 380, 50, 20)
  move = move + 10
  if (move>width){
    move = -move
  }
 
 
 
}

It was difficult creating this efficiently, and it was particularly hard for me personally to cause parameters to counter each other. Inspired by my little cousin who gets cranky when he is hungry.

Project-03 Dynamic Drawing

Because I had trouble figuring out where to begin on this project, I took a more structured approach and thought of a concept and composition beforehand. I chose to depict the rotting of a banana as time passes, an experience that is unfortunately all too familiar to me 🙁

zimmy banan


function setup() {
    createCanvas(480, 640);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background (255, 246, 234);
	fill (247, 210, 228);
	noStroke();
	rect (0, 330, 480, 310); // table

	fill(200, 138, 94);
	circle(100, 150, 145);
	fill(255, 255, 255);
	circle(100, 150, 130); // clock

	fill(14, 16, 51);
	push();
	translate(100, 150); // center of clock
	rotate(radians(mouseX/20)); // rotates at 1/60 of the speed of minute hand
    ellipse(0, -15, 4, 30); // hour hand 
	pop();

	push();
	translate(100, 150); // center of clock
	rotate(radians(mouseX*3)) // rotates 60x speed of hour hand
	ellipse(0, -25, 4, 50); // minute hand
	pop();

	stroke(140, 156, 190);
	strokeWeight(10);
	noFill();
	bezier(280, 208, 280, 100, 400, 100, 400, 208);
	line(400, 208, 400, 485);
	fill(140, 156, 190);
	noStroke();
	ellipse(400, 500, 105, 40); // banana hook

	fill(140, 156, 190, 50);
	ellipse(constrain(mouseX, 160, 235), 550, 200, 45); // right shadow; moves in a confined space with mouseX
	ellipse((320-(constrain(mouseX, 160, 220))), 550, 200, 45); // left shadow; moves opposite mouseX

	fill(254, 218, 65);
	stroke(228, 170, 36);
	strokeWeight(2);
	arc(80, 253, 400, 400, radians(-15), radians(105), CHORD); // leftmost banana
	arc(100, 280, 400, 400, radians(-25), radians(100), CHORD); // middle banana
	arc(120, 315, 400, 400, radians(-35), radians(90), CHORD); // rightmost banana
    noFill();
	arc(-9, 270, 600, 590, radians(-14), radians(50)); // detail on rightmost banana

	noStroke();
	fill(134, 92, 36, mouseX-40);
	ellipse(273, 286, 10, 8);
	ellipse(270, 326, 20, 33);
	ellipse(240, 420, 43, 45);
	fill(134, 92, 36, mouseX-100);
	ellipse(290, 360, 36, 45);
	ellipse(240, 375, 40, 40);
	fill(134, 92, 36, mouseX-200);
	ellipse(198, 460, 30, 20);
	ellipse(285, 400, 8, 12);
	arc(185, 368, 100, 100, radians(-50), radians(105), CHORD); // spots on rightmost banana appear at different times

	fill(134, 92, 36, mouseX-100);
	ellipse(140, 425, 28, 22);
    ellipse(190, 345, 14, 14)
	fill(134, 92, 36, mouseX-300);
	ellipse(150, 400, 30, 36) // spots on middle banana

	fill(134, 92, 36, mouseX-200);
	ellipse(80, 430, 14, 13);
	arc(80, 370, 80, 80, radians(-20), radians(110), CHORD); // spots on leftmost banana

    push();
    fill(254, 218, 65, mouseY-80);
    textSize(constrain(mouseY/3, 30, 70));
    textAlign(CENTER, CENTER);
    text("yummy", 330, 50);











}

Project_3_Dynamic_Drawing

Its an atom.

sketch
//andrewid rdrice
//section c

var bgV = 0
var fVr = 255
var fVg = 255
var fVb = 255
var angle = 0   //starting angle for the electron
var speed = 0.1

var x = 100     //photon position
var y = 100
var xVel = 1    //starting horizontal velocity of the photon
var yVel = 1    //starting vertical velocity of the photon
var bSize = 20  //diameter of the photon

function setup() {
    createCanvas(600, 450);
    background(0);
}

function draw() {
    background(bgV);
    noStroke();
    fill(fVr, fVg, fVb);
    text("p5.js vers 0.9.0. rdrice. 'Hydrogen with Photon'", 10, 15);
    angleMode(DEGREES);

    var scale = dist(width/2, height/2, mouseX, mouseY); //scaling nucleus
    ellipse(width/2, height/2, min(scale, 250));

    x += xVel   //Reycled this script from assignment a
    y += yVel   //keeps the 'photon' moving
    ellipse(x, y, bSize);    //draws a circle at x, y

    if (x > width-bSize/2) {    //checks to see if photon is in x bounds
        xVel = xVel*(-1)        //reverses velocity if its not
    } else if (x < bSize/2) {
        xVel = xVel*(-1)}
    if (y > height-bSize/2) {   //does the same as above, but for y
        yVel = yVel*(-1)
    } else if (y < bSize/2) {
        yVel = yVel*(-1)}       //end recycled script

    translate(width/2, height/2);   //rotating electron
    angle = angle+speed
    rotate(angle);
        ellipse(100,100, min(500*(10/scale), 100));
}

function mousePressed() {
    if (bgV == 0){  //toggles bgV (background) between b&w
        bgV = 255;
    } else if (bgV == 255) {
        bgV = 0}

    if (fVr == 255 & fVg == 255 && fVb == 255){   //random fill value
        fVr = random(0,255);
        fVg = random(0,255);
        fVb = random(0,255);
    } else {    //toggles back to white
        fVr = 255
        fVg = 255
        fVb = 255}

    speed = random(-1, 1);  //new random speeds for moving objects
    xVel = random(-10,10);
    yVel = random(-10,10);
}

click to change colors and particle velocities.

Project-03- Dynamic Drawing

sp17 03 project

//Project 3 - Dynamic Drawing
//sp17
//Section C


function setup() {
    createCanvas(450, 600);
    
}

function draw() {
    background(215, 195, 215);

    if (mouseY < height/2) {
        background(0); 
    } else {
        background (215, 195, 215);
    }

    //SUN 
    fill(235,206,117); // yellow
    stroke(235,206,117); // yellow
    var y = min(mouseY, 620);
    var diam= 230; // diameter


    // if mouse moves towards the center of the sun, the sun shrinks
    // if mouse moves away from the sun it is big

    if (dist (mouseX, mouseY, width/2, y) < diam/4) {
        diam = 50;
    } 
    ellipse(width/2, y, diam, diam); // sun


    //if the mouse Y is above the middle, the sun turns white moon:
    if (mouseY < height/2) {
        fill(255);
        stroke(255);
        ellipse(width/2, y, diam, diam); 
    }


    // if mouse around the centerpoint of the canvas, the sun/moon has rays show up
    if (dist(width/2, height/2, mouseX, mouseY) < 10) {
        strokeWeight(10);
        line(width/2, height/2- 50, width/2, height/2 - 70); 
        line (width/2, height/2 + 50, width/2, height/2 + 70);
        line (width/2 - 50, height/2, width/2 - 70, height/2);
        line (width/2 + 50, height/2, width/2 + 70, height/2);
    }

    //CLOUDS
    // if mouse moves to the right, clouds move right

    fill(137,183,172); // light teal
    stroke(137,183,172) // light teal

    var x = min (mouseX, 500);
     // left cloud 
    ellipse(x, height/4*3, 230, 170);
    ellipse(x - 100, height/4*3, 150, 100);
    ellipse(x + 100, height/4*3, 150, 100); 

    //right cloud
    ellipse(x+ 200, height/4, 230, 170); // middle
    ellipse(x + 100, height/4, 150, 100); // left bump
    ellipse(x + 300, height/4, 150, 100); // right cloud, right bump 


}

Project 3: Dynamic Drawing

For this project, I wanted to portray the vibrancy and health of a flower depending on the amount of water that is in a vase. The more water there is in the vase (controlled by your mouse’s Y value, the bigger and more colorful the flower appears to be!

sketchDownload
// Susie Kim
// Section A


function setup() {
    createCanvas(450, 600);
	background(255, 218, 185);
}

function draw() {
	// define variables
	var setVal = mouseY/6;
	var waterOpacity = mouseY/13;
	var leafVal = mouseY/15;
	var flowerVal = mouseY/20;
	if (setVal >= 150) {
		setVal = 150;
	}
	background(255, 218, 185);
	//table
	fill(255, 178, 102);
	rect(0, 525, 500, 100);
	// vase water
	fill(102, 178, 255, 150 - waterOpacity);
	noStroke();
	rect(150, 350 + setVal, 150, 175 - setVal, 20, 20);
	// flower stem that changes color
	stroke(0, 204- setVal, 0);
	strokeWeight(6);
	line(225, 200, 225, 520);
	// vase itself
	strokeWeight(4);
	stroke(51);
	noFill();
	rect(150, 275, 150, 250, 20, 20);
	// flower!
		// flower petals
    noStroke()
	fill(255 - setVal, 153 - setVal, 204 - setVal);
	ellipse(185, 170, 55, 55);
	ellipse(265, 170, 55, 55);
	ellipse(225, 140, 55, 55);
	ellipse(205, 215, 55, 55);
	ellipse(245, 215, 55, 55);
	    // flower center that expands
	fill(255 - setVal, 255 - setVal, 0);
	if(flowerVal >= 25) {
		flowerVal = 25;
	}
	ellipse(225, 180, 65 - flowerVal, 65 - flowerVal);
	    // leaves that grow
	fill(0, 204- setVal,0);
	if (leafVal >= 25) {
	    leafVal = 25;
	}
	ellipse(250, 325, 70 - leafVal, 40 - leafVal);
	ellipse(200, 325, 70 - leafVal, 40 - leafVal);
}

Project 3 – Dynamic Drawing

drawingtlourie

function setup() {
    createCanvas(500, 500);
    background(0);

}

function draw() {
	background(0);
	stroke(200, 0, mouseY);
    strokeWeight(mouseX/15); //vertical red lines
    line(25, 0, 25, 500);
    line(75, 0, 75, 500);
    line(125, 0, 125, 500);
    line(175, 0, 175, 500);
    line(225, 0, 225, 500);
    line(275, 0, 275, 500);
    line(325, 0, 325, 500);
    line(375, 0, 375, 500);
    line(425, 0, 425, 500);
    line(475, 0, 475, 500);


    noStroke();
    fill(0, 0, 200, mouseY/2 + 20); //circls
    ellipse(100, 100, pmouseX-mouseX/3);
    ellipse(100, 400, pmouseX-mouseX/3);
    ellipse(400, 100, pmouseX-mouseX/3);
    ellipse(400, 400, pmouseX-mouseX/3);



    fill(200, 200, 0, mouseX/2 + 20); //circles
    ellipse(100, 100, pmouseY-mouseY/3);
    ellipse(100, 400, pmouseY-mouseY/3);
    ellipse(400, 100, pmouseY-mouseY/3);
    ellipse(400, 400, pmouseY-mouseY/3);

    push();

    translate(width/2, height/2);
    rotate(radians(mouseX));
    fill(255, 255, 255, mouseX/2+15); //white piece
    rectMode(CENTER);
    rect(0, 0, 255-mouseY, 1000); 

    pop();

	stroke(200, 0, mouseY);
	strokeWeight(mouseY/15); //horizontal red lines
    line(0, 25, 500, 25);
    line(0, 75, 500, 75);
    line(0, 125, 500, 125);
    line(0, 175, 500, 175);
    line(0, 225, 500, 225);
    line(0, 275, 500, 275);
    line(0, 325, 500, 325);
    line(0, 375, 500, 375);
    line(0, 425, 500, 425);
    line(0, 475, 500, 475);


}

Project – 3 Dynamic Drawing

This particular drawing was inspired by the Purist Paintings of Le Corbusier. The interactive painting re-interprets the ideas of transparency and multi-perspectival drawings explored in Cubist and purist paintings.

sketch
//tjchen 
// 15104 section A
var dia =5
var size = 5
var x
var y 
var vertex1 

function setup() {
    createCanvas(1000, 600);
    background(255);
}
function draw () {
    background(0);
    y = height/2;
    x = max(mouseX,width/5);
    vertex1 = max (0+mouseY*4, width/2);
    vertex2 = min (width-mouseY*4, width/2);
    push();
    var yguitar = height /3;
    rectMode(CORNER);
    fill(61, 80, 130);
    beginShape();
    vertex(vertex1,y);
    vertex(vertex2,y);
    vertex(0,height);
    vertex(width,height);
    endShape();

    //moving bottles
    push();
    scale(mouseY/400);
    rectMode(CENTER);
    fill(230,150);
    rect(mouseX+100,y,60,200,30);
    rect(mouseX+100,y-100,20,100,10);
    strokeWeight(1);
    stroke(0);
    circle(mouseX+100,y-150,20);
    fill(255,0,0,70);
    noStroke();
    rect(mouseX+100,y+15,60,170,30);
    stroke(255,0,0,140);
    pop();
   
    //GUITRAR
    noStroke();
    translate(width/2,height/2);
    scale(mouseY/200); 
    fill(140,height-mouseY);
    rectMode(CENTER);
    rect(200,0,150,50);
    rect(0,0,400,200,80);
    fill(mouseX);
    circle(0,0,50);
    fill(61, 80, 130);
    circle(0,(0)+100,80);
    fill(0);
    circle(0,(0)-100,80);
    //can
    pop();
    push();
    scale(1/(mouseX/400));
    fill(230);
    rectMode(CORNER);
    rect(x-25,y-15,50,150,25);
    strokeWeight(1);
    stroke(0);
    circle(x, y, 50);
    fill(150);
    circle(x, y, 30);
    pop();
    // circle 
    fill(41,71,82);
    circle(3*(width/5),mouseX,50);
    //bull nose
    var c =color(178,13,29,(height-mouseY)); 
    strokeWeight(height-mouseY);
    fill(c);
    rectMode(CENTER);
    rect((width/2)+50,height/2, abs(mouseY/4), mouseY/5,abs(mouseY/5));

}

Project 3 – Dynamic Drawing

For this project I created a nautical scene that has many changing/moving elements that simulate the change from sunrise to sunset.

sketch

//Helen Cheng - helenc1
//Section C

var waterLevel=400

function setup() {
    createCanvas(600, 450);
}

function draw() {
  strokeWeight(0);
  //sky gradients from dark to light along x
  var skyG = 136-mouseX/6
  var b = 255-mouseX/6
  background(0,skyG,b)
  //sun gradients from red to yellow along x
  var g = 255-(mouseX/6)
  fill(255, g, 10);
  circle(600-mouseX, 200, 100);
  //water level rises and falls along y
  fill(141,206,238);
  rect(0,waterLevel-mouseY/4,600,450);
  //sailboat moves with your cursor along X
  fill(230,62,54);
  arc(mouseX,400,200,100,0,PI);
  //sail
  fill(255);
  triangle(mouseX,375,mouseX,300,mouseX+75,350);
  strokeWeight(5);
  stroke(56,56,56);
  line(mouseX,400,mouseX,300);
}

Dynamic Drawing

sketch
//Jasmin Kim
//Section D
var r=63;
var b=219;
var br=90;
var fishX=200;
var fishY=300;
var seaY=160;
var bubblebright=0;
var angle=0;

function setup() {
    createCanvas(450, 600);
}

function draw() {
    //Sky
    //Changes Night to morning as mouseY moves downward
    let back=constrain(mouseY,70,height)
    background(back);

    //Stars & Sun
    //Star comes out during night time(mouse at the top right side)
    //Sun grows from 0 to 128 during the morning(mouse at the bottom right side)
    //Star rotates as mouseX increases(mouse at the topside)
    let op=constrain(mouseX,0,width/2);
    let sunsize=constrain(mouseX,0,129);
    if(mouseY<200){
        push();
        noStroke();
        push();
        translate(79,121);      //star1
        rotate(radians(mouseX));
        fill(230,219,57,op);
        ellipse(0,0,4,17);
        ellipse(0,0,17,4);
        pop();
        push();
        translate(175,164);     //star2
        rotate(radians(mouseX));
        fill(230,219,57,op);
        ellipse(0,0,4,17);   
        ellipse(0,0,17,4);
        pop();
        push();
        translate(355,145);     //star3
        rotate(radians(mouseX));
        fill(230,219,57,op);
        ellipse(0,0,4,17);   
        ellipse(0,0,17,4);
        pop();
        pop();
    } else{
        push();
        noStroke();
        fill(247,212,40);
        circle(351,45,sunsize);
        pop();
    }


    //Sea
    //Color changes from deap sea color to shallow water level color
    //as mouseY moves downward
    let seaY = constrain(mouseY,180,300);
    let gr = constrain(mouseY,85,174);
    push();
    fill(r,gr,b);
    noStroke()
    square(0,seaY,width);            
    pop();

    //mouth
    fill(112,196,161);   
    //let animalY = constrain(mouseY,160,390);
    let fishY = constrain(mouseY,130,287);
    moveY=height-fishY
    push();
    noStroke();
    circle(fishX+91,moveY-5,13);
    circle(fishX+91,moveY+5,13);

    //Tail
    push();
    fill(246,208,98);
    stroke(246,208,98);
    strokeWeight(3);
    beginShape();
    curveVertex(fishX-86,moveY-4);
    curveVertex(fishX-86,moveY-4);
    curveVertex(fishX-122,moveY-13);
    curveVertex(fishX-114,moveY+1);
    curveVertex(fishX-120,moveY+22);
    curveVertex(fishX-86,moveY+12);
    curveVertex(fishX-86,moveY+12);
    endShape();
    pop();

    //fish body/eyes
    ellipse(fishX,moveY,181,85);
    fill(0);
    ellipse(fishX+70,moveY-11,16,14);
    fill(255);
    ellipse(fishX+74,moveY-13,5,4);
    pop();

    //fins
    push();
    fill(246,208,98);
    stroke(246,208,98);
    strokeWeight(3);
    beginShape();
    curveVertex(fishX+23, moveY-5);
    curveVertex(fishX+23, moveY-5);
    curveVertex(fishX-6, moveY-8);
    curveVertex(fishX-5, moveY+5);
    curveVertex(fishX-4, moveY+18);
    curveVertex(fishX+25, moveY+7);
    curveVertex(fishX+25, moveY+7);
    endShape();
    pop();

    //Bubbles
    //Bubble disappears as mouseY moves upwards
    push();
    if(mouseY<230){
        fill(31,131,172,0);
        strokeWeight(1);
        fill(31,131,172);
        circle(fishX+102,moveY-2,4);
        circle(fishX+106,moveY-10,3);
        circle(fishX+118,moveY-13,4);
        circle(fishX+114,moveY-31,5);
        circle(fishX+127,moveY-45,7);
    } else if(mouseY<280){
        fill(31,131,172,100);
        strokeWeight(1);
        fill(31,131,172,100);
        circle(fishX+102,moveY-2,4);
        circle(fishX+106,moveY-10,3);
        circle(fishX+118,moveY-13,4);
    } else{
        fill(0);
    }
    pop();

    //cloud color gets brighter as mouseY moves downward
    //cloud comes in as mouseX moves right
    //leftside cloud
    let skyX = constrain(mouseX,0,width/2);
    let rrr =constrain(mouseY,210,252);
    push();
    noStroke();
    fill(rrr,185,153);
    circle(skyX-64,43,50*1.5);        //big cloud
    circle(skyX-106,46,22*1.5);          //small cloud
    rectMode(CENTER);
    rect(skyX-72,64,99*1.5,30*1.5,30);
    pop();

    //rightside cloud
    //comes in from the left edge
    let skyyX =constrain(mouseX+30,0,width/2);        
    push();
    noStroke();
    fill(rrr,185,153);
    circle((width-skyX)+73,73,61*1.4);        //big cloud
    circle((width-skyX)+115,76,31*1.5);          //small cloud
    rectMode(CENTER);
    rect((width-skyX)+84,93,123*1.3,31*1.5,30);
    pop();
}

For created this idea, I had to let a lot of values into constrain so that the mouseX and the mouseY values does not get mixed up each other.

Project-03-Dynamic-Drawing

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