Month: September 2018

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.

Sharon Yang Looking Outwards – 03

The project ‘Cloud Village’ has been developed by Philip F. Yuan and his team with digital fabrication technology. It is an outdoor pavilion was put together with a purpose to develop the rural areas in China without harming the nature and the people there. I admire not only the high elaborateness of the building but also the fact that it is made of recycled plastic material. As it is a severe environmental crisis in China especially in the countryside, it offers a highly sustainable solution to the issues in the Chinese rural areas.

In order for the pavilion to best suit its purpose of providing a public resting space for the residents in rural regions as well as obtaining a creative and an aesthetic presence, the form and the structure has been optimized by a use of topological optimization algorithm. Such a technological innovation allows for an architecturally innovative approach such as having a waved geometry as the roof. In the process of digital fabrication, the geometry of the pavilion is pixelated into various components to use a crystalized printing tool-path for each of them. The project therefore demonstrates the ideal incorporation of the computational generation to the design as well as the fabrication of art.

Catherine Coyle – Looking Outwards 03

The project I found inspiration in this week was from the generative design studio ‘Nervous System.’ Specifically, I was interested in their Floraform project. I found this studio from the linked reading, and I find it very interesting.

An example of one of these ‘Floraform’ designs

This project was started in 2014. Essentially, the studio took inspiration from the natural growth and development of blooming flowers in nature. This ‘digital garden’ can even be 3D printed and worn as accessories. According to their website, Floraform is a garden where ‘instead of growing plants, we’re cultivating algorithms.’

A lot of research into how plants divide and grow naturally must’ve gone into making this project come to life in such a natural way. I think it is exciting because the idea of simulating cell growth and development in a 3D plane could lead to some very interesting science and procedurally developed ‘organisms.’ On  top of that, it all just looks very cool!

Feel free to read more about the project on the studio’s website here.

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.

Lingfan Jiang- Looking Outwards 03

The project that I am interested in is called the Silk Pavilion, done by the Mediated Matter group at MIT in 2013. The project mainly focused on the relationship between digital and biological fabrication in design. With silkworms’ spinning experiments, researchers are able to emulate silkworms’ behavior and digitalize it in computational tools.

It is fascinating to see how we could combine nature with technology, and how we could always learn from nature. Manmade objects would always have limitations to them, and we always make things based on things we know and understand. Although technology has developed so rapidly in the recent hundred years, nature, on the other hand, has much more profound knowledge than at any time in human history.

Elena-Deng-Project-03-Dynamic-Drawing

sketch

/*Elena Deng
Section E
  edeng1@andrew.cmu.edu
  Project-03
}
*/

var x=68; //position (X)
var y=240; // position (Y)





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

}

function draw() {
  background(30); //background color
  noStroke();
  rectMode(CENTER);

  if (mouseIsPressed) {
    background(255); //changes background color when mouse is pressed
  }



  fill(121,114,map(mouseY,0,height,170,190)); //changing the B value of the rectangle
  rect(x,map(mouseX,0,width,y-10,y+10),23,map(mouseY,0,height,50,80)); //(map(n,a,b,x,y))can set the range at which something changes


  fill(map(mouseY,0,height,230,250),147,map(mouseX,0,width,50,map(mouseY,0,height,90,150)));
  rect(x+28,map(mouseX,0,width,y-20,y+20),23,map(mouseY,0,height,200,100));


  fill(93,map(mouseX,0,width,80,110),166);
  rect(x+56,map(mouseX,0,width,y-20,y+20),23,map(mouseY,0,height,180,250));


  fill(map(mouseY,0,height,180,220),90,69);
  rect(x+84,y,23,map(mouseY,0,height,100,300));

  fill(map(mouseY,0,height,220,265),218,map(mouseX,0,width,115,130));
  rect(x+112,map(mouseX,0,width,y-30,y+30),23,map(mouseY,0,height,280,120));

  fill(196,map(mouseX,0,width,20,50),56); //changing the G value of the rectangle color
  rect(208,y,23,map(mouseY,0,height,10,300));

  fill(121,114,map(mouseY,0,height,150,240));
  rect(236,y,23,map(mouseY,0,height,170,300));

  fill(map(mouseY,0,height,180,220),95,map(mouseX,0,width,10,60));
  rect(264,map(mouseX,0,width,y-10,y+10),23,map(mouseY,0,height,80,150));

  fill(map(mouseX,0,width,120,150),148,186);
  rect(292,map(mouseX,0,width,y-20,y+20),23,map(mouseY,0,height,300,150));

  fill(map(mouseY,0,height,150,240),75,62);
  rect(320,y,23,map(mouseY,0,height,100,350));

  fill(map(mouseY,0,height,230,250),147,map(mouseX,0,width,40,90));
  rect(348,map(mouseX,0,width,y-30,y+30),23,map(mouseY,0,height,50,250));

  fill(93,map(mouseX,0,width,60,100),166);
  rect(376,y,23,map(mouseY,0,height,200,100));

  fill(map(mouseY,0,height,240,265),218,123);
  rect(404,map(mouseX,0,width,y-40,y+40),23,map(mouseY,0,height,100,300));

  fill(map(mouseY,0,height,180,200),map(mouseX,0,width,30,60),56);
  rect(432,y,23,map(mouseY,0,height,250,100));

  fill(209,90,map(mouseX,0,width,50,80));
  rect(460,map(mouseX,0,width,y-20,y+20),23,map(mouseY,0,height,100,200));

  fill(map(mouseX,0,width,120,140),147,186);
  rect(488,y,23,map(mouseY,0,height,250,100));

  fill(map(mouseY,0,height,195,215),95,(map(mouseX,0,width,30,50)));
  rect(516,map(mouseX,0,width,y-20,y+20),23,map(mouseY,0,height,150,50));

  fill(map(mouseY,0,height,235,255),147,69);
  rect(544,map(mouseX,0,width,y-15,y+15),23,map(mouseY,0,height,40,80));
//used the map tool to change y position
//used map tool to change Y size of rectangle
//used map tool to change various R,G,B values to make a sort of variation between colors
}

This project was really fun! At first I got a slow start because I didn’t know what my four variations would be, but I had the general idea of what I wanted the end result to be. I really like the color palette I chose and my idea to change the mouse pressed came from what I learned about color theory lately.