Category: Project-03-Dynamic-Drawing

Project 03 – Dynamic Drawing

sketch
/* 
 * Amy Lee 
 * amyl2
 * Section B 
 */ 

var x = 0; 
var y = 0; 

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

function draw() {
	noStroke(); 
	background((constrain(mouseY,200,210)),(constrain(mouseY,220,240)),constrain(mouseY,190,210)); 

	// - CLOUDS - //

	//EllipseX variable is to expand or contract ellipse width 
	var ellipseWidth = constrain(mouseY,100,150); 

	//Variables for cloud on left side 
	var positionY = constrain(mouseY,100,150);
	var positionY2 = constrain(mouseY,50,100);
	var positionX = constrain(mouseX,80,100); 

	//Cloud on left side moves side to side 
	fill(constrain(mouseY,230,255));
	ellipse(positionX,positionY,ellipseWidth,100); 
	ellipse(positionX+50,positionY2,100,100); 
	ellipse(positionX+100,positionY,100,100); 
	ellipse(positionX+150,positionY2,100,100); 
	ellipse(positionX+200,positionY,ellipseWidth,100); 

	//Variables for cloud on right side 
	var positionY3 = constrain(mouseY,300,350);
	var positionY4 = constrain(mouseY,250,300);
	var positionX2 = constrain(mouseX,50,120); 

	//Cloud on right side moves side to side 
	fill(constrain(mouseX,200,230)); 
	ellipse(positionX2+200,positionY3,ellipseWidth,100); 
	ellipse(positionX2+250,positionY4,100,100); 
	ellipse(positionX2+300,positionY3,100,100); 
	ellipse(positionX2+350,positionY4,100,100); 
	ellipse(positionX2+400,positionY3,ellipseWidth,100); 

	//Yellow circles as stars in the background
	push(); 
	rotate(radians(mouseX*2)); 
	fill(252,255,128); 
	ellipse(100,500,20,20);
	ellipse(200,100,20,20); 
	ellipse(300,500,20,20);
	ellipse(400,100,20,20); 
	ellipse(500,500,20,20); 
	pop(); 

	push(); 
	rotate(radians(mouseY*2)); 
	fill(252,255,128); 
	ellipse(100,500,20,20);
	ellipse(200,100,20,20); 
	ellipse(300,500,20,20);
	ellipse(400,100,20,20); 
	ellipse(500,500,20,20); 
	pop(); 

	//Mountains
	fill(148,171,146); 
	triangle(270,490+mouseY,330,330+mouseY,390,490+mouseY); 
	triangle(330,490+mouseY,430,330+mouseY,520,490+mouseY); 
	triangle(0,490+mouseY,200,250+mouseY,400,490+mouseY); 
	triangle(400,490+mouseY,500,300+mouseY,600,490+mouseY);  

	//Flower in the center 
	push();  
	translate(300,220);
	fill(random(195,250),random(155,170),random(25,37)); 
	for (let r = 0; r < 10; r++){
	ellipse(0,0,20,80); 
	rotate(PI/5);
	}
	pop(); 

	//sun 
	push(); 
	translate(300,220);
	fill(random(195,250),random(155,170),random(25,37)); 
	ellipse(0,90,10,mouseY); 
	rotate(radians(40)); 
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	pop(); 


}

I was inspired by nature and weather. I tried to depict the sun, mountains, stars, and clouds in my piece.

Project 03 – Interactive Flower

flowergrowDownload
var h = 10
var angle = 0
var color = 0
var clouda = -100
var cloudb = clouda + 100

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

function draw() {
	if (color == 0) {
		background(255, 128, 188);
	} else {
		background(0, 154, 255);
	}
	if (mouseIsPressed) {
        fill(255);
        ellipse(clouda, 100, 150, 75);
        ellipse(cloudb, 250, 110, 90);
        clouda = clouda + 2
        cloudb = cloudb + 2
        if (clouda >= 450) {
            clouda = -100
            cloudb = clouda + 100
        }
	}
	strokeWeight(h);
	stroke(0, 255, 0);
	line(225, 600, 225, max(mouseY, 200)); //stem gets taller as mouseY gets lower
	if (mouseY < 500) {
		fill(0, 255, 0);
		ellipseMode(CORNER);
		ellipse(225, max(mouseY, 300), min(600 - mouseY, 200), constrain(600 - 2*mouseY, 50, 100));
		//leaf grows as the stem grows
	}
	fill(255, 0, 119);
	noStroke();
	if (mouseY >= 200) {
		ellipseMode(CENTER);
	    ellipse(225, max(mouseY, 200), max(min(600 - mouseY, 200), 0));
	    //flower bud grows as mouseY gets lower
	} else {
		push();
		translate(225, 200);
		rotate(radians(angle));
		fill(255, 0, 119);
		beginShape();
		curveVertex(0, 0);
		curveVertex(0, 0);
		curveVertex(-100, -30);
		curveVertex(-30, -100);
		curveVertex(0, 0);
		curveVertex(0, 0);
		endShape();
		beginShape();
		curveVertex(0, 0);
		curveVertex(0, 0);
		curveVertex(30, -100);
		curveVertex(100, -30);
		curveVertex(0, 0);
		curveVertex(0, 0);
		endShape();
		beginShape();
		curveVertex(0, 0);
		curveVertex(0, 0);
		curveVertex(100, 30);
		curveVertex(30, 100);
		curveVertex(0, 0);
		curveVertex(0, 0);
		endShape();
		beginShape();
		curveVertex(0, 0);
		curveVertex(0, 0);
		curveVertex(-30, 100);
		curveVertex(-100, 30);
		curveVertex(0, 0);
		curveVertex(0, 0);
		endShape();
		pop();
        angle = angle + 5
        //spinning flower petals are pretty!
	}
}

function mousePressed(){
    if (dist(mouseX, mouseY, 225, 200) <= 100) {
    	color = 1
    } else {
    	color = 0
    }
}

Project-03-Dynamic-Drawing

dynamicdrawing 

function setup() {
    createCanvas(600, 450,);
    background(220);
}
function draw() {
    var x = mouseX
    var y = mouseY
    var g = 0
    var b = 0
    //background
    background(0)

    push();
    translate(mouseX-750,0)
    stroke(255,)
    strokeWeight(2)
    scale(3,1)
    line(0,20,50,20)
    line(120,40,130,40)
    line(60,50,130,50)
    line(300,80,350,80)
    line(300,90,380,90)
    line(100,100,170,100)
    line(230,130,280,130)
    line(200,160,210,160)
    line(40,170,90,170)
    line(400,200,420,200)
    line(340,220,370,220)
    line(220,230,310,230)
    line(420,270,440,270)
    line(80,280,180,280)
    line(160,290,150,290)
    line(370,320,420,320)
    line(10,330,90,330)
    line(140,350,170,350)
    line(40,370,60,370)
    line(320,390,330,390)
    line(80,400,120,400)
    line(210,430,260,430)
    line(400,440,450,440)
    pop();
    // spinning arcs
    strokeWeight(1+y/50);
    noFill();
    //transformations
    translate(300,225);
    rotate(radians(x/2));
    cony = max(y,.5);
    scale(cony/200);
    
    noStroke();
    fill(0);
    circle(0,0,270);
    g = g + x/3
    b = b + x/8
    //arcs (smallest to largest)
    noFill();
    stroke(255,0+g,0+b);
      arc(0,0,140,140,-PI/4,4*PI/5);
    rotate(radians(x/2));
      arc(0,0,180,180,PI/2,4*PI/3);
    rotate(radians(x/5));
      arc(0,0,200,200,PI,9*PI/4);
    rotate(radians(x/7));
      arc(0,0,270,270,11*PI/6,5*PI/6);
}

I incorporated two animated ideas into one which creates a different dynamic on motion, one moving horizontally and the other moving within itself while changing size position and color.

project-03

sketchDownload
var angle=0;
var boxWidth = 80;
var boxX = 30;
function setup() {
    createCanvas(600, 450);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(205, 255, 0);
	if (mouseY>height/2){
		background(139, 171, 14);
	}
    //changing color of background
	noStroke();
	 fill(105, 93, 34);
    if (boxX>width){
    	boxX=-boxWidth;
    }
    boxX=boxX+5;
    rect(boxX, height/2, boxWidth, 40);
    //moving rect
    fill(229, 163, 220);
	circle(mouseX, mouseY, 100);
	//pink circle
    fill(255, 213, 0);
    circle(600-mouseX, mouseY*4/5, mouseX*2/3);
    //yellow circle
    fill(149, 120, 229);
    push();
    translate(100, 100);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0, dist(mouseX, mouseY, width/2, height/2), dist(mouseX, mouseY, width/2, height/2));
    pop();
    angle += 3;
    //rotating square
    fill(243, 142, 220);
    rect(width/2, mouseY, mouseX*3/8, 90);
    //pink rect
}

PROJECT-03 (dynamic drawing)

SEAN SKETCH 03
// SEAN CHEN
// 15-104 A

var size = 125; // overall size of graphic
var flip = 1; // val to control rotation direction
var angle = 1; 
var angle2 = 1;
var angle3 = 1; // individual speed
var diff = 0 // shift from center circle

function setup() {
    smooth();
    createCanvas(400, 400);
    background(255,219,88);
}

function spin(speed, vari) { // white orbiting circles
    push();
    noStroke();
    rotate(radians(angle));
    circle(0, size+diff, size*5/6);
    circle(size+diff, 0, size*5/6);
    circle(-size-diff, 0, size*5/6);
    circle(0, -size-diff, size*5/6); // each big stationary orbit circle
    circle(size*2/3+vari/5, size*2/3+vari/5, size*5/12*vari/200);
    circle(size*2/3+vari/5, -(size*2/3)-vari/5, size*5/12*vari/200); // mouse further from center smaller size
    circle(-(size*2/3)-vari/5, size*2/3+vari/5, size*5/12*vari/200); // mouse further from center distance larger
    circle(-(size*2/3)-vari/5, -(size*2/3)-vari/5, size*5/12*vari/200); // each small moving circles
    angle += speed*flip;
    pop();
}

function spin2(speed, vari) { // same as 'spin' but cyan
    push();
    noStroke();
    fill(0,255,255);
    rotate(radians(angle2));
    circle(0, size+diff, size*5/6);
    circle(size+diff, 0, size*5/6);
    circle(-size-diff, 0, size*5/6);
    circle(0, -size-diff, size*5/6);
    circle(size*2/3+vari/5, size*2/3+vari/5, size*5/12*vari/200);
    circle(size*2/3+vari/5, -(size*2/3)-vari/5, size*5/12*vari/200);
    circle(-(size*2/3)-vari/5, size*2/3+vari/5, size*5/12*vari/200);
    circle(-(size*2/3)-vari/5, -(size*2/3)-vari/5, size*5/12*vari/200);
    angle2 += speed*flip;
    pop();
}

function spin3(speed, vari) { // same as 'spin' but magenta
    push();
    noStroke();
    fill(255,0,255);
    rotate(radians(angle3));
    circle(0, size+diff, size*5/6);
    circle(size+diff, 0, size*5/6);
    circle(-size-diff, 0, size*5/6);
    circle(0, -size-diff, size*5/6);
    circle(size*2/3+vari/5, size*2/3+vari/5, size*5/12*vari/200);
    circle(size*2/3+vari/5, -(size*2/3)-vari/5, size*5/12*vari/200);
    circle(-(size*2/3)-vari/5, size*2/3+vari/5, size*5/12*vari/200);
    circle(-(size*2/3)-vari/5, -(size*2/3)-vari/5, size*5/12*vari/200);
    angle3 += speed*flip;
    pop();
}

function draw() {
    var vari = dist(width/2, height/2, mouseX, mouseY) // distance from center to mouse
    background(0);
    translate(width/2, height/2); // new origin at center
    noStroke();
    circle(0, 0, size); // center circle
    spin3(1*vari/150, vari); // mouse closer to center slower, vice versa
    spin2(1.5*vari/150, vari); // for cyan
    spin(2*vari/150, vari); // for white
    if (mouseIsPressed) {
        flip = -1; // reverse rotation if pressed
    } else {
        flip = 1; // clockwise otherwise
    }
}

Project 3: Dynamic Drawing

For project, I experimented with using simple geometric shapes and symmetry to created a balanced and orderly movement. I also played with the different types of color contrasts such as simultaneous contrast and complementary contrast.

sketch
/*
Bon Bhakdibhumi
bbhakdib
Section d
*/
var r = 37;
var g = 51;
var b = 70;
var rTriangle = 225;
var gTriangle = 210;
var bTriangle = 232;
var rCircle = 171;
var gCircle = 237;
var bCircle = 255;
var rRect = 101; 
var gRect = 249; 
var bRect = 183;
var rmidRect = 253; 
var gmidRect = 173; 
var bmidRect = 113;
var rOutertri = 255;
var gOutertri = 255;
var bOutertri = 255;
function setup() {
    createCanvas(450, 600);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(r, g, b);
  if (mouseX > width/2) {
     r = 211;
     g = 185;
     b = 159;
  }else {
    r = 37;
    g = 51;
    b = 70;
  }
    translate(width/2, height/2);
    rectMode(CENTER); 
  // inner triangles rotate to the left with mouseX increases
  fill( rTriangle, gTriangle, bTriangle);
  if (mouseX > width/2) {
     rTriangle = 129;
     gTriangle = 13;
     bTriangle = 98;
  }else {
    rTriangle = 225;
    gTriangle = 210;
    bTriangle = 232;
  }
  noStroke();
    for (var i = 0; i < 6; i += 1) {
        push();
        scale(mouseY / 500);
        rotate((-mouseX / 400) + radians(360 * i / 6));
        triangle(50, 0, 25, 25, 75, 25);
        pop();
    }
  // mid squares expand when rotating to the left
  var m = max(min(mouseX, 400), 0);
  var sSize = -m * 40 / 400 + 60;
   fill( rRect, gRect, bRect, 230);
  if (mouseX > width/2) {
    rRect = 49
    gRect = 84
    bRect = 55
  }else {
     rRect = 101;
     gRect = 249;
     bRect = 183;
  }
  noStroke();
    for (var s = 0; s < 8; s += 1) {
      push();
      scale(mouseY / 400);
      rotate( mouseX/350 + radians(360 * s / 8));
      rect (130, 0, sSize, sSize);
      pop();
    }
  // outer circles expand when rotating to the right
  var m = max(min(mouseX, 400), 0);
  var size = m * 50 / 400 + 30;
  noStroke();
  fill(rCircle, gCircle, bCircle, 230);
  if (mouseX > width/2) {
    rCircle = 109;
    gCircle = 152;
    bCircle = 186;
  }else {
    rCircle = 171;
    gCircle = 237;
    bCircle = 255;
  }
  for (var c = 0; c < 10; c += 1) {
    push();
    scale(mouseY / 400);
    rotate((-mouseX / 300) + radians(360 * c / 10));
    ellipse(200, 0, size, size);
    pop();
  }
  // outermost triangles rotate to the right with mouseX increases
  fill( rOutertri, gOutertri, bOutertri);
  if (mouseX > width/2) {
     rOutertri = 199;
     gOutertri = 82;
     bOutertri = 156;
  }else {
    rOutertri = 225;
    gOutertri = 225;
    bOutertri = 225;
  }
  noStroke();
    for (var i = 0; i < 10; i += 1) {
        push();
        scale(mouseY / 350);
        rotate((mouseX / 250) + radians(360 * i / 10));
        triangle(275, 0, 225, 50, 325, 50);
        pop();
    }
 // middle square rotates to the right when mouseX increase
  var m = max(min(mouseX, 400), 0);
  var squareSize = -m * 50 / 400 + 10;
  scale(mouseY / 600);
  rotate(radians(mouseX / 5));
  fill(rmidRect, gmidRect, bmidRect);
  if (mouseX > width/2) {
    rmidRect = 107;
    gmidRect = 94;
    bmidRect = 98;
  }else {
    rmidRect = 253;
    gmidRect = 173;
    bmidRect = 113;
  }
  noStroke();
    rect(0, 0, squareSize, squareSize);

 }

Project – 03 – dynamic drawing: le fleur

Inspired by the fun and colorful designs of brand : GOLF le FLEUR.

le fleurDownload
function setup() {
    createCanvas(600, 450);
    background(220);

}

function draw() {
    background(0);
    var m = max(min(mouseX, 600), 0);
    var Xsize = m * 550 / 600;
    var mY = max(0, min(mouseY, 450));
    var Ysize = mY * 400 / 450 - 200;
    noStroke();
    translate(300, 225); //center of canvas
    push();
    if(Xsize > 100){
        background(93, 240,235) // teal
    }else{
    	background(255) //white
    }
    fill(255);
    circle(0, 0, -Xsize);
    push();
    fill(242, 156, 56);
    rotate(radians(45));
    translate(200, 0)
    ellipse(0, 0, Xsize, Ysize); //right angled petal
    translate(-400, 0);
    ellipse(0, 0, Xsize, Ysize); //left angled petal
    translate(200, 100);
    ellipse(0, 0, Ysize , Xsize); //bottom angled petal
    translate(0, -200);
    ellipse(0, 0, Ysize, Xsize); //top angled petal
    pop()
    translate(200, 0); //right
    if (mouseY > height/2){
    	 fill(245, 89, 174); // pink
    } else{
    	fill(240, 186, 93); //orange
    }
    ellipse(0, 0, Xsize, Ysize - 200); //right petal
    translate(-400, 0);
    ellipse(0, 0, Xsize, Ysize - 200); //left petal
    translate(200, 100);
    ellipse(0, 0, Ysize - 200 , Xsize); //bottom petal
    translate(0, -200);
    ellipse(0, 0, Ysize - 200, Xsize); //top petal
    pop();
    fill(136, 218, 97); //green
    Xsize = 600 - Xsize
    circle(0, 0, Xsize); //stem
    if(Xsize > 500){
    	fill(255);
    	textSize(40)
    	text("le fleur", -50, 0);

    }
    

}

Project-03-Dynamic-Drawing

My concept is creating a very elaborated and aesthetic pattern out of one kind of simple geometric shapes.

sketch
var angle=0;
var r;
function setup() {
	createCanvas(600, 450);
	 frameRate(12);
}
function draw() {
	//switch color according to mouseX position
	if(mouseX<300){
    background(100,165,172);
	noFill();
	stroke(255,196,234);
	}
	else{
	background(255,196,234);
	noFill();
	stroke(100,165,172);
	}

	
	//set the new origin so that ellipses rotate around the center
    translate(300,235);
    push();
    //rotate the first set of ellipses 30 degrees
    rotate(radians(30));
    ellipseMode(CENTER);

    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	//60
	rotate(radians(30));
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	//90
	rotate(radians(30));
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	//120
	rotate(radians(30));
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	//150
	rotate(radians(30));
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	//180
	rotate(radians(30));
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	//210
	rotate(radians(30));
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	rotate(radians(30));
    //240
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	rotate(radians(30));
    //270
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	//300
	rotate(radians(30));
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	//330
	rotate(radians(30));
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	//360
	rotate(radians(30));
    ellipseMode(CENTER);
    ellipse(0,100,min(100,Math.abs(mouseX-300)),min(200,Math.abs(mouseY-225)));
	ellipse(0,100,min(105,Math.abs(mouseX-255)),min(199,Math.abs(mouseY-224)));
	ellipse(0,100,min(110,Math.abs(mouseX-250)),min(198,Math.abs(mouseY-223)));
	ellipse(0,100,min(115,Math.abs(mouseX-195)),min(197,Math.abs(mouseY-222)));
	ellipse(0,100,min(120,Math.abs(mouseX-190)),min(196,Math.abs(mouseY-221)));
	
	pop();

	


	
	

	
	
	}

My Dynamic Factory

This code simulates a dynamic factory environment, with variable elements including functionality of the factory, speed of the factory, the background factories, and the time of day. The idea for gears came from another class of mine in which we used squares to create interesting compositions. One of mine was created by overlaying two squares to create a “gear” so I knew I wanted to visualize it in motion for this project. I coded the gears to that they appear to work together, and appear to create an output when doing so. The rest stemmed from this “factory” theme.

painting
var angle = 0;		//gear turn
var t = 34;		//gear translate
var eSize = 10;		//ball sizes, center gear
var ballY = 409;		//front ball Y position
var recX = 7*t; 		//top piston X translation
var RecX = 7*t;			//bottom piston X tranlation 
var recY=10.5*t;		//pistons Y translation
var dir = 1; 		//top piston direction
var direction = 1;		//bottom piston direction
var speed = 2;			//piston speed
var recSize =  18;		//piston length
var BallY = 125;		//middle ball Y position
var windowSize = 25;	//window size
var Bally = 300;	//furthest ball start
var bright = 0;


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

function draw() {
	background (210,146, 6);		//orange brown
	push();
	if(mouseIsPressed){
		if(mouseButton == RIGHT){		//if the right button is pressed
			background(210-mouseY/2, 146 -mouseY/2, 6- mouseY/2);		//gets darker with higher Y
				if(mouseY>height/2){		//if the mouse Y is greater half the height
			fill(255);		//stars
				ellipse (100,200,1,1);
				ellipse (200,100,5,5);
				ellipse (300,100,3,3);
				ellipse (300,200,5,5);
				ellipse (300,300,3,3);
				ellipse (150,50,5,5);
				ellipse (420,120,2,2);
				ellipse (200,100,5,5);
				ellipse (150,150,5,5);
				ellipse (180,220,2,2);
				ellipse (300,200,1.5,1.5);
				ellipse (300,250,1,1);
				ellipse (450,100,2,2);
				ellipse (100,289,5,5);
				ellipse(50,70,2.5,2.5);
				ellipse (190,120,2.4,2.4);
				ellipse (100,289,5,5);
				ellipse(50,70,2.5,2.5);
				ellipse (200,60,1.2,1.2);
				ellipse(90,90,2,2);
				ellipse (230,200,2.4,2.4);
				ellipse (460,60,5,5);
				ellipse(440,100,2.7,2.7);
				ellipse (250,250,2.4,2.4);
				ellipse (260,200,3,3);
				ellipse(240,220,2.1,2.1);
				ellipse(300,110,1.7,1.7);
				ellipse (280,190,2.3,2.3);
				ellipse (290,140,3.1,3.1);
				ellipse(215,210,2,2);
				ellipse (400,90,2.3,2.3);
				ellipse (410,120,1.5,1.5);
				ellipse(420,50,2,2);
			}
			if(mouseY<height/2){ 		//if mouse Y is lower than the height
				fill(255,255,117);
				ellipse(0,mouseY,60,60);		//sun
			}
		}
	}
pop();
push();
				fill(0,0,0,200);
rectMode(CORNER);
	var m = max(min(mouseX, 250), 0);
	var size = m * 350.0 / 400.0;
				fill(0,0,0,height-mouseY);
	rect(10,height/2-recSize*1.5,75,500);		//left chimney
	rect(0,height/2,size,500);		//left building
size = 350-size;
				fill(0,0,0,mouseY+50);
	rect(110+m*190/400,height/2-recSize*2,size,500);		//back building
		var ballWidth = max(min(mouseY, 100), 0);
	rect(110+m*190/400,height/2-recSize*4,ballWidth,37);		//back chimney
	
	if(BallY<0){		//if ball goes past 0
		BallY=height/2-recSize*4;		//reappear at height of back chimney
}

	BallY = BallY-1;	//move up by 1 point 
		ellipse(110+m*190/400+ballWidth/2,BallY,ballWidth,-ballWidth);		//middle ball

	if(Bally<0){		//if ball goes past 0
		Bally=250;		//reset ball height to 250
}

	Bally = Bally-2	;	//move up by 2 points
			fill(0,0,0,mouseX);		//opacity changes with mouseX
			if(mouseY>200){			//if mouse Y is greater than half the height
				fill(210,146, 6);		//fill changes to background (disappears)
			}

		ellipse(380,Bally,height/4 - ballWidth,height/4 - ballWidth);	//right ball
			fill(0,0,0);


rectMode(CENTER);		//rectangles oriented by center point

			fill(150);
rect(recX,recY+5,3.2*recSize,1/2*recSize);		//top piston still
rect(RecX,recY+25,3.5*recSize,1/2*recSize);		//bottom piston still

if(mouseX<1.5*t & mouseY<1.5*t){		//if mouse is in the top left corner
	if(recX>width-220 || recX

Project 03 – Dynamic Drawing

sketch
/*
 * Eric Zhao
 * ezhao2@andrew.cmu.edu
 *
 * Dynamic Drawing: This program creates an array of squares
 * and circles on the canvas. The circles light up and grow
 * in size the closer the mouse is to them, while the squares
 * rotate based on the mouse's position relative to the center
 * of the canvas. Number of circles and squares per row can be
 * changed and the program is scalable with canvas sizes.
 */


var circleDia = 0;
var mouseDist = 0;
var cursorX = 0; 
var cursorY = 0; 
var distanceMult = 0; //circle diameter multiplier
var circleCount = 15; //circle and square count
var tanRotation = 0; //square rotation state
function setup() {
    createCanvas(400, 400);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    colorMode(HSB, 360, 100, 100, 100)
    rectMode(CENTER);
}

function draw() {
    push();
    noStroke();
    circleDia = width/circleCount;
    cursorX = constrain(mouseX, 0, width);
    cursorY = constrain(mouseY, 0, height);
    //constrains mouseX and mouseY to canvas size
    background(0);
    //the following are two for loops that draw a grid of circles with
    //[circleCount] number of circles in each row and column
    for(let y = circleDia/2; y <= 1 + height-circleDia/2; y+= circleDia){
        for(let x = circleDia/2; x <= 1 + width-circleDia/2; x+= circleDia){
            mouseDist = constrain(dist(x, y, cursorX, cursorY), 1, width);
            distanceMult = mouseDist/circleCount;
            //used later to modify circle size based on mouse position
            tanRotation = atan2(cursorY - height/2, cursorX - width/2);
            //stores rotation of mouse before pushing rectangle
            push();
            translate(x, y);
            rotate(tanRotation);
            fill(15,25);
            rect(0, 0, 50, 50);
            pop();
            //draws rotated rectangles in same positions as the circle grid
            if(dist(x, y, width/2, height/2) < height/2){
            //constrains array of circles within a larger circular area
                fill(180+degrees(atan2(cursorY - height/2, cursorX - width/2)),
                65, 512/distanceMult); 
                /*adjusts HSB values based on proximity of mouse to circle and 
                coordinates of mouse relative to center of canvas*/
                circle(x, y, circleDia-distanceMult);
            }    
        }
    }
    pop();
}

This project started with the idea of having an array of circles that grew and shrank based on how close they were to the mouse. After I made that basic program work, I started experimenting with having the mouse position change the colors of the array and using other shapes as a filter on top of the circles.