The project I chose was Cumulus from the SOFTlab. This project first captured my attention because of its intricate design and overall aesthetic use of lighting. Upon learning more about Cumulus, I admired how interactive it was and how it is able to link sound and light together. I thought it was a unique aspect since it blends two of the five human senses, hearing and seeing. To create this installation, the creator pieced together over 200 acrylic segments with over 100 3D printed joints into a cloud-like shape with a network of LED strands inside. The interactiveness, that is linking sound to light, was achieved by building a user interface programmed with Processing. Like other projects from SOFTlab, Cumulus also takes on a unique, complex shape and is enhanced by lighting but this time with a combination of sound to achieve its final outcome.
Month: September 2020
Looking Outward 03 – ASOS
The project I am looking at is done by Advanced Synthesis Option Studios’s Dana Cupkova, in collaboration with Nina Schatz, Nana Choi, Kimberly McDonald, Gloriana Gonzales, and Avanti Dabholkar. The projects, “Epiflow: Towards Resiliency of Post-Soviet City Networks” and “Other Natures,” drew me in because of their attitude towards environment and ecological sustainability. I admire that they accept the damage to our biosphere and use it as an opportunity to better our architectural practices. Through simulation and iteration, they are able to test designs against the variables of the universe. I have no idea about the algorithms, although I would assume that they use them to simulate various conditionals: if “x” happens, then what? Each artist brings their own touch to the overall project. However, it seems that for the most part those indivdiual touches are more about the how each piece of the puzzle functions than about the pieces themselves.
Dynamic Drawing
//Aadya Bhartia
//Section A
var t = 0;
var angle = 0;
function setup() {
createCanvas(600, 480);
//background(220);
//text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
background(120, 200, 220);
//sun to moon
var x1 = 250*cos(PI - t) + 300; // using a curve to map the moon and sun to look like it is rising and setting
var y1 = 480 - 420*sin(t);
//clouds
fill(255);
ellipse(70, 40, 30, 30, 30);
ellipse(40, 50, 40);
ellipse(60, 70, 45);
ellipse(55, 65, 25);
ellipse(30, 75, 45);
ellipse(90, 75, 45);
ellipse(95, 49, 25);
push();
translate(380, 30);
scale(2.0);
ellipse(70, 40, 30, 30, 30);
ellipse(40, 50, 40);
ellipse(60, 70, 45);
ellipse(55, 65, 25);
ellipse(30, 75, 45);
ellipse(90, 75, 45);
ellipse(95, 49, 25);
pop();
push();
translate(300, 300);
scale(0.75);
ellipse(70, 40, 30, 30, 30);
ellipse(40, 50, 40);
ellipse(60, 70, 45);
ellipse(55, 65, 25);
ellipse(30, 75, 45);
ellipse(90, 75, 45);
ellipse(95, 49, 25);
pop();
fill(250, 250, 0);
ellipse(x1, y1, 120);
if(mouseX>=width/2){ // night time moon and stars
background(72, 91, 115);
ellipse(x1, y1, 120);
var moonC = map(x1, 0, height, 80, 0);
fill(72, 91, 115);
noStroke();
ellipse(x1 - moonC - 30, y1, 120);
//stars
push();
fill(255);
translate(20, 40);
rotate(radians(mouseX));
ellipse(0, 0, 5, 20);
rotate(radians(mouseX+5));
ellipse(0, 0, 20, 5);
pop();
push();
fill(255);
translate(320, 150);
scale(1.5);
rotate(radians(mouseX));
ellipse(0, 0, 5, 20);
rotate(radians(mouseX+5));
ellipse(0, 0, 20, 5);
pop();
push();
fill(255);
translate(400, 350);
rotate(radians(mouseX));
ellipse(0, 0, 5, 20);
rotate(radians(mouseX+5));
ellipse(0, 0, 20, 5);
pop();
push();
fill(255);
translate(500, 240);
scale(0.75);
rotate(radians(mouseX));
ellipse(0, 0, 5, 20);
rotate(radians(mouseX+5));
ellipse(0, 0, 20, 5);
pop();
push();
fill(255);
translate(560, 70);
scale(1.20);
rotate(radians(mouseX));
ellipse(0, 0, 5, 20);
rotate(radians(mouseX+5));
ellipse(0, 0, 20, 5);
pop();
push();
fill(255);
translate(150, 80);
scale(0.7);
rotate(radians(mouseX));
ellipse(0, 0, 5, 20);
rotate(radians(mouseX+5));
ellipse(0, 0, 20, 5);
pop();
}
t = mouseX*(PI/600);
//panda figure
noStroke();
fill(0);//ears
ellipse(70, 200, 80,80);
ellipse(230, 200, 80,80);
ellipse(150, 400, 280);//body
fill(255);
ellipse(150, 400, 230, 260);//body
fill(0);
ellipse(150, 340, 0.3*mouseX, 130); // patch on body chnage with mouseX
fill(255);
ellipse(150, 240, 190);//face
//eye rotating with size depending on mouseY
fill(0);
push();
translate(110, 223);
rotate(radians(angle));
ellipse(5, 5, 5+mouseY/22 , 10+mouseY/14);
pop();
push();
translate(190 , 223);
rotate(radians(angle));
ellipse(5, 5, 5+mouseY/22 , 10+mouseY/14);
pop();
angle += 5;
//face smile when mouse comes with bamboo shoot
if(mouseX>30 & mouseX<=200 && mouseY>=180&& mouseY<=310){
fill(242, 120, 120);
ellipse(110, 250, 20);
ellipse(190, 250, 20);
fill(245, 80, 70);
arc(150, 260, 50, 50, 0, PI);
}
else{ // general smile and nose
fill(0);
beginShape();
curveVertex(150, 180);
curveVertex(130, 270);
curveVertex(170, 270);
curveVertex(130, 190);
endShape();
noFill();
stroke(0);
strokeWeight(3);
arc(138, 280, 25, 20, 0, PI);
arc(161, 280, 25, 20, 0, PI);
}
//bamboo for mouse
noStroke();
fill(20, 220, 100);
rect(mouseX, mouseY, 10, 50);
fill(20, 250, 100);
rect(mouseX, mouseY+55, 10, 20);
fill(10, 220, 20);
push();
translate(mouseX + 25, mouseY + 10);
rotate(radians(-20));
ellipse(0, 0, 15, 5);
ellipse(0, 15, 15, 5);
pop();
}
Looking Outwards – 3
Neri Oxman and MIT developed a collection of Programmable Water-Based Biocomposites for Digital Design and Fabrication across Scales called Aguahoja. This is a project that explored how natural materials that have been put to waste by humans can be digitally designed and computationally fabricated by 3D printers or other robots. Through this project, Oxman and her team hoped to develop a solution to the vicious cycle of material extraction and obsolescence through the creation of biopolymer composites.
This collection is digitally designed and computationally fabricated by 3D printers or other robots made with available materials on earth- materials within trees, insect exoskeletons , apples, and bones- in hopes of avoiding depleting more of Earth’s materials.
https://www.media.mit.edu/projects/aguahoja/overview/
I admire this project for its mindfulness towards the environment and the effort and dedication that has been put into creating each piece and subpart in order to think of a more sustainable tomorrow
Project 03 – Dynamic Drawing
/*
* Amy Lee
* amyl2
* Section B
*/
var x = 0;
var y = 0;
function setup() {
createCanvas(600,450);
background(10);
}
function draw() {
noStroke();
background((constrain(mouseY,200,210)),(constrain(mouseY,220,240)),constrain(mouseY,190,210));
// - CLOUDS - //
//EllipseX variable is to expand or contract ellipse width
var ellipseWidth = constrain(mouseY,100,150);
//Variables for cloud on left side
var positionY = constrain(mouseY,100,150);
var positionY2 = constrain(mouseY,50,100);
var positionX = constrain(mouseX,80,100);
//Cloud on left side moves side to side
fill(constrain(mouseY,230,255));
ellipse(positionX,positionY,ellipseWidth,100);
ellipse(positionX+50,positionY2,100,100);
ellipse(positionX+100,positionY,100,100);
ellipse(positionX+150,positionY2,100,100);
ellipse(positionX+200,positionY,ellipseWidth,100);
//Variables for cloud on right side
var positionY3 = constrain(mouseY,300,350);
var positionY4 = constrain(mouseY,250,300);
var positionX2 = constrain(mouseX,50,120);
//Cloud on right side moves side to side
fill(constrain(mouseX,200,230));
ellipse(positionX2+200,positionY3,ellipseWidth,100);
ellipse(positionX2+250,positionY4,100,100);
ellipse(positionX2+300,positionY3,100,100);
ellipse(positionX2+350,positionY4,100,100);
ellipse(positionX2+400,positionY3,ellipseWidth,100);
//Yellow circles as stars in the background
push();
rotate(radians(mouseX*2));
fill(252,255,128);
ellipse(100,500,20,20);
ellipse(200,100,20,20);
ellipse(300,500,20,20);
ellipse(400,100,20,20);
ellipse(500,500,20,20);
pop();
push();
rotate(radians(mouseY*2));
fill(252,255,128);
ellipse(100,500,20,20);
ellipse(200,100,20,20);
ellipse(300,500,20,20);
ellipse(400,100,20,20);
ellipse(500,500,20,20);
pop();
//Mountains
fill(148,171,146);
triangle(270,490+mouseY,330,330+mouseY,390,490+mouseY);
triangle(330,490+mouseY,430,330+mouseY,520,490+mouseY);
triangle(0,490+mouseY,200,250+mouseY,400,490+mouseY);
triangle(400,490+mouseY,500,300+mouseY,600,490+mouseY);
//Flower in the center
push();
translate(300,220);
fill(random(195,250),random(155,170),random(25,37));
for (let r = 0; r < 10; r++){
ellipse(0,0,20,80);
rotate(PI/5);
}
pop();
//sun
push();
translate(300,220);
fill(random(195,250),random(155,170),random(25,37));
ellipse(0,90,10,mouseY);
rotate(radians(40));
ellipse(0,90,10,mouseY);
rotate(radians(40));
ellipse(0,90,10,mouseY);
rotate(radians(40));
ellipse(0,90,10,mouseY);
rotate(radians(40));
ellipse(0,90,10,mouseY);
rotate(radians(40));
ellipse(0,90,10,mouseY);
rotate(radians(40));
ellipse(0,90,10,mouseY);
rotate(radians(40));
ellipse(0,90,10,mouseY);
rotate(radians(40));
ellipse(0,90,10,mouseY);
pop();
}
I was inspired by nature and weather. I tried to depict the sun, mountains, stars, and clouds in my piece.
Project 03 – Interactive Flower
var h = 10
var angle = 0
var color = 0
var clouda = -100
var cloudb = clouda + 100
function setup() {
createCanvas(450, 600);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
if (color == 0) {
background(255, 128, 188);
} else {
background(0, 154, 255);
}
if (mouseIsPressed) {
fill(255);
ellipse(clouda, 100, 150, 75);
ellipse(cloudb, 250, 110, 90);
clouda = clouda + 2
cloudb = cloudb + 2
if (clouda >= 450) {
clouda = -100
cloudb = clouda + 100
}
}
strokeWeight(h);
stroke(0, 255, 0);
line(225, 600, 225, max(mouseY, 200)); //stem gets taller as mouseY gets lower
if (mouseY < 500) {
fill(0, 255, 0);
ellipseMode(CORNER);
ellipse(225, max(mouseY, 300), min(600 - mouseY, 200), constrain(600 - 2*mouseY, 50, 100));
//leaf grows as the stem grows
}
fill(255, 0, 119);
noStroke();
if (mouseY >= 200) {
ellipseMode(CENTER);
ellipse(225, max(mouseY, 200), max(min(600 - mouseY, 200), 0));
//flower bud grows as mouseY gets lower
} else {
push();
translate(225, 200);
rotate(radians(angle));
fill(255, 0, 119);
beginShape();
curveVertex(0, 0);
curveVertex(0, 0);
curveVertex(-100, -30);
curveVertex(-30, -100);
curveVertex(0, 0);
curveVertex(0, 0);
endShape();
beginShape();
curveVertex(0, 0);
curveVertex(0, 0);
curveVertex(30, -100);
curveVertex(100, -30);
curveVertex(0, 0);
curveVertex(0, 0);
endShape();
beginShape();
curveVertex(0, 0);
curveVertex(0, 0);
curveVertex(100, 30);
curveVertex(30, 100);
curveVertex(0, 0);
curveVertex(0, 0);
endShape();
beginShape();
curveVertex(0, 0);
curveVertex(0, 0);
curveVertex(-30, 100);
curveVertex(-100, 30);
curveVertex(0, 0);
curveVertex(0, 0);
endShape();
pop();
angle = angle + 5
//spinning flower petals are pretty!
}
}
function mousePressed(){
if (dist(mouseX, mouseY, 225, 200) <= 100) {
color = 1
} else {
color = 0
}
}
Project-03-Dynamic-Drawing
function setup() {
createCanvas(600, 450,);
background(220);
}
function draw() {
var x = mouseX
var y = mouseY
var g = 0
var b = 0
//background
background(0)
push();
translate(mouseX-750,0)
stroke(255,)
strokeWeight(2)
scale(3,1)
line(0,20,50,20)
line(120,40,130,40)
line(60,50,130,50)
line(300,80,350,80)
line(300,90,380,90)
line(100,100,170,100)
line(230,130,280,130)
line(200,160,210,160)
line(40,170,90,170)
line(400,200,420,200)
line(340,220,370,220)
line(220,230,310,230)
line(420,270,440,270)
line(80,280,180,280)
line(160,290,150,290)
line(370,320,420,320)
line(10,330,90,330)
line(140,350,170,350)
line(40,370,60,370)
line(320,390,330,390)
line(80,400,120,400)
line(210,430,260,430)
line(400,440,450,440)
pop();
// spinning arcs
strokeWeight(1+y/50);
noFill();
//transformations
translate(300,225);
rotate(radians(x/2));
cony = max(y,.5);
scale(cony/200);
noStroke();
fill(0);
circle(0,0,270);
g = g + x/3
b = b + x/8
//arcs (smallest to largest)
noFill();
stroke(255,0+g,0+b);
arc(0,0,140,140,-PI/4,4*PI/5);
rotate(radians(x/2));
arc(0,0,180,180,PI/2,4*PI/3);
rotate(radians(x/5));
arc(0,0,200,200,PI,9*PI/4);
rotate(radians(x/7));
arc(0,0,270,270,11*PI/6,5*PI/6);
}
I incorporated two animated ideas into one which creates a different dynamic on motion, one moving horizontally and the other moving within itself while changing size position and color.
project-03
var angle=0;
var boxWidth = 80;
var boxX = 30;
function setup() {
createCanvas(600, 450);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
background(205, 255, 0);
if (mouseY>height/2){
background(139, 171, 14);
}
//changing color of background
noStroke();
fill(105, 93, 34);
if (boxX>width){
boxX=-boxWidth;
}
boxX=boxX+5;
rect(boxX, height/2, boxWidth, 40);
//moving rect
fill(229, 163, 220);
circle(mouseX, mouseY, 100);
//pink circle
fill(255, 213, 0);
circle(600-mouseX, mouseY*4/5, mouseX*2/3);
//yellow circle
fill(149, 120, 229);
push();
translate(100, 100);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0, dist(mouseX, mouseY, width/2, height/2), dist(mouseX, mouseY, width/2, height/2));
pop();
angle += 3;
//rotating square
fill(243, 142, 220);
rect(width/2, mouseY, mouseX*3/8, 90);
//pink rect
}
Looking Outwards 03: Computational Fabrication
G3DP2 is a newly designed additive manufacturing technology that is 3D printed to be a revolutionary instability and optical implementations. This new glass takes away uncertain variables and gives users and designers greater control of material and experience. G3DP2 is able to be altered for users’ needs in terms of thermal control to molding. To advance a traditional material such as glass is easily overlooked because of the long satisfaction we’ve already had with the material. However, with this, there is greater “flow control, spatial accuracy and precision, and faster production rates with continuous deposition of up to 30kg of molten glass”.
The algorithm and idea behind the new design and structure of G3DP2 are based on the preferences which are the manufacturing platform and structural system. The “geometric expression” is the column surface area, number of lobes, and the turning radius of the printer. A lighting system inside the column is also programmed to move with kaleidoscope-like patterns. The work of The Mediated Matter group is very similar to projects like this. They are inspired for natural design in nature and use computational design and various digital fabrication skills to mimic natural patterns and processes. G3DP2 is an accurate depiction of The Mediated Matter group’s goals and focus.
PROJECT-03 (dynamic drawing)
// SEAN CHEN
// 15-104 A
var size = 125; // overall size of graphic
var flip = 1; // val to control rotation direction
var angle = 1;
var angle2 = 1;
var angle3 = 1; // individual speed
var diff = 0 // shift from center circle
function setup() {
smooth();
createCanvas(400, 400);
background(255,219,88);
}
function spin(speed, vari) { // white orbiting circles
push();
noStroke();
rotate(radians(angle));
circle(0, size+diff, size*5/6);
circle(size+diff, 0, size*5/6);
circle(-size-diff, 0, size*5/6);
circle(0, -size-diff, size*5/6); // each big stationary orbit circle
circle(size*2/3+vari/5, size*2/3+vari/5, size*5/12*vari/200);
circle(size*2/3+vari/5, -(size*2/3)-vari/5, size*5/12*vari/200); // mouse further from center smaller size
circle(-(size*2/3)-vari/5, size*2/3+vari/5, size*5/12*vari/200); // mouse further from center distance larger
circle(-(size*2/3)-vari/5, -(size*2/3)-vari/5, size*5/12*vari/200); // each small moving circles
angle += speed*flip;
pop();
}
function spin2(speed, vari) { // same as 'spin' but cyan
push();
noStroke();
fill(0,255,255);
rotate(radians(angle2));
circle(0, size+diff, size*5/6);
circle(size+diff, 0, size*5/6);
circle(-size-diff, 0, size*5/6);
circle(0, -size-diff, size*5/6);
circle(size*2/3+vari/5, size*2/3+vari/5, size*5/12*vari/200);
circle(size*2/3+vari/5, -(size*2/3)-vari/5, size*5/12*vari/200);
circle(-(size*2/3)-vari/5, size*2/3+vari/5, size*5/12*vari/200);
circle(-(size*2/3)-vari/5, -(size*2/3)-vari/5, size*5/12*vari/200);
angle2 += speed*flip;
pop();
}
function spin3(speed, vari) { // same as 'spin' but magenta
push();
noStroke();
fill(255,0,255);
rotate(radians(angle3));
circle(0, size+diff, size*5/6);
circle(size+diff, 0, size*5/6);
circle(-size-diff, 0, size*5/6);
circle(0, -size-diff, size*5/6);
circle(size*2/3+vari/5, size*2/3+vari/5, size*5/12*vari/200);
circle(size*2/3+vari/5, -(size*2/3)-vari/5, size*5/12*vari/200);
circle(-(size*2/3)-vari/5, size*2/3+vari/5, size*5/12*vari/200);
circle(-(size*2/3)-vari/5, -(size*2/3)-vari/5, size*5/12*vari/200);
angle3 += speed*flip;
pop();
}
function draw() {
var vari = dist(width/2, height/2, mouseX, mouseY) // distance from center to mouse
background(0);
translate(width/2, height/2); // new origin at center
noStroke();
circle(0, 0, size); // center circle
spin3(1*vari/150, vari); // mouse closer to center slower, vice versa
spin2(1.5*vari/150, vari); // for cyan
spin(2*vari/150, vari); // for white
if (mouseIsPressed) {
flip = -1; // reverse rotation if pressed
} else {
flip = 1; // clockwise otherwise
}
}