Tak – Page 2 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

LO-06 -Randomness

http://www.random-art.org/about/
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) ;
	quad(0,0,0,40,40,60,40,20);
}

function rightsrf() { 
  noLoop()
  var r = random(0,250);
  var g = random(0,250);
  var b = random(0,250);
  fill(r,g,b)
  quad(40,20,80,0,80,40,40,60)

}

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); 
	rotate(radians(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);
	rotate(radians(mouseY));
	ellipse (x,y, dist(mouseX,mouseY,x,y)/10, dist(mouseX,mouseY,x,y)/10) ; 
	
	translate(mouseX*0.4,mouseY*0.8);
	rotate(radians(mouseY*0.5));
	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()
	quad(0,0,0,600,150,600,150,0);
	quad(600,0,600,600,600-150,600,600-150,0);
	quad(600,600,0,600,0,400,600,400);
	quad(600,0,0,0,0,200,600,200)

	//face
	stroke(25);
	strokeWeight(8);
	ellipse(150,280,5,15);
	ellipse(600-150,280,5,15);
	noStroke();
	fill(221,190,140);
	quad(150,430,240,550,600-240,550,600-150,430);
	quad(150,430,150,330,190,330,190,430); //
	quad(190,330,200,340,200,430,190,430);
	quad(200,340,600-200,340,600-200,430,200,430);
	quad(600-150,430,600-150,330,600-190,330,600-190,430);
	quad(600-190,330,600-200,340,600-200,430,600-190,430);
	quad(260,340,270,330,270,430,260,430);
	quad(600-260,340,600-270,330,600-270,430,600-260,430);
	quad(270,340,600-270,340,600-270,200,270,200);
	quad(150,330,150,200,190,200,190,330);
	quad(150,330,150,200,190,200,190,330);
	quad(600-150,330,600-150,200,600-190,200,600-190,330);
	quad(150,200,600-150,200,600-150,290,150,290);
	//quad(150,430,150,200,600-150,200,600-150,430);
	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);
	quad(250,400,350,400,350,350,280,350);

	//mouth
	stroke(25)
	fill(226,134,113);
	ellipse(300,470,100,50);
	line(300-50,470,300+50,470);
	noStroke();
	fill(221,190,140);
	quad(240,468,360,468,350,430,250,430);
	
	//Hair
	fill(0)
	quad(270,220,290,160,490,140,450,200);
	quad(270,220,290,160,480,100,450,200);
    quad(270,220,290,160,450,90,450,200);
    quad(270,220,290,160,410,85,450,200);
    quad(270,220,150,200,120,140,290,160);


	//Lense
	//noStroke()
	//fill(255)
	//quad(190,290,190,330,270,330,270,290);
	//quad(190,330,200,340,260,340,270,290);
	//quad(600-190,290,600-190,330,600-270,330,600-270,290);
	//quad(600-190,330,600-200,340,600-260,340,600-270,290);
    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.

Dbt- CONCRETE CHOREOGRAPHY from Girts Apskalns on Vimeo.