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

LO – Randomness

Manolo Gamboa Noan is an Argentinian generative artist who is known for his bright and chaotic images. According to Manolo’s bio on an art collection website, he focuses on exploring such dichotomies as chaotic v.s. ordered, organic v.s. artificial, and random v.s. controlled.

I am drawn to the piece “Mantel Rojo” because of the bright, jarring presence it has. Even though it is made entirely within the bounds of a computer, something we usually subconsciously consider to be cold and lifeless, the image is full of warmth and life. The randomness that Manolo plays with makes the image more real and expressive, making the audience feel as though there is a natural element to the image.

LookingOutwards-06

The artist Pascal Dombis uses digital tools and computer generation to explore the complexities of visual paradoxes. Many of his art appears like a glitch on the computer, although it has been carefully crafted through algorithmic elements that produce a controlled chaotic randomness. This is the paradox that Dombis is attempting to create in his artwork, which is that while the computer code and technology is very much controlled by the user, the resulting artwork it produces becomes something completely random and out of our imagination. This paradox in his artwork creates a feeling of unease and the loss of structure that we often find comfort in through technology. I admire his artworks because it inspires me to think deeper about the relationship we have with the control of technology.

https://dombis.com/

Project 06-Abstract-Clock

sketch Download

var x = 0;
var y = 0;
var sDiam;

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

function draw() {
    var s = second();
    var m = minute();
    var h = hour();
    background(0, 0, h*10); //gets lighter by the hour
    translate(width/2, height/2);
    minuteRing(s, m);
    secondRing(s, m, sDiam);
}

function minuteRing(s, m) { //big circle that appears within a minute
    noStroke();
    fill(148, 96, 139, s*4.25); //opacity increases with second
    circle(x, y, 10*m); //diameter increases with minute
}
 
function secondRing(s, m, sDiam) {  //the ticking clock that moves every second
    fill(148, 96, 139);
    rotate(radians(s*6)); //rotate every second by 6 degrees
    var sDiam = (PI*10*m)/60; //diameter is circumference divided by 60 secs
    circle(x+(10*m/2), y, sDiam);
    triangle(x, y, x+(10*m/2), y-(sDiam/2), x+(10*m/2), y+(sDiam/2));
}

For this project I struggled a bit because I didn’t have enough time to create what I had visualized. I was inspired by the flower that blooms at night and wanted to create an image where the pedals grow bigger and bigger as time goes on.

I was only able to get the one pedal moving instead of having the whole flower in the background but basically the circle reveals itself to full opacity every minute as the pedal rotates, then the ring diameter increases with the minute. The background blue becomes lighter by the hour to signify sky.

LO – Randomness

A piece of random art that I admire is “Arc“ by Marius Watz. This piece is interesting to me because it uses ‘pseudo- random numbers’ to generate a 2-D depiction of a 3-D Design. After this initial translate of 3D to 2D, this piece is translated yet again from digital means to physical means as it is screen-printed by hand onto a canvas. The piece uses very vibrant colors which draw the eye into the piece. The artist has created depth by simulating a 3-D shape, which works again with the colors to keep the eye engaged. I think this piece is a very successful example of how random numbers can lead to organic and engaging pieces of tangible art.

Project 6 – Abstract Clock

I began this project in a very different place than where I ended up – after exploring many different ways of how I could potentially represent the CMU fence as a clock, I ditched that idea and went with creating a binary clock.

When I was a kid, my dad had a clock like this. Although I could never read it, it looked fancy and important to me and made me feel like maybe one day I would deserve to know what it all meant. It wasn’t until this project that I found out how to read it!

My dad told me that the clock always looked like a cityscape to him. I agreed, so naturally that is what I chose to code for this project.

sketch Download

// Assignment 06 - PROJECT – ABSTRACT CLOCK
// Name: Jubbies Steinweh-Adler
// Email: jsteinwe@andrew.cmu.edu
// Class: Section D


var lightOn;
var lightOff;
var column = [2, 4, 3, 4, 3, 4];
var canvasMargin = 100;
var innerMargins = 10;

function setup() {
  createCanvas(480, 480);

  //WINDOW COLORS
  lightOn = color(180, 180, 0);
  lightOff = color(70, 70, 40);
}

function draw() {
  background(27, 27, 128); //Blue


  var timeString = whatTime(); // run whatTime function once and rename output 
  var cLength = column.length;
  rWidth = (width - 2 * canvasMargin) / cLength;


  //- BACKGROUND- 
      //moon 
      fill(248, 243, 200);
      circle(width * (2 / 3), height * (1 / 3), 250);

      //buildings
      //back
      fill(5);
      rect(0, height / 2, width, height);
      rect(60, height / 2 - 40, 100, 200);
      rect(width - 100, height / 2 - 40, 80, 200);
      //front
      fill(20);
      rect(105, 130, 145, 235, 0, 80, 0);
      rect(262, 173, 127, 190);
      fill(50);
      rect(202, 220, 132, 146);
      rect(248, 173, 44, 61);
      rect(264, 148, 12, 28);

      //reflected buildings
      push();
      translate(0, 200);
      fill(20);
      rect(105, 165, 145, 235);
      rect(262, 165, 127, 190);
      fill(50);
      rect(202, 165, 132, 146);
      pop();

  //- TIME FORMATTING -
      //CONVERT TIME STRING TO BINARY STRING
      for (var i = 0; i < cLength; i++) { //run 6 times
        var rx = canvasMargin + rWidth * (i + 0.5);
        var binary = floor(timeString[i]).toString(2); //converts time to binary string

        //test proper binary conversion
        print("a = " + binary.toString());

        //REVERSING BINARY DATA 
        //positional data for drawing depends on reversal
        binary = binary.split("");
        binary = reverse(binary);
        binary = binary.join("");

        //test proper binary reversal
        print("b = " + binary.toString());


    //-DRAWING CLOCK ELEMENTS -
    for (var p = 0; p < column[i]; p++) {
      var ry = (height - 50) - ((rWidth * p) + canvasMargin);
      var reflectY = height - canvasMargin + (p * rWidth);
      var rectWidth = rWidth - (1.8 * innerMargins);

      //FILL WINDOW WITH CORRECT COLOR 
      //if character in pth position is 1, turn on
      if (binary.charAt(p) === '1') {
        fill(lightOn);
        //if not, turn off
      } else {
        fill(lightOff);
      }

      //WINDOW SHAPE
      rect(rx, ry, rectWidth / 2, rectWidth * (3 / 4));

      // - FOREGROUND - 
      //Water reflection

      rect(rx, reflectY, rectWidth / 2, rectWidth * (3 / 4));
      fill(40, 40, 120, 30);
      noStroke();
      rect(0, height - 115, width, height);
    }
  }

}

function whatTime() {
  //creates live time string with no spaces

  var h = hour();
  if (h > 9) { // if hour value greater than 9, return as is
    hrs = h.toString();
  } else { //if less than 9, add zero as spacer digit
    hrs = "0" + h.toString();
  }

  var m = minute();
  if (m > 9) {
    mins = m.toString();
  } else {
    mins = "0" + m.toString();
  }

  var s = second();
  if (s > 9) {
    secs = s.toString();
  } else {
    secs = "0" + s.toString();
  }


  //FUNCTION OUTPUT - (hhmmss)
  return hrs + mins + secs;

}

Looking Outwards – Randomness

Iris Yip
15-104 Section D
Looking-Outwards

This week, I am taking a look at Aizek Live‘s series of Generative Studies, which incorporates elements of randomness through allowing an autonomous system to make decisions on its own, partially through an added element of randomness and otherwise through the design of a system for the sole purpose of making these decisions.

All of the projects were created in Notch, running in real-time on Geforce 1080 Ti. I was particularly drawn to this project because it reinforces the idea that there is such a thing as being “designed for randomness”, where certain parameters are still set in place in order the limit the scope of the design. I think the artist did a good job in their rationale highlighting the importance of restraints in design to help achieve something that ‘appears’ completely random or generative, whereas true randomness can may in actuality appear more skewed towards one result over the other.

Project 6 – Abstract Clock

sketch

function setup() {
    createCanvas(600,600)
    background(0)
    angleMode(DEGREES);

    fill(10);
    ellipse(width / 2, height / 2, 400, 400);
}

function draw() {

    //movement
    a = sin(frameCount)
    b = cos(frameCount)

    translate(width / 2, height / 2);
    background(0, 10)

    strokeWeight(0.5);
    //month
    push();
    stroke(155, b * 100 + 55, 155);
    rotate(180 / 12 * month() - 45);
    line(300 * a, 200 * b, 100 * b, 50 * a);
    pop();
    //day
    push();
    stroke(a * 100 + 55, 155, 155);
    rotate(180 / 31 * day() - 45);
    line(50 * a, 10 * b, 300 * b, 300 * a);
    pop();

    strokeWeight(3);
    //hour
    push();
    stroke(100);
    rotate(180 / 24 * hour() - 45);
    line(200 * a, 200 * b, 200 * b, 200 * a);
    pop();
    //min
    push();
    stroke(b * 100 + 155, a * 100 + 155, 255);
    rotate(180 / 12 * min() - 45);
    line(175 * a, 175 * b, 175 * b, 175 * a);
    pop();
    //second
    push();
    stroke(second() * 2 + 135, 375 - second() * 2, 255);
    rotate(180 / 60 * second() - 45);
    line(150 * a, 150 * b, 150 * b, 150 * a);
    pop();

};

For this project, I wanted to go for a more abstract way to display a conventional-looking clock in order to challenge the way we look and think about time. I wanted to focus on temporality and make it so that even the clock base itself isn’t necessarily visible or present.

Project-06-Abstract Clock

sketch Download

var walking = 0;
var rising = 230;
function setup() {
    createCanvas(480, 480);
    background(0);
    
    
}

function draw() {

	background(98, 97, 153);

	noStroke();
    
    fill(135, 154, 206);
  //moon
	ellipse(380, 126, 228, 228);

	var hr = map(hour(), 0, 59, 152, 620);
  //circle eclipses moon at hourly pace
    push();
	fill(98, 97, 153);
	ellipse(hr, 126, 228, 228);
	pop();

  //background graves
  fill(22, 13, 71);
	ellipse(370, 408,1074, 311);

	 for(var g = 304; g < 440; g+=52){
            graves2(g, 225);
        
    }

  //backgroung fence
  fence2(435, 203, 0.4);


  //zombie moves at seconds pace
    push();
    translate(map(second(), 0, 59, -20, width+ 20), walking);
	zombie();
	pop();

	fill(38, 34, 98);
	ellipse(57, 480,1074, 311);

  //foreground fence
	fence1(12, 200);


	

   //foreground graves
   for(var d = 47; d < 370; d+=130){
            graves1(d, 292);
        
    }

  //hand raises from ground at minute pace
  push();
  translate(rising, map(minute(), 0, 59, 500, 410));
	hand();
	pop();

	
	
  //ground in front of hand
  fill(38, 34, 98);
	rect(0, 410, 400, 200);
}

function graves1(x,y) {

           push();
           translate(x,y);
           noStroke();
           


           fill(22, 13, 71);
           rect(-13, 0, 67, 100);
           //grave front
           fill(38, 34, 98);
           rect(0, 0, 67, 100);

           fill(22, 13, 71);
           rect(9, 12, 51, 5);
           fill(22, 13, 71);
           rect(8.5, 24, 51, 5);


           
	       pop();
	              

}

function graves2(x,y) {

           push();
           translate(x,y);
           noStroke();
         


           fill(22, 13, 71);
           rect(0, 0, 27, 41);


           
	       pop();
	              

}

function fence1(x,y) {

           push();
           translate(x,y);
           noStroke();
         

           fill(38, 34, 98);
           rect(-24, 15, 145, 8);

           rect(0, 0, 8, 139);

           rect(30, 0, 8, 139);

           rect(60, -5, 8, 139);

           rect(90, -2, 8, 139);

          

           
	       pop();
	              

}

function fence2(x,y,s) {

           push();
           translate(x,y);
           scale(s);
           noStroke();
         

           fill(22, 13, 71);
           rect(-24, 15, 145, 8);

           rect(0, 0, 8, 139);

           rect(30, 0, 8, 139);

           rect(60, -5, 8, 139);

           rect(90, -2, 8, 139);

          

           
	       pop();
	              

}

function zombie() {

           push();
           
           noStroke();
         

           fill(38, 34, 98);

           //head
           ellipse(7, 238, 14, 20);

           //shoulders
           ellipse(7, 250, 14, 4.5);

           //arm1
           rect(10, 255, 29, 4);
           ellipse(39, 260, 5.5, 10);

           //neck
           rect(4, 246, 5.5, 7.5);

           //torso
           rect(0, 250, 14, 26);

           //leg1
           rect(0, 276, 8, 35);



           //foot1
           rect(0, 311, 16, 3);

           ellipse(8, 311, 16, 6);

           //arm2
           push();
           rotate(radians (-20));
           translate(-86,235);
           rect(5, 5, 29, 4);
           pop();
           ellipse(34, 248, 5.5, 10);

           push();
           rotate(radians (-20));
           translate(-86,235);
           //leg1
           rect(-3, 26, 8, 35);

           //foot1
           rect(-3, 61, 16, 3);

           ellipse(5, 61, 16, 6);
           pop();
	       pop();
	              

}

function hand() {

           push();
           
           scale(1.7);
           noStroke();
           push();
           
           fill(22, 13, 71);

           beginShape();
           vertex(0, 0);
           vertex(0, -18);
           vertex(-6, -25);
           vertex(-5.8, -30.8);

           vertex(-4.5, -34);
           vertex(-2.7, -33);
           vertex(-3, -28);
           vertex(-0.2, -26);

           vertex(0.2, -36);
           vertex(-1.5, -38);
           vertex(0, -40);
           vertex(3, -36.7);

           vertex(3, -28.5);
           vertex(4.5, -37);
           vertex(2.25, -40.5);
           vertex(3.9, -42.25);

           vertex(6.7, -38);
           vertex(6.7, -30);
           vertex(8.6, -37);
           vertex(7.2, -41);

           vertex(8.6, -42.7);
           vertex(11.2, -37.4);
           vertex(9.8, -28.3);
           vertex(12, -34.8);

           vertex(12, -38);
           vertex(13.5, -38.5);
           vertex(14.1, -34.5);
           vertex(10.8, -20);

           vertex(10.5, 0);


           endShape(CLOSE);
         
           pop();

          

           
	       pop();
	              

}

LO-06

I really like the columns designed by Michael Hansmeyer. He is an architect which is what compelled him to make these columns. I find it really interesting that he took a very simple architectural form and and embellished it through his generative design. He used Javascript to make each layer’s pattern for the column and cut them out with an industrial mill according to one source, but I could easily see these being laser cut. Each layer is made out of cardboard or graybeard and stacked on top of each other to build the final form. The randomness used for creating this design isn’t “super” random because the program used probably limits how narrow and wide it can get in general and how much each layer can vary from the last so that it can still produce a sturdy column. So even though they’re not completely random, I would say this is very impressive within the realm of architecture in which things are usually very precise that he was able to make pieces that not only were functional/would stand, but also looked very beautiful in a surprisingly precise way.

http://www.michael-hansmeyer.com/subdivided-columns

Project 6 – Abstract Clock

I was inspired by the idea of the lunar cycles and the moon’s effect on the oceans for this project.

sketch

//hollyl
//abstract clock assignment
//section D

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

function h(){								//hour wave
	var x = hour()*20;
	var y = width/2;
	noStroke();
	fill(58, 63, 139);
	rect(x-120, y/2, 240, y/2);
	ellipse(x, y/2, 120, y);
	rect(0, y, 480, y);
	fill(30, 30, 75);
	arc(x-120, y/2, 120, y, 0, PI);
	arc(x+120, y/2, 120, y, 0, PI);
}

function mn(){								//minute wave
	var x = minute()*8;
	var y = 180
	noStroke();
	fill(58, 91, 139);
	rect(x-90, height/2, y, y/2);
	ellipse(x, height/2, 90, y);
	rect(0, 330, 480, y);
	fill(58, 63, 139);
	arc(x-90, height/2, y/2, y, 0, PI);
	arc(x+90, height/2, y/2, y, 0, PI);
}

function s(){								//second wave
	var x = second()*8;
	var y = 120;
	noStroke();
	fill(59, 104, 172);
	rect(x-(y/2), 330, y, y/2);
	ellipse(x, 330, y/2, y);
	rect(0, height-90, 480, 90);
	fill(58, 91, 139);
	arc(x-(y/2), 330, y/2, y, 0, PI);
	arc(x+(y/2), 330, y/2, y, 0, PI);
}

function draw(){
	background(30, 30, 75);
	h();
	mn();
	s();
	fill(54, 146, 169);						//remnants of the millisecond wave that
	rect(0, height-45, 480, 45);			//moved way too fast
}

Notes: