sketch

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

var angle;
var X;
var a =300;
var nPoints = 10000;
var g;
var s;

function setup() {
    createCanvas(800,800);
    frameRate(10);
    
}

function draw() {
	background(91,g,221); //background color mapped to give gradient effect as mouse is moved in X directoin
	X=constrain(mouseX,0,width);
	Y=constrain(mouseY,0,height);
	angle = map(X,0,width,0,2*TWO_PI); //remapping the angle to make it move as mouse moves in X direction
	g = map(X,0,width,84,238); //color g mapped for gradient color
	s = map(Y,0,height,1,2); //scale variable mapped to change scale of the curves as mouse is moved in Y direction



	//first Eight Curve
	stroke(255); //color white
	strokeWeight(2);
	push();
	translate(width/2, height/2);
	rotate(angle); //rotating by the mapped angle
	beginShape(LINES); //creating the Eight Curve
	for (var i=0;i<=nPoints; i++) {
		var t= map(i,0,nPoints,0,TWO_PI);
		//Eight Curve formula
		var x2= a*sin(t);
		var y2= a*sin(t)*cos(t);
			vertex(x2,y2);
		}
		endShape(CLOSE);
	pop();

	//second Eight Curve 
	stroke("#ec96a4"); //color light pink
	strokeWeight(2);
	push();
	translate(width/2, height/2);
	scale(s); //scaling by the mapped scale
	rotate(angle+QUARTER_PI);
	beginShape(LINES);
	for (var i=0;i<=nPoints; i++) {
		var t= map(i,0,nPoints,0,TWO_PI);
		var x2= a*sin(t);
		var y2= a*sin(t)*cos(t);
			vertex(x2,y2);
		}
		endShape(CLOSE);
	pop();

	//third Eight Curve
	stroke("#e6df44"); //color mustatd
	push();
	translate(width/2, height/2);
	scale(s);
	rotate(-angle+HALF_PI);
	beginShape(LINES);
	for (var i=0;i<=nPoints; i++) {
		var t= map(i,0,nPoints,0,TWO_PI);
		var x2= a*sin(t);
		var y2= a*sin(t)*cos(t);
			vertex(x2,y2);
		}
		endShape(CLOSE);
	pop();

	//fourth Eight Curve
	stroke("#283655"); //color indigo 
	strokeWeight(2);
	push();
	translate(width/2, height/2);
	rotate(-angle*2);
	beginShape(LINES);
	for (var i=0;i<=nPoints; i++) {
		var t= map(i,0,nPoints,0,TWO_PI);
		var x2= a*sin(t);
		var y2= a*sin(t)*cos(t);
			vertex(x2,y2);
		}
		endShape(CLOSE);
	pop();

	
}

I based my whole project on the Eight Curve and played with color gradient and rotation of the curves.

Architecture of Radio App on an iPad

Architecture of Radio is a site-specific application for iOS and Android devices that reveals the invisible view of networks all around us. It uses GPS to locate where the users are and reaches near cell towers from OpenCellID. When the location is calculated, it provides a 360 degrees view of the site. This application was made with Three.js and Ionic Framework, and with these software, it works by reversing the ambient nature of the infosphere. Architecture of Radio allows us to visualize the infosphere of a specific location and shows the system of data cables and radio signals surrounding us. This application helps the users by providing a comprehensible view of the network into the infosphere. Personally, I would like to look at the WiFi network around me that allows me to access the internet and various applications.

Architecture of Radio app showing system of network

using the app in different locations

Architecture of Radio Website

sketch

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

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

function draw() {
	var H = hour();
	var M = minute();
	var S = second();
    var mappedS = map(S,0,0.5,0,0.5);

    //fill("#D0E1F9");
    noStroke();
    background("#D0E1F9");
    //rect(0,0,width,730);
    fill("#BFDCCF")
    rect(0,730,width,height);

    //stem
    push();
    noFill();
    angleMode(DEGREES);
    stroke("#265C00");
    strokeWeight(8);
    arc(width/2,600,30,400,90,270);
    pop();

    //leaf
    push();
    angleMode(DEGREES);
    noStroke();
    fill("#265C00");
    strokeWeight(4);
    arc(343,700,90,50,0,190);
    arc(343,700,90,40,190,360);
    pop();


    //minutes
    //flower petal rotating every minute
    stroke(255);
    var w = 50;
    var h = 250;
    angleMode(DEGREES);
    push();
    translate(width/2,height/2);
    rotate(M/5*30);
    translate
    fill("#F69454"); //tells minutes
    ellipse(0,-h/2,w,h);
    rotate(45);
    fill("#FFBEBD"); //flower petals
    ellipse(0,-h/2,w,h);
    rotate(45);
    ellipse(0,-h/2,w,h);
    rotate(45);
    ellipse(0,-h/2,w,h);
    rotate(45);
    ellipse(0,-h/2,w,h);
    rotate(45);
    ellipse(0,-h/2,w,h);
    rotate(45);
    ellipse(0,-h/2,w,h);
    rotate(45);
    ellipse(0,-h/2,w,h);
    pop();
    

    //seconds
    //center of the flower increasing in size
    for (var i=0; i<S;i++) {
    	fill("#E4EA8C");
    	ellipse(width/2,height/2,i+mappedS,i+mappedS);
    }
    
    //hours
    //the number of bees increasing each hour
    var beeX = 25;
    var stripeX = 15;
    var eyeL=20;
    var eyeR=30;
    var wing1=25;
    var wing2=25;
    var path1=25;
    var path2=25;
    var path3=25;
    var path4=25;
    
    for (var i=0; i<H; i++) {
    	noStroke();
    	fill("#00CFFA");
    	ellipse(wing1,48,38,9);
    	ellipse(wing2,58,38,9);
        wing1+=33;
        wing2+=33;

    	fill("yellow");
    	noStroke();
    	ellipse(beeX,50,22,40);
        beeX+=33;

    	stroke(0);
    	strokeWeight(3);
    	line(stripeX,50,stripeX+20,50);
    	line(stripeX+1,60,stripeX+18,60);
    	stripeX+=33;

    	ellipse(eyeL,35,1,1);
    	ellipse(eyeR,35,1,1);
    	eyeL+=33;
    	eyeR+=33;

    	strokeWeight(0.5);
    	noFill();
    	arc(path1,100,20,40,90,270);
    	arc(path2,111,19,19,0,90);
    	arc(path3,130,20,55,90,270);
    	arc(path4,112,19,19,270,360);
    	path1+=33;
    	path2+=33; 
    	path3+=33;  
    	path4+=33;  	
    }

//time
textSize(15);
fill("darkblue");
textFont("Comic Sans");

text(nf(H,[],0),80,750);
text(":",100,750);
text(nf(M,[],0),110,750);
text(":",130,750);
text(nf(S,[],0),140,750);


    

    

    
    
}

My abstract clock’s hours are shown by the bees, minutes are shown by the pink flower petal, and the seconds are shown by the center of the flower changing in size.

exterior view of the building

The Serpentine Gallery Pavilion in 2002 was designed by Toyo Ito, Cecil Balmond, and Arup. This pavilion was designed with randomly intersecting lines along the walls which created many different shapes of triangles and trapezoids. This exterior/interior wall design was actually derived from an algorithm of a cube that expanded as it rotated. I think this computational art allows people to appreciate the building as well as the way of design using an algorithm. Along with this algorithmic design, the transparency and translucency of the wall make it seem like the shapes of the walls are in infinitely repeated motion. This algorithm was developed by Balmond, who participated in this project as the artist and structural engineer. Although this project’s budget constraints didn’t allow the highest quality finish, the strength of the design made sure that it caught people’s eyes. I could not find what kind of algorithm Balmond used, but I suppose the algorithm made many different lines in a cube to reach these shapes of the building.

interior sky view of the shapes

interior view of the building

Serpentine Gallery Pavilion

sketch

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


var f = 30;
var d = 10;

function setup() {
    createCanvas(600, 600);
    background("#FFEB94");
    noLoop();
    
}

function draw() {
    noStroke();

    for(var x1=30; x1<width; x1+=90) {
        for(var y1=20; y1<height; y1+=90) {
            icecream(x1,y1);
        }
    }

    for(var x2=30; x2<width; x2+=90) {
        for(var y2=15; y2<height; y2+=90) {
            cones(x2,y2);
        }
    }

    for(var x3=75; x3<width; x3+=90) {
        for(var y3=75; y3<height; y3+=90) {
            fill("#FFCCAC")
            ellipse(x3,y3,d,d);
        }
    }
}

function icecream(x1,y1) {
    fill("#C1E1DC");
    ellipse(x1,y1,f,f);
}

function cones(x2,y2) {
    fill("#D5C3AA");
    triangle(x2-15,y2+10,x2,y2+50,x2+15,y2+10);
}

I was inspired by the ice cream cone I was eating at night.

Render of the office space

Photograph of the office space

As an architecture student, making digital renderings is common. From this article, I found out that clients feel that they cannot trust the digital renderings because it “lacks realism”. In this article, one digital rendering and a photo of the actual space was being compared. This comparison showed that the digital renderings can be an inaccurate representation of the actual space created. Most of the time, the 3D computer graphic photos focus on artistic values of the render rather than the creating realistic experiential render. Even when architects are making renders of their work, they use programs like Revit, ElumTools and Sefaira which allow them to calculate light and other factors that they have to take into account. However, because there are some factors that cause renders to look different or make something different, clients should understand and try to understand the essence of the renders instead of focusing on exact replica. Rendering programs like Revit helps see both the architect and client the gist of what the space is going to be. I think it’s very helpful and useful for both sides to understand the space. Through the renders created by the architects, clients can see what the architects focused on and deem important.

Render of Hanking Center Tower in Shenzhen by Morphosis Architects

Render

Article Link

sketch

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

var x;
var y;

function setup() {
    createCanvas(640, 480);
    strokeWeight(1);
    x=0;
    y=0;
}

function draw()  {
    background('lightblue');
    for (var i = 0; i < 240; i +=10) {

    	//pink color lines
    	stroke('hotpink');
        line (width/2,y+i,width/2+i,height/2); //upper right
        line(width/2,y+i,width/2-i,height/2); //upper left
        line(width/2,height-i,width/2-i,height/2); //lower left
        line(width/2,height-i,width/2+i,height/2); //lower right
        line(0,height/2,width,height/2); //horizontal line
    
        //lavender color lines
    	stroke('lavender');
    	push();
    	translate(264,-156);
    	rotate(radians(45));
    	line (width/2,y+i,width/2+i,height/2); //right
        line(width/2,y+i,width/2-i,height/2); //top
        line(width/2,height-i,width/2-i,height/2); //left
        line(width/2,height-i,width/2+i,height/2); //bottom
        pop();
        line(80,0,560,height); //negative slope
        line(80,height,560,0); //positive slope 

        //outer lines
        stroke('lightyellow');
        line(x,y+i,x+i,height); //left from top
        line(x+i,height,width,height-i); //bottom from left
        line(width,height-i,width-i,y); //right from bottom
        line(width-i,y,x,y+i); //top from right
        line(x,height-i,x+i,y); //left from bottom
        line(x+i,y,width,y+i); //top from left
        line(width,y+i,width-i,height); //right from top
        line(width-i,height,x,height-i); //bottom from right
        }
}

My process was to get midpoints of canvas and connect the line to different points. And then I added more lines to the edges of the canvas.

Semiconductor’s ‘Earthworks‘ for SonarPLANTA

The art duo Semiconductors Ruth Jarman and Joe Gerhardt created Earthworks, which is an installation that can replicate the images and sounds of the Earth’s dynamic movement. While the Earth moves, it creates visuals in waveforms with different colors. Jarman and Gerhardt worked with colored layers of sand and recorded the timelapse of the Earth movement over thousands of years and then worked with the seismic data. They record the seismic data and those digital information becomes a waveform that translate to sounds. The main tool for this project was MATLAB (Matrix Laboratory) that packs all the data like location, instrument, frequency, and timeframe, into one packet. I suppose those data along with the sound recording of the Earth movement were computed to create visuals that represent how the Earth was moving for thousands of years. I could not find an exact algorithm that they used. Because the sound generates visuals in this project, you can assume that sound determines how the visuals are formed. This project allows one to connect and feel the Earth. It is so interesting that Jarman and Gerhardt were able to literally record the sound of Earth and from that create images of the Earth movement and formation. Jarman and Gerhardt’s passion for nature, technology, and science clearly show through this project and further leads others to question and explore the Earth.

Joe Gerhardt and Ruth Jarman at University of Barcelona with the study model of sand

Earthworks

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.

A project I’ve come across this week is The Kiosk by the British firm, Buchanan Partnership. They’ve built the St. Helen’s Gardens flower stall in 2013 by using digital and hand fabrication. The timber exterior was cut by the CNC mill, which is computer run to control machine tools. With a steel structure and concrete base. This project was originally inspired by the electron scanning of the flower petals which had ridge patterns. Therefore, the lozenge shape of the kiosk is a contemporary interpretation of the floral motif. I admire that the shape of the flower kiosk was deeply inspired by the flower itself and by using digital fabrication the similar shapes were repeated to create the exterior. By doing so, it shows that this project does not lose the essence or the purpose of the project. The information about the exact algorithm used is not mentioned, but since it used digital fabrication as well as hand fabrication, a computational algorithm was used to produce the physical model. The Buchanan Partnership’s artistic sensibilities manifest through their choice of the external shape of the kiosk and the way to open the doors of the kiosk during the day, which is by rotating.