Category: Project-03-Dynamic-Drawing

Jonathan Liang – Project 03 – Dynamic Drawing

Move the cursor left and right and also try clicking the mouse.

sketch

//Jonathan Liang
//Section A 
//jliang2@andrew.cmu.edu
//Project-03-Dynamic Drawing


var head = 350;
var mouthColor = 0;
var col = {
	r: 255,
	g: 0,
	b: 0,
};
var flag = true;

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

function draw() {
	col.r = random(0, 255);
	col.g = random(0, 255);
	col.b = random(0, 255);

//background
	if (flag == true) {
		background(col.r, col.b, col.g);
	}	else {
		background('black');
	}
	

//left ear
	noStroke();
	fill('white');
	ellipse(180, 115, 140, 140);

	noStroke();
	fill(188, 166, 222);
	ellipse(215, 125, 65, 80);
	ellipse(188, 108, 105, 80);

	noStroke();
	fill(252, 250, 92);
	ellipse(140, 95, 30, 50);
	ellipse(169, 125, 61, 65);

	noStroke();
	fill('white');
	ellipse(180, 140, 45, 45);
	ellipse(220, 90, 30, 30);

	strokeWeight(15);
	stroke('black');
	noFill();
	ellipse(185, 130, 55, 75);

//right ear
	noStroke();
	fill('white');
	ellipse(460, 115, 140, 140);

	noStroke();
	fill(156, 226, 233);
	ellipse(460, 140, 90, 33);
	ellipse(490, 126, 42, 44);

	noStroke();
	fill(237, 97, 155);
	ellipse(415, 145, 35, 125);
	ellipse(445, 96, 75, 75);

	noStroke();
	fill('white');
	ellipse(440, 120, 45, 65);
	ellipse(490, 100, 45, 40);

	strokeWeight(13);
	stroke('black');
	noFill();
	ellipse(460, 115, 42, 42);

	strokeWeight(17);
	stroke('black');
	noFill();
	ellipse(430, 150, 42, 42);




//constants for head
	noStroke();
	fill('white');
	ellipse(320, 240, head, 250);

	noStroke();
	fill(128, 255, 191);
	ellipse(180, 260, 40, 25);

	noStroke();
	fill(255, 225, 77);
	ellipse(460, 260, 40, 25);

	noStroke();
	fill('pink');
	ellipse(180, 260, 30, 15);

	noStroke();
	fill('pink');
	ellipse(460, 260, 30, 15);

//smile
	noStroke();
	if (flag == true) {
		fill('black');
	}	else {
		fill(col.r, col.b, col.g);
	}
	arc(320, 275, 312, 165, 0, PI, CHORD);
	


//teeth
	strokeWeight(1);
	stroke('white');
	noFill();
	line(164, 275, 184, 315);
	line(184, 315, 204, 275);
	line(204, 275, 230, 340);
	line(230, 340, 260, 275);
	line(260, 275, 290, 355);
	line(290, 355, 320, 275);
	line(320, 275, 350, 355);
	line(350, 355, 380, 275);
	line(380, 275, 410, 340);
	line(410, 340, 436, 275);
	line(436, 275, 456, 315);
	line(456, 315, 476, 275);

	

//left eye
	translate(180, 100);
	var m = max(min(mouseX, 200), 0);
	var size = m * 150.0 / 200.0;
	var eyeColor = mouseX / (640 / 225);



	strokeWeight(5);
	stroke(237, 97, 155);
	if (flag == true) {
		fill('black');
	}	else {
		fill(col.r, col.b, col.g);
	}
	ellipse(20 + m * 90.0 / 200.0, 100.0,
         size * .9, size * .9);

//right eye
	translate(130, 0);

	strokeWeight(3);
	stroke('cyan');
	if (flag == true) {
		fill('black');
	}	else {
		fill(col.r, col.b, col.g);
	}
	size = 350 - 2 * size;
    ellipse(20 + m * 90.0 / 200.0, 100.0,
         size * .40, size * .40);

//left pupil
	translate(-130, 0);
	var m = max(min(mouseX, 200), 0);
	var size = m * 150.0 / 200.0;
	var eyeColor = mouseX / (640 / 225);



	strokeWeight(10);
	stroke(255 - eyeColor, 51, 51);
	noFill();
	ellipse(20 + m * 90.0 / 200.0, 100.0,
         size * .19, size * .19);

//right pupil
	translate(130, 0);

	strokeWeight(7);
	stroke(170, 255 - eyeColor, 0);
	noFill();
	size = 350 - 2 * size;
    ellipse(20 + m * 90.0 / 200.0, 100.0,
         size * .04, size * .04);

    
}

function mousePressed() {
	if (flag == true) {
		flag = false;
	} else {
		flag = true;
	}




}

I am a big fan of Takeshi Murakami’s work and especially of his style Superflat. My project is taking his style and trying to bring it to life and have elements move. This project was difficult to start because of its open-ended nature. However, I did appreciate that aspect because it allowed me to experiment with many things.

Hannah Cai—Project 3—Dynamic Drawing

/* Hannah Cai
Section C
hycai@andrew.cmu.edu
Project-03-Dynamic Drawing
*/

var R = 211; //sky color variables
var G = 239;
var B = 252;
angleSun = 0; //sun and moon rotation angles
angleMoon = 0;
cloudColor = 250; 
cloudX = 0;
var dimness = 0;

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

function draw() {
  scale(.9375);
  rectMode(CORNER); 
  var cmouseX = constrain(mouseX,0,600); //constrains mouseX to canvas
  // sky
  background(R,G,B);
  // stars
  fill(211,239,252);
  strokeWeight(1);
  stroke(211,239,252);
  point(386,153);
  point(360,200);
  point(266,225);
  point(395,355);
  // sun
  push();
  noStroke();
  fill(255,247,215);
  ellipseMode(CENTER);
  translate(675,500);
  angleMode(DEGREES);
  rotate(angleSun); //rotates the sun
  ellipse(-390,-300,10,10); //relative to translated origin
  pop();
  // moon
  push();
  noStroke();
  fill(250);
  ellipseMode(CENTER);
  translate(675,500);
  angleMode(DEGREES);
  rotate(angleMoon); //rotates the moon
  ellipse(-390,-300,10,10); //relative to translated origin
  fill(R,G,B); //fills with sky color
  ellipse(-389,-301,10,10); //second circle that forms the moon
  pop();
  // clouds
  noStroke();
  fill(cloudColor);
  rect(286 + cloudX,226,54,17,10);
  rect(306 + cloudX,236,55,17,10);
  rect(242 + cloudX,265,91,17,10);
  rect(215 + cloudX,275,73,17,10);
  rect(353 + cloudX,305,67,17,10);
  rect(338 + cloudX,314,58,17,10);
  rect(150 + cloudX,340,70,17,10);
  rect(150 + cloudX,350,40,17,10);
  //wall
  fill(255 - dimness,232 - dimness,204 - dimness);
  rect(440,0,200,480);
  rect(165,0,310,80);
  rect(0,0,200,480);
  rect(180,400,310,80);
  //window shadow
  noFill();
  stroke(244 - dimness,216 - dimness,216 - dimness);
  strokeWeight(30);
  rect(206,80,250,335); //big frame
  strokeWeight(10);
  line(204,134,444,134); //horizontal part of 'T'
  line(324,134,324,389); //vertical part of 'T'
  //window frame
  stroke(255 - dimness);
  strokeWeight(30);
  rect(200,60,250,335); //big frame
  strokeWeight(10);
  line(200,130,440,130); //horizontal part of 'T'
  line(320,130,320,385); //vertical part of 'T'
  //shades
  noStroke();
  fill(255 - dimness,232 - dimness,204 - dimness);
  rect(200,70,250,5); 
  rect(200,80,250,5);
  rect(200,90,250,5);
  rect(200,100,250,5);
  rect(200,110,250,5);
  stroke(255 - dimness,232 - dimness,204 - dimness)
  strokeWeight(1);
  line(266,70,266,110); //hanging lines
  line(377,70,377,110);
  strokeWeight(1);
  line(425,70,425,351); //pull line
  rectMode(CENTER);
  rect(425,350,2,8,2,2,0,0); //pull line handle
  stroke(250 - dimness);
  strokeWeight(3);
  line(230,60,230,260); //rod

  //changes based on mouseX's position on the canvas 
  R = ((527.5 - mouseX) / 2.5); 
  G = ((597.5 - mouseX) / 2.5);
  B = ((630 - mouseX) / 2.5); //lighter/darker sky color
  angleSun = ((0 - mouseX) / 10);
  angleMoon = ((cmouseX - 600) / 10);
  cloudColor = ((775 - cmouseX) / 3); //lighter/darker
  cloudX = ((640 - cmouseX) / 12); //horizontal shift
  dimness = ((25 + cmouseX) / 25);
}

my actual window
sketches/notes
day
night

Like many other people, I struggled with starting this project because it’s so open-ended. I initially wanted to do something abstract, but after a few experiments, I decided to just stick with imagery that I was familiar with. This sketch was based on my dorm’s window. I wanted to show the passage of time by having the sun and moon rotate, as well as having the sky change color. Both of those variables ended up being challenging to manipulate in a way that would look realistic, but still keep them relative to the mouse; I ended up doing a lot more math than I liked, but I figured it out in the end. I realize now that I could’ve used map() rather than doing so much math, similar to the second project, where I did rotations and shears the longer way rather than using push() and pop(), which I hadn’t known about yet. Oh well…

I also wanted to add an interaction where you could click the canvas to turn a light on and off, but after I figured out how to make it work, I didn’t like the effect (it looked weird during the daytime). So I instead just mapped the room to change brightness with the mouse’s movement as well, which also made the passage of time more convincing.

(note: I scaled down my sketch so it wouldn’t get cropped.)

Project-03-Dynamic Drawing

 


function setup() {
    createCanvas(640, 480);
    rectMode(CENTER)

}

function draw() {
    // background color change
    R = (mouseY/ width) * 200;
    G = (mouseX/ height) * 200;
    var clr = color(R, G, 150);
    background(clr);

    //line and its increase in size and color
    stroke(R,G, 200 );
    strokeWeight(20);
    line(mouseX, mouseY, mouseX+ 20, mouseX+ 20);
    //ellipse
    strokeWeight(0);
    ellipse(mouseY-10, mouseX-10,50,50);
    //rotating rectangle
    push()
    translate(mouseX+5, mouseY+5);
    rectMode(CENTER);
    rotate(radians(frameCount*1.2));
    rect(mouseX,mouseY, 40, 40, 10);
    pop()
    //change color and transparency of circles
    if (mouseX<160, mouseY>240)
    fill(255,0,0, 127);
    if (mouseX<320, mouseY<240)
    fill(255, 0,0,191);


}

In this drawing, the color of the background and the line change inversely and the circles change transparency. I like how simplistic and clean it looks.

Austin Treu – Project-03 – Dynamic Drawing

atreu – project-03

//Austin Treu
//Section C
//atreu@andrew.cmu.edu
//Project-03

var circX = 300, circY = 300, rad = 100, circStroke = 1,
    stripeC = 50, circC = 20, backC = 100, 
    strokeC = 0, sr, sg, sb;

function setup() {
    createCanvas(640, 480);
    background(backC);
}

function draw() {
    //draw back and stripes
    background(backC);
    noStroke();
    fill(stripeC);
    rectMode(CORNER);
    rect(width/4, 0, width/4, height);
    rect(3*width/4, 0, width/4, height);
    //change to colors on mouse pos
    if(mouseX < width/4 || mouseX > 3*width/4){
        backC = 100;
        stripeC = 50;
        circC = 20;
        strokeC = mouseX/4;
    }
    else{
        backC = 'rgb(50, 100, 255)';
        stripeC = 'rgb(100, 20, 150)';
        circC = 'rgb(0,100,50)';
        //set circle stroke color values
        sr = int(mouseX/4);
        sg = int(mouseY/2);
        sb = int((mouseX+mouseY)/4);
        if(mouseY < 0){
            sg = 0;
            sb = sr;
        }
        strokeC = 'rgb('+sr+','+sg+','+sb+')';
    }
    //set a variable stroke
    circStroke = (mouseX/10);
    strokeWeight(circStroke);
    stroke(strokeC);
    circX = width - mouseX;
    circY = height - mouseY;
    fill(circC);
    //draw circles/squares/triangles
    /*NOTE: circ vars initially intended to deal with
        only circles, later adapted to deal w/all shapes
        so they are circ due to the default shape being a circle*/
    if(mouseX+mouseY < width/3+height/4 
        || mouseX+mouseY > 2*width/3+3*height/4){
        rectMode(CENTER);
        rect(circX, circX, rad*3, rad*3);
        rect(circX, circY, rad*2, rad*2);
        rect(circY, circX, rad, rad);
        rect(circY, circY, rad/2, rad/2);
    }
    else if(mouseX+mouseY < width/3 + 3*height/4){
        triangle(circX, circX-3*rad, 
            circX+3*rad, circX+3*rad, circX-3*rad, circX+3*rad);
        triangle(circX, circY-2*rad, 
            circX+2*rad, circY+2*rad, circX-2*rad, circY+2*rad);
        triangle(circY, circX-rad, 
            circY+rad, circX+rad, circY-rad, circX+rad);
        triangle(circY, circY-rad/2, 
            circY+rad/2, circY+rad/2, circY-rad/2, circY+rad/2);
    }
    else{
        ellipse(circX, circX, rad*3, rad*3);
        ellipse(circX, circY, rad*2, rad*2);
        ellipse(circY, circX, rad, rad);
        ellipse(circY, circY, rad/2, rad/2);
    }
}

I found this project to be incredibly interesting to experiment with, especially when it comes to utilizing the mouse’s position to control everything that happens. Reversing the x and y coordinates and using them in various transformations created ways to line all the shapes up in the middle of their motion.

Sharon Yang Project 03 Dynamic Drawing

Project 03


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

function draw() {
    background(245,189,65);
    noStroke();
    fill(255);
    //arms
    var bodyWidth=280;
    var leftArmCenterX=mouseX;
    var leftArmCenterY=mouseY;
    leftArmCenterX=constrain(leftArmCenterX,20,160);
    var rightArmCenterX=mouseX;
    var rightArmCenterY=mouseY;
    rightArmCenterX=constrain(rightArmCenterX,480,620);
    //left arm
    push();
    translate(leftArmCenterX,leftArmCenterY);
    rotate(radians(135));
    fill(255);
    ellipse(0,0,80,80);
    pop();
    //right arm
    push();
    translate(rightArmCenterX,rightArmCenterY);
    rotate(radians(225));
    ellipse(0,0,80,80);
    pop();
    strokeWeight(60);
    stroke(255);
    line(leftArmCenterX,leftArmCenterY,width/2-(bodyWidth*0.35),280);
    line(rightArmCenterX,rightArmCenterY,width/2+(bodyWidth*0.35),280);
    //body
    noStroke();
    arc(width/2,420,bodyWidth,540,PI,2*PI);
    arc(width/2,420,bodyWidth,80,0,PI);
    //collar 
    var collarWidth=bodyWidth*0.7;
    fill(255,0,0);
    ellipse(width/2,220,collarWidth,100);
    fill(245,189,65);
    ellipse(width/2,270,40,40);
    //ears
    strokeWeight(1);
    fill(255);
    //left ear
    var earChangeY=mouseY/48;
    var earHeight=20+(earChangeY*1.5);
    var earChangeX=mouseX/64;
    var earLPos=(width/2)-110-(earChangeX*3);
    triangle(earLPos,earHeight,380,100,200,150);
    fill(255,0,0);
    triangle(earLPos+10,earHeight+15,370,100,210,150);
    //right ear
    fill(255);
    var earRPos=(width/2)+110+(earChangeX*3);
    triangle(earRPos,earHeight,260,100,440,150);
    fill(255,0,0);
    triangle(earRPos-10,earHeight+15,260,100,430,150);
    //head
    fill(255);
    ellipse(width/2,140,240,200);
    //face
    fill(0);
    //mouth
    fill(255);
    stroke(0);
    strokeWeight(3);
    var mouthMoveX=mouseX/64;
    var mouthMoveY=mouseY/32;
    var endMouthLeft=0.7*PI+(mouthMoveX/PI);
    var endMouthRight=2.3*PI-(mouthMoveY/PI);
    endMouthLeft=constrain(endMouthLeft,0.5*PI,1.2*PI);
    endMouthRight=constrain(endMouthRight,1.8*PI,2.5*PI);
    arc(width/2-15,170,30,30,0,endMouthLeft);
    arc(width/2+15,170,30,30,endMouthRight,PI);
    //nose
    fill(0);
    triangle(width/2,170,width/2-15,150,width/2+15,150);
    //eyes
    var strokeD=((mouseX/64)+(mouseY/48)/2);
    strokeD=constrain(strokeD,3,5);
    var eyeD=strokeWeight(strokeD);
    //left eye
    noFill();
    arc((width/2)-50,130,40,30,PI*1.1,2*PI);
    //right eye
    arc((width/2)+50,130,40,30,PI,1.9*PI);
    //whiskers
    var whiskerMoveX=mouseX/64;
    var whiskerMoveY=mouseY/32;
    var whiskerLeftX=width-width/1.7+whiskerMoveX-20;
    var whiskerY=135+whiskerMoveY;
    var whiskerRightX=width-whiskerLeftX;
    stroke(0);
    strokeWeight(3);
    line(whiskerLeftX,whiskerY,280,145);
    line(whiskerLeftX,whiskerY+30,280,165);
    line(360,145,whiskerRightX,whiskerY);
    line(360,165,whiskerRightX,whiskerY+30);
    //feet
    fill(255);
    var footPos=430;
    stroke(0);
    arc(width/2.7,footPos,70,90,1.05*PI,2.05*PI);
    arc(width-(width/2.7),footPos,70,90,0.95*PI,1.95*PI);

}

Through the project, I understood better setting the variables as well as the motion using push and pop function. I found changing the position and size of objects using mouseX and mouseY is interesting highly applicable.

Sophie Chen – Project 03 – Dynamic Drawing

sketch

var barR = 255;
var barG = 255;
var barB = 255;
var eX = 510;
var eY = 435;
var TVon = 1;
var ellipseA = 5;
var r = 200;
var g = 200;
var b = 200;
var limit = 150;


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

function draw() {
	background(0, 0, 0, 70);
	// when TV is on, fill TV screen with dark blue & planet content
	if (TVon === 1) {
		fill(0, 0, 150, 70);
		noStroke();
		rectMode(CENTER);
		rect(width / 2, height / 2, width, height);

    	// planet size, varied by moving mouseX (move left = smaller, move right = larger)
    	push();
    	stroke(0, g, b);
   		strokeWeight(mouseX / 3);
    	fill(0, g, 255, 60);
    	ellipse(CENTER);
    	ellipse(width / 2, height / 2, limit, limit);
    	pop();

    	// core, smaller than planet by 1/3, also varied by moving mouseX
    	push();
    	noStroke(); 
    	stroke(0, g, 255, 70);
    	strokeWeight(limit);
    	fill(r, g, 255, 60);
    	ellipse(CENTER);
    	ellipse(width / 2, height / 2, limit / 3, limit / 3); // this ellipse will be smaller than the planet
    	pop();

   		// ring
    	push();
    	stroke(255, 100, b, 95);
    	strokeWeight(15);
    	noFill();
    	ellipse(CENTER);
    	ellipse(width / 2, height / 2, mouseY + 300, mouseX / 2);
    	pop();

    	// particles (sizes vary by sliding mouse)

    	//particle
    	fill(255, 255, b); 
    	noStroke();
    	push();
    	translate(width / 2, height / 2);
    	rotate(radians(mouseX));
    	ellipse(width / 10, height / 10, ellipseA, ellipseA);
    	pop();

    	// particle1
    	fill(g, r, b); 
    	noStroke();
    	push();
    	translate(mouseX, mouseX);
    	ellipse(width / 2, height / 2, mouseX / 3, mouseX / 3);
    	pop();

    	// particle2
    	fill(r, g, 255); 
    	noStroke();
    	push();
    	translate(mouseY, mouseY);
    	ellipseMode(CENTER);
    	ellipse(width / 2, height / 2, mouseX / 3, mouseX / 3); 
    	pop();

    	// particle3
    	fill(r, 255, 205); 
   		noStroke();
    	push();
    	translate(mouseX * 2, mouseY);
    	rotate(50);
    	ellipseMode(CENTER);
   		ellipse(width / 2, height / 2, mouseX / 10, mouseX / 10); 
    	pop();

    	// particle4
    	fill(255, g, 205); 
    	noStroke();
   		push();
    	translate(mouseX / 5, mouseY);
    	rotate(50);
    	ellipseMode(CENTER);
    	ellipse(width / 2, height / 2, mouseX / 7, mouseX / 7);
    	pop();

    	// particle5
    	fill(255, 235, b); 
    	noStroke();
    	push();
    	translate(mouseX / 5, mouseY);
    	rotate(100);
    	ellipseMode(CENTER);
    	ellipse(width / 2, height / 2, mouseX / 5, mouseX / 5);
    	pop();

    	//static bars that are triggered when mouse gets near on/off button
		fill(0, barG, 255, mouseY - 150); // opacity of static increases as mouse gets closer to the bottom frame
		noStroke();
		rectMode(CENTER);
		var center = height / 2
		rect(width / 2, center, width, mouseY);

		fill(0, barG, 0, mouseY - 150);
		noStroke();
		rectMode(CENTER);
		rect(width / 2, center - 60, width, mouseY / 3);

		fill(255, 0, barB, mouseY - 150);
		noStroke();
		rectMode(CENTER);
		rect(width / 2, center - 110, width, mouseY / 3)

		fill(barR, 0, 0, mouseY - 150);
		noStroke();
		rectMode(CENTER);
		rect(width / 2, center + 40, width, mouseY / 3);

		fill(0, 0, barB, mouseY - 150);
		noStroke();
		rectMode(CENTER);
		rect(width / 2, center + 80, width, mouseY / 3); 


		// constant top TV border
		fill(0, 0, 0)
		noStroke();
		rectMode(CENTER);
		rect(width / 2, 30, width, 60);

		// constant bottom TV border
		fill(0, 0, 0)
		noStroke();
		rectMode(CENTER);
		rect(width / 2, 440, width, 80);

	}
		// on/off button
		fill(225, 0, 0);
		noStroke();
		ellipse(eX, eY, 40, 40);
	// static bar variables
	barR = mouseY 
	barG = mouseY
	barB = mouseY

	// planet variables
	ellipseA = mouseX / 3
	r = mouseY - 100 
	g = mouseX - 150
	b = mouseY - 100
	limit = constrain(mouseX, 100, 150) // limit the size of planet
}

// turning TV on/off
function mouseClicked(){
	if (dist(mouseX, mouseY, eX, eY) <= 20) { // when mouse is clicking within radius of button, turn TV on/off
		TVon = -TVon;
    }	
}

I found keeping everything organized to be the hardest part of this project, I had a hard time finding a starting point but once I had a good base it was a lot more manageable. I wanted to recreate turning an old TV on/off and the static that goes with it, which worked nicely with the dynamic aspect of this project.

Yingyang Zhou-Project-03-Dynamic-Drawing

Dynamic cubes

//Yingyang Zhou
//Section A
//yingyanz@andrew.cmu.edu
//Project-03


var cubeL = 50;
var dark = 150;
var angleA = 0;
var angleB = 0;
var angleC = 0;
var spacing = 50;
var i = 0;


function setup() {
  createCanvas(640, 480);
  background(0);
  frameRate(30);
}

function draw() {
  var x = 0;
  var y = 0;
  var speed = mouseX/width*4;
  var colour = 150 +mouseX/width*255;
  var dia = mouseX/width*20;
  var l = 0;

  //background change as mouse move
  background(max(120, 200-colour), max(30, 200-colour), max(10, 200-colour));
  noStroke();

  // mouse path
  fill(30, 30, 150)
  ellipse(pmouseX,pmouseY, dia, dia);


  if(mouseX < width & mouseY < height){

    push();
    translate(width/2, height/2);
    rotate(radians(angleA))
    fill(colour);
    scale(constrain(mouseX/width, 0.8, 1.5), constrain(mouseX/width, 0.8, 1.5));
    quadA = quad(x, y, x+cubeL, y-cubeL/2, x, y-cubeL, x-cubeL, y-cubeL/2);
    fill(colour-dark);
    quadB = quad(x, y, x, y+cubeL, x-cubeL, y+cubeL/2, x-cubeL, y-cubeL/2);
    fill(colour-2*dark);
    quadC = quad(x, y, x, y+cubeL, x+cubeL, y+cubeL/2, x+cubeL, y-cubeL/2);
    angleA = angleA + speed;
    pop();

    push();
    translate(width/2+2*cubeL, height/2+2*cubeL);
    rotate(radians(angleB));
    scale(0.8, 0.8);
    fill(colour);
    scale(constrain(mouseX/width, 0.8, 1.5), constrain(mouseX/width, 0.8, 1.5));
    quadA = quad(x, y, x+cubeL, y-cubeL/2, x, y-cubeL, x-cubeL, y-cubeL/2);
    fill(colour-dark);
    quadB = quad(x, y, x, y+cubeL, x-cubeL, y+cubeL/2, x-cubeL, y-cubeL/2);
    fill(colour-2*dark);
    quadC = quad(x, y, x, y+cubeL, x+cubeL, y+cubeL/2, x+cubeL, y-cubeL/2);
    angleB = angleB + 0.9*speed;
    pop();


    push();
    translate(width/2-2*cubeL, height/2+2*cubeL);
    rotate(radians(angleC));
    scale(0.8, 0.8);
    fill(colour);
    scale(constrain(mouseX/width, 0.8, 1.5), constrain(mouseX/width, 0.8, 1.5));
    quadA = quad(x, y, x+cubeL, y-cubeL/2, x, y-cubeL, x-cubeL, y-cubeL/2);
    fill(colour-dark);
    quadB = quad(x, y, x, y+cubeL, x-cubeL, y+cubeL/2, x-cubeL, y-cubeL/2);
    fill(colour-2*dark);
    quadC = quad(x, y, x, y+cubeL, x+cubeL, y+cubeL/2, x+cubeL, y-cubeL/2);
    angleC = angleC + 1.1*speed;
    pop();

    push();
    translate(width/2+2*cubeL, height/2-2*cubeL);
    rotate(radians(angleB));
    scale(0.8, 0.8);
    fill(colour);
    scale(constrain(mouseX/width, 0.8, 1.5), constrain(mouseX/width, 0.8, 1.5));
    quadA = quad(x, y, x+cubeL, y-cubeL/2, x, y-cubeL, x-cubeL, y-cubeL/2);
    fill(colour-dark);
    quadB = quad(x, y, x, y+cubeL, x-cubeL, y+cubeL/2, x-cubeL, y-cubeL/2);
    fill(colour-2*dark);
    quadC = quad(x, y, x, y+cubeL, x+cubeL, y+cubeL/2, x+cubeL, y-cubeL/2);
    angleB = angleB + 0.8*speed;
    pop();

    push();
    translate(width/2-2*cubeL, height/2-2*cubeL);
    rotate(radians(angleC));
    scale(0.8, 0.8);
    fill(colour);
    scale(constrain(mouseX/width, 0.8, 1.5), constrain(mouseX/width, 0.8, 1.5));
    quadA = quad(x, y, x+cubeL, y-cubeL/2, x, y-cubeL, x-cubeL, y-cubeL/2);
    fill(colour-dark);
    quadB = quad(x, y, x, y+cubeL, x-cubeL, y+cubeL/2, x-cubeL, y-cubeL/2);
    fill(colour-2*dark);
    quadC = quad(x, y, x, y+cubeL, x+cubeL, y+cubeL/2, x+cubeL, y-cubeL/2);
    angleC = angleC + 1.2*speed;
    pop();

    push();
    translate(width/2+5*cubeL, height/2);
    rotate(radians(angleA));
    scale(0.5, 0.5);
    fill(colour);
    quadA = quad(x, y, x+cubeL, y-cubeL/2, x, y-cubeL, x-cubeL, y-cubeL/2);
    fill(colour-dark);
    quadB = quad(x, y, x, y+cubeL, x-cubeL, y+cubeL/2, x-cubeL, y-cubeL/2);
    fill(colour-2*dark);
    quadC = quad(x, y, x, y+cubeL, x+cubeL, y+cubeL/2, x+cubeL, y-cubeL/2);
    angleA = angleA + speed;
    pop();

    push();
    translate(width/2-5*cubeL, height/2);
    rotate(radians(angleA));
    scale(0.5, 0.5);
    fill(colour);
    scale(constrain(mouseX/width, 0.8, 1.5), constrain(mouseX/width, 0.8, 1.5));
    quadA = quad(x, y, x+cubeL, y-cubeL/2, x, y-cubeL, x-cubeL, y-cubeL/2);
    fill(colour-dark);
    quadB = quad(x, y, x, y+cubeL, x-cubeL, y+cubeL/2, x-cubeL, y-cubeL/2);
    fill(colour-2*dark);
    quadC = quad(x, y, x, y+cubeL, x+cubeL, y+cubeL/2, x+cubeL, y-cubeL/2);
    angleA = angleA + speed;
    pop();


    //circles
    i = i+50
    for (var i = 0; i < 1000; i += 50){
      noFill();
      stroke(0, 0, 255);
      strokeWeight(0.5);
      alpha
      ellipse(mouseX, mouseY, 150+i, 150+i);
      }
  }
}

The way to make this dynamic is using your mouse,  I started from creating images that has kind of 3D affect. All the cube start from the same position, when the mouse moved, they’ll have a rotating speed which various, so they are going to end at different position eventually. When mouse move outside of canvas, it will turn to the circle image.

Vicky Zhou – Project – 03 – Dynamic Drawing

sketch

/*Vicky Zhou
Section E 
vzhou@andrew.cmu.edu
Project-03 Dynamic Drawing*/

var lineA;  
var r = 2; 
var g = 220;
var b = 340; 
var leftelWidth = 460;
var leftelHeight = 640;
var offset = 10; 
var ballX = 400;
var ballY = 400; 
var boxX = 200;
var boxY = 200;
var diffX = 0;
var diffY = 0;


function setup() {
    createCanvas(480, 640);
    ellipseMode(CENTER);
    rectMode(CENTER);
    lineA = width/ 2;
}

function draw() {

	//changes the background depending on mouse location 
	bg1 = mouseX; 
	bg2 = mouseY; 
	background(bg1/3, g, b);

	//constrainments for left ellipse 
	var leftelWidth = constrain(mouseX, 0, 460);
	var leftelHeight = constrain(mouseY, 0, 640)


	//ellipse that moves in response to mouseX and mouseY location
	push();
	noStroke();
	fill(bg1, bg2, bg2);
	ellipse(0, 0, leftelWidth*1.3, leftelHeight*3);
	fill(bg2, 30, 40);
	pop();

	//having the line follow the mouse
	if (mouseX > lineA) {
		lineA += 3;
		offset = 10;
	}

	if (mouseX < lineA) { 
		lineA -= 3;
		offset = 10;
	}

	//lag in first ball that follows
	diffX = mouseX - ballX;
	diffY = mouseY - ballY;
	ballX = ballX + 0.1*diffX;
	ballY = ballY + 0.1*diffY;

	//lag in second box that follows
	diffX = mouseX - boxX;
	diffY = mouseY - boxY;
	boxX = boxX + 0.05*diffX;
	boxY = boxY + 0.05*diffY; 

	ellipse(mouseX, mouseY, 10, 10); //cursor mouse
	strokeWeight(10);
	stroke(200, 400, 10);
	line(mouseX, 0, lineA, height); // first line that follows
	ellipse(ballX, ballY, 20, 20); // first ball that follows
	rect(boxX, boxY, 30, 30); // second box that follows

	//"ouch" text that appears when you prod the circle
	push();
	textSize(40);
	fill(490, 20, 35);
	noStroke();
	if (dist(50, 50, mouseX, mouseY) < width/2) 
		text("ouch", 30, 50);
	pop();


}

Due to the combination of such an open-ended prompt and the introduction of so many new functions and/or forms of writing visual code, I struggled quite a lot with this project on what I wanted to achieve as well as how to write it in a way so that it would not be extremely cluttered. Ultimately I decided to recreate a childhood favorite simulation of having a series of shapes and/or objects follow your mouse as you move it across the screen. I also thought it would be funny if there was a stick to be included that would squish a circle blob to one side. She says ouch and glows red when you do so.

Jamie Dorst Project 03 Dynamic Drawing

sketch

/*
Jamie Dorst
Section A
jdorst@andrew.cmu.edu
Project-03
*/

// variables
var saturation1 = 50
var hue1 = 0
var radius = 50
var lineX1 = 100

var ballX1 = 320
var ballY1 = 240
var ballX2 = 240
var ballY2 = 320
var ballX3 = 150
var ballY3 = 300


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

function draw() {
    stroke(255);
    strokeCap(PROJECT);
    colorMode(HSB);
    background(hue1, saturation1, 100);

    // change background color as mouse moves
    // change mouseY to change hue
    // change mouseX to change saturation
    if (mouseX >= 0 & mouseX <= width && mouseY >= 0 && mouseY <= height) {
        saturation1 = mouseX / 5
        hue1 = mouseY
    }

    // draw white line when mouse goes over it
    // lines are 30 away from each other, all the same length
    // stroke increases by 0.2 with each line
    if (mouseX >= 70) {
        line(70, 40, 70, 440);
        strokeWeight(2);
    }
    if (mouseX >= 100) {
        line(100, 40, 100, 440);
        strokeWeight(2.2);
    }
    if (mouseX >= 130) {
        line(130, 40, 130, 440);
        strokeWeight(2.4);
    }
    if (mouseX >= 160) {
        line(160, 40, 160, 440);
        strokeWeight(2.6);
    }
    if (mouseX >= 190) {
        line(190, 40, 190, 440);
        strokeWeight(2.8);
    }
    if (mouseX >= 220) {
        line(220, 40, 220, 440);
        strokeWeight(3);
    }
    if (mouseX >= 250) {
        line(250, 40, 250, 440);
        strokeWeight(3.2);
    }
    if (mouseX >= 280) {
        line(280, 40, 280, 440);
        strokeWeight(3.4);
    }
    if (mouseX >= 310) {
        line(310, 40, 310, 440);
        strokeWeight(3.6);
    }
    if (mouseX >= 340) {
        line(340, 40, 340, 440);
        strokeWeight(3.8);
    }
    if (mouseX >= 370) {
        line(370, 40, 370, 440);
        strokeWeight(4);
    }
    if (mouseX >= 400) {
        line(400, 40, 400, 440);
        strokeWeight(4.2);
    }
    if (mouseX >= 430) {
        line(430, 40, 430, 440);
        strokeWeight(4.4);
    }
    if (mouseX >= 460) {
        line(460, 40, 460, 440);
        strokeWeight(4.6);
    }
    if (mouseX >= 490) {
        line(490, 40, 490, 440);
        strokeWeight(4.8);
    }
    if (mouseX >= 520) {
        line(520, 40, 520, 440);
        strokeWeight(5);
    }
    
    // erase black line when mouse goes over it
    // lines are 30 away from each other, 15 away from the white lines, all the same length
    stroke(0, 0, 0);

    if (mouseX <= 115) {
        line(115, 40, 115, 440);
    }
    if (mouseX <= 145) {
        line(145, 40, 145, 440);
    }
    if (mouseX <= 175) {
        line(175, 40, 175, 440);
    }
    if (mouseX <= 205) {
        line(205, 40, 205, 440);
    }
    if (mouseX <= 235) {
        line(235, 40, 235, 440);
    }
    if (mouseX <= 265) {
        line(265, 40, 265, 440);
    }
    if (mouseX <= 295) {
        line(295, 40, 295, 440);
    }
    if (mouseX <= 325) {
        line(325, 40, 325, 440);
    }
    if (mouseX <= 355) {
        line(355, 40, 355, 440);
    }
    if (mouseX <= 385) {
        line(385, 40, 385, 440);
    }
    if (mouseX <= 415) {
        line(415, 40, 415, 440);
    }
    if (mouseX <= 445) {
        line(445, 40, 445, 440);
    }
    if (mouseX <= 475) {
        line(475, 40, 475, 440);
    }
    if (mouseX <= 505) {
        line(505, 40, 505, 440);
    }
    if (mouseX <= 535) {
        line(535, 40, 535, 440);
    }
    if (mouseX <= 565) {
        line(565, 40, 565, 440);
    }

    // draw medium ball
    // same as background color
    noStroke();
    fill(hue1, saturation1, 100);
    ellipse(ballX1, ballY1, 100, 100);
    // ball coordinates relative to mouse coordinates
    ballX1 = mouseX + 150
    ballY1 = mouseY * 3 - 400

    // draw biggest ball
    // same as background color
    ellipse(ballX2, ballY2, 180, 180);
    // ball coordinates relative to mouse coordinates
    ballX2 = mouseX / 2 + 200
    ballY2 = mouseY / 4 + 200

    // draw smallest ball
    // same as background color
    ellipse(ballX3, ballY3, 60, 60);
    // ball relative to mouse coordinates
    ballX3 = mouseX * 3 - 300
    ballY3 = mouseY / 2
}

I started this project by making the background change and then adding the lines. Then I had the idea to add the circles so that it looked like they weren’t really there, it was just their silhouettes matching the background. I first made the balls bounce around because I thought that looked cool, but then I realized we weren’t supposed to have any elements that were random, so I changed it so that they are attached to the mouse coordinates. I also tried making the line position a variable so that I wouldn’t have to type in numbers for every line, but I couldn’t figure out a way to make that work.

Justin Yook – Project 03 – Dynamic Drawing

dynamic_drawing

//Justin Yook
//Section C
//jyook@andrew.cmu.edu
//Project 03

var angle = 0; //angle for outer ellipses
var angle2 = 0; // angle for inner ellipses

var elColor = 220; //color value for ellipse
var baColor = 128; //background color value

var osize = 30; //outer ellipse size
var isize = 15; //inner ellipse size

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

function draw() {
    scale(.96);
    background(baColor);

    //draw center outer ellipses in radial pattern
    fill(elColor);
    noStroke();
    push();
    translate(width/2, height/2);
    rotate(radians(angle));
    ellipse(150, 0, osize, osize);
    ellipse(-150, 0, osize, osize);
    ellipse(0, 150, osize, osize);
    ellipse(0, -150, osize, osize);
    ellipse(100, 100, osize, osize);
    ellipse(-100, 100, osize, osize);
    ellipse(-100, -100, osize, osize);
    ellipse(100, -100, osize, osize);
    pop();

    //draw center inner ellipses in radial pattern
    push();
    translate(width/2, height/2);
    rotate(radians(angle2));
    ellipse(70, 0, isize, isize);
    ellipse(-70, 0, isize, isize);
    ellipse(0, 70, isize, isize);
    ellipse(0, -70, isize, isize);
    ellipse(45, 45, isize, isize);
    ellipse(-45, 45, isize, isize);
    ellipse(45, -45, isize, isize);
    ellipse(-45, -45, isize, isize);    
    pop();

    //draw left top corner outer ellipses in radial pattern
    push();
    translate(0, 0);
    rotate(radians(angle));
    ellipse(150, 0, osize, osize);
    ellipse(-150, 0, osize, osize);
    ellipse(0, 150, osize, osize);
    ellipse(0, -150, osize, osize);
    ellipse(100, 100, osize, osize);
    ellipse(-100, 100, osize, osize);
    ellipse(-100, -100, osize, osize);
    ellipse(100, -100, osize, osize);
    pop();

    //draw left bottom corner outer ellipses in radial pattern
    push();
    translate(0, 480);
    rotate(radians(angle));
    ellipse(150, 0, osize, osize);
    ellipse(-150, 0, osize, osize);
    ellipse(0, 150, osize, osize);
    ellipse(0, -150, osize, osize);
    ellipse(100, 100, osize, osize);
    ellipse(-100, 100, osize, osize);
    ellipse(-100, -100, osize, osize);
    ellipse(100, -100, osize, osize);   
    pop();

    //draw right top corner outer ellipses in radial pattern
    push();
    translate(640, 0);
    rotate(radians(angle));
    ellipse(150, 0, osize, osize);
    ellipse(-150, 0, osize, osize);
    ellipse(0, 150, osize, osize);
    ellipse(0, -150, osize, osize);
    ellipse(100, 100, osize, osize);
    ellipse(-100, 100, osize, osize);
    ellipse(-100, -100, osize, osize);
    ellipse(100, -100, osize, osize);  
    pop();

    //draw right bottom corner outer ellipses in raidal pattern
    push();
    translate(640, 480);
    rotate(radians(angle));
    ellipse(150, 0, osize, osize);
    ellipse(-150, 0, osize, osize);
    ellipse(0, 150, osize, osize);
    ellipse(0, -150, osize, osize);
    ellipse(100, 100, osize, osize);
    ellipse(-100, 100, osize, osize);
    ellipse(-100, -100, osize, osize);
    ellipse(100, -100, osize, osize);    
    pop();

    //draw left top corner inner ellipses in radial pattern
    push();
    translate(0, 0);
    rotate(radians(angle2));
    ellipse(70, 0, isize, isize);
    ellipse(-70, 0, isize, isize);
    ellipse(0, 70, isize, isize);
    ellipse(0, -70, isize, isize);
    ellipse(45, 45, isize, isize);
    ellipse(-45, 45, isize, isize);
    ellipse(45, -45, isize, isize);
    ellipse(-45, -45, isize, isize);    
    pop();

    //draw left bottom corner inner ellipses in radial pattern
    push();
    translate(0, 480);
    rotate(radians(angle2));
    ellipse(70, 0, isize, isize);
    ellipse(-70, 0, isize, isize);
    ellipse(0, 70, isize, isize);
    ellipse(0, -70, isize, isize);
    ellipse(45, 45, isize, isize);
    ellipse(-45, 45, isize, isize);
    ellipse(45, -45, isize, isize);
    ellipse(-45, -45, isize, isize);    
    pop();

    //draw right top corner inner ellipses in radial pattern
    push();
    translate(640, 0);
    rotate(radians(angle2));
    ellipse(70, 0, isize, isize);
    ellipse(-70, 0, isize, isize);
    ellipse(0, 70, isize, isize);
    ellipse(0, -70, isize, isize);
    ellipse(45, 45, isize, isize);
    ellipse(-45, 45, isize, isize);
    ellipse(45, -45, isize, isize);
    ellipse(-45, -45, isize, isize);    
    pop();

    //draw right bottom corner inner ellipses in raidal pattern
    push();
    translate(640, 480);
    rotate(radians(angle2));
    ellipse(70, 0, isize, isize);
    ellipse(-70, 0, isize, isize);
    ellipse(0, 70, isize, isize);
    ellipse(0, -70, isize, isize);
    ellipse(45, 45, isize, isize);
    ellipse(-45, 45, isize, isize);
    ellipse(45, -45, isize, isize);
    ellipse(-45, -45, isize, isize);    
    pop();

    //outer and inner ellipses rotate opposite directions, change size, and change to white when mouse is to the right side
    if (mouseX > width/2) {
        angle += 2;
        angle2 -= 6;
        elColor = 255;
        baColor = 0;
        osize += .5;
        isize += .3;
    }

    //limit on max size of outer ellipse when mouse is on right side
    if (osize >= 60) {
        osize = 60;
    }

    //limit on max size of inner ellipse when mouse is on right side
    if (isize >= 35) {
        isize = 35;
    }

    //outer and inner ellipses rotate opposite directions, change size, and change to black when mouse is to the left side 
    if (mouseX < width/2) {
        angle -= 6;
        angle2 += 8;
        elColor = 0;
        baColor = 255;
        osize -= .5;
        isize -= .3;
    }

    //limit on max size of outer ellipse when mouse is on left side
    if (osize <= -60) {
        osize = -60;
    }

    //limit on max size of inner ellipse when mouse is on left side
    if (isize <= -35) {
        isize = -35;
    }
}

The four aspects of this project are: size, angle, velocity, and color. Depending on the location of the mouse (right or left side), four aspects of the ellipses change. I was inspired by Mac laptop screen savers, and thought I would try to make a design that was very dynamic, but made of simple circles.