Category: Project-03-Dynamic-Drawing

Project 03: Pentachoron

Enjoy the lines and connections and gradient changes. I imagined this to be a screensaver.

sketchDownload
 /*
Nicholas Wong
Section A
*/

var triSize = 100; //Triangle size (arbitrary number)
var rectSize = 400; //Rectangle size (also arbitrary)
var colorChange = false; //True means color value decreases, false means it increases
var shadeNum = 255; //Color value to be manipulated

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

	cursor(CROSS); // Changes Cursor to a cross

	//Constrain mouse position to canvas
	let mx = constrain(mouseX, 10, width - 10)
    let my = constrain(mouseY, 10, height - 10)

    //Background gets lighter as mouse moves further from center
	background(dist(mouseX,mouseY,width/2,height/2) * 0.1);

	//Stroke properties for lines
	noFill();
    stroke(255 - (dist(mouseX,mouseY,width/2,height/2) * 0.5)) //Lines get darker as mouse moves from center
    strokeWeight(1.5)

    //Square in background moves with mouse slightly
    square(width/2 - rectSize/2 + 0.1*mx - 20, height/2 - rectSize/2 + my*0.1 - 20, rectSize)

    //Large triangle moves with mouse slightly
    triangle(width/2 - triSize*2 + my*0.25, height/2 - triSize*1.5 + mx*0.25 , width/2 + triSize*2 - mx*0.25, height/2 - triSize*1.5 + my*0.25, width/2 - my*0.25, height/2 + triSize*2 - mx*0.25)

    //Lines that connect 3 corners of the larger triangle to one corner of the smaller triangle

    //Corner 1 (top left smaller triangle)
   	line(width/2 - triSize + mx*0.25, height/2 - triSize + my*0.25,width/2 - triSize*2+ my*0.25, height/2 - triSize*1.5 + mx*0.25)
    line(width/2 + triSize - my*0.25, height/2 - triSize + mx*0.25,width/2 + triSize*2 - mx*0.25, height/2 - triSize*1.5 + my*0.25)
    line(width/2 - mx*0.25, height/2 + triSize - my*0.25, width/2 - my*0.25, height/2 + triSize*2 - mx*0.25)

    //Corner 2 (top right smaller triangle)
    line(width/2 + triSize*2 - mx*0.25, height/2 - triSize*1.5 + my*0.25,width/2 - triSize + mx*0.25, height/2 - triSize + my*0.25)
    line(width/2 - triSize*2 + my*0.25, height/2 - triSize*1.5 + mx*0.25,width/2 + triSize - my*0.25, height/2 - triSize + mx*0.25)
    line(width/2 - triSize*2 + my*0.25, height/2 - triSize*1.5 + mx*0.25,width/2 - mx*0.25, height/2 + triSize - my*0.25)

    //Corner 3 (bottom smaller triangle)
    line(width/2 + triSize*2 - mx*0.25, height/2 - triSize*1.5 + my*0.25,width/2 - mx*0.25, height/2 + triSize - my*0.25)
    line(width/2 - my*0.25, height/2 + triSize*2 - mx*0.25,width/2 - triSize + mx*0.25, height/2 - triSize + my*0.25)
    line(width/2 + triSize - my*0.25, height/2 - triSize + mx*0.25,width/2 - my*0.25, height/2 + triSize*2 - mx*0.25)


    //Connecting 3 corners of the rectangle to one corner of the large triangle

    //Corner 1 (top left large triangle)
    line(width/2 - triSize*2 + my*0.25, height/2 - triSize*1.5 + mx*0.25, width/2 - rectSize/2 + 0.1*mx - 20, height/2 - rectSize/2 + my*0.1 - 20)
    line(width/2 - triSize*2 + my*0.25, height/2 - triSize*1.5 + mx*0.25, width/2 + rectSize/2 + 0.1*mx - 20, height/2 - rectSize/2 + my*0.1 - 20)
    line(width/2 - triSize*2 + my*0.25, height/2 - triSize*1.5 + mx*0.25, width/2 - rectSize/2 + 0.1*mx - 20, height/2 + rectSize/2 + my*0.1 - 20)

    //Corner 2 (top right large triangle)
    line(width/2 + triSize*2 - mx*0.25, height/2 - triSize*1.5 + my*0.25,width/2 - rectSize/2 + 0.1*mx - 20, height/2 - rectSize/2 + my*0.1 - 20)
    line(width/2 + triSize*2 - mx*0.25, height/2 - triSize*1.5 + my*0.25,width/2 + rectSize/2 + 0.1*mx - 20, height/2 - rectSize/2 + my*0.1 - 20)
    line(width/2 + triSize*2 - mx*0.25, height/2 - triSize*1.5 + my*0.25,width/2 + rectSize/2 + 0.1*mx - 20 , height/2 + rectSize/2 + my*0.1 - 20)
    
    //Corner 3 (bottom large triangle)
    line(width/2 - my*0.25, height/2 + triSize*2 - mx*0.25, width/2 - rectSize/2 + 0.1*mx - 20 , height/2 + rectSize/2 + my*0.1 - 20)
    line(width/2 - my*0.25, height/2 + triSize*2 - mx*0.25, width/2 + rectSize/2 + 0.1*mx - 20 , height/2 + rectSize/2 + my*0.1 - 20)


    //Pulsating gradient effect for triangle in middle
	if (shadeNum >= 255){
		colorChange = true; //Change direction of gradient change
	}
	else if (shadeNum <= 0){
		colorChange = false; //Change direction of gradient change
	}

	if (colorChange){ //Color becomes darker
		shadeNum -= 2;
	}
	else{ //Color becomes lighter
		shadeNum += 2;
	}

    //Triangle 3
    fill(shadeNum) //Pulsating gradient shade
    triangle(width/2 - triSize + mx*0.25, height/2 - triSize + my*0.25 , width/2 + triSize - my*0.25, height/2 - triSize + mx*0.25, width/2 - mx*0.25, height/2 + triSize - my*0.25)


    //Stroke properties to lines connected to mouse
    push();
    strokeWeight(4);
    stroke(dist(mouseX,mouseY,width/2,height/2) * 0.25) // Line gets brighter as it moves further from center
    //Lines from smaller triangle that connect to mouse
    line(width/2 - triSize + mx*0.25, height/2 - triSize + my*0.25, mx, my);
    line(width/2 + triSize - my*0.25, height/2 - triSize + mx*0.25, mx, my);
    line(width/2 - mx*0.25, height/2 + triSize - my*0.25, mx, my);
    pop();
}

Project 03 – Dynamic Flower

Originally, I had no design in mind for my project. After creating some elements, I realized I had the base for a flower. I used differing opacities to create an aesthetic design.

Dynamic FlowerDownload
var x = -225;
var y = -300;
/*d was used as a variable for translation as the artwork was originally
created with a grid*/
var d = 50;
var r = 50;
var angle = 45;
var colorChange = 255;

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

function draw() {
    var colorReduce = mouseX / 50
    background(255);
    var extend = 3 * d;  //stretches dimensions on varying shapes
    translate(width / 2, height / 2);  //makes the center the origin

    extend -= .3 * mouseX;  //modifies the stretching variable
    //determines whether an RGB value should be increased or decreased
    if (mouseX <= width / 2){
      colorChange -= colorReduce
    } else {
      colorChange = 255
      colorChange += colorReduce;
      }
    /*creates the triangle-circle combination and rotates according to
    mousePressed*/
    push();
    fill(0, 0, colorChange, 60);
    rotate(radians(45 - 2 * angle)); //rotates the shapes around the center
    translate(-4.5 * d, -6 * d); //simplifies the location of each combo
    circle(7 * d + extend, 6 * d, 50);
    triangle(5 * d, 6.5 * d, 5 * d, 5.5 * d, 7 * d + extend, 6 * d);
    circle(4.5 * d, 9 * d + extend, 50);
    triangle(5 * d, 6.5 * d, 4.5 * d, 9 * d + extend, 4 * d, 6.5 * d);
    circle(2 * d - extend, 6 * d, 50);
    triangle(4 * d, 6.5 * d, 2 * d - extend, 6 * d, 4 * d, 5.5 * d);
    circle(4.5 * d, 3 * d - extend, 50);
    triangle(4 * d, 5.5 * d, 4.5 * d, 3 * d - extend, 5 * d, 5.5 * d);
    pop();

    /*creates the tilted petals of the flower and rotates them with the center
    when the mouse is pressed*/
    push();
    rotate(radians(45 + angle));
    fill(120, 30, 220, 35);
    circle(140, 0, 280);
    circle(0, 140, 280);
    circle(-140, 0, 280);
    circle(0, -140, 280);
    pop();
    //creates the non-tilted petals and rotates around the center with mouse
    push();
    rotate(radians(angle));
    fill(255, 176, 221, 120);
    circle(140, 0, 280);
    circle(0, 140, 280);
    circle(-140, 0, 280);
    circle(0, -140, 280);
    pop();
    /*creates the ellipses in the center of the petals and rotates them around
    the center*/
    push();
    fill(colorChange, 192, 176, 200);
    rotate(radians(2 * angle));
    ellipse(0, 100 + r, r, 2 * r);
    ellipse(0, -100 - r, r, 2 * r);
    ellipse(100 + r, 0, 2 * r, r);
    ellipse(-100 - r, 0, 2 * r, r);
    pop();
    //changes the size of the ellipses based on mouse position
    if (mouseY >= height / 2) {
      r = 45 + .05 * mouseY;
    } else {
      r = 50
      }
    //creates the green center square and rotation for mousePressed
    push();
    rotate(radians(angle - 45));
    rectMode(CENTER);
    fill(0, 255, 0, 80);
    rect(0, 0, 2 * d - 0.6 * extend, 2 * d - 0.6 * extend);
    pop();
    //creates the red center square and rotation for mousePressed
    push();
    rotate(radians(angle));
    rectMode(CENTER);
    fill(255, 0, 0, 80);
    rect(0, 0, 2 * d - .6 * extend, 2 * d - .6 * extend);
    pop();
    //creates the blue gradient when the y-mouse position changes
    let i=3;
    while (i<15) {
      noStroke(); //produces a graident effect based on ellipses
      fill(168, 235, 255, 10);
      ellipse(width / 3, height + i, mouseY + 50 * i, mouseY + 50 * i);
      ellipse(-width / 3, -height, mouseY + 50 * i, mouseY + 50 * i);
      ellipse(width / 3, -height, mouseY + 50 * i, mouseY + 50 * i);
      ellipse(-width / 3, height + i, mouseY + 50 * i, mouseY + 50 * i);
      i += 1; //increases the modifier as long as i<15
    }
}

function mousePressed() {
    //for when mouseX is less than the width, the angle of rotations increase
    if (mouseX < width) {
      angle += 45
    }
  }

Pinwheel drawing

My process for this project at first was to just mess around and see what shapes i can get to move, and then I realized I can make a moving pinwheel thats speed and direction is determined by mouse clicks and what side of the canvas the clicks occur. Everything after the pinwheel was design to make the appearance look better, the pinwheel is the main part of this piece.

sketchDownload
//Anthony Prestigiacomo aprestig section:C
var angle=0;
var degree=5;
var x=-300;
var y=0;
var hvel=5;
var cloudx=0;
var cloudxx=0;
cloudyy=0;
var cloudy=-10;
var r=50;
var vcloud=2;
var vcloud2=2.75;
var suncolor=0;
var bcolor=0;
var mooncolor=0;

function setup() {
    createCanvas(600, 450);
    background(203,234,246);
}

function draw() {
  background(203, 234, 246);
  noStroke();
  fill(bcolor);
  rect(0,0,600,450);    //night sky
  translate(width / 2, height / 3);
  push();
  if(mouseX>300){    //twinkling stars
    scale(2);
  };
  fill(203, 234, 246);
  circle(50,100,1);    //stars
  circle(-50,100,1);
  circle(57,250,1);
  circle(82,-58,1);
  circle(-200,133,1);
  circle(-5,-124,1);
  circle(-72,-230,1);
  circle(100,10,1);
  circle(150,45,1);
  circle(-150,-67,1);
  circle(50,50,1);
  circle(-50,-50,1);
  circle(-50,50,1);
  circle(-150,125,1);
  circle(-75,-30,1);
  circle(-45,-75,1);
  circle(-75,-75,1);
  circle(-200,-125,1);
  pop();
  push();
  noStroke();
  fill(suncolor);    //sun
  circle(-150,-150,250);
  fill(203, 234, 246);    //moon
  circle(150,150,250);
  fill(mooncolor);
  circle(105,105,25);   //moon craters
  circle(100,220,20);
  circle(175,175,75);
  circle(190,90,40);
  push();
  translate(-300,-height/3);
  fill(212,124,47);    //bird on the mouse
  circle(mouseX,mouseY,50);
  fill(48,46,59);
  circle(mouseX+25,mouseY-13,25);
  fill(105,107,102);
  triangle(mouseX-35,mouseY-5,mouseX+5,mouseY-5,mouseX-25,mouseY+25);
  fill(255,255,0);
  triangle(mouseX+25, mouseY-13, mouseX+30,mouseY-13, mouseX+25, mouseY-8);
  pop();
  fill(255);    //cloud white
  circle(cloudx,cloudy,r);    //top cloud
  circle(cloudx+25,cloudy,r);
  circle(cloudx+12.5,cloudy-25,r);
  circle(cloudxx-100, cloudy+150,r);    //bottom cloud
  circle(cloudxx-75,cloudy+150,r);
  circle(cloudxx-87.5,cloudy+125,r);
  cloudxx+=vcloud2;
  cloudx+= vcloud;
  if(cloudxx>400){    //makes clouds reappear on left side of screen
    cloudxx=-300;
  };
  if(cloudx>325){
    cloudx=-300;
  }
  pop();
  push();
  strokeWeight(10);
  stroke(0);
  line(0,0,0,height);    //pinwheel handle
  noStroke();
  rotate(radians(angle));   //rotate pinwheel
  push();
  push();
  if(mouseX>width/2){    //scale white triangles
    scale(.5)
  };
  fill(255);
  triangle(0,0,100,100,60,10);
  triangle(0,0,100,-100,10,-60);
  triangle(0,0,-100,100,-10,60);
  triangle(0,0,-100,-100,-60,-10);
  pop();
  if(mouseY>height/3){    //scale colored triangles
    scale(1.25)
  }
  fill(255,0,0);
  triangle(0,0,0,145,25,50);    //red triangle
  fill(0,255,0);
  triangle(0,0,0,-145,-25,-50);    //green triangle
  fill(0,0,255);
  triangle(0,0,145,0,50,-25);    //blue triangle
  fill(255,255,0);
  triangle(0,0,-145,0,-50,25);    //yellow triangle
  pop();
  pop();
  fill(0);
  circle(0,0,25);    //black middle circle
  fill(255);
  circle(0,0,12.5);    //small white triangle

  rect(x,y-105, 100,1);    //wind lines
  rect(x+50,y-100, 100,1);
  rect(x+25,y-95, 100,1);
  x +=hvel;
  if(x>=300){    //wind starts at left when passing x=300
      x=-300
  };
  angle+=degree;
  fill(0,100,0);
  rect(-300, 250,600,75);    //grass
}

function mousePressed() {
    if(mouseX < width / 2) {
      degree -= 5
    } else {
      degree += 5
    };
    if (mouseX<width/2 & mouseY>height/3){
      suncolor=0;
      bcolor=0;
      mooncolor=color(211,211,211);
    } else {
      suncolor=color(255,255,0);
      bcolor=color(203, 234, 246);
      mooncolor=color(203, 234, 246);
    }
}

Project-03: Dynamic Drawing

My project was pretty much inspired by this giant cat I saw outside of my window one night running around in the grass, and so I cut my old project for this one. It started with getting the cat drawn, which was the hardest part by far to keep it symmetrical and looking friendly. After the cat, I wrote the “time” variable which keeps the movement of the sun synced with the color of the background, which lightens as the sun rises. The cat’s eyes follow your mouse as it moves around as well, and as the sun comes up the grass shrinks to show the whole cat.

catto 






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

}

function draw() {
	var time = min(mouseY, 255) ////controls mouse and background
	var eyemoveX1 = constrain(mouseX, 228, 236)
    var eyemoveX2 = constrain(mouseX, 364, 372)
    var eyemoveY = constrain(mouseY, 170, 182) ////eyes follow mouse
    var grassHeight = constrain(time, 0, 255) + 120 ////grows grass
    var sunHeight = 480 - min(mouseY, 480)    ////moves sun
    



	background(time / 4, time / 2, time);
    fill(100, 100, 100)
    circle(width / 2, height / 2, 300)
    ////ears
    triangle(188, 120, 240, 84, 136, 24)
    triangle(408, 120, 356, 84, 456, 24)
    ////eyes
    fill(236)
    circle(232, 176, 40)
    circle(368, 176, 40)
    fill(50, 0, 200)
    circle(232, 176, 24)
    circle(368, 176, 24)
    fill(0)
    ellipse(eyemoveX1, eyemoveY, 12)
    ellipse(eyemoveX2, eyemoveY, 12)
    ////nose
    fill(255,182,193)
    triangle(276, 248, 324, 248, width / 2, 272)
    line(width / 2, 272, width / 2, 304)
    ////whiskers
    line(288, 280, 200, 240)
    line(288, 282, 200, 288)
    line(288, 284, 200, 336)
    line(312, 280, 400, 240)
    line(312, 282, 400, 288)
    line(312, 284, 400, 336)
    ////mouth
    line(width / 2, 304, 276, 332)
    line(width / 2, 304, 324, 332)
    ////sun
    fill(255, 247, 16)
    circle(80, sunHeight, 100)
    ////grass
    fill(11, 156, 21)
    triangle(0, 450, 50, 450, 25, grassHeight)
    triangle(50, 450, 100, 450, 75, grassHeight)
    triangle(100, 450, 150, 450, 125, grassHeight)
    triangle(150, 450, 200, 450, 175, grassHeight)
    triangle(200, 450, 250, 450, 225, grassHeight)
    triangle(250, 450, 300, 450, 275, grassHeight)
    triangle(300, 450, 350, 450, 325, grassHeight)
    triangle(350, 450, 400, 450, 375, grassHeight)
    triangle(400, 450, 450, 450, 425, grassHeight)
    triangle(450, 450, 500, 450, 475, grassHeight)
    triangle(500, 450, 550, 450, 525, grassHeight)
    triangle(550, 450, 600, 450, 575, grassHeight)



}

Project 3 – Dynamic Drawing

Assemble the astronaut to see a funky-looking space! Careful though, one wrong move and everything will float away.

sketch
/*
 * Michelle Kim
 * michell4
 * Section B
 */
 
function setup() {
    createCanvas(600, 450);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(0);
    stroke(120);
    strokeWeight(1);
    var x = max(min(mouseX, 600), 0);
    var y = max(min(mouseY, 600), 0);
    var sizeX = x * 350 / 400;
    var sizeY = y * 350 / 400;
    //purple planet
    fill(188, 123, 238);
    ellipse(10 + x * 300 / 600, 225, sizeX / 4);
    //purple planet's orange stripes
    fill(253, 106, 68);
    rect(x * 290 / 600, 200, sizeX / 9, sizeY / 30);
    rect(x * 270 / 600, 225, sizeX / 9, sizeY / 30);
    rect(x * 290 / 600, 250, sizeX / 9, sizeY / 30);
    //yellow planet and rings
    noStroke();
    fill(255, 209, 20);
    ellipse(x * 160 / 600, y * 300 / 600, sizeX / 5);
    ellipse(x * 160 / 600, y * 300 / 600, sizeX / 2, sizeY / 7);
    //yellow planet's squares
    stroke(120);
    strokeWeight(1);
    fill(92, 106, 228);
    square(x * 130 / 600, y * 330 / 600, sizeX / 40);
    square(x * 130 / 600, y * 240 / 600, sizeX / 65);
    square(x * 180 / 600, y * 340 / 600, sizeX / 45);
    square(x * 160 / 600, y * 260 / 600, sizeX / 20);
    //blue planet
    fill(123, 230, 238);
    ellipse(400 - x * 300 / 600, 300 + y * 300 / 600, sizeY * 1.2);
    //blue planet's green dots
    fill(105, 158, 109);
    ellipse(x * 150 / 600, 270 + y * 300 / 600, sizeY / 3);
    ellipse(x * 290 / 600, 250 + y * 300 / 600, sizeY / 5);
    ellipse(x * 290 / 600, 310 + y * 300 / 600, sizeY / 15);
    //astronaut
    stroke(0);
    strokeWeight(3);
    fill(255);
    //astronaut's head
    ellipse(655 -  x * 200 / 600, 20 + y * 300 / 600, sizeX / 3);
    arc(475, 125, 45, 40, radians(190), radians(250));
    arc(471, 140, 45, 40, radians(190), radians(200));
    //astronaut's left hand
    ellipse(265 + x * 200 / 600, 100 + y * 300 / 600, sizeX / 10);
    //astronaut's right hand
    ellipse(415 + x * 200 / 600, 100 + y * 300 / 600, sizeX / 10);
    //astronaut's left foot
    ellipse(310 + x * 200 / 600, 190 + y * 300 / 600, sizeX / 10);
    //astronaut's right foot
    ellipse(370 + x * 200 / 600, 190 + y * 300 / 600, sizeX / 10);
    //astronaut's body
    rect(270 + x * 200 / 600, 70 + y * 300 / 600, sizeX / 3, sizeY / 2);
    ellipse(630 -  x * 200 / 600, 100 + y * 300 / 600, sizeX / 20);
    ellipse(630 -  x * 200 / 600, 130 + y * 300 / 600, sizeX / 20);
}

Project-03: Dynamic Drawing

I was inspired by album art by the band Surfaces. I liked the way their album art had soft pastel colors and the depth it always presented. I started with the background mountains, trees, and roads first. It took me a while to make all the trees because I had to layer triangles, and the car took a lot of time to accurately have all the car parts move with respect to mouseX. If you click, the headlights thickness will increase, and the color of the sun will change. If you move mouseX, the car will move. If you move mouseY, the clouds will move, the background sky color will change, and the sun size will change.

sketch
//Annie Kim
//andrewID anniekim
//SectionB

var sunangle = 0
var suncolorR = 242
var suncolorG = 244
var suncolorB = 190
var headlighttop = 370
var headlightbottom = 395
var star1angle = 0
var star2angle = 0
var star3angle = 0
var star4angle = 0
var sundiameter = 150

function setup() {
    createCanvas(600, 450);
    background(14, 40, 91); //blue background
}

function draw() {
	//background sky - blue if mouseY is in top half, pink if in bottom half
	if (mouseY < (height * 0.50)) {
        background(15, 40, 91);

    } else if (mouseY > (height * 0.5)) {
        background(240, 210, 209);
    }
	//sun rising and moving
    push();
	translate(300, 225); //moving sun's origin to middle of screen
    rotate(radians(sunangle)); // rotating in circle clockwise
    fill(suncolorR, suncolorG, suncolorB);
    noStroke();
	circle(50, 150, sundiameter + (mouseY/3)); //sun made
	pop();
	sunangle = sunangle + 2.5; //med rotation speed
    

    //cloud#1
	fill(255); //white color
	stroke(255);
	point(mouseY - 140, 55); //points of the first cloud to connect
    point(mouseY - 185, 50);
	point(mouseY - 220, 52)
    point(mouseY - 260, 54);
	point(mouseY - 290, 55);
	point(mouseY - 138, 60);

    beginShape();
	curveVertex(mouseY - 140, 55); //connecting first cloud
	curveVertex(mouseY - 140, 55);
	curveVertex(mouseY - 185, 50);
	curveVertex(mouseY - 220, 52);
	curveVertex(mouseY - 260, 54);
	curveVertex(mouseY - 290, 55);
	curveVertex(mouseY - 138, 60);
	curveVertex(mouseY - 138, 60);
    endShape();

	//cloud#2
	point(mouseY, 91); //points of the second cloud to connect
	point(mouseY - 10, 93);
	point(mouseY -20, 98);
	point(mouseY - 60, 105);
	point(mouseY - 70, 115);
	point(mouseY + 30, 125);
	point(mouseY + 60, 125);
	point(mouseY + 170, 120);
	point(mouseY + 155, 110);
	point(mouseY + 130, 85);
	point(mouseY + 90, 90);

	beginShape();
	curveVertex(mouseY, 91); //connecting second cloud
	curveVertex(mouseY, 91);
	curveVertex(mouseY - 10, 93);
	curveVertex(mouseY -20, 98);
	curveVertex(mouseY - 60, 105);
	curveVertex(mouseY - 70, 115);
	curveVertex(mouseY + 30, 125);
	curveVertex(mouseY + 60, 125);
	curveVertex(mouseY + 170, 120);
	curveVertex(mouseY + 155, 110);
	curveVertex(mouseY + 130, 85);
	curveVertex(mouseY + 90, 90);
	curveVertex(mouseY + 90, 90);
	endShape();
	
	//mountain layer 1 (light coral color)
    fill(250, 180, 175);
    stroke(250, 180, 175);
    strokeWeight(5);
    point(0, 255);
    point(0, 385);
    point(30, 230);
    point(150, 210);
    point(195, 190);
    point(215, 200);
    point(260, 215);
    point(290, 220);
    point(310, 215);
    point(380, 175);
    point(420, 190);
    point(460, 145);
    point(510, 185);
    point(540, 165);
    point(580, 155);
    point(600, 160);
    point(600, 375);

    beginShape();
    curveVertex(0, 385);
    curveVertex(0, 385);
    curveVertex(0, 255);
    curveVertex(30, 230);
    curveVertex(150, 210);
    curveVertex(195, 190);
    curveVertex(215, 200);
    curveVertex(260, 215);
    curveVertex(290, 220);
    curveVertex(310, 215);
    curveVertex(380, 175);
    curveVertex(420, 190);
    curveVertex(460, 145);
    curveVertex(510, 185);
    curveVertex(540, 165);
    curveVertex(580, 155);
    curveVertex(600, 160);
    curveVertex(600, 375);
    curveVertex(600, 375);
    endShape();

    //mountain layer #2
    fill(230, 195, 210);
    stroke(230, 195, 210);
    point(0, 170);
    point(0, 370);
    point(10, 155);
    point(25, 145);
    point(55, 130);
    point(80, 140);
    point(105, 180);
    point(140, 200);
    point(170, 205);
    point(210, 225);
    point(250, 225);
    point(250, 370);

    beginShape();
    curveVertex(0, 370);
    curveVertex(0, 370);
    curveVertex(0, 170);
    curveVertex(10, 155);
    curveVertex(25, 145);
    curveVertex(55, 130);
    curveVertex(80, 140);
    curveVertex(105, 180);
    curveVertex(140, 200);
    curveVertex(170, 205);
    curveVertex(210, 225);
    curveVertex(250, 225);
    curveVertex(250, 370);
    curveVertex(250, 370);
    endShape();

    //mountain layer #3 (purple layer)
    fill(200, 180, 222);
    stroke(200, 180, 222);
    point(250, 390);
    point(250, 265);
    point(280, 260);
    point(300, 270);
    point(310, 280);
    point(320, 290);
    point(340, 287);
    point(350, 285);
    point(370, 270);
    point(390, 267);
    point(410, 280);
    point(430, 300);
    point(440, 298);
    point(450, 295);
    point(460, 285);
    point(490, 270);
    point(500, 260);
    point(515, 265);
    point(525, 275);
    point(535, 280);
    point(565, 276);
    point(585, 270);
    point(600, 260);

    beginShape();
    curveVertex(250, 390);
    curveVertex(250, 390);
    curveVertex(250, 265);
    curveVertex(280, 260);
    curveVertex(300, 270);
    curveVertex(310, 280);
    curveVertex(320, 290);
    curveVertex(340, 287);
    curveVertex(350, 285);
    curveVertex(370, 270);
    curveVertex(390, 267);
    curveVertex(410, 280);
    curveVertex(430, 300);
    curveVertex(440, 298);
    curveVertex(450, 295);
    curveVertex(460, 285);
    curveVertex(490, 270);
    curveVertex(500, 260);
    curveVertex(515, 265);
    curveVertex(525, 275);
    curveVertex(535, 280);
    curveVertex(565, 276);
    curveVertex(585, 270);
    curveVertex(600, 260);
    curveVertex(600, 390);
    curveVertex(600, 390);
    endShape();

    //trees layer 1 (lightest green layer)
    fill(176, 231, 228); //first tree on left
    stroke(176, 231, 228);
    triangle(0, 250, 70, 390, 0, 390); //layering triangles
    triangle(0, 200, 35, 260, 0, 260); 
    triangle(0, 230, 50, 300, 0, 300);
    triangle(0, 260, 60, 340, 0, 340);
    //second tree from the left
    triangle(75, 250, 110, 180, 145, 250);
    triangle(60, 300, 110, 220, 160, 300);
    triangle(45, 350, 110, 260, 175, 350);
    triangle(30, 390, 110, 300, 190, 390);
   //third tree from the left
    triangle(225, 195, 260, 170, 295, 195);
    triangle(222, 205, 260, 180, 298, 205);
    triangle(219, 215, 260, 190, 301, 215);
    triangle(216, 225, 260, 200, 304, 225);
    triangle(213, 235, 260, 210, 307, 235);
    triangle(210, 245, 260, 220, 310, 245);
    triangle(207, 255, 260, 230, 313, 255);
    triangle(204, 265, 260, 240, 316, 265);
    triangle(201, 275, 260, 250, 319, 275);
    triangle(198, 285, 260, 260, 322, 285);
    triangle(195, 295, 260, 270, 325, 295);
    triangle(192, 305, 260, 280, 328, 305);
    triangle(180, 315, 260, 290, 331, 315);
    triangle(177, 325, 260, 300, 334, 325);
    triangle(150, 390, 260, 260, 361, 390);
    //tree in the middle
    triangle(320, 305, 340, 200, 360, 305);
    triangle(340, 200, 320, 270, 363, 270);
    triangle(363, 300, 390, 255, 410, 300);
    triangle(358, 320, 387, 275, 415, 320);
    triangle(420, 310, 440, 270, 460, 310);
    triangle(490, 240, 480, 300, 500, 300);
    //tree on the far right
    triangle(550, 160, 560, 145, 570, 160);
    triangle(545, 170, 560, 155, 575, 170);
    triangle(540, 180, 560, 165, 580, 180);
    triangle(535, 190, 560, 175, 585, 190);
    triangle(530, 200, 560, 185, 590, 200);
    triangle(525, 210, 560, 195, 595, 210);
    triangle(520, 220, 560, 205, 600, 220);
    triangle(515, 230, 560, 215, 605, 230);
    triangle(510, 240, 560, 225, 610, 240);
    triangle(505, 250, 560, 235, 615, 250);
    triangle(500, 260, 560, 245, 620, 260);
    triangle(495, 270, 560, 255, 625, 270);
    triangle(490, 280, 560, 265, 630, 280);
    triangle(485, 290, 560, 275, 635, 290);
    triangle(480, 300, 560, 285, 640, 300);
    triangle(475, 310, 560, 295, 645, 310);
    triangle(470, 320, 560, 305, 650, 320);

    //trees layer 2 (med green layer)
    //first tree from the left
    fill(156, 208, 204);
    stroke(156, 208, 204);
    triangle(40, 200, 60, 160, 80, 200);
    triangle(35, 220, 60, 180, 85, 220);
    triangle(30, 240, 60, 200, 90, 240);
    triangle(25, 260, 60, 220, 95, 260);
    triangle(20, 280, 60, 240, 100, 280);
    triangle(15, 300, 60, 260, 105, 300);
    triangle(10, 320, 60, 280, 110, 320);
    triangle(5, 340, 60, 300, 115, 340);
    triangle(0, 360, 60, 320, 120, 360);
    triangle(-5, 380, 60, 240, 125, 380);
    triangle(-7.5, 390, 60, 250, 127.5, 390);
    //second tree from the left
    triangle(150, 320, 170, 260, 190, 320);
    triangle(145, 360, 170, 300, 195, 360);
    triangle(138, 390, 170, 330, 203, 390);
    //middle tree
    triangle(280, 245, 300, 225, 320, 245);
    triangle(270, 260, 300, 235, 330, 260);
    triangle(260, 275, 300, 245, 340, 275);
    triangle(250, 290, 300, 255, 350, 290);
    triangle(240, 305, 300, 265, 360, 305);
    triangle(230, 320, 300, 275, 370, 320);
    triangle(220, 335, 300, 285, 380, 335);
    triangle(210, 350, 300, 295, 390, 350);
    triangle(200, 365, 300, 315, 400, 365);
    triangle(190, 380, 300, 325, 410, 380);
    triangle(195, 390, 300, 330, 415, 390);
    //fourth tree from the left
    triangle(400, 320, 420, 300, 440, 320);
    triangle(395, 340, 420, 310, 445, 340);
    triangle(390, 360, 420, 320, 450, 360);
    triangle(385, 380, 420, 330, 455, 380);
    triangle(380, 390, 420, 340, 460, 390);
    //fifth tree from the left
    triangle(460, 260, 480, 240, 500, 260);
    triangle(450, 285, 480, 245, 510, 285);
    triangle(440, 310, 480, 250, 520, 310);
    triangle(430, 335, 480, 255, 530, 335);
    triangle(420, 360, 480, 260, 540, 360);
    triangle(410, 385, 480, 265, 550, 385);
    triangle(405, 390, 480, 270, 555, 390);
    //far right tree
    triangle(600, 240, 570, 280, 600, 280);
    triangle(600, 245, 550, 320, 600, 320);
    triangle(600, 250, 530, 360, 600, 360);
    triangle(600, 255, 510, 390, 600, 390);


    //trees layer 3 (darkest green layer)
    fill(131, 180, 177);
    stroke(131, 180, 177);
    //middle tree
    triangle(200, 230, 190, 260, 210, 260);
    triangle(200, 240, 185, 270, 215, 270);
    triangle(200, 250, 175, 290, 225, 290);
    triangle(200, 260, 170, 310, 230, 310);
    triangle(200, 270, 165, 330, 235, 330);
    triangle(200, 280, 160, 350, 240, 350);
    triangle(200, 290, 155, 370, 245, 370);
    triangle(200, 300, 150, 390, 250, 390);
    //first left tree
    triangle(60, 300, 90, 270, 120, 300);
    triangle(50, 320, 90, 275, 130, 320);
    triangle(40, 340, 90, 280, 140, 340);
    triangle(30, 360, 90, 285, 150, 360);
    triangle(20, 380, 90, 290, 160, 380);
    triangle(10, 390, 90, 295, 170, 390);
    //third tree from left
    triangle(370, 335, 390, 300, 410, 335);
    triangle(360, 380, 390, 305, 420, 380);
    triangle(350, 390, 390, 310, 430, 390);
    //far right tree
    triangle(515, 280, 535, 240, 555, 280);
    triangle(510, 300, 535, 245, 560, 300);
    triangle(505, 320, 535, 250, 565, 320);
    triangle(500, 340, 535, 255, 570, 340);
    triangle(495, 360, 535, 260, 575, 360);
    triangle(490, 390, 535, 265, 580, 390);

    //road
    strokeWeight(2);
    fill(144, 148, 165);
    noStroke();
    rect(0, 390, 600, 60);
    //road stripes
    stroke(242, 244, 190);
    line(0, 415, 600, 415);
    line(0, 420, 600, 420);

    //front headlights: moves with respect to mouseX so it stays connected to the car
    fill(226, 204, 128);
    stroke(226, 204, 128);
    triangle(mouseX + 100, 381, mouseX + 225, headlighttop, mouseX + 225, headlightbottom);
    
    //car that moves with respect to mouseX
    fill(239, 184, 145);
    stroke(239, 184, 145);
    rect(mouseX, 340, 100, 53); //layering shapes to build car shape
    triangle(mouseX, 340, mouseX - 3.5, 393, mouseX, 393); 
    rect(mouseX + 100, 370, 15, 23);
    triangle(mouseX + 100, 340, mouseX + 115, 370, mouseX + 100, 370);

    //white strip on top of the car that moves with respect to mouseX
    stroke(255);
    fill(255);
    quad(mouseX, 340, mouseX + 5, 335, mouseX + 95, 335, mouseX + 100, 340);

    //windows that move with respect to mouseX
    stroke(170);
    fill(170);
    rect(mouseX + 5, 346, 30, 10);
    rect(mouseX + 43, 346, 26, 10);
    quad(mouseX + 76, 346, mouseX + 97, 346, mouseX + 102, 356, mouseX + 76, 356);

    //door marks that move with respect to mouseX
    stroke(200, 175, 145);
    line(mouseX + 39, 343, mouseX + 39, 393);
    line(mouseX + 72.5, 343, mouseX + 72.5, 393);
    stroke(255);
    line(mouseX + 65, 372, mouseX + 70, 372); //door handles
    line(mouseX + 75.5, 372, mouseX + 80.5, 372); //door handles

    //wheels that move with respect to mouseX
    fill(100);
    stroke(100);
    circle(mouseX + 15, 393, 25);
    circle(mouseX + 95, 393, 25);
    //wheel covers
    fill(200);
    stroke(200);
    circle(mouseX + 15, 393, 11);
    circle(mouseX + 95, 393, 11);
    
    //front wheels that is near the headlights, move with respect to mouseX
    fill(100);
    stroke(100);
    point(mouseX + 116, 368);
    point(mouseX + 121, 370);
    point(mouseX + 121, 393);
    point(mouseX + 116, 393);

    beginShape();
    curveVertex(mouseX + 116, 368);
    curveVertex(mouseX + 116, 368);
    curveVertex(mouseX + 121, 370);
    curveVertex(mouseX + 121, 393);
    curveVertex(mouseX + 116, 393);
    curveVertex(mouseX + 116, 393);
    endShape();

    //back bumper that moves with respect to mouseX
    fill(200); 
    stroke(200);
    rect(mouseX - 5, 385, 6, 3);

}


    function mouseClicked() {
    suncolorR = suncolorR + 6; //everytime you click, the color of sun gets darker red/orange
    suncolorG = suncolorG - 9; //everytime you click, the color of sun gets darker red/orange
    suncolorB = suncolorB - 9; //everytime you click, the color of sun gets darker red/orange
    headlighttop = headlighttop - 2.5 //everytime you click, the headlight thickness should appear to increase
    headlightbottom = headlightbottom + 2.5 //everytime you click, the headlight thickness should appear to increase
    }

Project 3: Dynamic Drawing

dynamic drawing cb
var size = 100;
var diam = 50;
var dir = 1;
var speed = 2;

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

function draw() {
    //color-changing background and stroke
    background(10, 10, mouseX/2);
    stroke(255-mouseX/2, 255-mouseY/2, 255-mouseX/2);
    
    //center of canvas
    var x = width/2;
    var y = height/2;

    //constrain mouse position on canvas
    mouseX = constrain(mouseX, 0, width);
    mouseY = constrain(mouseY, 0, height);

    //inner flower circles rotate depending on mouseX
    strokeWeight(1.5);
    fill(255-mouseX, 255-mouseY/2, 255-mouseX/2, 50);
    for (var i = 0; i < 5; i += 1) {
        push();
        translate(x, y);
        rotate((mouseX / 400) + radians(360 * i / 5));
        ellipse(50, 0, 100, 100);
        pop();
    }

    //outer flower circles rotate depending on mouseX
    strokeWeight(1);
    fill(255-mouseX, 255-mouseY/2, 255-mouseX/2, 30);
    for (var i = 0; i < 8; i += 1) {
        push();
        translate(x, y);
        rotate((-mouseX / 400) + radians(360 * i / 8));
        ellipse(50, 0, 250, 250);
        pop();
    }

    //outermost circles rotate and change size depending on mouseY
    strokeWeight(1);
    noFill();
    var m = max(min(mouseY, 600), 0);
    var size = m * 180 / 600 + 30;
    for (var o = 0; o < 50; o += 1) {
        push();
        translate(x, y);
        rotate((mouseY / 500) + radians(360 * o / 50));
        ellipse(300, 0, size, size);
        pop();
    }

    //center expanding contracting circle
    strokeWeight(3);
    noFill();
    ellipse(x, y, diam, diam);
    diam += dir * speed;
    if (diam > 400) {
        dir = -dir;
        diam = 400;
    } else if (diam < 0) {
        dir = -dir;
        diam = 0;
    }

    //converging lines that follow the mouse position
    //converging lines right
    strokeWeight(1);
    line(450, 0, mouseX, mouseY);
    line(450, 50, mouseX, mouseY);
    line(450, 100, mouseX, mouseY);
    line(450, 150, mouseX, mouseY);
    line(450, 200, mouseX, mouseY);
    line(450, 250, mouseX, mouseY);
    line(450, 300, mouseX, mouseY);
    line(450, 350, mouseX, mouseY);
    line(450, 400, mouseX, mouseY);
    line(450, 450, mouseX, mouseY);
    line(450, 500, mouseX, mouseY);
    line(450, 550, mouseX, mouseY);
    line(450, 600, mouseX, mouseY);

    //converging lines left
    strokeWeight(1);
    line(0, 0, mouseX, mouseY);
    line(0, 50, mouseX, mouseY);
    line(0, 100, mouseX, mouseY);
    line(0, 150, mouseX, mouseY);
    line(0, 200, mouseX, mouseY);
    line(0, 250, mouseX, mouseY);
    line(0, 300, mouseX, mouseY);
    line(0, 350, mouseX, mouseY);
    line(0, 400, mouseX, mouseY);
    line(0, 450, mouseX, mouseY);
    line(0, 500, mouseX, mouseY);
    line(0, 550, mouseX, mouseY);
    line(0, 600, mouseX, mouseY);

}

For this project, I was inspired by guided breathing/meditation animations and wanted to use motion/simple shapes to create something soothing and mesmerizing. I used circles to create a rotating flower and practiced using transformations, expanding/contracting, push/pop, and mouse interactions. Below are some inspiration images:

fireworks animation on SmaPhoArt website
meditation gif

Project – 03- Dynamic Drawing

dynamic drawing
function setup() {
    createCanvas(600, 450);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
var s;	//rect scale
var x1;
var y1;
var x2;
var y2;
var x3;
var y3;
var x4;
var y4;
var x5;
var y5;
var w = 30;	//rect
var r;	//rotation


function draw() {
	background(255);
	//change background color based on four quadrants
	if(mouseX < (width/2) & mouseY < (height/2)){
		w = mouseX;
		background(245, 209, 213);
		
		

	} else if(mouseX > (width/2) & mouseY < (height/2)){
		w = mouseX - (mouseX/2);
		background(225, 164, 186);
		
		
	} else if (mouseX < (width/2) & mouseY > (height/2)){
		w = mouseX;
		background(224, 186, 241);
		
		
	} else if(mouseX > (width/2) & mouseY > (height/2)){
		w = mouseX - (mouseX/2);
		background(251, 186, 207);
		
		
	}
	//heart
	if (200<=mouseX & mouseX<=400 && mouseY>100 && mouseY<300){
		x1 = mouseX + 80;
		x2 = mouseX + 130;
		x3 = mouseX + 10;
		x4 = mouseX + 110;
		x5 = mouseX + 60;
		y1 = mouseY + 130;
		y2 = mouseY - 10;
		y3 = mouseY + 10;
		y4 = mouseY + 60;
		y5 = mouseY + 90;
		s = 0.77;
		r = 0;
	} else{
		x1 = 90;
		y1 = 90;
		x2 = 130;
		y2 = 300;
		x3 = 333;
		y3 = 120;
		x4 = 500;
		y4 = 260;
		x5 = 400;
		y5 = 390;
		r += 0.5;
	}

	fill(251, 250, 186);
	circle(x1, y1, 60);	//light yellow
	fill(205, 189, 173);
	circle(x2, y2, 99);	//gray
	fill(179, 246, 195);
	circle(x3, y3, 140);	//green
	fill(244, 247, 6);
	circle(x4, y4, 90);	//yellow
	fill(161, 128, 196);
	circle(x5, y5, 80);	//purple
	noStroke();
	fill(164, 225, 209);
	scale(s);
	push();
	rotate(radians(r));
	rectMode(CENTER);
	rect(mouseX, mouseY, w, 60);
	pop();

	

}

I wanted to make something cute and warm so my circles are mimicking a heart within a certain range of the canvas and the rectangle is supposed to serve as a bandage for the heart. But I got really confused trying to do the rotation and spinning during the process, need to be more used to java.

Project-03: Dynamic Drawing

My project for this week is loosely inspired by a kaleidoscope. I wanted to make an intricate design but due to my limited knowledge of p5.js, I decided to stick with just squares and ellipses. By piling them over and over and varying them by sizes, shapes, rotation speed, and colors based on the mouse position, I was able to achieve a fun, colorful kaleidoscope design.

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

var x = 0;
var y = 0;
var angle = 0;

function draw() { 
	background(0);
	noStroke();
	push();
	translate(300,225);
	rotate(radians(angle));
	rectMode(CENTER);
	var mX = max(min(mouseX, 600), 0); //constraint of canvas width
	var size = mX * (5/6); //sizes vary based on mouseX
	var mY = max(min(mouseY, 450), 0); //constraint of canvas height
	var sizeY = mY * (5/6); //sizes vary based on mouseY

	//square shapes based on mouseX
	fill(mouseY*255/height, mouseX*255/width, max(mouseX, mouseY)*255/500); //color of object depends on mouse position
	rect(x,y, 3*size/2, 3*size/2);	//biggest square
	fill(mouseX*255/width, mouseY*255/height, max(mouseX, mouseY)*255/500); 
	rect(x,y, size, size);	//big square
	fill(mouseY*255/height, max(mouseX, mouseY)*255/500, mouseX*255/width); 
	rect(x,y, 3*size/4, 3*size/4);  //medium square
	fill(max(mouseX, mouseY)*255/500, mouseX*255/width, mouseY*255/height);
	rect(x,y, 5*size/12, 5*size/12); //small square
	fill(max(mouseX, mouseY)*255/500, mouseY*255/height, mouseX*255/width);
	rect(x,y, size/5, size/5); //smallest square

	//square shapes based on mouseY (same sizes, colors)
	fill(mouseY*255/height, mouseX*255/width, max(mouseX, mouseY)*255/500); 
	rect(x,y, 3*sizeY/2, 3*sizeY/2);
	fill(mouseX*255/width, mouseY*255/height, max(mouseX, mouseY)*255/500); 
	rect(x,y, sizeY, sizeY);	
	fill(mouseY*255/height, max(mouseX, mouseY)*255/500, mouseX*255/width); 
	rect(x,y, 3*sizeY/4, 3*sizeY/4); 
	fill(max(mouseX, mouseY)*255/500, mouseX*255/width, mouseY*255/height);
	rect(x,y, 5*sizeY/12, 5*sizeY/12);
	fill(max(mouseX, mouseY)*255/500, mouseY*255/height, mouseX*255/width);
	rect(x,y, sizeY/5, sizeY/5);

	//ellipse shapes based on mouseX
	noFill();
	strokeWeight(4);
	stroke(mouseX*255/width,min(mouseX, mouseY)*255/500, mouseY*255/height);
	ellipse(x,y, 5*size/2, 2*size);
	ellipse(x,y, 2*size, 5*size/2); //biggest ellipses
	stroke(mouseY*255/height, mouseX*255/width, min(mouseX, mouseY)*255/500);
	ellipse(x,y, 3*size/2, size);
	ellipse(x,y, size, 3*size/2); //big ellipses
	stroke(mouseX*255/width, mouseY*255/height, min(mouseX, mouseY)*255/500);
	ellipse(x,y, size, 2*size/3);
	ellipse(x,y, 2*size/3, size); //medium ellipses
	stroke(mouseY*255/height, max(mouseX, mouseY)*255/500, mouseX*255/width);
	ellipse(x,y, 3*size/5, 3*size/4);
	ellipse(x,y, 3*size/4, 3*size/5); //smaller ellipses
	stroke(max(mouseX, mouseY)*255/500, mouseY*255/height, mouseX*255/width);
	ellipse(x,y, size/3, 2*size/9);
	ellipse(x,y, 2*size/9, size/3); //smallest ellipses

	//ellipse shapes based on mouseY (same size, colors)
	noFill();
	strokeWeight(4);
	stroke(mouseX*255/width,min(mouseX, mouseY)*255/500, mouseY*255/height);
	ellipse(x,y, 5*sizeY/2, 2*sizeY);
	ellipse(x,y, 2*sizeY, 5*sizeY/2);
	stroke(mouseY*255/height, mouseX*255/width, min(mouseX, mouseY)*255/500);
	ellipse(x,y, 3*sizeY/2, sizeY);
	ellipse(x,y, sizeY, 3*sizeY/2);
	stroke(mouseX*255/width, mouseY*255/height, min(mouseX, mouseY)*255/500);
	ellipse(x,y, sizeY, 2*sizeY/3);
	ellipse(x,y, 2*sizeY/3, sizeY);
	stroke(mouseY*255/height, max(mouseX, mouseY)*255/500, mouseX*255/width);
	ellipse(x,y, 3*sizeY/5, 3*sizeY/4);
	ellipse(x,y, 3*sizeY/4, 3*sizeY/5);
	stroke(max(mouseX, mouseY)*255/500, mouseY*255/height, mouseX*255/width);
	ellipse(x,y, sizeY/3, 2*sizeY/9);
	ellipse(x,y, 2*sizeY/9, sizeY/3);

	pop();
	angle += max(mouseX, mouseY)/ 5; //rotation depends on mouse position

}

Dynamic Drawing

sketch In this program, I decided to play with parameters for the panda and background. The most challenging and interesting part was getting the moon and sun to move in a curved path instead of just across the screen. Along with that I changed background colour, rotated the stars and added clouds. For the panda the expression changes when the bamboo shoot comes by and the eyes change shape based on the y position of the mouse.
//Aadya Bhartia 
//Section A

var t = 0;
var angle = 0;
function setup() {
    createCanvas(600, 480);
    //background(220);
    //text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
	background(120, 200, 220);
	//sun to moon 
    var x1 = 250*cos(PI - t) + 300; // using a curve to map the moon and sun to look like it is rising and setting 
    var y1 = 480 - 420*sin(t);
    //clouds 
    fill(255);
    ellipse(70, 40, 30, 30, 30);
    ellipse(40, 50, 40);
    ellipse(60, 70, 45);
    ellipse(55, 65, 25);
    ellipse(30, 75, 45);
    ellipse(90, 75, 45);
    ellipse(95, 49, 25);
    push();
    translate(380, 30);
    scale(2.0);
    ellipse(70, 40, 30, 30, 30);
    ellipse(40, 50, 40);
    ellipse(60, 70, 45);
    ellipse(55, 65, 25);
    ellipse(30, 75, 45);
    ellipse(90, 75, 45);
    ellipse(95, 49, 25);
    pop();
    push();
    translate(300, 300);
    scale(0.75);
    ellipse(70, 40, 30, 30, 30);
    ellipse(40, 50, 40);
    ellipse(60, 70, 45);
    ellipse(55, 65, 25);
    ellipse(30, 75, 45);
    ellipse(90, 75, 45);
    ellipse(95, 49, 25);
    pop();
    fill(250, 250, 0);
    ellipse(x1, y1, 120);
    if(mouseX>=width/2){ // night time moon and stars 
        background(72, 91, 115);
        ellipse(x1, y1, 120);
    	var moonC = map(x1, 0, height, 80, 0);
    	fill(72, 91, 115);
    	noStroke();
    	ellipse(x1 - moonC - 30, y1, 120);
        //stars 
        push();
        fill(255);
        translate(20, 40);
        rotate(radians(mouseX));
        ellipse(0, 0, 5, 20);
        rotate(radians(mouseX+5));
        ellipse(0, 0, 20, 5);
        pop();
        push();
        fill(255);
        translate(320, 150);
        scale(1.5);
        rotate(radians(mouseX));
        ellipse(0, 0, 5, 20);
        rotate(radians(mouseX+5));
        ellipse(0, 0, 20, 5);
        pop();
        push();
        fill(255);
        translate(400, 350);
        rotate(radians(mouseX));
        ellipse(0, 0, 5, 20);
        rotate(radians(mouseX+5));
        ellipse(0, 0, 20, 5);
        pop();
        push();
        fill(255);
        translate(500, 240);
        scale(0.75);
        rotate(radians(mouseX));
        ellipse(0, 0, 5, 20);
        rotate(radians(mouseX+5));
        ellipse(0, 0, 20, 5);
        pop();
        push();
        fill(255);
        translate(560, 70);
        scale(1.20);
        rotate(radians(mouseX));
        ellipse(0, 0, 5, 20);
        rotate(radians(mouseX+5));
        ellipse(0, 0, 20, 5);
        pop();
        push();
        fill(255);
        translate(150, 80);
        scale(0.7);
        rotate(radians(mouseX));
        ellipse(0, 0, 5, 20);
        rotate(radians(mouseX+5));
        ellipse(0, 0, 20, 5);
        pop();
    }
    t = mouseX*(PI/600);
    //panda figure 
    noStroke();
    fill(0);//ears 
    ellipse(70, 200, 80,80);
    ellipse(230, 200, 80,80);
    ellipse(150, 400, 280);//body
    fill(255);
    ellipse(150, 400, 230, 260);//body
    fill(0);
    ellipse(150, 340, 0.3*mouseX, 130); // patch on body chnage with mouseX
    fill(255);
    ellipse(150, 240, 190);//face
    //eye rotating with size depending on mouseY
    fill(0);
    push();
    translate(110, 223);
    rotate(radians(angle));
    ellipse(5, 5, 5+mouseY/22 , 10+mouseY/14);
    pop();
    push();
    translate(190 , 223);
    rotate(radians(angle));
    ellipse(5, 5, 5+mouseY/22 , 10+mouseY/14);
    pop();
    angle += 5;
    //face smile when mouse comes with bamboo shoot
    if(mouseX>30 & mouseX<=200 && mouseY>=180&& mouseY<=310){
        fill(242, 120, 120);
        ellipse(110, 250, 20);
        ellipse(190, 250, 20);
        fill(245, 80, 70);
        arc(150, 260, 50, 50, 0, PI);
    }
    else{ // general smile and nose 
        fill(0);
        beginShape();
        curveVertex(150, 180);
        curveVertex(130, 270);
        curveVertex(170, 270);
        curveVertex(130, 190);
        endShape();
        noFill();
        stroke(0);
        strokeWeight(3);
        arc(138, 280, 25, 20, 0, PI);
        arc(161, 280, 25, 20, 0, PI);
    }
    //bamboo for mouse
    noStroke();
    fill(20, 220, 100);
    rect(mouseX, mouseY, 10, 50);
    fill(20, 250, 100);
    rect(mouseX, mouseY+55, 10, 20);
    fill(10, 220, 20);
    push();
    translate(mouseX + 25, mouseY + 10);
    rotate(radians(-20));
    ellipse(0, 0, 15, 5);
    ellipse(0, 15, 15, 5);
    pop();
}