Category: Project-03-Dynamic-Drawing

Project 03 – Dynamic Drawing

For this project, I was inspired by abstract artist, Kandinsky. I took some of the components in composition 8, and made it more interactive.

sketchDownload
//Se A Kim
//Section D

function setup() {
    createCanvas(600, 450);
    background(236, 233, 230);

}

function draw() {
background(236, 233, 230); 

var bigCircle = constrain(pmouseX, 50, 200);
var midCircle = constrain(pmouseX, 50, 170);
var smallCircle = constrain(pmouseX, 50, 80);
var miniCircle = constrain(pmouseY, 0, 50);

var linex = constrain(pmouseX, 200, 500);
var liney = constrain(pmouseY, 100, 500);

//var leftTri = constrain(pmouseY, 100, 300);

noStroke();

//circle layers
fill(217, 167, 164, mouseY/2);
ellipse(100, 100, bigCircle);
fill(39, 26, 34);
ellipse(100, 100, midCircle);
fill(120, 65, 116, mouseY);
ellipse(100, 100, smallCircle);


frameRate(10);
stroke(3);
//double lines following mouse
line(mouseX, mouseY, pmouseX, pmouseY);
line(mouseX - 10, mouseY - 10, pmouseX -10, pmouseY - 10);

//lines

line(150, 300, linex, 300);
line(500, 430, 500, liney);
line(550, 430, linex, liney);
line(500, 10, linex + 40, liney + 40);
line(600, 0, linex - 80, liney - 80);


//arcs
stroke(1);
fill(255, 255, 255);
arc(200, 300, 80, 80, PI, 0);
arc(280, 300, 80, 80, PI, 0);
arc(360, 300, 80, 80, PI, 0);
arc(440, 300, 80, 80, PI, 0);

//large triangle
fill(244, 241, 242, mouseY/2);
triangle(300, 800 - pmouseY, 400, 300 - pmouseY, 500, 800 - pmouseY);


noStroke();
//multiple circles
fill(299, 197, 94, mouseY);
ellipse(100, 350, miniCircle);
fill(26, 104, 155, mouseY);
ellipse(230, 400, miniCircle);
ellipse(500, 300, miniCircle);
ellipse(450, 150, miniCircle);


}

Project 03 – Dynamic Drawing

sketch
var squares = [];

function setup() {
    createCanvas(600, 450);
    for (var x = -280; x < 1000; x += 40) {
    	for (var y = -320; y < 1000; y += 40) {
    		squares.push(new Rect(x, y, 20, 20));
    	}
    }

}

function draw() {
    translate(300, 225);
	background(56, 63, 81);
	for (var y = 0; y < squares.length; y++) {
		squares[y].show();
	}
}


var Rect = class {
    constructor(pX, pY, w, h) {
        this.pX = pX;
        this.pY = pY;
        this.w = w;
        this.h = h;
    }

    show() {
        rectMode(CENTER);
        noStroke();
        var scale = Math.pow(mouseX - this.pX - 300, 2) + Math.pow(mouseY - this.pY - 225, 2);
        scale = min(40*225/scale, 1);
        fill(200*scale, 120/scale, 150*scale);
        rotate(scale/100);
        rect(this.pX, this.pY, this.w * scale, this.h * scale);
    }
}

Project 3: Dynamic Drawing

sketch.sl4Download
// Sarah Luongo
// Section A

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

function draw() {
// To change background according to positon of mouse
var bkgrR = min(mouseY/4, 45);
var bkgrB = min(mouseX/4, 45);
var bkgrG = (bkgrR-bkgrB);

// To constrain motion of stars within canvas
var motionX = map(mouseX, 0, width, 0, 15);
var motionY = map(mouseY, 0, height, 0, 15);

// To change colors of stars	
var r = max(mouseX/1.8, 150);
var g = max(mouseY/1.8, 150);
var b = max((mouseY/1.8)-(mouseX/1.8), 150);
	
    // Fourth value gives background transparency - will make all stars have "following circles" that fade as the stars move (easier to see when you move the mouse really fast
    background(bkgrR, bkgrG, bkgrB, 45);
    
    // To get rid of cursor
    noCursor();

    // This circle is the new cursor shape
    fill(255, 255, 51); // yellow
    circle(mouseX, mouseY, 3);

    // Stars
    fill(r, g, b);
    circle(motionX, motionY, 8 * mouseX/560);
    circle(motionX + 320, motionY + 420, 6 * (mouseX/560 + mouseY/410));
    fill(r - 47, g - 27, b - 143);
    circle(motionX + 340, motionY + 19, 8 * (mouseX/560 + mouseY/410));
    circle(motionX + 233, motionY + 385, 9 * (mouseX/560 + mouseY/410));
    circle(motionX + 19, motionY + 347, 8 * (mouseX/560 + mouseY/410));
    fill(r + 84, g + 119, b - 78);
    circle(motionX + 40, motionY + 238, 10 * (mouseX/560 + mouseY/410));
    fill(r, g, b);
    circle(motionX + 405, motionY + 356, 7 * (mouseX/560 + mouseY/410));
    circle(motionX + 446, motionY + 395, 10 * (mouseX/560 + mouseY/410));
    circle(motionX + 23, motionY + 273, 8 * (mouseX/560 + mouseY/410));
    fill(r + 210 , g - 140, b + 37);
    circle(motionX + 172, motionY + 143, 6 * (mouseX/560 + mouseY/410));
    circle(motionX + 204, motionY + 297, 8 * (mouseX/560 + mouseY/410));
    circle(motionX + 198, motionY + 189, 10 * (mouseX/560 + mouseY/410));
    fill(r + 32, g + 130, b + 23);
    circle(motionX + 285, motionY + 302, 9 * (mouseX/560 + mouseY/410));
    circle(motionX + 534, motionY + 67, 10 * (mouseX/560 + mouseY/410));
    circle(motionX + 67, motionY + 45, 7 * (mouseX/560 + mouseY/410));
    fill(r, g, b);
    circle(motionX + 423, motionY + 227, 10 * (mouseX/560 + mouseY/410));
    circle(motionX + 367, motionY + 329, 7 * (mouseX/560 + mouseY/410));
    circle(motionX + 257, motionY + 348, 10 * (mouseX/560 + mouseY/410));
    fill(r - 190, g + 66, b - 15);
    circle(motionX + 73, motionY + 143, 9 * (mouseX/560 + mouseY/410));
    circle(motionX + 143, motionY + 324, 10 * (mouseX/560 + mouseY/410));
    circle(motionX + 300, motionY + 225, 8 * (mouseX/560 + mouseY/410));
    circle(motionX + 558, motionY + 420, 6 * (mouseX/560 + mouseY/410));
    circle(motionX + 340, motionY + 445, 9 * (mouseX/560 + mouseY/410));
    fill(r, g, b);
    circle(motionX + 510, motionY + 267, 10 * (mouseX/560 + mouseY/410));
    circle(motionX + 304, motionY + 130, 8 * (mouseX/560 + mouseY/410));
    circle(motionX + 229, motionY + 38, 7 * (mouseX/560 + mouseY/410));
    circle(motionX + 512, motionY + 106, 8 * (mouseX/560 + mouseY/410));
    fill(r - 190, g + 66, b - 15);
    circle(motionX + 429, motionY + 145, 9 * (mouseX/560 + mouseY/410));
    circle(motionX + 400, motionY + 73, 10 * (mouseX/560 + mouseY/410));
    circle(motionX + 172, motionY + 430, 6 * (mouseX/560 + mouseY/410));
    circle(motionX + 84, motionY + 443, 9 * (mouseX/560 + mouseY/410));
    circle(motionX + 117, motionY + 233, 10 * (mouseX/560 + mouseY/410));
    fill(r, g, b);
    circle(motionX + 545, motionY + 357, 8 * (mouseX/560 + mouseY/410));
    circle(motionX + 584, motionY + 167, 10 * (mouseX/560 + mouseY/410));
    circle(motionX + 448, motionY + 332, 7 * (mouseX/560 + mouseY/410));
    circle(motionX + 515, motionY + 207, 6 * (mouseX/560 + mouseY/410));
}

I’m very fascinated by stars and one of my favorite albums to listen to is an astronomy album by Sleeping At Last. I was inspired by this album, so I wanted to make this project kind of like space, but a little more fun. I wasn’t quite sure how to make a star shape, so I decided to makes circles as stars. My sketch is below:

Project 02 – Dynamic Drawing

I tried to visualize the sound waves when listening to music in a minimalistic way.  

sketch
//Stefanie Suk
//15104 Section D

var x = 180; //starting position of rectangle 
var y = 200; //y position of rectangle

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

function draw() {
	background(0);

	//white rectangle box
	noFill()
	stroke(255);
	strokeWeight(2);
	rect(150, 160, 310, 125);
	
	// Rectangles from left to right
	noStroke();
	fill(235, 234, 232); //color of rectangle
	rect(x, map(mouseX, 0, width, y, y+8), 10, 50); //position of rectangle
	fill(172, 176, 191);
	rect(x+20, map(mouseX, 0, width, y, y-2), 10, 40);
	fill(178, 208, 235);
	rect(x+20*2, map(mouseX, 0, width, y, y+5), 10, 30);
	fill(195, 217, 240);
	rect(x+20*3, map(mouseX, 0, width, y, y-5), 10, 45);
	fill(214, 231, 243);
	rect(x+20*4, map(mouseX, 0, width, y, y-3), 10, 15);
	fill(226, 238, 249);
	rect(x+20*5, map(mouseX, 0, width, y, y+3), 10, 50);
	fill(214, 231, 243);
	rect(x+20*6, map(mouseX, 0, width, y, y+7), 10, 35);
	fill(195, 217, 240);
	rect(x+20*7, map(mouseX, 0, width, y, y-7), 10, 60);
	fill(178, 208, 235);
	rect(x+20*8, map(mouseX,0,width,y,y-2), 10, 50);
	fill(172, 176, 191);
	rect(x+20*9, map(mouseX, 0, width, y, y+2), 10, 30);
	fill(235, 234, 232);
	rect(x+20*10, map(mouseX, 0, width, y, y-6), 10, 35);
	fill(172, 176, 191);
	rect(x+20*11, map(mouseX, 0, width, y, y-4), 10, 10);
	fill(178, 208, 235);
	rect(x+20*12, map(mouseX, 0, width, y, y+5), 10, 20);


	// Top circles, left to right
    let d = map(mouseY, 0, width, 15, 30); //scale mouseY value
    fill(249, map(mouseX, 0, height, 240, 200), 225); //color of circle, change
    ellipse(width/7, height/7, d, d); //position and size of circle
    fill(254, map(mouseX, 0, height, 230, 240), 223);
    ellipse(width/7*2, height/4, d, d);
    fill(map(mouseX, 0, height, 230, 190), 186, 192);
    ellipse(width/7*3, height/7, d, d);
    fill(map(mouseX, 0, height, 190, 230), 132, 143);
    ellipse(width/7*4, height/4, d, d);
    fill(179, 203, map(mouseX, 0, height, 130, 180));
    ellipse(width/7*5, height/7, d, d);
    fill(203, 220, map(mouseX, 0, height, 180, 230));
    ellipse(width/7*6, height/4, d, d);

    // Bottom circles, left to right
    fill(203, 220, map(mouseX, 0, height, 180, 230));
    ellipse(width/7, height/8*6, d, d);
    fill(179, 203, map(mouseX, 0, height, 130, 180));
    ellipse(width/7*2, height/7*6, d, d);
    fill(map(mouseX, 0, height, 190, 230), 132, 143);
    ellipse(width/7*3, height/8*6, d, d);
    fill(map(mouseX, 0, height, 230, 190), 186, 192);
    ellipse(width/7*4, height/7*6, d, d);
    fill(254, map(mouseX, 0, height, 230, 240), 223);
    ellipse(width/7*5, height/8*6, d, d);
    fill(249, map(mouseX, 0, height, 240, 200), 225);
    ellipse(width/7*6, height/7*6, d, d);
}

Project 3: Dynamic Drawing

Contrary to popular belief, fish bowls are too small for the average betta or goldfish and will likely either stunt their growth or kill them due to the lack of space. I thought it would be cool to bring some awareness about this overlooked fact through this project. The fish will either live and emit bubbles or flip over and die depending on the mouse’s position on canvas.

fishbowl
var bgColor;
var bowlColor;
var bodyPurple;
var bodyGray;
var bodyAngle;
var eyeAngle;
var pupilAngle;
var finOrange;
var finGray;
var floatY;

var angle = 0;
var offWeed = 1;
var wiggleWeed = 1;
var bubbles = [];

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

    bgColor = color(255, 247, 219);
    bowlGreen = color(110, 245, 234, 120);
    bowlGray = color(190, 212, 209, 200);
    weedGreen = color(78, 186, 159);
    weedGray = color(114, 130, 126);
    sandOrange = color(245, 147, 132);
    sandGray = color(173, 160, 158);
    bodyPurple = color(155, 159, 242);
    bodyGray = color(113, 113, 117);
    finOrange = color(255, 115, 87);
    finGray = color(156, 144, 142);
    bubblesBlue = color(92, 209, 203, 80);
    invisibleColor = color(92, 209, 203, 0);
    castleColor = color(255, 181, 181);
}

function bubble(x,y) {
    let bubblesColor = map(mouseX, 0, width, 0, 1);
    var lerpBubbles = lerpColor(bubblesBlue, invisibleColor, bubblesColor);
    fill(lerpBubbles);
    ellipse(x, y, 15);
  }

function draw() {
    background(bgColor);
    noStroke();

    //seaweed
    let weed = map(mouseX, 0, width, 0, 1);
    var weedColor = lerpColor(weedGreen, weedGray, weed);
    fill(weedColor);

    beginShape();
    vertex(y + 500, x);
    for(var x = 0; x < width; x++){
        var angle = offWeed + x * 0.03;
        var y = map(sin(angle), -wiggleWeed, wiggleWeed, 170, 200);
    vertex(y + 90, x + 100);
  }
    vertex(275, 100);
    endShape();
    offWeed += 0.01;
  
    beginShape();
    vertex(newY + 600, x - 200);
    for(var x = 0; x < width; x++){
        var angle2 = offWeed + x * 0.02;
        var newY = map(sin(angle2), -wiggleWeed, wiggleWeed, 250, 230);
    vertex(newY - 10, x + 160);
  }
    vertex(newY - 5, x);
    endShape();
    offWeed += 0.03;
  
    beginShape();
    vertex(freshY, x);
    for(var x = 0; x < width; x++){
        var angle3 = offWeed + x * 0.04;
        var freshY = map(sin(angle3), -wiggleWeed, wiggleWeed, 175, 160);
    vertex(freshY + 40, x + 140);
  }
    vertex(freshY + 30, x);
    endShape();
    offWeed += 0.01;

    //cover bottom half of seaweed
    fill(bgColor);
    rect(50, 320, 400, 200);

    //castle
    fill(castleColor);
    rect(355, 250, 55, 70);
    rect(355, 240, 10, 10);
    rect(380, 240, 10, 10);
    rect(400, 240, 10, 10);

    //castle window
    fill(161, 93, 93);
    rect(370, 260, 10, 20, 10);

    //rocks
    fill(97, 100, 201);
    ellipse(350, 310, 40, 40);
    fill(247, 104, 185);
    ellipse(230, 310, 40, 30);
    fill(171, 92, 191);
    ellipse(320, 310, 40, 30);
    fill(119, 224, 172);
    ellipse(255, 310, 35, 25);
    fill(247, 104, 185);
    ellipse(390, 310, 25, 25);

    //fishbowl
    let fishbowl = map(mouseX, 0, width, 0, 1);
    var bowlColor = lerpColor(bowlGreen, bowlGray, fishbowl);
    fill(bowlColor);
    ellipse(width/2, height/2, 300, 300);

    //bubbles
    bubble(240, floatY + 20);
    bubble(245, floatY + 10);
    bubble(250, floatY + 40);
        
    if (mouseX <= width/2.2) {
        floatY = floatY - 0.4
    } else {
        floatY = 150;
    }

    //fin colors
    let finColor = map(mouseX, 0, width, 0, 1);
    var fishFins = lerpColor(finOrange, finGray, finColor);
    fill(fishFins);

    push();
    //rectMode(CENTER);
    translate(width/2, height/2);
    let finAngle = atan2(mouseY - height/2, mouseX - width/2);
    rotate(finAngle);
    //bottom fin
    arc(0, -25, 40, 40, PI + HALF_PI, TWO_PI);

    //tail
    arc(-40, 0, 75, 75, HALF_PI + QUARTER_PI, PI + QUARTER_PI);
    pop();

    //top fin
    push();
    translate(width/2, height/2);
    let topfinAngle = atan2(mouseY - height/2, mouseX - width/2);
    rotate(topfinAngle);
    shearX(-35);
    rect(-10, 25, 50, 25, 70, 5, 70, 10);
    pop();

    //fish body
    let bodyColor = map(mouseX, 0, width, 0, 1);
    var fishBody = lerpColor(bodyPurple, bodyGray, bodyColor);
    fill(fishBody);
    push();
    rectMode(CENTER);
    translate(width/2, height/2);
    let bodyAngle = atan2(mouseY - height/2, mouseX - width/2);
    rotate(bodyAngle);
    rect(0, 0, 100, 55, 30);

    //eye
    fill(255);
    ellipse(25, 5, 20, 20);

    //pupil
    var stopMouseX = constrain(mouseX, 0, 600); //constrain mouseX to canvas
    let dilate = map(stopMouseX, 0, width, 10, 18);
    fill(0);
    ellipse(25, 5, dilate, dilate);

    //mouth
    fill(fishBody);
    rect(50, 0, 10, 5, 20);
    rect(50, -5, 10, 5, 20);
    pop();


    //sandy bottom
    push();
    noStroke();
    let sandColor = map(mouseX, 0, width, 0, 1);
    var coarse = lerpColor(sandOrange, sandGray, sandColor);
    fill(coarse);
    arc(300, 310, 225, 120, TWO_PI, PI);
    pop();

    //bubbles floating
    for (let i = 0; i < bubbles.length; i++) {
        bubbles[i].move();
        bubbles[i].show();
        bubbles[i].update();
    }

    //top of the fishbowl
    fill(bgColor);
    rect(50, 0, 400, 120);
}

Project-03-Dynamic Drawing

cyhan-03-project
function setup() {
    createCanvas(600,450);
    rectMode(CENTER);
}

function draw() {
  background(mouseX,mouseY,244);
  noStroke();

  //creating rectangles
  var w = 200;
  var h = 200;
  if(mouseX < width/2){
    w = (width/2 - mouseX) + 50;
  }else {
    h = (width/2 - mouseX) + 50
  }
  push();
  translate(300,225);
  rotate(radians(mouseX));
  fill(255,mouseY,mouseX);
  ellipse(50,100,100);
  fill(255,mouseX,mouseY);
  ellipse(100,100,100);
  fill(mouseY,255,mouseX);
  ellipse(150,100,100);
  fill(214,mouseY,mouseX);
  ellipse(200,100,100);
  fill(mouseY,mouseX,255);
  ellipse(250,100,100);
  fill(0,mouseY,mouseX);
  ellipse(300,100,100);
  pop();
  
  fill(255,mouseX, mouseY);
  rect(width/4, height/2,w,h);
  rect(width/2, height/4,w,h);
  rect(width/1.3, height/2,w,h);
  rect(width/2, height/1.3,w,h);
  stroke(1);
  fill(255);
  ellipse(width/4, height/2,w/2,h);
  ellipse(width/2, height/4,w/2,h);
  ellipse(width/1.3,height/2,w/2,h);
  ellipse(width/2, height/1.3,w/2,h);
  fill(0);
  ellipse(width/4, height/2,w/5,h);
  ellipse(width/2, height/4,w/5,h);
  ellipse(width/1.3,height/2,w/5,h);
  ellipse(width/2, height/1.3,w/5,h);
  
noStroke();  
fill(255,0,0);
ellipse(mouseX,mouseY,40);
ellipse(mouseX + 30,mouseY,40);
triangle(mouseX-20,mouseY,mouseX+50,mouseY,mouseX+15,mouseY + 60);
  
  
}

For this project, I wanted to create four blinking eyes that changed according to the location of the mouse. I also added multiple color changing circles that rotated around the center of the canvas as well as a heart cursor that allowed the viewer to keep track of their mouse.

Project-3-Dynamic Drawing

I chose to show the clock and time with the day/night change, along with the alarm bell going on and off.

sketch 

//Jae Son, section C

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

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

function draw() {
  if(mouseX<320){ //when mouse is on the left side
  background(151,215,240); //it is during the day - light blue background
  noStroke();
  fill(255,150,60);
  ellipse(mouseX,80,100,100);  //orange sun is up
  } else { //when mouse is on the right side
  background(31,41,84); //it is during the night - dark blue background
  noStroke();
  fill(255,227,90);
  ellipse(mouseX,80,100,100); //yellow moon is up
  }
  fill(46,178,187);
  noStroke();
  quad(230,360,250,360,270,300,250,300); //clock leg
  quad(380,322,400,322,410,360,390,360); //clock leg
  push();
  translate(250,130); 
  rotate(PI*3/4); 
  rect(0,0,25,35); //bridge between the clock body and the bell
  translate(-70,-110);
  rotate(PI/2);
  rect(-5,25,25,35); //bridge between the clock body and the bell
  pop();
  arc(220,125,mouseY/3.5,mouseY/3.5,PI*3/4,PI*7/4); //alarm is on when mouse is on the bottom - bell is bigger
  arc(415,125,mouseY/3.5,mouseY/3.5,PI*5/4,PI/4) //alarm is on when mouse is on the bottom - bell is bigger
  ellipse(320,225,250,250); //clock body frame
  fill(255);
  ellipse(320,225,220,220); //clock body 
  fill(46,178,187);
  ellipse(320,225,20,20); //clock center
  push();
  fill(46,178,187);
  translate(318,225);
  rotate(radians(30)+mouseX/100); //clock hour hand rotates clockwise 
  rect(0,0,5,80);
  pop();

}

Project-03 Dynamic Drawing

sketch-dynamic – square

	// Huijun Shen  session D
    // huijuns@andrew.cmu.edu

var r = 0;
var g = 0;
var b = 0;
var angle = 0 ;
var w = 0;
var dir = 1;
var clickNumber = 0;

 
function setup() {
    createCanvas(600,450);
    frameRate(15);
    background(100);
    
}
 
function draw() {
    
    fill(r,g,b);
    stroke(0);
    push();

    // make the rectangle rotate around mouse
    translate(mouseX,mouseY);
    rotate(radians(angle));
    rect(mouseX/3, mouseY/3, min(mouseX/2,mouseY/2), min(mouseX/2,mouseY/2));

    //change the color and size of the second rectangle, and make it rotate anticlockwise
    fill(r,g+30,b+w);
    rect(mouseX,mouseY,w,w);
    rotate(radians(-angle));

    pop();
    angle = angle + 10;

if ( clickNumber == 15){
    noloop();
}



   
}


function mousePressed() {

     clickNumber = clickNumber + 1;

    // change red everytime mouse pressed and make it repeatable

    if (r >= 255){
        r = 0;
    } else {
        r = r + 50;
    }
    
   
   // controle the size of the second rectangle and make it change between 0- height/2
   
    if (w >= height/2){
        dir = -1 ;
    } 

    if ( w < 0){ 
        dir = 1 ;
    }

    w = w + dir*20;
    }

In this painting, you can control the circulation center by the position of your mouse and the size of the second square by your click number. You can click 15 times then the code will stop running and you will have your own painting.Enjoy.

Project-03-Dynamic Drawing

I chose to do the view from my window in NYC with the sun setting since I love to watch the sun set when I am home.

graanak-03-project
//Graana Khan
// Section B

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

function draw() {

	if(mouseX < width/2){
		background(207, 236, 246)
	} else if(mouseX >= width/2){
		background(10, 27, 51)
	}
	noStroke();

//sun
    fill(254, 229, 150);
    circle(303, 47 + (0.5 * mouseX), 77);

//moving clouds
    fill(255);
    rect(75 + (mouseX - 50), 47, 83, 36, 15);
    rect(318 + (mouseX - 50), 112, 37, 15, 10);
    rect(453 + (mouseX - 50), 57, 55, 32, 15);
    rect(490 + (mouseX - 50), 47, 84, 28, 15);


//buildings
    if(mouseX < width/2){
    	fill(197, 198, 200);
    } else if(mouseX >= width/2){
    	fill(0);
    }
    
    rect(0, 171, 17, 111);
    rect(3, 232, 50, 50);
    rect(25, 202, 50, 80);
    rect(38, 96, 22, 184);
    rect(49, 220, 115, 63);
    //building 1 with lights
    rect(94, 137, 24, 146);
    rect(155, 166, 58, 117);
    //empire state building with lights 
    rect(213, 105, 35, 177);
    triangle(213, 107, 231, 75, 248, 107);
    push();
    strokeWeight(2);
    if(mouseX < width/2){
    	stroke(197, 198, 200)
    } else if(mouseX >= width/2){
    	stroke(0)
    }
    line(231, 76, 231, 57);
    pop();
    rect(240, 257, 80, 25);
    rect(262, 196, 41, 87);
    rect(315, 153, 22, 130);
    rect(326, 188, 43, 94);
    //united nations building with lights
    rect(369, 157, 76, 126);
    //chrysler building
    rect(389, 121, 26, 40);
    triangle(389, 121, 402, 102, 415, 121);
    rect(414, 262, 98, 21);
    rect(456, 178, 28, 98);
    rect(508, 188, 36, 94);
    //building 2 with lights 
    beginShape();
    vertex(480, 280);
    vertex(480, 280);
    vertex(480, 121);
    vertex(513, 160);
    vertex(513, 280);
    vertex(513, 280);
    endShape();
    rect(538, 222, 44, 61);
    rect(565, 121, 40, 162);
    rect(240, 215, 75, 67);
    rect(444, 217, 22, 63);

//building lights
    if(mouseX < width/2){
    	fill(255, 255, 255, 150)
    } else if(mouseX >= width/2){
    	fill(253, 229, 150, 150)
    }
    // United Nations lights
    rect(373, 161, 69, 4);
    rect(373, 169, 69, 4);
    rect(373, 177, 69, 4);
    rect(373, 185, 69, 4);
    rect(373, 193, 69, 4);
    rect(373, 201, 69, 4);
    rect(373, 209, 69, 4);
    rect(373, 217, 69, 4);
    rect(373, 225, 69, 4);
    rect(373, 233, 69, 4);
    rect(373, 241, 69, 4);
    rect(373, 249, 69, 4);
    rect(373, 257, 69, 4);
    //empire state lights
    square(229, 85, 3);
    square(224, 91, 3);
    square(230, 91, 3);
    square(235, 91, 3);
    square(221, 96, 3);
    square(227, 96, 3);
    square(233, 96, 3);
    square(239, 96, 3);
    square(221, 101, 3);
    square(227, 101, 3);
    square(233, 101, 3);
    square(239, 101, 3);
    square(215, 107, 3);
    square(221, 107, 3);
    square(227, 107, 3);
    square(233, 107, 3);
    square(239, 107, 3);
    square(245, 107, 3);
    square(215, 112, 3);
    square(221, 112, 3);
    square(227, 112, 3);
    square(233, 112, 3);
    square(239, 112, 3);
    square(245, 112, 3);
    square(215, 118, 3);
    square(221, 118, 3);
    square(227, 118, 3);
    square(233, 118, 3);
    square(239, 118, 3);
    square(245, 118, 3);
    square(215, 123, 3);
    square(221, 123, 3);
    square(227, 123, 3);
    square(233, 123, 3);
    square(239, 123, 3);
    square(245, 123, 3);
    square(215, 128, 3);
    square(221, 128, 3);
    square(227, 128, 3);
    square(233, 128, 3);
    square(239, 128, 3);
    square(245, 128, 3);
    square(215, 133, 3);
    square(221, 133, 3);
    square(227, 133, 3);
    square(233, 133, 3);
    square(239, 133, 3);
    square(245, 133, 3);
    square(215, 138, 3);
    square(221, 138, 3);
    square(227, 138, 3);
    square(233, 138, 3);
    square(239, 138, 3);
    square(245, 138, 3);
    square(215, 143, 3);
    square(221, 143, 3);
    square(227, 143, 3);
    square(233, 143, 3);
    square(239, 143, 3);
    square(245, 143, 3);
    square(215, 148, 3);
    square(221, 148, 3);
    square(227, 148, 3);
    square(233, 148, 3);
    square(239, 148, 3);
    square(245, 148, 3);
    square(215, 153, 3);
    square(221, 153, 3);
    square(227, 153, 3);
    square(233, 153, 3);
    square(239, 153, 3);
    square(245, 153, 3);
    square(215, 158, 3);
    square(221, 158, 3);
    square(227, 158, 3);
    square(233, 158, 3);
    square(239, 158, 3);
    square(245, 158, 3);
    //building 1 lights
    square(484, 130, 3);
    square(484, 135, 3);
    square(484, 140, 3);
    square(484, 145, 3);
    square(484, 150, 3);
    square(484, 155, 3);
    square(484, 160, 3);
    square(484, 165, 3);
    square(484, 170, 3);
    square(489, 140, 3);
    square(489, 145, 3);
    square(489, 150, 3);
    square(489, 155, 3);
    square(489, 160, 3);
    square(489, 165, 3);
    square(489, 170, 3);
    square(494, 145, 3);
    square(494, 150, 3);
    square(494, 155, 3);
    square(494, 160, 3);
    square(494, 165, 3);
    square(494, 170, 3);
    square(499, 150, 3);
    square(499, 155, 3);
    square(499, 160, 3);
    square(499, 165, 3);
    square(499, 170, 3);
    square(504, 155, 3);
    square(504, 160, 3);
    square(504, 165, 3);
    square(504, 170, 3);
    //building 1 lights
    rect(132, 222, 20, 3);
    rect(132, 227, 20, 3);
    rect(132, 232, 20, 3);
    rect(132, 237, 20, 3);
    rect(132, 242, 20, 3);
    rect(132, 247, 20, 3);
    rect(132, 252, 20, 3);
    rect(132, 257, 20, 3);
    rect(132, 262, 20, 3);

//water
    if(mouseX < width/2){
    	fill(152, 179, 196)
    } else if(mouseX >= width/2){
    	fill(53,57, 79)
    }
	rect(0, 281, 600, 170);

	if(mouseX < width/2){
		fill(109, 137, 147, 45)
	} else if(mouseX >= width/2){
		fill(12, 23, 38, 45)
	}
	rect(0, 281, 600, 38);
	rect(337, 339, 262, 7, 5, 0, 0, 5);
	rect(0, 347, 270, 27, 0, 15, 15, 0);
	rect(-10, 392, 532, 10, 0, 8, 8, 0);
	rect(343, 407, 256, 44, 35, 0, 0, 35);

//moving water lines
    push();
    stroke(255);
    strokeWeight(3);
    line(100 - mouseX, 410, 201 - mouseX, 410);
    line(278 - mouseX, 314, 422 - mouseX, 314);
    line(369 - mouseX, 333, 425 - mouseX, 333);
    line(380 - mouseX, 420, 504 - mouseX, 420);
    line(532 - mouseX, 340, 579 - mouseX, 340);
    // ferry water lines
    strokeWeight(1.5);
    line(3 + mouseX, 337, 72 + mouseX, 337);
    line(42 + mouseX, 352, 85 + mouseX, 352);
    line(25 + mouseX, 366, 73 + mouseX, 366);
    pop();

//moving ferry 
    fill(26, 35, 58);
    rect(94 + mouseX, 353, 85, 8);
    fill(255);
    beginShape();
    curveVertex(94 + mouseX, 353);
    curveVertex(94 + mouseX, 353);
    curveVertex(94 + mouseX, 333);
    curveVertex(106 + mouseX, 331);
    curveVertex(121 + mouseX, 331);
    curveVertex(139 + mouseX, 335);
    curveVertex(156 + mouseX, 339);
    curveVertex(164 + mouseX, 342);
    curveVertex(174 + mouseX, 349);
    curveVertex(179 + mouseX, 353);
    curveVertex(179 + mouseX, 353);
    endShape();
    triangle(107 + mouseX, 331, 107 + mouseX, 321, 118 + mouseX, 331);
    stroke(255);
    strokeWeight(2);
    line(94 + mouseX, 338, 94 + mouseX, 328);
    line(94 + mouseX, 328, 107 + mouseX, 328);
    line(101 + mouseX, 333, 101 + mouseX, 328);
    noStroke();
    fill(132, 156, 208);
    circle(102 + mouseX, 342, 10);
    fill(0);
    beginShape();
    curveVertex(110 + mouseX, 345);
    curveVertex(110 + mouseX, 345);
    curveVertex(110 + mouseX, 338);
    curveVertex(122 + mouseX, 338);
    curveVertex(145 + mouseX, 341);
    curveVertex(157 + mouseX, 345);
    curveVertex(157 + mouseX, 345);
    endShape();

    if(mouseX >= width/2){

        //stars
    	stroke(254, 229, 150);
    	strokeWeight(1);
    	push();
    	translate(28, 72);
    	rotate(radians(mouseX));
    	line(-6, 0, 6, 0);
    	line(0, -6, 0, 6);
    	pop();
    	push();
    	translate(151, 135);
    	rotate(radians(mouseX));
    	line(-3, 0, 3, 0);
    	line(0, -3, 0, 3);
    	pop();
    	push();
    	translate(287, 32);
    	rotate(radians(mouseX));
    	line(-6, 0, 6, 0);
    	line(0, -6, 0, 6);
    	pop();
    	push();
    	translate(427, 14);
    	rotate(radians(mouseX));
    	line(-3, 0, 3, 0);
    	line(0, -3, 0, 3);
    	pop();
    	push();
    	translate(442, 108);
    	rotate(radians(mouseX));
    	line(-6, 0, 6, 0);
    	line(0, -6, 0, 6);
    	pop();
    	push();
    	translate(582, 110);
    	rotate(radians(mouseX));
    	line(-3, 0, 3, 0);
    	line(0, -3, 0, 3);
    	pop();
    	noStroke();

    	//moon
    	push();
    	fill(255);
    	translate(519, 57);
    	circle(0, 0, 40);
    	pop();
    	push();
    	fill(255, 255, 255, 100);
    	translate(519, 57);
    	if(mouseX < 500 || mouseX >= 400){
    		scale(0.25 * (mouseX/100))
    	}
    	circle(0,0, 50);
    	circle(0,0, 42);
    	pop();
    }
}

Project 03 – Dynamic Drawing

~click your mouse!~

This project was extremely intimidating because I didn’t even know where to begin, but after becoming more comfortable with implementing mouseX/mouseY and min/max, it was actually pretty fun. My composition consists of simple geometric shapes, however, the various changes in scale, angle of rotation, position, and color create different compositions depending on your mouse movement.

Maggie – Dynamic Drawing
//Maggie Ma
//Section D

//top left shapes
var blueSqSmall = {
	x: 31,
	y: 51,
	w: 39,
	h: 39
};
var greenSqSmall = {
	x: 70,
	y: 51,
	w: 39,
	h: 39
};
var yellowCircle = {
	x: 50,
	y: 130,
	w: 39,
	h: 39
};
var pinkCircle = {
	x: 89,
	y: 130,
	w: 39,
	w: 39
};


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

function draw() {
	background(255,255,255);
	strokeWeight(3.5);
	//noStroke();

	if (mouseIsPressed) {
		background(0);
	}

	//red rect top left
	fill(248, 64,0);
	rect(31, 51, 78 + mouseX*.08, 224 + mouseY/80);

	if (mouseX > width/2) {
		fill(255,209,0);
		rect(31, 51, 78 + mouseX*.08, 224 + mouseY/80);
	}

	//blue square top left
	bottombound = min(mouseY, 236);
	fill(40,44,147);
	rect(31, bottombound, 39, 39);

	//yellow circle top left
	fill(255,209,0);
	ellipse(yellowCircle.x, bottombound, yellowCircle.w, yellowCircle.h);

	if (mouseX > width/2) {
		fill(248, 64,0);
		ellipse(yellowCircle.x, bottombound, yellowCircle.w, yellowCircle.h);
	}

	//green square top left
	fill(0,164,82);
	rect(greenSqSmall.x, bottombound, greenSqSmall.w, greenSqSmall.h);

	//pink circle top left
	fill(255,185,200);
	ellipse(pinkCircle.x, bottombound, pinkCircle.w, pinkCircle.h);

	//pink rect bottom left
	fill(255,185,200);
	rect(31,275, 136,184);

	//blue rect bottom left
	fill(40,44,147);
	rect (31,343,68,116 + mouseY/4);

	//yellow circle bottom left
	fill(255,209,0);
	ellipse(99,343,136,136);

	if (mouseX > width/2) {
		fill(248, 64,0);
		ellipse(99,343,136,136);

	}

	//green semicircle bottom left
	fill(0,164,82);
	push();
	translate(99,343);
	rotate(radians(mouseY));
	arc(0,0,136,136, PI, 0, CHORD);
	pop();	

	//green circle middle
	fill(0, 164, 82);
	ellipse(139, 184, 60,60);

	//blue rect nub
	fill(255,209,0);
	rect(108, 215, 60, 60, 80, 0, 0, 0);

	//blue rect top right
	fill(40,44,147);
	rect(168, 138, 171, 137);

	//blue circle top right
	ellipse(253,136,171,171);

	if (mouseY>height/2) {
		fill(255,185,200);
		ellipse(253,136,171,171);
	}

	//yellow semicircle top right
	fill(255,209,0);
	push();
	translate(253,136);
	rotate(radians(mouseY));
	arc(0,0,172,172, PI+2, 2, CHORD);
	pop();	

	//line 1
	line(31, 134, 339, 134);

	//pink circle top right
	fill(255, 185,200);
	ellipse(255, 136, 84, 84);

	if (mouseY>height/2) {
		fill(40,44,147);
		ellipse(255, 136, 84, 84);
	}

	//red semi top right
	fill(248, 64,0);
	push();
	translate(255,136);
	rotate(radians(-mouseX));
	arc(0,0,84,84, 0, PI, CHORD);
	pop();	

	//line 2
	line(340, 459, 340, 275);

	//red circle bottom right
	fill(248,64,0);
	ellipse(262,370, min(mouseX,188), min(mouseX,188));

	//line 3
	line(167, 275,341,459);

	//white circle bottom left
	fill(255,255,255);
	ellipse(65 + mouseX, 459, 70, 70);

	//small rect pink
	fill(255,185,200);
	quad(226, 328, 217, 337, 262, 385, 271, 376);

	//small rect yellow
	fill(255,209,0);
	quad(277,382, 268, 391, 286, 410, 295, 401);

}

Below is my base sketch/composition done in Illustrator: