## LO-06 -Randomness

When I was doing research on randomness in art, random-art.org came up from many of my google searches. Random-art.org stores words and letters into seeds and turns them into art. Carnegie Mellon University alumnus, Andrej Bauer, designed the algorithm through javascript with ocam.js. Bauer was able to make random generative art accessible to the public. I thought that was a really admirable quality of the project. Anyone is able to go on the website and create their own art by simply typing in words. The website interprets the text and generates art. Random-art.org allows us to explore the possibilities shown to us by computer systems and randomness.

## Project-06-Abstract Clock

sketch
``````var y = 0;

function setup() {
createCanvas(480, 480);
frameRate(20);
}

function draw() {
var v = 25
background(230, 207, 106);

//glass beaker
fill(225, 230, 255);
noStroke();
rect(130,480,220,-270);
stroke(80);
strokeWeight(3);
line(130,480,130,480-270);
line(480-130,480,480-130,480-270);
ellipse(240,480-270,220,10);

//waterdrop
fill(103,197,255);
noStroke()
ellipse(240,y,45);
y = y + v;
if (y > 480) {
y = 0
}

//Pipe dropping water from the top
noStroke();
fill(71, 76, 84);
rect(210,0,60,90);
fill(0);
ellipse(240,90,60,4);
noStroke();

//water level indicating seconds
noStroke()
fill(103,197,255);
rect(130,480,220,-second()*4.5);
stroke(83,167,245)
strokeWeight(0.5)
ellipse(240,480-second()*4.5,220,10);
loop()

//beaker outline
noFill();
stroke(80);
strokeWeight(3)
line(130,480,130,480-270);
line(480-130,480,480-130,480-270);
ellipse(240,480-270,220,10);

}

``````

When thinking of a clock, or the idea of a clock, I was fascinated by the idea of how only something constant can be used as a device to define time. Systems that are perfectly constant are hard to find in this world, therefore we try to fine tune what we have to create a machine we can rely on. Water droplet’s relationship with gravity is constant most of the time. Therefore I thought it would be interesting to measure time with how fast droplets of water fill up a glass. Realistically, there are many other components in play that will affect how accurate this “clock” is but I found this alternate method of measuring time very fascinating.

## Project 05 – Wallpaper

sketch
``````
function setup() {
createCanvas(600, 600);
background(250,233,208);
}

function draw() {

for (let y = 0; y < 10; y++) { //setting up array for the shapes
for (let x = 0; x < 8; x++ ) {
push()
translate(x*80,y*60);
leftsrf()
rightsrf()
pop()
}
}

}

function leftsrf() {
noLoop()
var r = random(0,250);
var g = random(0,250);
var b = random(0,250);
fill(r,g,b) ;
}

function rightsrf() {
noLoop()
var r = random(0,250);
var g = random(0,250);
var b = random(0,250);
fill(r,g,b)

}
``````

## Project 04 – String Art

sketch
``````var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;

function setup() {
createCanvas(400, 300);
background(200);
line(0, 0, 0, 300);
line(300, 300, 350, 100);
dx1 = (0-0)/numLines;
dy1 = (300-0)/numLines;
dx2 = (550-100)/numLines;
dy2 = (1)/numLines;
}

function draw() {
background(0)
var x1 = 40;
var y1 = 0;
var x2 = 0;
var y2 = 300;
var x4 = 0;
var y4 = 400
for (var i = 0; i <= numLines; i += 1) {
stroke(0,0,255);
line(mouseX/1.7, 0, 400, y1); //blue curves
stroke(255,0,0)
line(mouseX-30,y1,x2,y2); //red curves
stroke(0,255,0)
line(mouseX/1.2,y1,y4,y2) //green curves
x1 +=dx1
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
}``````

## Project 03 – Dynamic Drawing

sketch
``````var angle = 0 ;
var x=50 ;
var y=50 ;

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

function draw() {
background(mouseX/5,mouseY/5,(mouseY+mouseX)/10);
stroke(0,mouseX/5,width-mouseY/5);
strokeWeight(mouseX/100);
for (let w=0; w<=width;w+=30){ //setting up circle grid
for(let h=0;h<=height; h+=30) {
r = 75 * exp(((-1)*dist(mouseX, mouseY,w,h))/100); //varying size with mouse position
fill(width-mouseX,height-mouseY,mouseY/5) //varying color of balls with mouse positoin
ellipse(w,h,r) ; //circle
}
}
push();
translate(mouseY,mouseX);
fill(mouseY);
strokeWeight(mouseY/100);
ellipse(x,y+100,dist(mouseX,mouseY,x,y+100)/10,dist(mouseX,mouseY,x,y+100)/10); //circle floating on top

translate(mouseX,mouseY);
ellipse (x,y, dist(mouseX,mouseY,x,y)/10, dist(mouseX,mouseY,x,y)/10) ;

translate(mouseX*0.4,mouseY*0.8);
ellipse(x+80,y,dist(mouseX,mouseY,x+80,y)/10,dist(mouseX,mouseY,x+80,y)/10);
pop();

}

``````

## Project 02 – Variable Face

sketch
``````var canvaswidth = 640
var eyehx = 230
var eyehy = 270
var lidh = 255
var face = 0
var r=255
var g=255
var b=255

function setup() {
createCanvas(canvaswidth, 510);
background(220);
}

function draw() {

background(r,g,b);

//face
strokeWeight(6)
stroke(25)
fill(229,149,95);
ellipse(150,110,200,200); //left ear
ellipse(canvaswidth-150,110,200,200); //right ear
fill(46,44,44);
ellipse(150,110,120,120); //left ear inner
ellipse(canvaswidth-150,110,120,120); //right ear inner
fill(229,149,95);
ellipse(canvaswidth/2,270,500,450); //face
noStroke();
fill(242,219,140);
ellipse(canvaswidth/2,380,320,230); //mouth/chin

//eyes
fill(37,37,41)
ellipse(220,280,60,60); // left eye
ellipse(canvaswidth-220,280,60,60); // right eye
fill(255,255,240);
ellipse(eyehx,eyehy,20,20); // left eye highlight
ellipse(canvaswidth-eyehx+20,eyehy,20,20); // right eye highlight

//eyelids
stroke(229,149,95);
strokeWeight(20);
line(180,255,256,lidh); // left
line(canvaswidth-180,255,canvaswidth-256,lidh); // right

//moon
noStroke()
fill(242,229,196);
ellipse(canvaswidth/2,180,230,200);
fill(229,149,95);
ellipse(canvaswidth/2+40,180,175,143);

//mouth
if (face == 0){
stroke(25);
line(270,400,canvaswidth-270,400); //flat line
} else if (face == 1){
stroke(25);
strokeWeight(6)
fill(240,184,163)
ellipse(canvaswidth/2,400,120,70);
noStroke();
fill(230,154,143);
ellipse(320, 414,96,50);
noFill();
stroke(25);
ellipse(canvaswidth/2,400,120,70); //mouth open

} else if (face == 2){
stroke(25);
strokeWeight(22);
line(270,440,canvaswidth/2,400);
line(canvaswidth-270,440,canvaswidth/2,400); //upset
}
}

function mousePressed() {
lidh = random(218,264);
r = random(0,255);
g = random(0, 255);
b = random(0, 255);
if (face == 2){
face = 0;
} else {
face += 1;
}

}``````

## Project 01 – Self Portrait

sketch
``````var offset=35

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

function draw() {

//rectangle(0,0,600,600);
fill(100,150,255);
noStroke()

//face
stroke(25);
strokeWeight(8);
ellipse(150,280,5,15);
ellipse(600-150,280,5,15);
noStroke();
fill(221,190,140);
stroke(25);
strokeWeight(3);
line(150,430,150,200);
line(150,430,240,550);
line(240,550,600-240,550);
line(600-150,430,600-240,550);
line(600-150,430,600-150,200);
noLoop()

//nose
stroke(25);
strokeWeight(4);
fill(226,180,113);
ellipse(300,400,50,50);
noStroke();
fill(221,190,140);

//mouth
stroke(25)
fill(226,134,113);
ellipse(300,470,100,50);
line(300-50,470,300+50,470);
noStroke();
fill(221,190,140);

//Hair
fill(0)

//Lense
//noStroke()
//fill(255)
loop()
strokeWeight(10);
stroke(100, 100, 100);
line(mouseX-10000, mouseY, mouseX+10000, mouseY)
noLoop()

//glasses
stroke(25);
strokeWeight(6);
line(150,270,190,300);
line(600-150,270,600-190,300);
strokeWeight(8);
line(190,290,190,330);
line(600-190,290,600-190,330);
line(190,330,200,340);
line(600-190,330,600-200,340);
line(200,340,260,340);
line(260,340,270,330);
line(270,330,270,290);
line(270,290,190,290);
line(600-200,340,600-260,340);
line(600-260,340,600-270,330);
line(600-270,330,600-270,290);
line(600-270,290,600-190,290);
stroke(25);
strokeWeight(7);
line(270,300,600-270,300);

//Lens Tint
//stroke(25);
//fill(255)
//strokeWeight(10);
//line(mouseX, mouseY, 0,0);

//fill(250, 240, 200);
//ellipse(300, 300, 400, 500,);
//line(300, 0, 300, 600,);
//line(0, 300, 600, 300);
//fill(255);
//ellipse(210,290,90,60);
//ellipse(600-210, 290, 90, 60);
//fill(0);
//triangle(210-offset,220,180-offset,260,310-offset,280);
//triangle(600-210+offset,220,600-180+offset,260,600-310+offset,280);
//ellipse(210,290,20,20);
//ellipse(600-210,290,20,20);
}
``````

## LO-01-Inspiration

I first learned about Micheal Hansmeyer’s computation architecture during a seminar that discussed modern fabrication techniques and its applications to architecture. The Subdivided Columns (2010-) explores the beauty in ordinary geometry and the ornate patterns it develops. This leap in fabrication and design may allow extremely delicate and detailed artforms in building designs. It may be a lower cost and effort way to reinstate the gothic period ornate church designs. Hansmeyer also explores other forms and structures through generative art, often creating detailed 3D printed forms for exhibitions. Hansmeyer prints the columns in 1mm layers and holds them together with a central rod in the middle. The Subdivided Columns project started in 2010 has led to many other projects such as Digital Grotesque (2013)and most recently Muqarnas (2019).

## LO-02-Generative Art

The subdivided columns projects by Micheal Hansmeyer are not only a leap in architectural construction but also in the way we think about design. Through division, Hansmeyer creates wonderful ornate patterns that envelop the space and overwhelms the audience’s sense of detail. So much is happening in that space that it is almost impossible to take in all that detail and comprehend the space. I feel that this level of attention to detail from the artist is very impressive. Hansmeyer employs an algorithm that divides space in order to create these ornate columns. The division allows the plan to create voids. These voids interact with solids to create boundaries. This system developed by division leads to infinite combinations of voids, boundaries, and solids. Since 2010, Hansmeyer has employed this technique in many other works. His work is understood as rule-based architecture that relies on mathematical parameters to build fascinating structures. In Muqarnas, Hansmeyer re-explore 11th century Seljuk dynasty typology through algorithms and rules he set up. This form of generative art allows him to further explore the interaction of space and voids

## LO-03-Digital Fabrication

Similar to Micheal Hansmeyer’s Subdivided Columns, today I will be exploring another column design through computational fabrication. “Concrete Choreography” by ETH Zurich’s Master of Advanced Studies in Digital Fabrication program. Concrete Choreography can be compared to Hansmeyer’s Subdivided Columns in appearance as they are both ornate and have intricate patterns throughout; however, the construction methods are very different. Hansmeyer prints out sheets and links them together with a rod while the entire Concrete Choreography was 3D printed by one system. Through digital fabrication breakthroughs, ETH Zurich’s Masters students were able to revolutionize the construction of intricate material. The two main methods of digital fabrication are through subtraction or addition. ETH Zurich’s Masters students fabricated their columns through addition while Hansmeyer fabricated his work through subtraction. I admire the effort and innovation thinking that goes into Concrete Choreography and how it elevates the surrounding as a new one to fabricate buildings. This allows many new possibilities for material development and structural breakthroughs.