September 2016 – Page 15 – [OLD – FALL 2016] 15-104 • COMPUTING for CREATIVE PRACTICE

Yugyeong Lee Project – 03

//Yugyeong Lee
//section A (9:30AM)
//yugyeonl@andrew.cmu.edu
//project 3

var x = 320;
var y = 240;
var dir = 1;

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

function draw() {

	//background color change based on position of mouseX
	colorR = map(mouseX, 0, width, 255, 255);
	colorB = map(mouseX, 0, width, 179, 255);
	colorG = map(mouseX, 0, width, 179, 204);
	background(colorR, colorG, colorB);
	noStroke();
	noCursor();

	//random circles with changing sizes
	noStroke();
	fill(0);
	var diam = map(mouseX, 0, width, 0, 100);
	ellipse(width/4, height/4, diam, diam);
	var diam = map(mouseX, 0, width, 0, 75);
	ellipse(width/6, 5 * height/6, diam, diam);
	var diam = map(mouseX, 0, width, 0, 25);
	ellipse(width/2, 4 * height/7, diam, diam);
	ellipse(8 * width/9, 8 * height/9, diam, diam);
	var diam = map(mouseX, 0, width, 0, 50);
	ellipse(width/4, height/4, diam, diam);
	var diam = map(mouseX, 0, width, 0, 50);
	ellipse(4 * width/5, height/2, diam, diam);

	//motionless circles
	ellipse(5 * width/7, 9 * height/12, 20, 20);
	ellipse(6 * width/8, height/9, 15, 15);
	ellipse(3 * width/7, 11 * height/12, 15, 15);
	ellipse(width/3, 3 * height/7, 15, 15);

	//mouse guide (mouseX)
	if (mouseX > x) {
		x += 0.75;
	}
	if (mouseX < x) {
		x -= 0.75;
	}
	strokeWeight(10);
	stroke(255);
	line(x, 0, x, height);
	line(x + 20, 0, x + 20, height);

	//mouse guide (mouseX)
	if (mouseY > y) {
		y += 0.75;
	}
	if (mouseY < y) {
		y -= 0.75;
	}
	strokeWeight(10);
	stroke(255);
	line(0, y, width, y);
	line(0, y + 20, width, y + 20);

	//change the direction of rotation of the cursor
	if (mouseX > width/2) {
		dir = -dir;
	}

	//rotating shape for cursor
	noStroke();
	fill(0);
	push();
	translate(mouseX, mouseY);
	rotate(dir * millis()/500);
	quad(0, 0, -6, 24, 0, 48, 6, 24);
	pop();	

	push();
	translate(mouseX, mouseY);
	rotate(dir * millis()/500);
	quad(0, 0, -24, -6, -48, 0, -24, 6);
	pop();	

	push();
	translate(mouseX, mouseY);
	rotate(dir * millis()/500);
	quad(0, 0, 6, -24, 0, -48, -6, -24);
	pop();	

	push();
	translate(mouseX, mouseY);
	rotate(dir * millis()/500);
	quad(0, 0, 24, 6, 48, 0, 24, -6);
	pop();

	//blackout when any key is pressed
	if (keyIsPressed) {
		fill(0);
		rect(0, 0, width, height);
	}

}

The most challenging part of this project was planning to create a design for the dynamic drawing rather than figuring out the codes.

Dynamic Drawing

I call this drawing the “Rainbow Eraser.” As you move the cursor from left to right, a black rectangle covers the rainbow. As you move back from right to left, the black rectangle is erased.

sketch index

//Arula Ratnakar
//aratnaka
//Section C 
//Dynamic Drawing: Rainbow Eraser

var redX = 0;
var orangeX = 100; //beginning of the orange rectangle
var yellowX = 200;
var greenX = 300;
var blueX = 400;
var purpleX = 500;
var purpleY = 600;
var colorMain = 0; //variable used to create the main white rectangle at the end


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

function draw() {
	noStroke ();
	background (0);
	fill (255, colorMain, colorMain);//fills first rectangle with red (for now)
	rect (redX ,0, orangeX, 600);
	fill ('orange');
	rect (orangeX,0, orangeX, 600);
	fill ('yellow');
	rect (yellowX, 0, orangeX, 600);
	fill ('green');
	rect (greenX, 0, orangeX, 600);
	fill ('blue');
	rect (blueX, 0, orangeX, 600);
	fill ('purple');
	rect (purpleX, 0, orangeX, 600);

	
	if (mouseX < 600) {
		redX = mouseX; //attaches mouseX to the leftmost edge of the red rectangle
	}

	if (mouseX > yellowX) {
		orangeX = mouseX;
	}

	if (mouseX > greenX){
		yellowX = mouseX;
	}

	if (mouseX > blueX){
		greenX = mouseX;
	}

	if (mouseX > purpleX){
		blueX = mouseX;
	}

	if (mouseX > 600) {
		purpleX = mouseX;//as you drag the mouse from left to right, the black background shows through, "erasing" the rainbow
	}

	if (mouseX > 600){
		colorMain = 255; // when you start to drag the mouse back from right to left, the white will "erase" the black box
	}
	

}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>p5.js vers 0.5.2, Edit index.html to Change This Title</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>

    <!-- Uncomment the lines below to include extra p5 libraries, or 
         use template-all or template-all-min:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.js"></script>
    -->

    <script src="sketch.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>

Sihand – Project 03 – Dynamic Drawing – Snowflakes

sketch

//Sihan Dong
//sihand@andrew.cmu.edu
//Section B
//Project 03 snowflakes: this program is a interactive art

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

function draw() {
	background(13,33,61);
  noStroke();
  fill(255);

//leftmost snowflake
//the diameter of the center circle is set between 20 and 70
//three layers circulate at the same speed,
//while the second layer is the satellie of the first, and the thrid the second
  var size1 = 50 * noise(0.005*frameCount + 60);
  var circle1 = constrain(size1, 20,70);
//defining the center circle
  ellipse(width/2-150, height/2, circle1, circle1);
//if cursor is placed within the circle snowflake appears
if (dist(mouseX, mouseY, width/2-150, height/2) < circle1/2) {
  var ang1 = TWO_PI * 0.005*frameCount + 20;
  var ang3 = TWO_PI * 0.005*frameCount + 30;
  for (var i = 0; i < 8; i++) {
    push();
    translate(width/2-150, height/2);
  	rotate(ang1 + TWO_PI * i / 8);
  	translate(100, 0);
  	ellipse(0, 0, 20, 20);
  		  if (frameCount >300) {
            push();
  			    rotate(ang1 + TWO_PI * 1 / 6);
  			    ellipse(50, 0, 10, 10);
                if (frameCount > 600) {
                    push();
                    translate(80,0);
                    rotate(ang1 + TWO_PI * 1 / 6);
      			        ellipse(0, 0, 10, 10);
                    rotate(ang3);
                    pop();
                  }
            pop();
            }
  		pop();
    }
}


//middle snowflake
//defining the center circle
var size2 = 80 * noise(0.005*frameCount + 60);
var circle2 = constrain(size2, 30,80);
ellipse(width/2, height/2, circle2, circle2);
//varying distance between layers
var rx = 200 * noise(0.005*frameCount + 40);
var tx = 150 * noise(0.005*frameCount + 50);
var circle3 = constrain (size2, 10, 20);
if (dist(mouseX, mouseY, width/2, height/2) < circle1/2) {
  var ang1 = TWO_PI * 0.005*frameCount + 20;
  var ang2 = TWO_PI * 0.0005*frameCount + 10;
  var ang3 = TWO_PI * 0.005*frameCount + 30;
  for (var i = 0; i < 6; i++) {
    push();
    translate(width/2, height/2);
    rotate(ang1 + TWO_PI * i / 6);
    translate(tx, 0);
    ellipse(0, 0, circle3, circle3);
    rotate(ang3);
        if (frameCount >200) {
            for (var j = 0; j < 3; j++) {
            push();
            rotate(ang2 + TWO_PI * j / 15);
            //three satellites will go around the second layer closely
            incre = 10;
            ellipse(rx, 0, 9, 9);
            pop();
            }
        }
      pop();
    }
}


//rightmost snowflake
var size1 = 100 * noise(0.005*frameCount + 60);
var circle1 = constrain(size1, 30,130);
//the diameter of the center circle is set between 30 and 130
ellipse(width/2+150, height/2, circle1, circle1);
//defining the center circle
var ux = 150 * noise(0.005*frameCount + 30);
if (dist(mouseX, mouseY, width/2+150, height/2) < circle1/2){
  for (var i = 0; i < 8; i++) {
    push();
    translate(width/2+150, height/2);
    rotate(TWO_PI * i / 8);
    //rotate(ang1 + TWO_PI * i / 8);
 	  translate(ux*1.25, 0);
  	ellipse(0, 0, 20, 20);
  		  if (frameCount >200) {
            for (var j = 0; j < 6; j++){
            push();
  			    rotate(TWO_PI * j / 6);
            translate(0.5*ux,0);
  			    ellipse(0, 0, 10, 10);
              if (frameCount > 400) {
                for (var j2 = 0; j2 < 6; j2++){
                  push();
      			      rotate(TWO_PI * j2 / 6);
                  translate(ux*0.25,0);
      			      ellipse(0, 0, 5, 5);
                  rotate(ang3);
                  pop();
              }
            }
          pop();
           }
         }
  		pop();
    }
}

}

This project was inspired by one of the rotation examples this week. During my experimenting, I found some interesting way to arrange the rotating figures. The results remind me of the formation of snowflakes so that’s how it got its name.

As a side note, because the size of the canvas is limited, the snowflakes overlap sometimes, which would influence the visual. Also the display is cropped off because of WordPress.

Brandon Darreff-Project-03-Dynamic-Drawing

bdarreff_project03

//Brandon Darreff

//Section A

//bdarreff@andrew.cmu.edu

//Project-03




function setup() {
    createCanvas(600, 400, WEBGL);
}

function draw() {

	var orbitMe = frameCount * 0.001;	//Mercury orbit speed
	var orbitV = frameCount * 0.0001;	//Venus orbit speed
	var orbitE = frameCount * 0.01;	//Earth orbit speed
	var orbitM= frameCount * 0.01;	//Mars orbit speed
	var orbitJ = frameCount * 0.07;	//Jupiter orbit speed
	var orbitS = frameCount * 0.01;	//Saturn orbit speed
	var orbitU = frameCount * 0.05;	//Uranus orbit speed
	var orbitN = frameCount * 0.05; //Neptune orbit speed
	var res = 100 //resolution of spheres

	background(0);

	//sunlight tracked to mouse position
	var sunlightY = (mouseY / height - 0.5) * (-2);
	var sunlightX = (mouseX) / width - 0.5;
	pointLight(250, 250, 250, sunlightX, sunlightY, 0);
	

	//Mercury
	translate(-width, -350);
	push();
	//orbit
	rotateZ (orbitMe);
	rotateX (orbitMe);
	rotateY (orbitMe);
	//surface color
	ambientMaterial(100);
	sphere(20, res);
	pop();

	//Venus
	translate(height / 4, height / 4);
	push();
	//orbit
	rotateZ (orbitV);
	rotateX (orbitV);
	rotateY (orbitV);
	//surface color
	ambientMaterial(174, 103, 58);
	sphere(30, res);
	pop();

	//Earth
	translate(height / 4, height / 4);
	push();
	//orbit
	rotateZ (orbitE);
	rotateX (orbitE);
	rotateY (orbitE);
	//surface color
	ambientMaterial(32, 67, 100);
	sphere (35, res);
	pop();

	//object orbiting earth
	push();
	ambientMaterial(255, 30);
	rotateY(orbitE);
	rotateX(orbitE)
	ellipse(-87, 90, 200, 100, 100, 0);
	pop();

	//Mars 
	translate(height / 4, 70);
	push();
	//orbit
	rotateZ (orbitM);
	rotateX (orbitM);
	rotateY (orbitM);
	//surface color
	ambientMaterial(131, 51, 44);
	sphere(25, res);
	pop();

	//object orbiting mars
	push();
	ambientMaterial(255, 30);
	rotateZ(orbitE);
	ellipse(-87, 90, 100, 80, 100, 0);
	pop();

	//Jupiter
	translate(200, 120);
	push();
	//orbit
	rotateZ (orbitJ);
	rotateX (orbitJ);
	rotateY (orbitJ);
	//surface color
	ambientMaterial(199, 142, 87);
	sphere(150, res);
	pop();
	
	//object orbiting jupiter
	push();
	ambientMaterial(255, 30);
	rotateX(orbitJ);
	ellipse(-87, 90, 200, 100, 100, 0);
	pop();

	//Saturn
	translate(260, 120);
	push();
	//orbit
	rotateZ (orbitS);
	rotateX (orbitS);
	rotateY (orbitS);
	//surface color
	ambientMaterial(210, 169, 121);
	sphere(120, res);
	pop();

	//object orbiting saturn
	push();
	ambientMaterial(255, 30);
	rotateX(orbitS);
	rotateY(orbitS);
	ellipse(-87, 90, 500, 100, 100, 0);
	pop();

	//Uranus
	translate(210, 75);
	push();
	//orbit
	rotateZ (orbitU);
	rotateX (orbitU);
	rotateY (orbitU);
	//surface color
	ambientMaterial(104, 179, 205);
	sphere(70, res);
	pop();

	//Neptune
	translate(180, 75);
	push();
	//orbit
	rotateZ (orbitN);
	rotateX (orbitN);
	rotateY (orbitN);
	//surface color
	ambientMaterial(97, 136, 202);
	sphere(70, res);
	pop();

	//object orbiting neptune
	push();
	ambientMaterial(255, 25);
	rotateX(orbitN);
	rotateY(orbitN);
	rotateZ(orbitN);
	ellipse(-87, 90, 300, 100, 100, 0);
	pop();

}

With this project I focused on creating a dynamic drawing which mimics changing sunlight on spheres meant to represent planets. Each planet rotates around its own axis at a rate derived from its respective actual rotation speed and additional objects are set into motion around various planet axises. The sunlight projected onto the spheres is tracked by the position of the mouse to add another dynamic variable to the overall image.

Looking Outwards-03

The artist I chose is named Josh Harker. He specializes in 3D printed artwork. I admire the intricate patterns that manifest through his works. I am not sure what algorithms he uses to create these works.
His pieces are all delicate and intricate, and show animals, skulls, and human figures.

Home

craniaanatomicafiligrebinary_joshuaharker

Christine Kim – Project-03

sketch

//Christine Kim
//Section A (9:00)
//haewannk@andrew.cmu.edu
//Project-03

// Note: there appears to be a bug in the p5-embed code, and
// Christine's original code could not be displayed correctly.
// I modified the code by putting spaces around <, >, and &
// operators. -Roger Dannenberg

var speed = 1000;
var speedc = 1000;
var speed2 = 1;
var speed3 = 2;
var speed4 = 1.5;
var r = 50;
var s = 200;
var t = 350;
var p = 100;
var q = 300;
var z = 500;
var u = 60;
var i = 260;
var o = 430;
var j = 30;
var k = 270;
var l = 510;
var a = 340;
var b = 0;
var w1 = 300;
var h1 = 480;
var c = 490;
var d = 190;
var e = 290;
var w2 = 50;
var h2 = 50;
var x = 320;
var y = 240;
var diffx = 0;
var diffy = 0;
var targetX = 320;
var targetY = 320;


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

function draw() {
    background(167,184,251);

    //clicking mouse to change from circles to squares
    push();
    fill('pink');
    ellipse(505,90,30,30);
    if (mouseIsPressed)
	if (mouseButton==LEFT) {
	    rect(490,75,30,30);
	}
    ellipse(575,90,30,30);
    if (mouseIsPressed)
	if (mouseButton==LEFT) {
	    rect(560,75,30,30);
	}
    ellipse(435,90,30,30);
    if (mouseIsPressed)
	if (mouseButton==LEFT) {
	    rect(420,75,30,30);
	}
    ellipse(505,390,30,30);
    if (mouseIsPressed)
	if (mouseButton==LEFT) {
	    rect(490,375,30,30);
	}
	ellipse(575,390,30,30);
    if (mouseIsPressed)
	if (mouseButton==LEFT) {
	    rect(560,375,30,30);
	}
    ellipse(435,390,30,30);
    if (mouseIsPressed)
	if (mouseButton==LEFT) {
	    rect(420,375,30,30);
	}
    pop();
    
    //rain falling
    push();
    fill(0);
    rect(50,r,2,15);
    r+=speed2;
    if (r > height+25) {
	r=-25;
    }
    rect(50,s,2,15);
    s+=speed2;
    if (s > height+25) {
	s=-25;
    }
    rect(50,t,2,15);
    t+=speed4;
    if (t > height+25) {
	t=-25;
    }
    rect(100,p,2,15);
    p+=speed3;
    if (p > height+25) {
	p=-25;
    }
    rect(100,q,2,15);
    q+=speed2;
    if (q > height+25) {
	q=-25;
    }
    rect(100,z,2,15);
    z+=speed3;
    if (z > height+25) {
	z=-25;
    }
    rect(250,u,2,15);
    u+=speed4;
    if (u > height+25) {
	u=-25;
    }
    rect(250,i,2,15);
    i+=speed2;
    if (i > height+25) {
	i=-25;
    }
    rect(250,o,2,15);
    o+=speed4;
    if (o > height+25) {
	o=-25;
    }
    rect(200,j,2,15);
    j+=speed2;
    if (j > height+25) {
	j=-25;
    }
    rect(200,k,2,15);
    k+=speed4;
    if (k > height+25) {
	k=-25;
    }
    rect(200,l,2,15);
    l+=speed3;
    if (l > height+25) {
	l=-25;
    }
    pop();

    //5 joined ellipses or flower
    rect(143,150,15,height);//stem
    push();  //1
    translate(150,150);
    rotate(millis()/speedc);
    translate(-150,-150);
    push();  //2
    noStroke();
    ellipse(150,100,30,100);
    push();  //3
    translate(110,129);
    rotate(radians(288));
    ellipse(0,0,30,100);
    pop();   //2
    push();  //3
    translate(126,180);
    rotate(radians(216));
    ellipse(0,0,30,100);
    pop();   //2
    push();  //3
    translate(175,180);
    rotate(radians(144));
    ellipse(0,0,30,100);
    pop();  //2
    push(); //3
    translate(191,129);
    rotate(radians(72));
    ellipse(0,0,30,100);
    pop();  //2
    pop();  //1
    pop();  //0

    //changing flower color by pressing certain keys
    if (keyIsPressed) {
	if ((key=='p')||(key=='P')) {
	    fill(239,92,120); //pink
	    rect(145,150,15,height);
	}
    }
    if (keyIsPressed) {
	if ((key=='y')||(key=='Y')) {
	    fill(255,255,115); //yellow
	    rect(145,150,15,height);
	}
    }
    if (keyIsPressed) {
	if ((key=='g')||(key=='G')) {
	    fill(100); //gray
	    rect(145,150,15,height);
	}
    }

    //four circles
    //only appears when mouse is on the right half of canvas
    //red rotating circle
    if ((mouseX > a) & (mouseX < a+w1) && 
       (mouseY > b) && (mouseY < b+h1)) {
	fill(237,58,53);
    } else {
	fill(167,184,251);
    }
    push();
    translate(c,height/2);
    rotate(millis()/(speed/2));
    translate(0,-50);
    ellipse(0,0,w2,h2);
    pop();

    //pink rotating circle
    if ((mouseX > a) & (mouseX < a+w1) && 
       (mouseY > b) && (mouseY < b+h1)) {
	fill(246,139,235);
    } else {
	fill(167,184,251);
    }
    push();
    translate(c,height/2);
    rotate(millis()/(speed/2));
    translate(0,50);
    ellipse(0,0,w2,h2);
    pop();

    //blue rotating circle
    if ((mouseX > a) & (mouseX < a+w1) && 
       (mouseY > b) && (mouseY < b+h1)) {
	fill(15,113,255);
    } else {
	fill(167,184,251);
    }
    push();
    translate(c,height/2);
    rotate(-millis()/(speed/2));
    translate(-50,0);
    ellipse(0,0,w2,h2);
    pop();

    //yellow rotating circle
    if ((mouseX > a) & (mouseX < a+w1) && 
       (mouseY > b) && (mouseY < b+h1)) {
	fill(245,250,132);
    } else {
	fill(167,184,251);
    }
    push();
    translate(c,height/2);
    rotate(-millis()/(speed/2));
    translate(50,0);
    ellipse(0,0,w2,h2);
    pop();
    
    //colored circles spinning gradually faster and faster when mouse is above middle and slower and slower below the middle
    if (mouseY > height/2) {
  	speed+=(speed+10) > 500;
    } else {
  	speed-=(speed-50) > 100;
    }

   
    //mouse pointer
    diffx = mouseX-x;
    x=x+diffx;
    diffy = mouseY-y;
    y=y+diffy;
    noStroke();
    fill(158,236,181);
    rect(x-10,y-10,20,20);
	
}

My process in this project was looking for ways to try many functions such as rotation, translation, mouse click, key click, and etc. My left side of canvas is of a flower with falling rain while my right side of canvas contains geometric shapes.

Denise Jiang-Looking-Outwards-03

Anthozoa By Neri Oxman
2012, 3D Print
Museum of Fine Arts, Boston

Neri Oxman
2012, 3D Print
Museum of Fine Arts, Boston

Anthozoa is a 3D printed fashion project created by Neri Oxman and fashion designer Iris Van Herpen. It is debuted in the 2013 Paris Fashion Week. I admire how this project represent technology infused art, especially that fashion is a highly customized industry, so there must be variables that controls the individual module. The 3D printed skirt is powered by Stratasys’ Objet Connex multi-material 3D printing technology, which allows both soft and hard materials to be printed in a single build. Variables also can be changed in the 3D model to fit on the show model. Oxman incorporated aesthetic values into the project. The skirt and cape are tectonic that they are modular and their orientation and sizes vary. Getting inspirations from anthozoa, Oxman mimicked its form and texture to create creative high-end fashion.

link to Neri Oxman

Denise Jiang-Project-03-Dynamic-Drawing

Move mouse to the left,the size of the circles will be smaller; move mouse to the right, the size of the circles will be bigger. Mouse X and Mouse Y also control colors of the circles.
sketch

var a=100;//square size
var b=200;//circle size
var c=100;//x,y of squares and circles

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

function draw() {
	background(220);

	fill(232,180,mouseY);
	strokeWeight(5);
	ellipse(mouseX,height/2,480,480);

	//element 1
	push()
	translate(width/2,height/2);
	rotate(millis()/500);
	strokeWeight(5);
	fill(mouseX,155,mouseY);
	rect(-c,-c,a,a);
	ellipse(-c,-c,b,b);
	pop();


	//element 2
	push()
	translate(width/2,height/2);
	rotate(millis()/-500);
	strokeWeight(5);
	fill(234,mouseX,mouseY);
	rect(-c,-c,a,a);
	ellipse(-c,-c,b,b);
	pop();

	//element 3
	push()
	translate(width/2,height/2);
	rotate(millis()/-500);
	strokeWeight(5);
	fill(120,mouseX+50,178);
	rect(0,0,a,a);
	ellipse(c,c,b,b);
	pop();

	//element 4
	push()
	translate(width/2,height/2);
	rotate(millis()/500);
	strokeWeight(5);
	fill(mouseX,202,178);
	rect(0,0,a,a);
	ellipse(c,c,b,b);
	pop();

	//element 4-2
	push()
	translate(width/2,height/2);
	rotate(millis()/2000);
	strokeWeight(5);
	fill(mouseX,202,178);
	rect(0,0,a,a);
	ellipse(c,c,b,b);
	pop();

	//element 2-2
	push()
	translate(width/2,height/2);
	rotate(millis()/-2000);
	strokeWeight(5);
	fill(234,mouseX,mouseY);
	rect(-c,-c,a,a);
	ellipse(-c,-c,b,b);
	pop();


	//element 3-2
	push()
	translate(width/2,height/2);
	rotate(millis()/-2000);
	strokeWeight(5);
	fill(120,mouseX+50,178);
	rect(0,0,a,a);
	ellipse(c,c,b,b);
	
	pop();

	//element 1-2
	push()
	translate(width/2,height/2);
	rotate(millis()/2000);
	strokeWeight(5);
	fill(mouseX,155,mouseY);
	rect(-c,-c,a,a);
	ellipse(-c,-c,b,b);
	pop();

	if (mouseX>width/2){
		b+=0.5;

	}

	if (mouseX<width/2){
		b=b-0.5;

	}

}

I used basic geometries(squares and circles) in this project. There are two layers of the elements rotating in different speed and directions. Mouse X controls the sizes of the circles and Mouse X, Mouse Y together change the colors.

Looking Outwards- 03

This project, Kinetic Dress, was created by a two-person team called “Nervous System.”
The purpose of this project was not only to print a flexible, wearable 3d dress but also to print it efficiently and all in one piece. They used a physics simulator to “randomly” fold the dress small enough that it could be printed in one large 3D printer. This simulator probably used primary random variables, folding the dress using variables like hinge width and size. Kinetic Dress holds constant its aesthetic which is computer-generated but invokes biological structures and patterns. It’s inspiring because it’s not only a technological feat but an important milestone in the world of fashion.

http://n-e-r-v-o-u-s.com/

nervous-system-kinematic-4d-dress-designboom041
Photo credit to Photoboom.com

Jinhee Lee – Looking Outwards 03

27976639182_3661b68824_z

“SUV,” by Dot San, uploaded in 2016.

The author, dubbed Dot San, used an online 3D modeler software called “Rhino 3D.” Based on the look of this particular image, as well as some of his other scale models being covered with white grid patterns, I guessed that the technique at work was polygon mesh, a technique in 3D animation where character models’ textures are composed of massive numbers of polygons (the vertices of which can be repositioned) that round out to give an organic shape. To my surprise, this was not the case.

Rhino 3D actually uses what’s called the NURBS (Non-uniform rational Basis spline) mathematical model, which calculates precise representation of curves and other freeform surfaces. To be more specific, according to its info page, surfaces generated by NURBS are “functions of two parameters mapping to a surface in three-dimensional space,” the shape of which is “determined by control points” computed by taking a weighted sum of the control points.

For some of his works, Dot San has scaled down their size by a selected factor and sent the model into a 3D printer. I imagine he does this so that, with a zoomed in perspective, he can afford more detail to the model which would translate into the printed object. I appreciate this touch of subtlety.

Link to specific model in blog post.
Link to a Photostream of author’s work.