Jia-Rey's Portfolio (P&A LAB)

[P]rogramming [AND] [A]rchitecture http://pandalabccc.blogspot.com/

PROJECT :Programming Form

:Interactive Design

processing2D

interactive_toy

P01// dots P02// forloop-lines P03// panda face P04// space eye P05// recursive curves P06// turtle graphic flowers

I01// panda_wall I02// pandaMask I03// light_detector I04// pen_ walker I05// armor_wall I06// armor_lght

processing3D

I07// moire_wall I08// spiral_wall

P07// y=x^2_form P08// curve_monster P09// 3D spirograph P10// sincos_form P11// photographic_form

rhinoGrasshopper P12// paper_folding P13// water_residential P14// lotus form P15// camera_wall P16// tree_column I

rhinoScript P17// tree_column II P18// honeycomb_wall

rhinoPlugin P19// v_box01 P20// topo_furniture

maya P21// motion path form

mayaMel P22// cobras_form P23// speed_cloud P24// subdivision wall

:Digital Fabrication D01// bubble_wall D02// water_cube_cage D03// continuous_vase

Programming AND Architecture

::Programming & Architecture All of the projects in this portfolio are in the digital architecture field from different aspects. The relationship between programming and architecture are getting closer and closer. The programming approach makes the digital architecture both diverse and beautiful. In the category of “Programming Form” mainly shows how programming gets involved in architecture form. In the category of “Interactive Design” shows how interaction influences the space. In the category of “Digital Fabrication” shows how we use 3D software to help us simulate the form and use the digital fabrication method to populate form from small scale to large scale. Through these projects, a new way of design is coming out. In this new era, the programming and interaction need to be combined to form a new digital architecture. All the projects can also be seen on the P&A (panda) LAB blog.

Please check here: http://pandalabccc.blogspot.com/

Programming Form processing+rhinoscript+rhino/grasshopper+Maya Mel :: location: Nowhere but my computer and blog :: year: 2009-10

:: Processing2D // P01:

DOTS Two for-loop, ellipse and square functions are used to make the Grid with color gradually change.

>>>>>http://pandalabccc.blogspot.com/2010/04/forloopdotsdotsprocessing-for_27.html

CODE: void setup() { size(700,700); background(255); smooth(); noLoop(); } void draw() { for(float i =20; i < height; i = i+20) { for(float j=20; j < width; j= j+20) { stroke(i/2,j/2,((mouseX+mouseY)+j+i)/10); //strokeWeight((i+j)/100);//size of the spots strokeWeight(4); ellipse(i,j,20,20); point(i,j); strokeWeight(2); line(i,j-10,i,j+10); line(i-10,j,i+10,j); //rectMode(CENTER); //rect(i,j,5,5); } } }

:: Processing2D // P02:

ForLoop Lines

The random function is simply used to draw the lines with random color. If you turn off the noLoop(); function, the lines will be drawn increasingly till you close the window in this program.

>>>>>http://pandalabccc.blogspot.com/2010/04/forloopdotsdotsprocessing-for.html

CODE: void setup(){ size(600,600); background(255); smooth(); noLoop(); } void draw(){ strokeWeight(2); strokeCap(ROUND); for(int i=0; i< 600; i+=1){ stroke((i+1)*30,(i+20)/3,(i+20)/2); line(random(0,600),0,random(0,600),600); line(0,random(0,600),600,random(0,600)); } }

randomX

randomY

randomX+Y

:: Processing2D // P03:

Panda Face

The If-else condition is used to interact with the mouse. If you move the mouse to the four different quadrants of the window, the eyes will show in different colors.

>>>>>http://pandalabccc.blogspot.com/2010/04/pandainchineseopera-processingtutoriali.html

CODE: void setup() { size(700,700);//window size background(255);//white background smooth();// } void draw(){ strokeWeight(10);// fill(0,0,0);//fill black ellipse(width/2-width/8,height/2-height/10,width/10,height/10);//left ear ellipse(width/2+width/8,height/2-height/10,width/10,height/10);//right ear fill(255,255,255);//fill white ellipse(width/2,height/2,width/3,height/3);//draw face if(mouseX>width/2 && mouseY>height/2){//if mouse move to the right-down side stroke(255,0,0);//the color around the panda’s eyes would be RED } else if (mouseX<width/2 && mouseY>height/2){//if mouse move to the leftt-down side stroke(0,255,0);//the color around the panda’s eyes would be GREEN } else if (mouseX>width/2 && mouseY<height/2){//if mouse move to the right-top side stroke(0,0,255);//the color around the panda’s eyes would be BLUE } else {//else which means if mouse move to the leftt-top side stroke(0,0,0);//the color around the panda’s eyes would be BLACK }

translate(width/2,height/2);//move the ZERO point to windowâ&#x20AC;&#x2122;s center for(float i=0.1; i<=0.3;i=i+0.01){ strokeWeight(50); point((width/9)*cos(PI*i),-(width/9)*sin(PI*i)); }//draw the circle around the left eye fill(0); for(float i=0.7; i<=0.9;i=i+0.01){ strokeWeight(50); point((width/9)*cos(PI*i),-(width/9)*sin(PI*i)); }// draw the circle around the right eye noStroke(); translate(-width/2,-height/2);//move the ZERO point to windowâ&#x20AC;&#x2122;s center fill(255);//fill white after strokeWeight(0); ellipse(width/2-width/13,height/2-height/18,15,15);//draw the left eye ellipse(width/2+width/13,height/2-height/18,15,15);//draw the right eye stroke(2); fill(0);//fill black after ellipse(width/2,height/2-height/30,20,20);//draw the nose strokeWeight(3);//the stroke would be 3 then

:: Processing2D // P04:

Space Cloud

The width, height and color of the space cloud is controlled by the x and y location of the mouse. The graphic is adjusted to change in real time by moving the mouse.

>>>>>http://pandalabccc.blogspot.com/2010/04/spaceeyesprocessingtitorialmousex.html

CODE: void setup(){ size(600,600); //window size background(255); //background color smooth(); // } void draw(){ fill(mouseX,mouseY,2*(mouseX+mouseY)/3);//use the mouse to control the color noStroke(); //stroke(255); ellipse(width/2, height/2 ,2*mouseX,2*mouseY); //draw the ellipse by mouse position //stroke(255); //rectMode(CENTER); //rect(width/2, height/2 ,mouseX, mouseY); }

:: Processing2D // P05:

Recursive Curves The curves are drawn by â&#x20AC;&#x153;recursionâ&#x20AC;? method in the program, and the curves will branch out to make this complex graphic.

>>>>>http://pandalabccc.blogspot.com/2010/04/recursion.html

CODE: float x = 300;//the x ofstarting point float y=0;//the y ofstarting point float d=0;//the increasing distance float c=3;//the curvature of the curve float n=15;//tine of recursion void setup(){ size(600,600); background(255); smooth(); } void draw(){ stroke(0); lineX(x,y,d,n,c); noLoop(); } void lineX(float x1, float y1, float d, float n, float c){ stroke(0,10*d,100*d,n*10); stroke(30*d,10*d,0,n*20); beginShape(); curveVertex(x1-c*n*d,y1); curveVertex(x1-n*d,y1+n*d); curveVertex(x1,y1); curveVertex(x1+n*d,y1+n*d); curveVertex(x1+c*n*d,y1); endShape();//draw curve noFill(); ellipse(x1,y1+d,2*d,2*d);//draw ellipse locating on the crossning point if(n>0){ lineX(x1-n*d,y1+n*d,d+2,n-1,c+0.05); lineX(x1+n*d,y1+n*d,d+2,n-1,c+0.05); }//recurse }

:: Processing2D // P06:

Turtle Graphic Flowers These creative graphics are drawn by turtle graphic and fractal. In Rule1, the basic paths are drawn by controlling the direction. In Rule2 the final paths are changed also by fractal based on Rule1. >>>>>http://pandalabccc.blogspot.com/2010/08/turtlegraphic-02-processing.html

CODE: void setup(){ size(700,700); background(255); smooth(); noLoop(); } void draw(){ pushMatrix(); translate(width/3,height/5); int m=6; for(int i =0; i<=m; i++){ strokeWeight(3); stroke(255,0,0); rule1(300,m); rotate(2*PI/m); } popMatrix(); } //rule1 void rule1(float l01, float n1){ rule2(l01/n1,n1); A(l01/n1,n1); rule2(l01/n1,n1); B(l01/n1,n1); rule2(l01/n1,n1); rule2(l01/n1,n1); A(l01/n1,n1); rule2(l01/n1,n1); A(l01/n1,n1); rule2(l01/n1,n1); B(l01/n1,n1); rule2(l01/n1,n1); A(l01/n1,n1); rule2(l01/n1,n1); A(l01/n1,n1); rule2(l01/n1,n1); B(l01/n1,n1); rule2(l01/n1,n1); }

//rule2 void rule2(float l02, float n2){ L(l02/n2,n2); A(l02/n2,n2); L(l02/n2,n2); B(l02/n2,n2); L(l02/n2,n2); B(l02/n2,n2); L(l02/n2,n2); A(l02/n2,n2); L(l02/n2,n2); B(l02/n2,n2); L(l02/n2,n2); B(l02/n2,n2); L(l02/n2,n2); A(l02/n2,n2); L(l02/n2,n2); A(l02/n2,n2); L(l02/n2,n2); B(l02/n2,n2); L(l02/n2,n2); } void L(float l03, float n3){ rotate(0*PI/n3); line(0,0,l03,0); translate(l03,0); } void A(float l04, float n4){ //translate(l04,0); rotate(2*PI/n4); //line(0,0,l,0); } void B(float l05, float n5){ //translate(l05,0); rotate(-2*PI/n5); //line(0,0,l,0); }

//TURTLE GRAPHIC FLOWERS

//P06

:: Processing3D // P07:

Y=X^2 Form

The complex forms are created by processing with formula. All complex forms are created by simple rules. The first volume: y= a*x^2 +c is the base rule called “Parabola” The parabola curve is drawn first and rotated by the program to shape this complex geometry.

The size of the boxes and the constant in the formula could be changed easily to shape various “y= a*x^2” forms. >>>>>http://pandalabccc.blogspot.com/2010/08/yxxform-processing.html

CODE: import processing.dxf.*; boolean record = false; // the variables you can change as followings float n =2; //rotate angle= PI/n float c =1;// increment of the for loop float a =-50;//starting number float b =50;//end number float d =2;//the division of the box size float s1= 3;//curvature1 float s2 =3;//curvature2 float e1 = 0;//constant1 float e2=0;//constant2 float e3 = 0;//constant3 float e4= 0;//constant4 void setup() { size(1280, 760, P3D); background(0); noStroke(); //noLoop(); } void draw() { if (record == true) { beginRaw(DXF, "output.dxf"); // Start recording to the file } lights(); background(0); translate(width/2, height/2, -mouseX/2); rotateZ(map(mouseY*2, 10, height, 10, PI)); rotateY(map(mouseX*2, 10, width, 10, PI)); for (float z = 0; z < 2*PI; z+=PI/n) { pushMatrix(); rotateX(z); for (float x = 0; x < 2*PI; x+=PI/n) { pushMatrix(); rotateY(x); for (float y = 0; y < 2*PI; y+=PI/n) { //pushMatrix(); rotateZ(y); for (float s = a; s <= b; s+=c) { if(s>0 && s<=50){ pushMatrix(); translate(s1*s,(s*s-e2)/20-e1,0); box(s/d); popMatrix(); }

else{ pushMatrix(); translate(s2*s,-(s*s-e4)/20-e3,0); box(s/d); popMatrix(); } //popMatrix(); } } popMatrix(); } popMatrix(); } //popMatrix(); } if (record == true) { endRaw(); record = false; // Stop recording to the file } }

void keyPressed() { if (key == 'R' || key == 'r') { // Press R to save the file record = true; } }

//Y=X^2 FORM

//P07

:: Processing3D // P08:

CurveMonster

The Sin and Cos are the main concept of the project. The beginShape(); vertex(); bezierVertex(); endShape(); functions are used to draw the surfaces in this program. After drawing a single element surface, the parameters and the procedure of the Sin, Cos, the rotation the element by X or Y or Z Axis can be changed to get the complex form. >>>>>http://pandalabccc.blogspot.com/2010/07/curvesmonster.html

CODE: import processing.dxf.*; boolean record = false; int a=10;increment of the for loop void setup() { size(700, 700, P3D); background(0); noStroke(); //noLoop(); } void draw() { if (record == true) { beginRaw(DXF, "output.dxf"); // Start recording to the file } lights(); background(0); translate(width/2, height/2, -mouseX/2); rotateZ(map(mouseY*2, 10, height, 10, PI)); rotateY(map(mouseX*2, 10, width, 10, PI)); //fill(random(0,255),random(0,255),random(0,255)); //noFill(); for(int j=0; j<=360; j=j+a){ pushMatrix(); //translate(j,j,j);//turn on or off to make differences //rotateZ(j*PI/180);//same as above //rotateX(j*PI/180);//same as above rotateY(j*PI/180); //rotate(j*PI/180);//same as above curvesForm(300,500,200,10); //feed the date here popMatrix(); } if (record == true) { endRaw(); record = false; // Stop recording to the file } }

// the main program of this script to form the single surface void curvesForm(float l, float m, float n, float d){ for(int i=0; i<360; i+=d){ beginShape(); stroke(255); stroke(255,0,i/1.2); noStroke(); //strokeWeight(1); vertex(0, 0, 0); bezierVertex(l*sin(PI*i/180),0, 0,0 ,m*cos(PI*i/180),0,0 ,0,n*cos(PI*i/180)); endShape(); } } void keyPressed() { if (key == 'R' || key == 'r') { // Press R to save the file record = true; } }

//Curve Monster

//P08

:: Processing3D // P09:

3dSpiroGraph SPIROGRAPH is a toy ruler which could be drawn dramatic and complex graphic through two circles which are tangent to each other. By changing the radius of two tangent circles, and the locations of the starting point, various complex graphics can be drawn by this program. The form shows different traces of the 3D spirograph by rotating different axis.

The variables: r1, r2, r3, step, sum, d1, d2, d3 could be changed to form a complex 3D spirograph. >>>>>http://pandalabccc.blogspot.com/2010/08/spirographform-processing.html

CODE: import processing.dxf.*; boolean record = false; int r1=300;//radius of side circle int r2=100;//radius of middle circle int r3=0;//radius of the drawing position float step = 0.5; int sum =360; int d1 =90; int d2 =1; int d3 =1; //float r0=0;//change the number dramatically void setup(){ size(1280,760,P3D); smooth(); //frameRate(5); //noLoop(); }

void circles(int r1, int r2, int r3){ stroke(255); for(float x=0; x<=sum; x+=step){ //strokeWeight(0.8); pushMatrix(); rotateX(2*PI*x/d1); translate(r1*sin(2*PI*x/360),r1*cos(2*PI*x/360),0);

//point(0,0,0); // pushMatrix(); pushMatrix(); translate((r2-r3)*sin(2*PI*x/360),r2-(r2r3)*cos(2*PI*x/360),0);

//rotateY(2*PI*x/d2); //rotateZ(2*PI*x/d3);

void draw(){ if (record == true) { beginRaw(DXF, "output.dxf"); // Start recording to the file } lights(); background(0); translate(width/2, height/2, -mouseX/2); rotateZ(map(mouseY*2, 10, height, 10, PI)); rotateY(map(mouseX*2, 10, width, 10, PI)); for(int i=0; i<360; i+=360){ pushMatrix(); translate(0,0,0); rotateX(PI*i/360); rotateY(PI*i/360); rotateZ(PI*i/360); //translate(width/2,height/2); noStroke(); //sphere(290); //box(200); circles(r1,r2,r3); popMatrix(); } if (record == true) { endRaw(); record = false; // Stop recording to the file } }

box(x/10); //point(0,0,0); popMatrix(); popMatrix(); } //r0=r0+1; } void keyPressed() { if (key == 'R' || key == 'r') { // Press R to save the file record = true; } }

//3d Spirograph

//P09

:: Processing3D // P10:

SinCosForm The complex “SinCos Form” is populated by the box function in “Processing”. The x in the box(x) function is the value of the box size. The program translate the ZERO (0,0,0) point and populate the boxes at the same time. The sin and cos curves are described by boxes.

When populating the boxes, the program also rotates the boxes’ X, Y and Z Axis to shape the 3D form. The results are like a series of organic creatures in the Encyclopedia. >>>>>http://pandalabccc.blogspot.com/2010/07/sincosform-processing-3d.html

CODE: import processing.dxf.*; boolean record = false; float d1 =10; float s1 =100; float r1 = 2; float d2 = 50; void setup() { size(700, 700, P3D); background(255); noStroke(); //noLoop(); } void draw() { if (record == true) { beginRaw(DXF, "output.dxf"); // Start recording to the file } int r =100; int s =100; lights(); background(255); translate(width/2, height/2, -mouseX/2); rotateZ(map(mouseY*2, 10, height, 10, PI)); rotateY(map(mouseX*2, 10, width, 10, PI)); for(int i=0; i<360; i+=d1){ pushMatrix(); translate(0,0,0); rotateX(PI*i/360); rotateY(PI*i/360); rotateZ(PI*i/360); spherecubes(mouseX-s1); //spherecubes(mouseX/2-i); popMatrix(); } if (record == true) { endRaw(); record = false; // Stop recording to the file } } void keyPressed() { if (key == 'R' || key == 'r') { // Press R to save the file record = true; } }

void spherecubes(float r){ for (float x = 0; x < r1*PI; x+=PI/d2) { pushMatrix(); translate(r*sin(x), r*cos(x), r*cos(x)); //fill(random(0,255),random(0,255),random(0,255)); //sphere(3*x); box(x*5); //strokeWeight(2); //stroke(0); //point(0,0,0); popMatrix(); } }

//SinCosForm

//P10

:: Processing3D // P11:

Photographic Form

The concept of the project is to use the program to read the â&#x20AC;&#x2DC;BRIGHTNESSâ&#x20AC;&#x2122; of the image, then transfer the data from the brightness to the height or the z location of the boxes. The program also puts the boxes back to the array matching the original image to transfer a 2D image to a 3D form. The portraits of 3 philosophers who are often discussed in Digital Architectural theory, Nietzsche, Bergons, and Deleuze are be choosen and transformed into 3D form. The users can put any image they want to make a 3D form. >>>>>http://pandalabccc.blogspot.com/2010/08/photographicform-processing.html

CODE: PImage img; // The source image int cellsize = 2; // Dimensions of each cell in the grid int cols, rows; // Number of columns and rows in our system import processing.dxf.*; boolean record = false; void setup() { size(1280, 760, P3D); img = loadImage("Nietzsche.jpg"); // Load the image cols = img.width/cellsize; // Calculate # of columns rows = img.height/cellsize; // Calculate # of rows }

float m =brightness(img.pixels[loc]); translate(x,y,0); fill(m,m,m); noStroke(); //fill(255); //rectMode(CENTER); //sphere(brightness(img.pixels[loc])/100); box(2,2,m/2); //rect(0,0,cellsize,cellsize); popMatrix(); } } popMatrix(); }

}

void draw() { if (record == true) { beginRaw(DXF, "output.dxf"); // Start recording to the file } lights(); background(0); translate(width/3, height/6, -mouseX/10); //rotateZ(map(mouseY*2, 10, height, 10, PI)); rotateY(map(-4*mouseX, 10, width, 10, PI)); for(int k=0; k<360; k+=360){ pushMatrix(); translate(100,100,0); rotateX(PI*k/360); rotateY(PI*k/360); rotateZ(PI*k/360); loadPixels(); // Begin loop for columns for ( int i = 0; i < cols;i++) { // Begin loop for rows for ( int j = 0; j < rows;j++) { int x = i*cellsize + cellsize/2; // x position int y = j*cellsize + cellsize/2; // y position int loc = x + y*img.width; // Pixel array location color c = img.pixels[loc]; // Grab the color //float z = (100/(float)width) * brightness(img.pixels[loc]) - 100.0); // Translate to the location, set fill and stroke, // and draw the rectangle pushMatrix();

void keyPressed() { if (key == 'R' || key == 'r') { // Press R to save the file record = true; } }

//Photographic Form

//P11

:: Rhino/ Grasshopper // P12:

PaperFolding The concept is from a paper folding method. The width and the length of the single element can be changed by one of the plug-in in Rhinoceros called “grasshopper.” Each of the single elements is set to one surface. Once the parameters of the single element are changed, the whole surface form will be influenced. The “mirror by surface” function under grasshopper makes the surface more flexible and shape a non-linear form. >>>>>http://pandalabccc.blogspot.com/2010/04/paperfoldingrhinograsshopper.html

COMPONENT: single element

move

move

mirror

mirror from surface

//PaperFolding

//P12

:: Rhino/ Grasshopper // P13:

WaterResidential

Basically the form are created by using “random reduce” function in grasshopper. From the top view, the form is followed the shape of the Chinese character “水”, so called the “water residential.” >>>>>http://pandalabccc.blogspot.com/2010/04/waterrhinograsshopper.html

COMPONENT:

grid plane

mirror from curve

random reduce

parameters

//Water(ć°´)Residential

//P13

:: Rhino/ Grasshopper // P14:

Lotus Form The parameters of the petal can be changed to populate different flower shape. When the width or the length of the petal is changed, the whole flower will be also changed as a flower blooming. The â&#x20AC;&#x153;Lotusâ&#x20AC;? forms are put into the sky as a floating city which creates a fantasy imagination. >>>>>http://pandalabccc.blogspot.com/2010/08/turtlegraphic-02-processing.html

COMPONENT:

single petal

rotate and bloom

parameters

//LotusForm

//P14

//LotusForm

//P14

:: Rhino/ Grasshopper // P15:

CameraWall The grids of honey comb are drawn by hexagon function. The surface of the camera wall is created by connecting divided points on the hexagon, and the circle which share the same center. The attractor controls openings of the â&#x20AC;&#x2DC;camera wall.â&#x20AC;&#x2122; The closer the attractor locates, the bigger the opening gets. >>>>>http://pandalabccc.blogspot.com/2010/05/camerawall-rhinograsshopper.html

COMPONENT:

parameters

hexagon and circle curves loft surface

attractor control the openging

//CameraWall

//P15

:: Rhino/ Grasshopper // P16:

TreeColumn I The project is drawn by using the “divide curves” function under the grasshopper. The tree shape is started from one point and branch out to 4 points by dividing a circle which has the same X and Y location of the starting point but is higher in certain distance. The branches of the tree are drawn by repeating the method above. The grasshoppers’ components allow us to change the angle of the branches. >>>>>http://pandalabccc.blogspot.com/2010/05/treecolumnsrhinograsshopper.html

COMPONENT:

parameters single tree tree columns

the x and y numbers of the tree columns

//TreeColumn I

//P16

:: RhinoScript // P17:

TreeColumn II The L-System tree is created by “RhinoScript” which is a scripting program inherited in Rhinoceros. The L-System is an algorithm to split 1 into 2, 2 into 4...etc. The concept of the project is to use the end point of the first line as the starting point f the second line. The whole “tree columns II” is based on this method. The forms of the branches are drawn by the “pipe” command in RhinoScript. Both sides of the tree branches could be changed in the code. >>>>>http://pandalabccc.blogspot.com/2010/07/treecolumn-ii-rhinoscript.html

CODE: Dim A : A = 20 Dim strcmd

'Call Rhino.EnableRedraw(False) Call Tree_02(0,0,0,0,0,20,0,4) 'Call Rhino.EnableRedraw(True) Sub Tree_02(x1,y1,z1,x2,y2,z2,angle,n) If n > 0 Then Call Rhino.AddLine(Array(x1,y1,z1),Array(x2,y2,z2)) ‘draw lines Dim strcmd strcmd = "pipe " & "sellast 0.3 0.3 enter enter" Rhino.Command strcmd ‘make pipe branches Dim D D = Rhino.Distance(Array(x1,y1,z1),Array(x2,y2,z2)) ‘get the distance Dim x3,y3,z3,i,r r=90 For i = 1 To 360/r y3 = y2 + Sin(i*(r/180*pi))*Sin((Angle-A)/180*pi)*D*0.95 x3 = x2 + Cos(i*(r/180*pi))*Sin((Angle-A)/180*pi)*D*0.9 z3 = z2 + Cos((Angle-A)/180*pi)*D*0.95 Call Tree_02(x2,y2,z2,x3,y3,z3,Angle-A,n-1) Next ‘use for loop to branch out strcmd = "pipe " & "sellast 0.3 0.3 enter enter" Rhino.Command strcmd End If End Sub

//TreeColumn II

//P17

:: RhinoScript // P18:

HoneyComb Wall

The honeycomb wall is created by â&#x20AC;&#x2DC;RhinoScript.â&#x20AC;&#x2122; The program projects the honeycomb grid onto the surface and lofts the honeycomb grid from the ground to the surface. The program will ask you to choose the surface to project, and start to generate the whole wall form. >>>>>http://pandalabccc.blogspot.com/2010/07/honeycombwall-x-michael-wazowski.html

CODE: Sub Polygon(x,y,r,strSurface) Dim a,b,c,d,e,f,arrPts, arrPolyline, arrSrf a= Array(x+(r*Sin((60/360)*pi)),y+(r*Cos((60/360)*pi)),0) b= Array(x+r,y+0,0) c= Array(x+(r*Sin((60/360)*pi)),y-(r*Cos((60/360)*pi)),0) d= Array(x-(r*Sin((60/360)*pi)), y-(r*Cos((60/360)*pi)),0) e= Array(x-r,y+0,0) f= Array(x-(r*Sin((60/360)*pi)), y+(r*Cos((60/360)*pi)),0) arrPts= Array(a,b,c,d,e,f,a) arrPolyline=Rhino.AddPolyline(arrPts) Dim arrResults arrResults = Rhino.ProjectCurveToSurface(arrPolyline, strSurface, Array(0,0,-1)) Dim strcmd1 strcmd1 = "-Loft " & "Selcrv Enter Enter type=uniform Enter" Rhino.Command strcmd1 Dim strcmd2 strcmd2 = "selcrv delete" Rhino.Command strcmd2 End Sub ‘ draw single honeycomb grid and project to surface Sub polygonarray Dim strSurface strSurface = Rhino.GetObject("Select surface to project onto") Dim r:r =10 For i=0 To 40 Step 1 For j=0 To 15 Step 1 If i Mod 2 =0 Then Polygon i*r*((Sin((60/360)*pi))+1),j*r*2*(Cos((60/360)*pi)),r,strSurface Else Polygon i*r*((Sin((60/360)*pi))+1),r*(Cos((60/360)*pi))+j*r*2*(Cos((60/360)*pi)),r,strSurface End If Next Next End Sub ‘ use for loop to make the grid polygonarray

//HoneycombWall

//P18

:: Rhino/pointSet Reconstruction // P19:

VBox

The voronoi graphics and form are created by the Rhino Plug-in. “pointSet Reconstruction.” The random points for populating the voronoi are created both by “Spherical Cloud” function in grasshopper and the RhinoScript. The 3D voronoi and the triangular surfaces are easily produced by this plug-in. >>>>>http://pandalabccc.blogspot.com/2010/09/voronoigrasshopper-or-rhinoscript.html

delaunay triangulation

PROCESS: triangularSurface

//V-Box01 triangularSurface

//P19

//V-Box01 voronoiSphere

2D voronoi

PROCESS: voronoiSphere

//P19

//V-Box01 3D voronoi

voronoiBox

PROCESS: voronoiBox

//P19

//V-Box01 voronoiBox

//P19

:: Rhino/equipotential // P20:

TopoFurnitures The forms of the topo-furniture are drawn by “equipotential” which is another Rhino plug-in.” The equipotential provide a new technique which is based on ‘topology’ for modeling. The images below shows how equipotential model the form. The organic and natural forms are similar to the ideas ‘fat-free’ from the industrial designer, Ross Lovergrove.

>>>>>http://pandalabccc.blogspot.com/2010/10/topofurnitures-rhinopluginequipotential.html

PluginWindow:

//TopoFurnitures

//P20

//TopoFurnitures

//P20

:: MAYA // P21:

MotionPath Form The animation forms are made by MAYA. Basically, the forms are created by “motion path” and “create animation snap shot” in MAYA animation category. Smooth cylinder-like objects are created as elements which are going to be populated. The element is made to run along the circle path by “motion path” function. The final form is created by “create animation snap shot” which can snap all the form from the movement. >>>>>http://pandalabccc.blogspot.com/2010/08/freakwall-maya-pathagrphic-form.html >>>>>http://pandalabccc.blogspot.com/2010/08/monster-maya-pathagraphic-form.html

WorkingWindow:

Object Path

Snap Shot Result

//Mation-path Form

freakWall

//P21

//Mation-path Form

Monster

//P21

:: MAYA Mel // P22:

CobrasForm

The cobras forms are created by MayaMel script The final form is shaped by “setAttr”(set attribute function) which can move, rotate and scale the original element form. The result seems like a cobra, or a butterfly flapping its wings. ot a Lady GAGA’s outfit. >>>>>http://pandalabccc.blogspot.com/2010/10/cobras-ladygaga-maya-mel-script.html

CODE:

for($s=1; $s<=30; $s=$s+1){ setAttr "pSphere1.translateY" $s; setAttr "pSphere1.rotateY" (6*$s); //setAttr "pSphere1.rotateZ" (12*$s); setAttr "pSphere1.scaleX" (0.5*$s); setAttr "pSphere1.scaleY" (0.1*$s); duplicate pSphere1; setAttr "pSphere1.translateY" $s; setAttr "pSphere1.rotateY" (-6*$s); //setAttr "pSphere1.rotateZ" (12*$s); setAttr "pSphere1.scaleX" (0.5*$s); setAttr "pSphere1.scaleY" (0.1*$s); duplicate pSphere1; };

//CobrasForm

//P22

:: MAYA Mel // P23:

SpeedCloud

The speed cloud is created by MayaMel script. The basic scripting logic in MayaMel is as same as others. To make the sphere uprise as a spiral, the program uses simple “for-loop” with “Sphere” function and move those sphere to the location which is defined by Sin and Cos. In this script, different forms can also be translated, scaled, and set to the sin, cos curves. The higher it goes, the bigger size it gets. The whole form is like a “cloud” or “cotton candy”. >>>>>http://pandalabccc.blogspot.com/2010/09/speedcloud-mayamel-script.html

CODE: float $s=0; float $w=3; float $l=3; for($s=0; $s<=15; $s=$s+1) {//if(($s%2)==0){ //sphere -r (1.5*$s); //xform -translation ($w*$s*(sin(18*$s))) (4*$s) ($w*$s*(cos(18*$s))) ; select -r pSphere1; duplicate pSphere1; move ($l*$s*(sin(18*$s))) (20*$s) ($l*$s*(cos(18*$s))); scale ($s/2) ($s/2) ($s/2); rotate -r ($s*12) 0 0; //} }; float $s=0; float $t=0; float $w=3; float $l=3; for($t=0; $t<=10; $t=$t+2) { for($s=0; $s<=10; $s=$s+2) { //if(($s%2)==0){ //sphere -r (1.5*$s); //xform -translation ($w*$s*(sin(18*$s))) (4*$s) ($w*$s*(cos(18*$s))) ; select -r pPlane1; duplicate pPlane1; move $s 0 $t; scale 1 ((rand(1,$s))+(rand(1,$t))) 1; select -r pPlane1; duplicate pPlane1; move $s 0 $t; scale 1 (-((rand(1,$s))+(rand(1,$t)))) 1; //rotate -r 0 0 ($s*10) ; //} } };

//SpeedCloud

//P23

:: MAYA Mel // P24:

Subdivision Wall The project is formed by using “polysphere” function in MayaMel. Various forms could be created by changing the “subdivision” of the sphere. The double for-loop is used to define the numbers of the subdivision. The script will create the sphere with different subdivision and move it to a sin curve to shape a sin-wave wall. >>>>>http://pandalabccc.blogspot.com/2010/10/subdivisionwall-mayamel.html

CODE:

int $y; int $x; for($y=3; $y<=30; $y=$y+1){ for($x=3; $x<=10; $x=$x+1){ polySphere -radius 10 -sx $x -sy $y; //draw spheres //polyCube -w (5*$x) -h (5*$y) -d (0.2*($x+$y)) -sx $x -sy $y; //draw cubes move -r (12*($y)) (12*($x)) (12*(sin(18*($x+$y)))); rotate -r (18*($x+$y)) 0 0; } }

//SubdivisionWall

//P24

Interactive Design arduino + processing + grasshopper + sensors + motors :: location: Tamkang University, 127 gallery... :: year: 2009-10

:: Interactive // I01-06:

Interactive Toy I01/PandaWall I02/PandaMask I03/LightDetector I04/PenWalk I05/AmorWall I06/AmorLight

CATALOGUE

I01

I02

I05

I03

I04

I06

:: Interactive // I01:

Panda Wall arduino + processing + projector + light sensors :: location: Tamkang University :: year: 2009-10

The sizes of the panda faces are controlled by the light sensors. The more the light is covered, the bigger panda faces will be seen. When people walk by the installation, the panda faces will get bigger one after another. The audience will notice the situation and try to interact with the project. There are three different effects: the zooming of the face, the changing of the eyesâ&#x20AC;&#x2122;, the popping up of the panda face. >>>>>http://pandalabccc.blogspot.com/2010/07/pandawalltest-arduino-x-processing.html

:: Interactive // I02:

Panda Mask arduino + processing + projector :: location: Tamkang University :: year: 2009-10

In this project, the face image of the panda face is projector on to the mask. By turning the three varistor buttons, the RGB color of the PANDA's eyes can be controlled by the users.

This is one of the example on how physical world can change the virtual world. >>>>>http://pandalabccc.blogspot.com/2010/05/pandamaskprocessing-x-arduino.html

//Panda Mask

//I02

:: Interactive // I03:

Light Detector arduino + light sesors + flashlight + servo motors :: location: Tamkang University :: year: 2009-10

Light detector is a machine which can sense the light and transfer the light into drawing.

The servo motor connect to Arduino are controlled by the light sensor. When the light sensor sense the light, the Arduino will transfer the data to the servo motors to make the legs rotate and draw the curves. The result is like the drawing which is drawn by the â&#x20AC;&#x153;lie detector.â&#x20AC;? >>>>>http://pandalabccc.blogspot.com/2010/05/lightliedetector-arduino-lightsensor.html

//Light Detector

//I03

:: Interactive // I04:

Pen Walker japanuino + light sesors + flashlight + servo motors :: location: Tamkang University :: year: 2009-10

Pen_Walker is made of Arduino, light sensors and servo motors. The Arduino I used is called "Japaniuno" from the Japan Magazine-Adult's Science The power supply of the Japaniuno and servo motors are connect to the three 3A batteries. The data from the three eyes (photovaristors) controls the rotation of the three legs and the color of the LED light in the center of Pen_Walker. >>>>>http://pandalabccc.blogspot.com/2010/06/penwalker-japanino-arduino-x.html

light sensors

servo motors

japanuino

//Pen Walker

//I04

:: Interactive // I05:

Amor Wall arduino + light sesors + servo motors + paper folding :: location: Tamkang University :: year: 2009-10

The traditional Chinese paper-folding toy called "East-West-South-North-Center" is used as a component in this project. The surface is created by those folding paper. Two servo motors are used to control the nods on the surface to spin the plates which have strings connect to the surface of the "East-West-South-North-Center". Arduino is used as the micro-controller of this project. The rotation of the nods can change the whole shape of the surface by the data from the photovaristors and varistors. >>>>>http://pandalabccc.blogspot.com/2010/07/armorskin-paperfolding-aruino-servo.html

//Amor Wall

//I05

:: Interactive // I06:

Amor Light arduino + sound sensor + paper folding + fluorescent light :: location: Tamkang University :: year: 2009-10 The Armor_Light project is controlled by the sound sensor. Tracing paper is used as material and be folded into 3D. The basic element is a traditional Chinese paper folding toy.

The folding papers are connected to make the skin of the Armor Light. The â&#x20AC;&#x153;on and offâ&#x20AC;? of the light inside the "Armor Skin" are controlled by sound. The light will react as a heart beat following the music beat to create vivid atmosphere in the space. It can also interact with the audiences who are passing by because of the sound they made. >>>>>http://pandalabccc.blogspot.com/2010/08/armorlight-soundsensor.html

:: Interactive // I07:

Moire Wall arduino + processing + servo motors :: location: Tamkang University :: year: 2009-10

INTRODUCTION:

The Moire_Pattern happens when two same patterns superimposed together by rotating or scaling one of it. When people saw this kind of pattern, they will feel dizzy and has 3D illusive. This moire concept is used in this project to make a wall which can interact with the audiences. The rotation of the Moire was controlled by light sensors. The audiences can use hand gwstures to change the angle of the rotation. There are 13 moire elements in this wall, and each of them is controlled by it's own sensor and servo which connected to the Arduino Mega. >>>>>http://pandalabccc.blogspot.com/2010/05/finalmoirewall-arduino-mega-lightsensor.html >>>>>http://pandalabccc.blogspot.com/2010/05/moirewall-arduino-mega-lightsensor.html

//MoireWall :: MoireWall exploration The exploration drawing shows the organization of the Moire_Wall.

The laser-cutting supporter holds the servo motors which are the main components of this project. The orange spots on the backboard are the light sensors which control the rotation of the moire patterns. All of the structures and boards are cut by laser cutter.

//I07

//MoireWall :: production process The frame cut by laser cutter support all the servo motors and sensors inserted in it. For the final project, Arduino Mega is used in the final project because it has 15 analogue input pins and 48 output pins(including digital and analogue). The backboard and moire pattern which are screw onto the servo motors are also cut by the laser cutter.

//I07

//MoireWall :: MoireWall final project

//I07

//MoireWall :: Interactive MoireWall The value from the photovaristor is used to control the rotation of the servo motors. 4 different ways to make the Moire_Pattern rotate are: 1. to use a flashlight; 2. to use a fluorescent light tube; 3. to use hand gestures; 4. to use projector. The â&#x20AC;&#x153;If -elseâ&#x20AC;? condition in this code is uploaded to the Arduino for sensing the light and controlling the rotation of the Moire_Pattern.

1

flashlight

fluorescent light tube

2

use hand gestures

3

4

use projector

//I07

//MoireWall :: MoireWall final project

//I07

:: Interactive // I08:

Spiral Wall arduino + processing + servo motors :: location: Tamkang University :: year: 2009-10

INTRODUCTION:

The concept is to use cell membrane structure as a subject body, transparent but clearly defined to instigate an atmosphere through light. Installation is made out of 12 single elements, each one a tube made of silk strings. There are 24 servo motors and 1 Arduino board to control 12 individual elements, all controlled by Processing. By pressing the keyboard (or clicking the mouse), the user can control the servo motors rotating clockwise or counter-clockwise to make it tense or loose thus creating an atmosphere with ever changing Moire like effects. >>>>>http://pandalabccc.blogspot.com/2010/07/spiralwall-final-arduino-processing.html >>>>>http://pandalabccc.blogspot.com/2010/07/spiralwall-process-arduino-processing.html

//SpiralWall ::simulation

The pattern is simulated by grasshopper. The pattern will be changed by sensing the environment data and body movement.

//ZERO

//Rotate

//Translate

//I08

//SpiralWall ::mechanic study In the beginning, the project was designed as a simple mechanic object which has two plates with certain distance in between connecting by strings. The gearwheel is to control the rotation of the plates in a mechanic way with each other. The rotation of the plates controls the string pattern between them.

1

2

3 //I08

//SpiralWall ::electric study In electric study, the single prototype project of Spiral_Wall was controlled by Arduino. Arduino will send the data from computer to servo motors to change the rotation of the plates and make the Single Spiral_Wall pattern. While the ball is inserted in the strings, the intersect point will change. The supporters are made of acrylic cut by laser cutter. The strings materials between the plates are called silk-strings.

//I08

//SpiralWall ::single electric prototype

Servo Motor

Insert

Servo Motor

//I08

//SpiralWall ::arduino & processing code The â&#x20AC;&#x153;Processingâ&#x20AC;? is used to communicate with Arduino in the project. The interface is design by Processing, so the audience can control each of the single spiral elementm by pressing differnt buttoms on the keyboard. The code for changing the pattern is also program based on different order. Both Arduino and Processing codes are below.

processing CODE: import processing.serial.*; //serial data-in Serial myPort; // Create object from Serial class void setup(){ size(1200, 300); background(0); //setup serial port connecting //println(Serial.list()); String portName = Serial.list()[1]; myPort = new Serial(this, portName, 9600); myPort.clear(); }

void draw(){ background(0); stroke(0, 0,0); line(width/2, 0, width/2, height);

if(keyPressed){ if(key=='q'){ myPort.write(1); //send message to serial port smooth(); fill(int(random(255)),int(random(255)),int(random(255))); ellipse(width/24, height/2, height/3,height/3); PFont font; font = loadFont("Arial-Black-48.vlw"); textFont(font); fill(0); textAlign(CENTER); text("01",width/24, height/2); } if(key=='w'){ myPort.write(2); //send message to serial port smooth(); fill(int(random(255)),int(random(255)),int(random(255))); ellipse(3*width/24, height/2, height/3,height/3); PFont font; font = loadFont("Arial-Black-48.vlw"); textFont(font); fill(0); textAlign(CENTER); text("02",3*width/24, height/2); }

if(key=='e'){ myPort.write(3); //send message to serial port smooth(); fill(int(random(255)),int(random(255)),int(random(255))); ellipse(5*width/24, height/2, height/3,height/3);

if(key=='u'){ myPort.write(7); //send message to serial port smooth(); fill(int(random(255)),int(random(255)),int(random(255))); ellipse(13*width/24, height/2, height/3,height/3);

PFont font; font = loadFont("Arial-Black-48.vlw"); textFont(font); fill(0); textAlign(CENTER); text("03",5*width/24, height/2); }

PFont font; font = loadFont("Arial-Black-48.vlw"); textFont(font); fill(0); textAlign(CENTER); text("07",13*width/24, height/2); }

if(key=='r'){ myPort.write(4); //send message to serial port smooth(); fill(int(random(255)),int(random(255)),int(random(255))); ellipse(7*width/24, height/2, height/3,height/3);

if(key=='i'){ myPort.write(8); //send message to serial port smooth(); fill(int(random(255)),int(random(255)),int(random(255))); ellipse(15*width/24, height/2, height/3,height/3);

PFont font; font = loadFont("Arial-Black-48.vlw"); textFont(font); fill(0); textAlign(CENTER); text("04",7*width/24, height/2); }

PFont font; font = loadFont("Arial-Black-48.vlw"); textFont(font); fill(0); textAlign(CENTER); text("08",15*width/24, height/2); }

if(key=='t'){ myPort.write(5); //send message to serial port smooth(); fill(int(random(255)),int(random(255)),int(random(255))); ellipse(9*width/24, height/2, height/3,height/3);

if(key=='o'){ myPort.write(9); //send message to serial port smooth(); fill(int(random(255)),int(random(255)),int(random(255))); ellipse(17*width/24, height/2, height/3,height/3);

PFont font; font = loadFont("Arial-Black-48.vlw"); textFont(font); fill(0); textAlign(CENTER); text("05",9*width/24, height/2); }

PFont font; font = loadFont("Arial-Black-48.vlw"); textFont(font); fill(0); textAlign(CENTER); text("09",17*width/24, height/2); }

if(key=='y'){ myPort.write(6); //send message to serial port smooth(); fill(int(random(255)),int(random(255)),int(random(255))); ellipse(11*width/24, height/2, height/3,height/3); PFont font; font = loadFont("Arial-Black-48.vlw"); textFont(font); fill(0); textAlign(CENTER); text("06",11*width/24, height/2); }

if(key=='p'){ myPort.write(10); //send message to serial port smooth(); fill(int(random(255)),int(random(255)),int(random(255))); ellipse(19*width/24, height/2, height/3,height/3); PFont font; font = loadFont("Arial-Black-48.vlw"); textFont(font); fill(0); textAlign(CENTER); text("10",19*width/24, height/2); }

if(key=='['){ myPort.write(11); //send message to serial port smooth(); fill(int(random(255)),int(random(255)),int(random(255))); ellipse(21*width/24, height/2, height/3,height/3); PFont font; font = loadFont("Arial-Black-48.vlw"); textFont(font); fill(0); textAlign(CENTER); text("11",21*width/24, height/2); } if(key==']'){ myPort.write(12); //send message to serial port smooth(); fill(int(random(255)),int(random(255)),int(random(255))); ellipse(23*width/24, height/2, height/3,height/3); PFont font; font = loadFont("Arial-Black-48.vlw"); textFont(font); fill(0); textAlign(CENTER); text("12",23*width/24, height/2); } if(keyPressed){ if(key=='a'){ myPort.write(13); //send message to serial port smooth(); fill(int(random(255)),int(random(255)),int(random(255))); rectMode(CENTER); rect(width/24, height/2, height/3,height/3);

PFont font; font = loadFont("Arial-Black-48.vlw"); textFont(font); fill(0); textAlign(CENTER); text("01",1*width/24, height/2); }

if(key=='h'){ myPort.write(18); //send message to serial port smooth(); fill(int(random(255)),int(random(255)),int(random(255))); rectMode(CENTER); rect(11*width/24, height/2, height/3,height/3); PFont font; font = loadFont("Arial-Black-48.vlw"); textFont(font); fill(0); textAlign(CENTER); text("06",11*width/24, height/2); }

if(key=='b'){ myPort.write(26); //send message to serial port fill(int(random(255)),int(random(255)),int(random(255))); ellipse(12*width/24, height/4, height/3,height/3); PFont font; font = loadFont("Arial-Black-48.vlw"); textFont(font); fill(0,0,0); textAlign(CENTER); text("GO", width/2, 2*height/7); } if(key==' '){ myPort.write(25); //send message to serial port fill(255); rectMode(CORNER); rect(0,0,width,height);

if(key=='j'){ myPort.write(19); //send message to serial port smooth(); fill(int(random(255)),int(random(255)),int(random(255))); rectMode(CENTER); rect(13*width/24, height/2, height/3,height/3);

PFont font; font = loadFont("Arial-Black-48.vlw"); textFont(font); fill(0); textAlign(CENTER); text("CLEAR!!!", width/2, height/2);

PFont font; font = loadFont("Arial-Black-48.vlw"); textFont(font); fill(0); textAlign(CENTER); text("07",13*width/24, height/2); } if(key=='k'){ myPort.write(20); //send message to serial port smooth(); fill(int(random(255)),int(random(255)),int(random(255))); rectMode(CENTER); rect(15*width/24, height/2, height/3,height/3);

} } else{ myPort.write(0); //send message to serial port } } }

PFont font; font = loadFont("Arial-Black-48.vlw"); textFont(font); fill(0); textAlign(CENTER); text("08",15*width/24, height/2); }

if(key=='s'){ myPort.write(14); //send message to serial port smooth(); fill(int(random(255)),int(random(255)),int(random(255))); rectMode(CENTER); rect(3*width/24, height/2, height/3,height/3);

if(key=='l'){ myPort.write(21); //send message to serial port smooth(); fill(int(random(255)),int(random(255)),int(random(255))); rectMode(CENTER); rect(17*width/24, height/2, height/3,height/3);

PFont font; font = loadFont("Arial-Black-48.vlw"); textFont(font); fill(0); textAlign(CENTER); text("02",3*width/24, height/2); }

PFont font; font = loadFont("Arial-Black-48.vlw"); textFont(font); fill(0); textAlign(CENTER); text("09",17*width/24, height/2); }

if(key=='d'){ myPort.write(15); //send message to serial port smooth(); fill(int(random(255)),int(random(255)),int(random(255))); rectMode(CENTER); rect(5*width/24, height/2, height/3,height/3);

if(key==';'){ myPort.write(22); //send message to serial port smooth(); fill(int(random(255)),int(random(255)),int(random(255))); rectMode(CENTER); rect(19*width/24, height/2, height/3,height/3);

PFont font; font = loadFont("Arial-Black-48.vlw"); textFont(font); fill(0); textAlign(CENTER); text("03",5*width/24, height/2); }

PFont font; font = loadFont("Arial-Black-48.vlw"); textFont(font); fill(0); textAlign(CENTER); text("10",19*width/24, height/2); }

if(key=='f'){ myPort.write(16); //send message to serial port smooth(); fill(int(random(255)),int(random(255)),int(random(255))); rectMode(CENTER); rect(7*width/24, height/2, height/3,height/3);

if(key=='z'){ myPort.write(23); //send message to serial port smooth(); fill(int(random(255)),int(random(255)),int(random(255))); rectMode(CENTER); rect(21*width/24, height/2, height/3,height/3);

PFont font; font = loadFont("Arial-Black-48.vlw"); textFont(font); fill(0); textAlign(CENTER); text("04",7*width/24, height/2); }

PFont font; font = loadFont("Arial-Black-48.vlw"); textFont(font); fill(0); textAlign(CENTER); text("11",21*width/24, height/2); }

if(key=='g'){ myPort.write(17); //send message to serial port smooth(); fill(int(random(255)),int(random(255)),int(random(255))); rectMode(CENTER); rect(9*width/24, height/2, height/3,height/3);

if(key=='x'){ myPort.write(24); //send message to serial port smooth(); fill(int(random(255)),int(random(255)),int(random(255))); rectMode(CENTER); rect(23*width/24, height/2, height/3,height/3);

PFont font; font = loadFont("Arial-Black-48.vlw"); textFont(font); fill(0); textAlign(CENTER); text("05",9*width/24, height/2); }

PFont font; font = loadFont("Arial-Black-48.vlw"); textFont(font); fill(0); textAlign(CENTER); text("12",23*width/24, height/2); }

//I08

//SpiralWall arduino CODE: int incomingData; #include <Servo.h> Servo myservo01; Servo myservo02; Servo myservo03; Servo myservo04; Servo myservo05; Servo myservo06; Servo myservo07; Servo myservo08; Servo myservo09; Servo myservo10; Servo myservo11; Servo myservo12; float pos = 0; int pos0 = 0; void setup() { Serial.begin(9600); myservo01.attach(13); object myservo02.attach(12); myservo03.attach(11); myservo04.attach(10); myservo05.attach(9); myservo06.attach(8); myservo07.attach(7); myservo08.attach(6); myservo09.attach(5); myservo10.attach(4); myservo11.attach(3); myservo12.attach(2); } void loop(){ if(Serial.available() > 2){ // read the incoming data incomingData = int(Serial.read()); Serial.flush(); if(incomingData == 1){ for(pos = 0; pos < 180; pos += 10) { myservo01.write(pos); delay(15); } } else if(incomingData == 2){ for(pos = 0; pos < 180; pos += 10) { myservo02.write(pos); delay(15); } } else if(incomingData == 3){ for(pos = 0; pos < 180; pos += 10) { myservo03.write(pos); delay(15); } } else if(incomingData == 4){ for(pos = 0; pos < 180; pos += 10) { myservo04.write(pos); delay(15); } } else if(incomingData == 5){ for(pos = 0; pos < 180; pos += 10) { myservo05.write(pos); delay(15); } } else if(incomingData == 6){ for(pos = 0; pos < 180; pos += 10) { myservo06.write(pos); delay(15); } } else if(incomingData == 7){ for(pos = 0; pos < 180; pos += 10) { myservo07.write(pos); delay(15); } }

else if(incomingData == 8){ for(pos = 0; pos < 180; pos += 10) { myservo08.write(pos); delay(15); } }

else if(incomingData == 21){ for(pos = 180; pos>=1; pos-=10) { myservo09.write(pos); delay(15); } }

else if(incomingData == 9){ for(pos = 0; pos < 180; pos += 10) { myservo09.write(pos); delay(15); } }

else if(incomingData == 22){ for(pos = 180; pos>=1; pos-=10) { myservo10.write(pos); delay(15); } }

else if(incomingData == 10){ for(pos = 0; pos < 180; pos += 10) { myservo10.write(pos); delay(15); } }

else if(incomingData == 23){ for(pos = 180; pos>=1; pos-=10) { myservo11.write(pos); delay(15); } }

else if(incomingData == 11){ for(pos = 0; pos < 180; pos += 10) { myservo11.write(pos); delay(15); } }

else if(incomingData == 24){ for(pos = 180; pos>=1; pos-=10) { myservo12.write(pos); delay(15); } }

else if(incomingData == 12){ for(pos = 0; pos < 180; pos += 10) { myservo12.write(pos); delay(15); } }

else if(incomingData == 25){ myservo01.write(pos0); myservo02.write(pos0); myservo03.write(pos0); myservo04.write(pos0); myservo05.write(pos0); myservo06.write(pos0); myservo07.write(pos0); myservo08.write(pos0); myservo09.write(pos0); myservo10.write(pos0); myservo11.write(pos0); myservo12.write(pos0); delay(15); }

if(incomingData == 13){ for(pos = 180; pos>=1; pos-=10) { myservo01.write(pos); delay(15); } } else if(incomingData == 14){ for(pos = 180; pos>=1; pos-=10) { myservo02.write(pos); delay(15); } } else if(incomingData == 15){ for(pos = 180; pos>=1; pos-=10) { myservo03.write(pos); delay(15); } } else if(incomingData == 16){ for(pos = 180; pos>=1; pos-=10) { myservo04.write(pos); delay(15); } } else if(incomingData == 17){ for(pos = 180; pos>=1; pos-=10) { myservo05.write(pos); delay(15); } } else if(incomingData == 18){ for(pos = 180; pos>=1; pos-=10) { myservo06.write(pos); delay(15); } } else if(incomingData == 19){ for(pos = 180; pos>=1; pos-=10) { myservo07.write(pos); delay(15); } } else if(incomingData == 20){ for(pos = 180; pos>=1; pos-=10) { myservo08.write(pos); delay(15); } }

else if(incomingData == 26){ for(pos = 0; pos < 180; pos += 1) { myservo01.write(pos); myservo02.write(pos); myservo03.write(pos); myservo04.write(pos); myservo05.write(pos); myservo06.write(pos); myservo07.write(pos); myservo08.write(pos); myservo09.write(pos); myservo10.write(pos); myservo11.write(pos); myservo12.write(pos); delay(15); } for(pos = 180; pos>=1; pos-=1) { myservo01.write(pos); myservo02.write(pos); myservo03.write(pos); myservo04.write(pos); myservo05.write(pos); myservo06.write(pos); myservo07.write(pos); myservo08.write(pos); myservo09.write(pos); myservo10.write(pos); myservo11.write(pos); myservo12.write(pos); delay(15); } for(pos = 0; pos < 180; pos += 1) { myservo01.write(pos); myservo02.write(pos); myservo03.write(pos); myservo04.write(pos); myservo05.write(pos); myservo06.write(pos); myservo07.write(pos); myservo08.write(pos); myservo09.write(pos);

myservo10.write(pos); myservo11.write(pos); myservo12.write(pos); delay(15); } for(pos = 180; pos>=1; pos-=1) { myservo01.write(pos); myservo02.write(pos); myservo03.write(pos); myservo04.write(pos); myservo05.write(pos); myservo06.write(pos); myservo07.write(pos); myservo08.write(pos); myservo09.write(pos); myservo10.write(pos); myservo11.write(pos); myservo12.write(pos); delay(15); }

for(pos = 0; pos < 180; pos += 1) { myservo01.write(pos); myservo03.write(pos); myservo05.write(pos); myservo07.write(pos); myservo09.write(pos); myservo11.write(pos); delay(15); } for(pos = 0; pos < 180; pos += 1) { myservo02.write(pos); myservo04.write(pos); myservo06.write(pos); myservo08.write(pos); myservo10.write(pos); myservo12.write(pos); delay(15); } for(pos = 180; pos>=1; pos-=1) { myservo02.write(pos); myservo04.write(pos); myservo06.write(pos); myservo08.write(pos); myservo10.write(pos); myservo12.write(pos); delay(15); } for(pos = 180; pos>=1; pos-=1) { myservo01.write(pos); myservo03.write(pos); myservo05.write(pos); myservo07.write(pos); myservo09.write(pos); myservo11.write(pos); delay(15); } for(pos = 0; pos < 180; pos += 5) { myservo01.write(pos); delay(15); } for(pos = 0; pos < 180; pos += 5) { myservo02.write(pos); delay(15); } for(pos = 0; pos < 180; pos += 5) { myservo03.write(pos); delay(15); } for(pos = 0; pos < 180; pos += 5) { myservo04.write(pos); delay(15); }

for(pos = 0; pos < 180; pos += 3.5)

for(pos = 180; pos>=1; pos-=5)

for(pos = 0; pos < 180; pos += 5)

{

{

{

myservo01.write(pos); myservo12.write(pos); delay(15);

myservo03.write(pos); delay(15);

myservo05.write(pos); delay(15); }

}

for(pos = 0; pos < 45; pos += 1.5) { myservo03.write(pos); delay(15); }

for(pos = 75; pos>=1; pos-=2.5) { myservo05.write(pos); delay(15); }

} for(pos = 180; pos>=1; pos-=5)

for(pos = 0; pos < 180; pos += 5)

for(pos = 0; pos < 150; pos += 3) myservo02.write(pos); myservo11.write(pos); delay(15);

for(pos = 180; pos>=1; pos-=5)

for(pos = 0; pos < 180; pos += 5)

}

{

{

for(pos = 0; pos < 180; pos += 5) { myservo08.write(pos); delay(15); }

for(pos = 0; pos <120; pos += 2.5) { myservo03.write(pos); myservo10.write(pos); delay(15); }

myservo09.write(pos); delay(15); } for(pos = 0; pos < 180; pos += 5)

for(pos = 30; pos>=1; pos-=1)

for(pos = 0; pos < 90; pos += 3) {

myservo02.write(pos); delay(15);

myservo06.write(pos); delay(15); }

}

for(pos = 0; pos>=1; pos-=0.5)

for(pos = 0; pos < 105; pos += 3.5) for(pos = 0; pos < 60; pos += 1.5) { myservo02.write(pos); myservo11.write(pos); delay(15); }

for(pos = 0; pos < 90; pos += 2) { myservo04.write(pos); myservo09.write(pos); delay(15); }

{

{

myservo01.write(pos); delay(15);

myservo07.write(pos); delay(15); }

}

}

for(pos = 0; pos < 120; pos += 4) {

{ myservo10.write(pos); delay(15); } for(pos = 0; pos < 180; pos += 5) {

for(pos = 0; pos < 90; pos += 2) { myservo03.write(pos); myservo10.write(pos); delay(15); }

myservo11.write(pos); delay(15);

for(pos = 0; pos < 60; pos += 1.5) { myservo05.write(pos); myservo08.write(pos); delay(15); }

myservo12.write(pos); delay(15);

} for(pos = 0; pos < 150; pos += 3)

}

}

} } for(pos = 0; pos < 135; pos += 4.5) { myservo09.write(pos); delay(15); }

myservo04.write(pos); myservo09.write(pos); delay(15);

for(pos = 0; pos < 180; pos += 5) {

for(pos = 0; pos < 30; pos += 1) { myservo06.write(pos); myservo07.write(pos); delay(15); }

for(pos = 0; pos < 150; pos += 5) { myservo10.write(pos); delay(15); }

{ for(pos = 180; pos>=1; pos-=5) { myservo12.write(pos); delay(15); }

myservo05.write(pos); myservo08.write(pos); delay(15);

for(pos = 30; pos>=1; pos-=1) {

} for(pos = 0; pos < 180; pos += 3.5)

}

myservo06.write(pos); myservo07.write(pos); delay(15);

{

for(pos = 0; pos < 165; pos += 5.5) { myservo11.write(pos); delay(15);

myservo06.write(pos); myservo07.write(pos); delay(15);

}

for(pos = 60; pos>=1; pos-=1.5)

{

myservo05.write(pos); myservo08.write(pos); delay(15);

}

{ for(pos = 180; pos>=1; pos-=5) { myservo11.write(pos); delay(15); }

for(pos = 0; pos < 180; pos += 6)

}

myservo12.write(pos); delay(15);

} for(pos = 180; pos>=1; pos-=5) { myservo10.write(pos); delay(15); }

for(pos = 180; pos>=1; pos-=3.5)\ { myservo06.write(pos); myservo07.write(pos); delay(15); }

for(pos = 180; pos>=1; pos-=5) { myservo09.write(pos); delay(15); } for(pos = 180; pos>=1; pos-=5)

for(pos = 90; pos>=1; pos-=2) { myservo04.write(pos); myservo09.write(pos); delay(15);

for(pos = 120; pos>=1; pos-=2.5) { myservo03.write(pos); myservo10.write(pos); delay(15);

{ myservo08.write(pos); delay(15); } for(pos = 180; pos>=1; pos-=5) {

for(pos = 120; pos>=1; pos-=2.5) { myservo04.write(pos); myservo09.write(pos); delay(15); }

myservo07.write(pos); delay(15);

for(pos = 90; pos>=1; pos-=2) {

}

myservo03.write(pos); myservo10.write(pos); delay(15);

for(pos = 180; pos>=1; pos-=5) { myservo06.write(pos); delay(15);

for(pos = 150; pos>=1; pos-=3) { myservo02.write(pos); myservo11.write(pos); delay(15); }

{ myservo02.write(pos); myservo11.write(pos); delay(15);

for(pos = 180; pos>=1; pos-=5) {

for(pos = 165; pos>=1; pos-=5.5) { myservo11.write(pos); delay(15); } for(pos = 150; pos>=1; pos-=5) { myservo10.write(pos); delay(15); } for(pos = 135; pos>=1; pos-=4.5) { myservo09.write(pos); delay(15); } for(pos = 120; pos>=1; pos-=4) {

for(pos = 60; pos>=1; pos-=1.5)

for(pos = 180; pos>=1; pos-=3.5) { myservo01.write(pos); myservo12.write(pos); delay(15); }

myservo08.write(pos); delay(15); } for(pos = 105; pos>=1; pos-=3.5) { myservo07.write(pos); delay(15);

}

} for(pos = 30; pos>=1; pos-=1) for(pos = 180; pos>=1; pos-=5)

}

}

}

myservo05.write(pos); delay(15);

for(pos = 180; pos>=1; pos-=6) { myservo12.write(pos); delay(15); }

} for(pos = 150; pos>=1; pos-=3) { myservo05.write(pos); myservo08.write(pos); delay(15); }

{ myservo01.write(pos); myservo12.write(pos); delay(15);

{ myservo04.write(pos); delay(15); }

for(pos = 0; pos < 15; pos += 0.5) { myservo01.write(pos); delay(15); } for(pos = 0; pos < 30; pos += 1) { myservo02.write(pos); delay(15); }

else{pos=0;}

myservo08.write(pos); delay(15);

for(pos = 0; pos <120; pos += 2.5) {

}

}

myservo03.write(pos); delay(15); }

{

for(pos = 0; pos < 180; pos += 5) {

{ myservo05.write(pos); delay(15);

}

for(pos = 0; pos < 30; pos += 1) { myservo01.write(pos); myservo12.write(pos); delay(15); }

for(pos = 45; pos>=1; pos-=1.5)

for(pos = 0; pos < 75; pos += 2.5) {

}

}

}

}

myservo01.write(pos); delay(15);

myservo07.write(pos); delay(15);

myservo04.write(pos); delay(15);

myservo04.write(pos); delay(15);

{

}

}

{

{ myservo02.write(pos); delay(15);

myservo06.write(pos); delay(15);

for(pos = 60; pos>=1; pos-=2)

for(pos = 0; pos < 60; pos += 2)

{

{

} for(pos = 90; pos>=1; pos-=3) { myservo06.write(pos); delay(15); }

//SpiralWall ::arduino & processing pde

processging

arduino

The interactive installation can be easily designed nowadays by using Arduino.

This open source program, such as Processing and Arduino opens the door for the architects and graphic designers get involved in the interactive field.

The diagram below shows how the computer communicates with servo motors to make interesting interactive installation

//I08

//SpiralWall ::prototype lacer-cut structure

//I08

//SpiralWall ::prototype simulation

//I08

//SpiralWall ::production process After testing a single element, the final project is set to 90cm*60cm. There are 24 servo motors and 1 Arduino board to control 12 single tubes. The movement of these 12 single elements makes the whole Spiral_Wallâ&#x20AC;&#x2122;s pattern.

//I08

//SpiralWall ::final project

The Spiral_Wall makes a transparent but clear boundary between two spaces. The atmosphere of the Spiral Wall could be different by changing the light projecting on it.

//I08

//SpiralWall ::pattern changing

//I08

//SpiralWall ::final project

//I08

Digital Fabrication rhino + laser cutter + vacuum forming ... :: location: Tamkang University, National Taipei University of Technology :: year: 2009-10

:: Digital Fabrication // D01:

Bubble Wall rhino + vacumn forming + laser cutter :: location: TamKang University :: year: 2010

INTRODUCTION:

The bubble project was made by a DIY vacuum forming machine. The PVC sheets are heated and put on the mode to form the shape. Different patterns are made by changing the locations of the balls on the mode. 3D simulation is drawn before the production. The approach of this DIY vacuum forming is to heat the PVC sheets first, and take those sheets out and put them on the box with multiple holes and a powerful vacuum to form each of the components. The frame of this project is cut by the laser cutter. The Bubble_Wall will make variable atmosphere through time because of the transparency of the PVC.

//BubbleWall ::DIY vacuum forming The plastic box with lots of holes is cut by laser cutter. The holes are designed for sucking the heated plastic sheet when forming the shapes. The tubes of the vacuum are inserted to the plastic box to make the DIY vacuum forming machine. The balls on the box are the module for shaping the plastic sheets which are the elements of the bubble wall. Once the bubble plastic sheet was produced, the position can be re-located to form a different element.

//D01

//BubbleWall ::Vacuum forming method The approach of using the DIY vacuum forming machine is to set the plastic sheet onto the wood frame, and put it into the woven, heated to 140 degree Celsius for at least 4 minutes. After heated the plastic sheet is put on the DIY vacuum forming box which has multiple holes on it. Turning on the vacuum, the sheet is sucked align to the balls which is already set up. The plastic sheet will be formed as bubbles.

woven

DIY vacumn forming method

//D01

//BubbleWall ::Vacuum forming method Set the plastic sheet on the wooden frame put it into the woven and heat up. After heated, the soft plastic sheet is quickly taken out and put on the DIY vacuum forming module to shape the form.

//BubbleWall ::Formed sheets collection The multiple bubble-like patterns are made by different position of the balls.

After these bubble-like sheets are made, they are screw on to the board with laser cut frame.

//BubbleWall ::explorational simulation The sheets on the board are fixed with laser-cut frame to make the Bubble_Wall which is set on a transom.

Final Project

Bubble Wall

Inner Frame

Outer Frame

//BubbleWall ::final project

//BubbleWall ::final project

:: Digital Fabrication // D02:

Water Cube Cage rhino/pointSet Reconstruction + PET bottles :: location: National Tapei University of Technology :: year: 2010

INTRODUCTION:

The water cube cage project is design for the Dream Parade which is one of the biggest parades in Taipei. The main idea of the parade focuses on global environment and disadvantaged groups. The architecture students in National Taipei University of Technology are participate in this parade and made the installation. The PET bottles are used as elements to build this installation to fit the main idea of the parade, “keeping good environment”. The concept of this water cube cage is to tell people that if we don’t take our environment seriously, we will no longer dominate the world, and the animals will be dominating the world one day. The human will become the “pet” which is fed by animals in the near future. Inside the cage there will be students acting a human in future, and there will be students acting different animals outside of the cube.

//WaterCubeCage ::simulation The Rhino plug-in, â&#x20AC;&#x2DC;pointSet Reconstruction,â&#x20AC;&#x2122; is used to make the voronoi shape as a ice cube. The center part of the cube is taken out for people to stay in. and the rest of the cube frames are cut into 4 parts. The students are assigned to produce there 4 parts with PET bottles. The total length and width of the cube are both 2.5 meters.

get the voronoi

take out the center part

seperate into 4 parts

250cm

25

0cm

m

0c

25

//D02

//WaterCubeCage ::drawings The students are separated into 4 groups to finish this project. These are the drawings and shapes for students to follow.

3 4

1

2

Bottom

5

6

Top

95.90

138.93

111.07

108

149.87

72 .80

97

7

.87

1

108.9

43

.35

5

100.7 3

50.5 64.53

82.06

227.28

3

87

4 40.60

95.90

209.40

65.37

227.28

114.98

69.65

7 5.5

28.50

12

.55

149.87

132

9

.07

3

156.76

13

.05

75

66.13

37.74

194.28

148.56

76.28 .48

38

194.28

100.13

24

5

58.07

114.43 08

4.

12

.

98

23

2.

40.60

.2

.60

6.8

135.63

209.40

7

93.24

78.3

95

102

12

55.72

72.95

8.71

22.72

16.09

3

8

61.40

65.1

154.10

102.13

9

9

.1

8.9

138.93

49

13

71.98

111.07

11 7

.8

6

6

.3

5 38.0

60.50

116.62

69.49

.4

.71

89.12

140.98

.06

102

77.63

8

20.9

37.52

61.40

28

46

8

.6

30

66.89

116.62

4 92.9

62.37

71.93

.87

33

71.98

65.37

76.06

156.76

72.95

114.98

148.56

69.65

2

93.24

28.50

22.72

131.78

1

82.06

89.78

65.48

100.13

3

7.

38

118.22

46.7

.72 88

61.4

167.94

167.94

123.07

131.78

.14

154.10

6 55.72

//D02

//WaterCubeCage ::connection study The materials use in this project is PET bottles. The basic method of the construction is to cut a hole on one bottle and insert the other bottle to the hole.

The double headed bottle is also design and made as a connection. The base part of the construction is made by larger bottles with water to make the project stable.

insert

insert

//D02

//WaterCubeCage ::working process Each of the groups is responsible for one part of the cube. After finishing their parts, they need to connect each part to make a complete structure.

//D02

//WaterCubeCage ::working process Half way to finish.

//D02

//WaterCubeCage ::final Project

//D02

//WaterCubeCage ::final Project

//D02

//WaterCubeCage ::animal costume

B

ird

F

ish

D

eer

M

onkey

//D02

:: Digital Fabrication // D03:

Continuous Vase rhino + grasshopper + firefly + 3D printer :: location: Tamkang University :: year: 2010

INTRODUCTION: In Continuous Vase, the ‘firefly’ under the grasshopper plug-in in Rhinoceros is used in this project. The way of the fabrication is “Interactive Fabrication.” Through firefly, the ‘Arduino’ board can communicate with grasshopper. The value from the light sensors is simply transferred the number data to the radius of the circles on different plans. After that, these circles are lofted to get the "Vase" form. The vase form is changed in every second by sensing the light. The form could be changed by the environment light or hand gestures.

These vase forms are collected, set up to a flat surface and 3D printed.

COMPONENT:

On the left side, the data of is the setting of the port. On the right side is the data of the receivers. The AP01-07 are the analogue-in pins for reading the data from the sensors. The number inside the panel is changed every second. The toggle connected to the "Start" input is to turn it on and off of the toggle connected to the "Timer" to read the data in real time.

//Continuous Vase

The hand gestures are used to control the width and the height of the Vase Many different forms of the vases can be produced in short period of time.

//D03

//Continuous Vase

All the vases are set on a flat surface as a pattern.

//D03

//Continuous Vase

//D03

//Continuous Vase 3D print

//D03

//Continuous Vase 3D print

//D03

http://pandalabccc.blogspot.com/ archgary@gmail.com