Category: Section E

svitoora – 03 Looking Outwards

This chair is designed by a computer. (https://www.wired.com/2016/10/elbo-chair-autodesk-algorithm/)

Computing Optimal Form

If design is truly grounded in the sciences of human factors, then a singular optimal form is identifiable, achievable, and thus computable. The Elbo Chair is an algorithmically generated chair. “Arthur Harsuvanakit and Brittany Presten of Autodesk’s generative design lab created the chair, but they didn’t design it”.

Autodesk Project Dreamcatcher’s parametric algorithmic design. (https://autodeskresearch.com/projects/dreamcatcher)

According to the HFES (Human Factors and Ergonomics Society), many cognitive and physical anthropometric mathematical models already exist, and finding the right design solutions sometimes is a matter of solving an optimization equation. The Elbo chair is an example of an algorithmic optimization design process. By specifying an aesthetic seed “inspirational” from a Dutch chair CAD model, a weight bearing goal for humans, and the ergonomics that the chair must have arm clearances, the chair is thus algorithmically generated. The software keeps on iterating through the algorithm by shaving off dead weight, reducing joinery stress, and material usage. Without a human’s intervention, the design would have gotten bonnier and bonnier. The final result is a combination of algorithmic generation and human intuition. Ocassionally in the process of the software’s countless iteration, a human would pick a design which the software will once against propogate a new lineage of designs based off. “While the look and feel of the final object did not originate in the designer’s mind, it required the designer’s sign-off”. The final form is then CNC and assembled by hand.

The algorithm’s minimized joinery stress for human assembly after CNC fabrication.

https://www.wired.com/2016/10/elbo-chair-autodesk-algorithm/

elizabew-Project-03-Dynamic-Drawing

Reflection

Admittedly, I actually did have a more solid idea before coming up with this program — I was planning on creating a sun going up and down, while make a face squint when the sun was all the way up; however I ended up having too much fun playing around with the patterns and the rotation action that I ended up distancing myself from that initial idea. I found it so exciting to see the patterns that would form depending on how fast it is going and where the mouse was on the image. Overall, the final product reminds me of strobe lights or fireworks — and even though it isn’t as obvious as my initial idea, I still think it looks pretty cool.

sketch

//Elizabeth Wang
//Section E
//elizabew@andrew.cmu.edu
//Project-03: Dynamic Drawing


var angleSecond = 0;
var angleMiddle = 0;
var angleThird = 0;
var angletriangle = 0;
var colorA = 250;
var colorB = 50;

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

function draw() {
background(80, 100, 200);

colorA = mouseX;
colorB = mouseY;

noStroke();

//second from middle
fill(200, 100, colorA); // all colors are random, constantly
push();//rotate
translate(mouseX, mouseY); //moves with mouse
rotate(angleSecond);
translate(0, -140); //location
rect(0, 0, 130, 12);
pop();//rotate
angleSecond += max(min(mouseY/10, 1), mouseX/10); //gets faster as you move right

//middle
fill(50, 100, colorB);
push();//rotate
translate(mouseX, mouseY); //moves with mouse
rotate(angleMiddle);
rect(0, 0, 200, 25);
pop();//rotate
angleMiddle += max(min(mouseY/10, 1), mouseX/10); //gets faster as you move down

//third
fill(230, 60, colorA);
push();
translate(width/2, height/2); //doesn't move with the mouse, constant background
rotate(angleThird);
translate(0, 200);
scale (mouseX/100, mouseY/100); // changed size as it moves
rect(0, 0, 220, 35);
pop();
angleThird += max(min(mouseY/10, 1), mouseX/10);

//third but the other direction
fill(200, 200, colorB);
push();
translate(width/2, height/2);
rotate(-angleThird);
translate(0, 200);
scale (mouseX/100, mouseY/100); // changed size as it moves
rect(0, 0, 220, 35);
pop();
angleThird += max(min(mouseY/10, 1), mouseX/10);

//triangle
fill(250, 150, colorA);
push();
translate(mouseX, mouseY);
rotate(-angletriangle);
translate(0, 20);
triangle(-20, 60, 0, 20, 20, 60);
pop();
angletriangle += max(min(mouseY/10, 1), mouseX/10);

//rotating while also going around
fill(150, 200, colorB);
push();
translate(mouseX, mouseY);
rotate(angleSecond);
translate(0, 200);
rect(0, 0, 300, 40);
pop();
angleSecond += max(min(mouseY/10, 1), mouseX/10);


}

svitoora – 03 Dynamic Gravity Drawings

Gravity

//
// Supawat Vitoorapakorn
// Svitoora@andrew.cmu.edu
// Section E
//
// Gravity is a point mass dynamic drawing inspired
// from physics, nature, and falling off a skateboard.
// f = G (m1*m2)/d^2
// f = G sum(m)/(d from avg)^2


// World Model Setup /////////////////////////////////////
var w = 480;
var h = 640;
var t = 1; // time variable
var g = .0025; // gravity
var count = 0; // global count of objects

var ball;
var balls = []; // Array of objects
var ball_size = w * .010 // Default object size

var max_count = 30;
var auto_every = 35;
var max_line = 1000; // Prevents crash


// Control ///////////////////////////////////////////////

// Creates new object in system given (x,y)
function ball_create(x, y) {
	this.x = x;
	this.y = y;
	this.vx = 0;
	this.vy = 0;
	this.r = ball_size;
	this.m = 1;
	this.alpha = 255
}

// Add new object and delete oldest object
function mouseDragged() {
	if (t % 10) {
		balls.push(new ball_create(mouseX, mouseY));
	}
	if (balls.length >= max_count) {
		balls.splice(0, 1)
	}
}

// Add new object and delete oldest object
function mousePressed() {
	balls.push(new ball_create(mouseX, mouseY));
	if (balls.length >= max_count) {
		balls.splice(0, 1)
	}
}


// World /////////////////////////////////////////////////

// Maintain global count of balls
function count_balls(balls) {
	count = balls.length;
}

// Maintain global mass of system
function sum_mass(balls) {
	sum_m = 0;
	for (i in balls) {
		sum_m += balls[i].m;
	}
	return sum_m;
}

// Determines the system's average position X
function average_posX(balls) {
	if (balls.length == 0) {
		return w / 2;
	};
	var sum_x = 0;
	for (i in balls) {
		sum_x += balls[i].x;
	}
	avg = sum_x / balls.length
	return avg;
}

// Determines the system's average position Y
function average_posY(balls) {
	if (balls.length == 0) {
		return h / 2;
	};
	var sum_y = 0;
	for (i in balls) {
		sum_y += balls[i].y;
	}
	avg = sum_y / balls.length;
	return avg
}

// Apply gravity for all objects in the system
function gravity(balls) {
	var avg_x = average_posX(balls);
	var avg_y = average_posY(balls);
	var speed = .1 //0-1 Multuplier for controlling velocity of attratction
	for (i in balls) {
		d = dist(balls[i].x, balls[i].y, avg_x, avg_y);
        ds = map(d,0,w/2,1,0);  // used to simulate d^2
		
        // Gravity X
        if (balls[i].x > avg_x) {
			balls[i].x *= 1 - (g * (count * speed));
		} else { balls[i].x *= 1 + (g * (count * speed+ds));}

        // Gravity Y
		if (balls[i].y > avg_y) {
			balls[i].y *= 1 - (g * (count * speed))
		} else { balls[i].y *= 1 + (g * (count * speed+ds));}
	}
}

// Add object to system in the middle; // Used at setup()
function add_ball(balls) {
	balls.push(new ball_create(w / 2, h / 2));
}

// Prevents software from crashing
// from too many objects beyond max_count
function death(balls, t) {
	if (balls.length >= max_count) {
		balls.splice(0, 1);
		for (i in balls) {
			balls[i].r *= .99;
		}
	}
}

// Connects all the object in the system via a line
function draw_line(balls) {
	lines = 0
	alpha = 255 * .2

	if (lines < max_line) {
		for (i in balls) {
			var x_1 = balls[i].x;
			var y_1 = balls[i].y;
			for (i in balls) {
				var x_2 = balls[i].x;
				var y_2 = balls[i].y;
				stroke(255, 255, 255, alpha);
				line(x_1, y_1, x_2, y_2);
				lines += 1;
			}
		}
	}
}

// SETUP
function setup() {
	createCanvas(w, h);
	g = .0025;
	background(50);
	balls.length = 0; // Kill all objects in system
	add_ball(balls);
}

// Refreshes the systems with new objects
// Removes old objects and add new objects
function auto_refresh(balls, t) {
	// Starts refreshing system at 5 objects
	// every auto_every interval.
	if (t % auto_every == 0 & balls.length > 5) {
		balls.splice(0, 1);
	}
	X = constrain(mouseX, 1, w);
	Y = constrain(mouseY, 1, h)
	if (t % auto_every == 0) {
		balls.push(new ball_create(X, Y));
	}

	// Resets the system to 8 objects once every 500 ms
	// This prevents overload; Array starts at [0]
	if (t % 500 == 0 & balls.length > 8) {
		balls.length = 7;
	}
}

// Draw ////////////////////////////////////////////////////

// Draw all objects in systems mapped by distance from avg
function draw_balls(balls) {
	for (ball in balls) {
		noStroke();
		var avg_x = average_posX(balls);
		var avg_y = average_posY(balls);
		var d = dist(balls[ball].x, balls[ball].y, avg_x, avg_y);

		// Size and Alpha of Ball is a function of distance
		var alpha = map(d, balls[ball].r, w / 2, 255, 0);
		var size = map(d, 0, w / 2, .5, -1.5) //max to min

		fill(255, 255, 255, alpha);
		ellipse(balls[ball].x, balls[ball].y,
			balls[ball].r * (2 + size),
			balls[ball].r * (2 + size));
	}
}


// Execute /////////////////////////////////////////////////
function draw() {
	background(50);
	noStroke();
	// Update World
	t = t + 1;
	count_balls(balls);
	auto_refresh(balls, t);
	if (balls.length > 1) {
		gravity(balls);
	}
	death(balls, t);

	// Draw World
	draw_line(balls);
	draw_balls(balls);
}

Physics

 Gravity is a point mass dynamic drawing inspired from physics, nature, and falling off a skateboard. I wanted to create a systematic representation of mass attracts mass. To do this I was inspired by the physics formula:

Image result for f = m1m2

The problem with this forumla is that it is meant for physicist dealing with a two body system. In my case, I wanted a forumla that worked with multiple bodies in a system algorithmically. After sketching for a while with equations on the white board, I realized that that the problem I was trying to solve was much simplier than I expected.

Trying to figure out the algorithm behind multiple bodied system gravity.

Essentially the problem boils down to averages. If all the object in the system had a mass of 1, then the center of mass of the system would be at the average coordinate position of every point mass. By definition this is the centroid of the system.

Related image
Center of gravity is by definition the centroid of a multiple body system.

After defininig the centroid, I simply make every object in the system moves towards it. To replicate d^2’s effect on speed, I use a position *= and /= function, in addition to a mapping function of speed based off distance away from the centroid.

Model-View-Controller  (MVC)

This programs uses the MVC framework taught in 15-112. Objects are models are added to an array, modfified by the controller, and then representated through view functions. Because of the complexity of this code, I used to object-oriented programming to organize my variables. I didn’t quite understand object-based methods in javascript yet, so I worked around them.

Demo and Project Requirments:

Press and hold.

To sastify the project requirement, there are no random or non-deterministic element. Every function is deterministic, therefore given the exact same mouse input the Gravity will create the exact same drawing. The variables that are being altered in how the image is being created are: size, position, opacity, angle, etc.

Stills from Gravity: Slow vs Fast Drawing

SaveSave

SaveSave

SaveSave

dayoungl – LookingOutwards 03

 

Iris Van Herpen SS11 <Crystallization> runway
Iris Van Herpen SS11 – Water Dress

Iris Van Herpen is a fashion designer who experiments with wide variety of subjects materials to fabricate her garments. Transforming industrial materials such as epoxy to high-end fashion, Harpen plays between the realm of fashion and technology. I first saw Iris Van Herpen’s work exhibited at Carnegie Museum of Art. When I entered the exhibition hall, I saw dresses that were unconventional and stunning- dresses that I have never seen elsewhere. Her dresses were not made from fabrics like other designers. Among her many dresses, I was especially drawn to her water dresses. Her water dresses were part of her couture series “Crystallization”, which inspired by the collaboration work between Herpen and Benthem Crouwel Architect. 

Benthem Crouwel’s design for a new extension to Amsterdam’s Stedelijk Museum had earned the nickname ‘bath tub’. This inspired Van Herpen to design a dress that would fall around the wearer like a splash of water, like being immersed in a warm bath, and to express in the collection the different states, structures and patterns of water. Noteworthy is that in this collection Van Herpen presents her first 3D-print that she created in collaboration with the London-based architect Daniel Widrig and that was printed by .MGX by Materialise.

Water dresses have very organic shape to them. However, they were intricately planned out for 3d prototyping. From the notes I took from the visit to the CMOA, she faced multiple difficulties and finding an adequate material that could be used for fabrication of this dress was one of them. I believe the material used for the water dresses was acrylic. I was able to find Herpen’s interview on this. When asked about the the procedures of making her water dresses, she commented “It’s a type of acrylic made especially for me that stays transparent after you heat it up. You heat it with hot-air guns and then transform the shapes with metal pliers. It has its own mind and you can never have full control over it. But I really like that. You almost have a relationship with it. I’m doing a project in March with SHOWstudio where I will show how it’s made.” (http://www.dazeddigital.com/fashion/article/15493/1/qa-iris-van-herpen). She also states that she was first drawn to 3d printing technology because she liked the visualization process from her design for the human body, which is 3d, to 3d prototypes rather than having to transfer her design to 2d sketches, and then to 3d form.

 

yoonyouk-project03-dynamicdrawing

sketch_project03

//Yoon Young Kim
//Section E
//yoonyouk@andrew.cmu.edu
//Project-03

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

}

function draw() {

    angleMode(DEGREES);

    var a = mouseX
    var b = mouseY

    //underwater background change
    //This will change the color values as the mouse moves down
    //Water will change into a darker blue
    var Rx = map(b,0,height,116,20);
    var Gx = map(b,0,height,188,21);
    var Bx = map(b,0,height,252,138);

    noStroke();
    fill(Rx, Gx, Bx);
    rect(0, 0, 640, 480);

    
    //SCUBA DIVER
    // The tiny figure will follow the mouse
    
    //head
    noStroke();
    fill(13, 0, 69);
    ellipseMode(CENTER);
    ellipse(a, b+10, 40, 40);
   
   //eyes
    stroke(247, 209, 9);
    strokeWeight(3);
    fill(224, 162, 115);
    rect(a-15, b+5, 30, 15);

    //eyeballs
    noStroke();
    fill(0);
    ellipse(a-5, b+15, 5, 5);
    ellipse(a+5, b+15, 5, 5);


    //body
    noStroke();
    fill(13, 0 , 69);  
    rect(a-20, b+25, 40, 60);


    //SCUBA DIVER ARMS/LEGS

    //left hand
    //left hands moves from 80 below the mouse to 5 above the mouse
    var lefthand = map(b, 0, height, b+80, b-5);

    stroke(13, 0, 69);
    strokeWeight(5);
    line(a-15, b+40, a-50, lefthand);

    //moving the right hand
    //right hands moves from 80 below the mouse to 5 above the mous
    var righthand = map(b, 0, height, b+80, b-5);

    stroke(13, 0, 69);
    strokeWeight(5);
    line(a+15, b+40, a+50, righthand);



    //left leg

    //moving left foot in a rotating manner using mapping
    var leftfootX = map(b, 0, height, a-15, a-70);
    var leftfootY = map(b, 0, height, b+140, b+60);
    stroke(13, 0, 69);
    strokeWeight(5);
    line(a-15, b+80, leftfootX, leftfootY);


    //right leg
    //moving right foot in a rotating manner using mapping
    var rightfootX = map(b, 0, height, a+15, a+70);
    var rightfootY = map(b, 0, height, b+140, b+60);
    stroke(13, 0, 69);
    strokeWeight(5);
    line(a+15, b+80, rightfootX, rightfootY);

    //SMILE
    noFill();
    if (b < 100){
    stroke(247, 72, 79);
    strokeWeight(2);
    arc(a, b+20, 5, 5, 0, 180);
    }

    if (b >= 100 & b < 300){
    stroke(247, 72, 79);
    strokeWeight(2);
    ellipse(a, b+20, 5, 5);
    }
    
    if (b >= 300 & b <= 480){
    stroke(247, 72, 79);
    strokeWeight(2);
    arc(a, b+20, 5, 5, 180, 360);
    }

    //BUBBLES
    //bubble1

    //bubble location
    var bubbleX = a+40;
    var bubbleY = b-20;

    //expanding the bubble sizes as the mouse moves up and down
    var bubbleSize = map(b, 0, height, 2,25);
    noStroke();
    fill(160, 222, 255);
    ellipse(bubbleX, bubbleY, bubbleSize, bubbleSize);

    //bubble2
    var bubbleX = a+60;
    var bubbleY = b-50;
    var bubbleSize = map(b,0,height,4, 40);
    noStroke();
    fill(160, 222, 255);
    ellipse(bubbleX, bubbleY, bubbleSize, bubbleSize);
   

}

 

I wanted to create a small animated cartoon drawing for this assignment and thought a scuba diver as the subject would be appropriate. Because scuba divers swim in deep depths, I explored changing the image elements dependent on the mouse moving up or down, mouseY. This project allowed me to explore change in color, size, and position of the different components to complete a cohesive dynamic drawing.

mecha-project03-dynamic-drawing

sketch

//alters
//position of eyebrows, eyes, blush, mouth, bird, face
//color of blush, face, bird
//size of blush, face

var colorR = 0;
var colorG = 0;
var colorB = 0;
var topY = 70;
var bottomY = 640-70;
var ellipseSize = 140;
var angle = 0;

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

function draw() {
    background(210-colorR,240-colorG,240);
    noStroke();

    angle+=1;
    //rotating sun moon thing
        push();
        translate(240,300);
        rotate(angle);
        noStroke();
        fill(255);
        ellipse(-40,-250,40,40)
        pop();
    
    fill(210-colorR,240-colorG,240);
    noStroke();
    rect(0,260,600,600);

    //constrain mouseY so ball doesn't go past top and bottom part of canvas
    var yConstrain = constrain(mouseY, topY, bottomY);
    var ellipseSize = constrain(mouseY-400, 140,220);
    var ellipseSize2 = constrain(mouseY+400,100,140);

    //little bird friend
    //beak
    noStroke();
    fill(230+colorR,180+colorG,130+colorB);
    triangle(230,yConstrain-145,190,yConstrain-120,240,yConstrain-110);
    noFill();
    stroke(80);
    line(240,yConstrain-100,240,yConstrain)
    line(230,yConstrain-100,230,yConstrain)
    noStroke();
    fill(255,160+colorR,160+colorR);
    arc(238,yConstrain-110,50,50,30,220,CHORD);
    ellipse(220,yConstrain-130,40,40);
    //wing
    fill(255,140+colorR,140+colorR);
    arc(250,yConstrain-110,40,40,30,220,CHORD);

    //face
    noStroke();
    fill(230+colorR,180+colorG,130+colorB);
    ellipse(240,yConstrain,ellipseSize,ellipseSize2);

    //eyebrows
    noFill();
    strokeWeight(2);
    stroke(80);
    arc(205, yConstrain-10,40,40,30,70,OPEN);
    arc(270, yConstrain-10,40,40,-270,-230,OPEN);
    
    //eyes and mouth
    //eyes open while mouse is in top part of screen
    if(mouseY<250){
        noStroke();
        fill(80);
        ellipse(220,yConstrain+30,6,6);
        ellipse(260,yConstrain+30,6,6);
        
        noFill();
        stroke(80);
        strokeWeight(2);
        arc(240,yConstrain+35,30,30,40,140,OPEN);

        ellipse(220,yConstrain-125,2,2);

        //blush
        noStroke();
        fill(250+colorR,140+colorG,100+colorB)
        ellipse(200, yConstrain+40, ellipseSize/10, 14);
        ellipse(280, yConstrain+40, ellipseSize/10, 14);

    }
    if(mouseY<450 & mouseY >=250){
        noStroke();
        fill(80);
        ellipse(220,yConstrain+30,6,6);
        ellipse(260,yConstrain+30,6,6);

        stroke(80);
        strokeWeight(2);
        fill(255);
        line(230,yConstrain+45,250,yConstrain+45);

        ellipse(220,yConstrain-125,2,2);

        //text box
        fill(255);
        strokeWeight(1.5);
        noStroke();
        rect(47,yConstrain-150,104,40,30,30,0,30);
        triangle(120,yConstrain-140,120,yConstrain-110,160,yConstrain-110);
        noFill();
        stroke(80);
        strokeWeight(1);
        text("please stop",70,yConstrain-126);

        //blush
        noStroke();
        fill(250+colorR,140+colorG,100+colorB)
        ellipse(200, yConstrain+40, ellipseSize/10, 14);
        ellipse(280, yConstrain+40, ellipseSize/10, 14);

    }
    //eyes closed while mouse is in bottom part of screen
    if(mouseY>=450){
        noFill();
        strokeWeight(2);
        stroke(80);
        line(210,yConstrain+30,220,yConstrain+25);
        line(260,yConstrain+25,270,yConstrain+30);

        noFill();
        stroke(80);
        strokeWeight(2);
        arc(240,yConstrain+45,30,30,180,360,OPEN);

        fill(255);
        strokeWeight(1.5);
        noStroke();
        rect(47,yConstrain-150,104,40,30,30,0,30);
        triangle(120,yConstrain-140,120,yConstrain-110,160,yConstrain-110);
        noFill();
        stroke(80);
        strokeWeight(1);
        text("how could you",62,yConstrain-126);

        strokeWeight(2);
        line(213,yConstrain-126,220,yConstrain-124);

        //blush
        noStroke();
        fill(250+colorR,140+colorG,100+colorB)
        ellipse(200, yConstrain+40, ellipseSize/10, 14);
        ellipse(280, yConstrain+40, ellipseSize/10, 14);

    }
    //changes color of face as mouse goes down
    if(mouseY < height/2){
        if(colorR < 20){
        colorR++;
        colorG--;
        colorB-=5;}
    } else{
        if(colorR > -20){
        colorR--;
        colorG++;
        colorB-=5;
    }
}
}

At first, I struggled with the open ended nature of this prompt. I couldn’t figure out how exactly I wanted to implement all of the changing aspects in such a small canvas without making it seem too cluttered. My first idea was utilizing mouseY to create something that looked like it was being stepped on, and ended up with the code above. Although it ended up a lot different than what I had first planned, I decided that rather than limit myself to a specific sort of theme, I would just roll with whatever came to my mind first. I thought that the hardest part of this was definitely calculating the position of all of the elements I used in relation to mouseY.

mecha-lookingoutwards-03

In 2014, the design studio Nervous System created a kinematic dress utilizing generative technology and 3D printing. To do this, the studio first created a program coined Kinematics Cloth App, a web application utilizing javascript with the ability to generate dresses, shirts, and skirts that could be printed in 3D. Through the app, users have the option to customize the pattern of the dress as well as the fit and style.

What first drew me to this project was the combination of computer generated art and fashion. Although it makes sense that algorithms and the like are capable of creating such pieces, it still amazes me to even think of how one would go about taking into consideration all of the combinations of shapes that could go into customization.

Not only this, but the way that the web app is designed allows for users who are inexperienced with CAD modeling. Having the ability to give accessibility to such advanced technology to the everyday person without losing the customizability of the designs seems simple in theory, but takes a lot of strategic design.

juyeonk – project03 – dynamicdrawing

sketch

// Brandon Hyun
// 15-104 Section B
// bhyun1@andrew.cmu.edu
// Project 04

var increase = 15;
var xInt = 15;

var x1 = 0;
var y1 = 550;
var x2 = 550;
var y2 = 0;
var red;
var green;
var blue;

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background (red,green,blue);
  var m = 400/25;
	for(var i = 0; i < m; i += 1) {
        strokeWeight(1);
		    stroke(40,40,40);


        for(var j =0; j<10; j+=1){
          line(mouseX+40*j, increase * i, increase * i +40*j, y1);
        }

		    for(var z =0; z<10; z+=1){
          line(mouseY+ x2 - increase * i, y2+40*z, x1, increase * i+ 40*z);
        }

	}
}

function mousePressed() {
  red = random(0,255);
  green = random (0,255);
  blue = random (0,255);
}

The most difficult part of this project was to code each strand of rain. It was more tedious than hard, but assigning random lengths and speed to each strand was definitely not easy.

You can move around the mouse to change the location of the umbrella.

I wish I could make the code take the mouseY into account as well so that the person wouldn’t smiling if the umbrella was below him/her.

alchan-Project 03-dynamic drawing

alchan project 03

//Scarlet Tong
//sntong@andrew.cmu.edu
//Section A
// Project 5: Wallpaper

//x and y coordinates the tip of the tear drops
var x = 0;
var y = 0;
// scale
var Large = 25;
var Medium = Large-1;
var Small = Large-5;
// for loop coordinates
var transY = 0;
var transX = 30;

function setup() {
    createCanvas(480, 480);
    background (243,117,117);//hot pink!
}

function draw() {
  //array the pattern on the odd rows
  for (var transY = 0; transY < width; transY+= Large*6+15) {
    for (var transX = 0; transX < width+30; transX+= Large*2+10) {
      pattern(transX,transY);
    }
  }
  // array the pattern for even rows and offset them so they fill the gap
  for (var transY = -Large*3-8; transY < width; transY+= Large*6+15) {
    for (var transX = Large+5; transX < width; transX+= Large*2+10) {
      pattern(transX,transY);
    }
  }
}

function pattern(transX,transY){
  stroke(255);
  strokeWeight(1);
  //deep blue tear drop, aka large drop
  push();
  translate(transX,transY);
  fill(48,78,109);
  beginShape();
  curveVertex(x,y);
  curveVertex(x,y);
  curveVertex(Large,Large*3);
  curveVertex(x,Large*4);
  curveVertex(x-Large, y+Large*3);
  curveVertex(x,y);
  curveVertex(x,y);
  endShape();
  pop();
  //pale orange tear drop, medium drop
  push();
  translate(transX,transY+Large*6);
  fill(237,168,131);
  angleMode(DEGREES);
  rotate(180);
  beginShape();
  curveVertex(x,y);
  curveVertex(x,y);
  curveVertex(Medium,Medium*3);
  curveVertex(x,Medium*4);
  curveVertex(x-Medium, y+Medium*3);
  curveVertex(x,y);
  curveVertex(x,y);
  endShape();
  // teal tear drop, small drop
  fill(43,188,177);
  beginShape();
  curveVertex(x,y+10);
  curveVertex(x,y+10);
  curveVertex(Small,Small*3+10);
  curveVertex(x,Small*4+10);
  curveVertex(x-Small, y+Small*3+10);
  curveVertex(x,y+10);
  curveVertex(x,y+10);
  endShape();
  //yellow circle
  fill(253,185,74);
  ellipse(x,Small*5,Large,Large);
  //small dark blue circle on the tip of the shape
  fill(48,78,109);
  ellipse(0,0,10,10);
  pop();
}

I wanted to play around with rotation for this project and was inspired by stylized/ simplified representations of the solar system (or atoms). I did a few quick sketches of how I wanted the drawing to change as the mouse moved, and from there figured out how I was going to implement the design.

I think the trickiest part of this was figuring out how to change the size of all of the components with the movements of the mouse without making them too large or too small.

 

yoonyouk-LookingOutwards-03

thinktank and the life aquatech: water generative design

Designing a structure based on the behaviors of water

This project was created by the students of the Architectural Association School of Architecture in London. They derived the shape from studying fluid liquid movements – the way it moves, how it shapes it self in containers, how it reacts on surfaces. The flow and direction of the structure are particularly noted for the final creation also takes into account of the water cycle.

I like how the project takes a very natural elements and uses that to base the structure. Not only is the shape unique and interesting, the structure also takes account the of human interaction and comfort. When it rains, the sculpture is also designed to collect, distribute, and store water, thus also providing a environmental friendly piece. I usually expect very stiff or geometric forms when it comes to a computational piece; however, I enjoy how this piece integrates the environment as inspiration and saves rain water while inside, people can appreciate markets, plazas, and other enjoyments.

The artists definitely used a unique algorithm to measure something as fluid as water in order to study the movements and directions.