Section D – Page 23 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

jennyzha-LookingOutwards 06

4900 Colours was a monumental piece of work by Gerhard Richter. Crafted with 196 square panels of 25 bright monochrome colored squares, arranged in a grid formation the piece ultimately created sheets of kaleidoscop-like colors. The patterns were configured to a number of random variations, all from one large-scale piece to multiple, smaller paintings. When preparing for presentation in the Serpentine gallery, Richter specially crated a version with 49 paintings.

Richter’s works are especially interested to me as that in reality it is a simple concept, really, but together it helps to make something so intricate. the history and inspiration for the project are truly intricate as they came out of the south transept window of Cologne Cathedral, replacing the stained glass that had been destroyed in the Second World War.

ghou-Project-06-AbstractClock

sketch

//Grace Wanying Hou
//15-104 Section D
//ghou@andrew.cmu.edu
//Assignment 06

//background colours
var br = 245;
var bg = 250;
var bb = 255;
//bubbles
var bol = [];
var xarray = [];
var yarray = [];

function setup(){
    createCanvas(300,300);
    angleMode(DEGREES);
    //setting up the pink bubbles
    for (var i=0;i<150;i++){
        bol.push(new moving());
    }
}
function mousePressed(){
        this.x = 150;
        this.y = 150;
}
function draw (){
    background(br,bg,bb);
    var h = hour();
    var m = minute();
    var s = second();    

    //the pink bubbles moving
    for (var i=0;i<bol.length; i++){
        bol[i].move();
        bol[i].display();
    }
    // the bubbles created from dragging the mouse
    for (var a = 0; a < xarray.length; a++){
        fill(250,200,230,200);
        ellipse(xarray[a],yarray[a],20);
        yarray[a] += 1;
    }
    
    //thte clock bubbles
    push();
    noStroke();
    fill(br,bg,bb);
    translate(width/2,height/2);
    rotate(s*(360/60));
    rotate(-90);
    ellipse(110,0,55);
    pop();
    
    push();
    noStroke();
    fill(br,bg,bb);
    translate(width/2,height/2);
    rotate(m*(360/60));
    rotate(-90);
    ellipse(60,0,40);
    pop();
    
    push();
    noStroke();
    fill(br,bg,bb);
    translate(width/2,height/2);
    rotate(h*(360/12));
    rotate(-90);
    ellipse(30,0,25);
    pop();
}


//having new bubbles follow mouse when mouse dragged
function mouseDragged(){
    xarray.push(mouseX);
    yarray.push(mouseY);
}
//moving bubbles and how they move 
function moving(){
    this.x = 150;
    this.y = 150;
    this.diameter = (20);
    this.speedx = random(-1.3,1.3);
    this.speedy = random(-1.3,1.3);
    
    this.move = function() {
        this.x += this.speedx;
        this.y += this.speedy;
        if (this.x >= width-5 || this.x <= 5){
            this.speedx = -this.speedx;
        }
        if (this.y >= height-5 || this.y <= 5){
            this.speedy = -this.speedy;
        }
    };
    
    this.display = function(){
        fill(250,200,230,200);
        noStroke();
        ellipse(this.x,this.y,this.diameter,this.diameter);
    };
    
}

For this project I first looked up some abstract clocks in our project references for some inspiration. I wanted to make the “clock hands” as subtle as possible but still visible if one looked long enough at this project.

here are some sketches I did to plan for this project. I decided to make the clock hands “melt” into the background and invisible without the background distraction bubbles.

aranders-project-06

function setup() {
  createCanvas(400, 250);
}

function draw() {
  background(255, 225, 225);

  //strawberry jam jar
  push();
  fill(255, 26, 26);
  ellipse(70, 170, 100, 30);
  pop();
  line(20, 40, 20, 170);
  line(120, 40, 120, 170);
  push();
  noStroke();
  fill(255);
  ellipse(70, 40, 100, 30);
  fill(255, 26, 26);
  ellipse(70, 40, 30, 10);
  pop();

  //raspberry jam jar
  push();
  fill(102, 0, 34);
  ellipse(200, 170, 100, 30);
  pop();
  line(150, 40, 150, 170);
  line(250, 40, 250, 170);
  push();
  noStroke();
  fill(255);
  ellipse(200, 40, 100, 30);
  fill(102, 0, 34);
  ellipse(200, 40, 30, 10);
  pop();

  //apricot jam jar
  push();
  fill(240, 90, 26);
  ellipse(330, 170, 100, 30);
  pop();
  line(280, 40, 280, 170);
  line(380, 40, 380, 170);
  push();
  noStroke();
  fill(255);
  ellipse(330, 40, 100, 30);
  fill(240, 90, 26);
  ellipse(330, 40, 30, 10);
  pop();

  //time
  var h = hour();
  var m = minute();
  var s = second();

  //height of jam based on time
  var maph = map(h, 0, 23, 0, height / 2.25);
  var mapm = map(m, 0, 59, 0, height / 2.25);
  var maps = map(s, 0, 59, 0, height / 2.25);

  push();
  noStroke();

  //strawberry jam
  fill(255, 26, 26);
  rect(20, 170, 100, - maps)

  //raspberry jam
  fill(102, 0, 34);
  rect(150, 170, 100, - mapm)

  //apricot jam
  fill(240, 90, 26);
  rect(280, 170, 100, - maph)

  pop();

  textSize(18);
  text("strawberry", 25, 225);
  text("raspberry", 160, 225);
  text("apricot", 300, 225);

}

I chose to use different jams as a representation of time. Strawberry jam sells more than the other two which is why I made it seconds. Raspberry sells faster than apricot which is why I made it minutes.

aranders-lookingoutwards-06

The Shapes Project by Allan McCollum made in 2005-2006 is a project in which McCollum generates millions of unique shapes in order to mimic the breadth of the population when it hits its peak during the middle of the current century around 2050. McCollum created enough images so that every person on earth could have one. I admire this project because of the consideration it gives to every human in existence and the fact that none of the shapes are replications of each other. It is a thoughtful and interesting project. The random shapes are made using the system that he created and does not specify on. The prints can be made from different materials using Adobe Illustrator “vector” files. The artist’s sensibilities are seen in the work from the magnitude and profundity of the project.

link

LookingOutwards-06-Chickoff

This is a video created by Jonathan McCabe, a generative artist and designer from Canberra, Australia. He creates these pieces by giving random values to pixels, usually between -1 and 1, and defines sets of rules that dictate how the pixels will respond to those around them and therefore morph to create these life-like, biological patterns.

McCabe’s art touches on British mathematician Alan Turing who proposed that “naturally occurring patterns — things like the spots and stripes on animal fur — could arise from a random state of cells.” In addition, the states of these cells would also affect the neighboring cells, and create a domino effect, just as the pixels in McCabe’s work are part of a much bigger network and affect one another. Art like this fits into the realm of aleatoricism, which is “the incorporation of chance into the process of creation, especially the creation of art or media.”

I am really fascinated by the idea of letting art define itself and leaving things up to chance rather than controlling something to the point that it suffers and creativity is suffocated. In my own experience, I’ve sometimes felt the need to make my art “perfect.” However, I soon realized that the mistakes I made in the process of art-making were very interesting, and it became more enjoyable to embrace the imperfections than force the work to be something it’s not.

ghou-lookingoutwards-06

Holger Lippmann

After looking on Google and Pinterest, I found an artist whose work I really enjoy. This week I will be doing my Looking Outwards Report on Holger Lippmann. His latest work can be found here.

Lippmann started with focused study in visual arts as a teenage. He went to his first computer graphics internship at the Institute of Technology in New York. He worked more closely with computers when he moved back to Germany, his fascination of working with software and internet based media grew. His work includes vector files ranging from sizes 80 centemetres to 180 metres wide.

21016213620_noisegridneu05_3_col_elli3_23

One of the pieces I most admire is the Noise Scape 4 Series.

this is a rework of some ongoing scripts and one of Lippmann’s most recent works. I really enjoy this work because it is a romantic landscape painting that has been created with simple 2d geometries. Lippmann has programed a script that can run and produce many of these “paintings” and he then chooses the best to print.

creyes1-LookingOutwards-06

Since 2016, Joseph Pollock has been creating procedurally generated artwork using his own program written in C++ and OpenGL. Each image is actually a captured frame of these programs, which continuously animate – from there he does a small amount of manual photo-editing and stitching to create the final image. What’s really fascinating about this is that most of the compositions are solely up to the random nature of the program, making every image unique and engaging. Granted, what we’re seeing is Pollack’s curation of what his program produces, but that doesn’t make the final result any less impressive. I am curious, however, to see more of Pollack’s process and the animations from which he gets his stills. Even as still images, they have a living quality to them – growth and decay all at once.

More of Pollack’s work can be found on Flickr and GitHub.

NatalieKS-LookingOutwards-06

John Cage, famous for his “indeterminate” approach to music and art, composed an aleatoric piece called “Music of Changes.” Aleatoric music is music in which at least some element is randomly generated or somehow left to chance. This particular composition, composed in 1951, is a 43 minute piano solo, employing not only the keys but also the strings, pedals, and lid of the piano itself. He had based his composition off of a Chinese oracle book called I Ching (or Book of Changes). Using the chance-based operators listed in I Ching, Cage computed charts to use for various aspects of his piece – tempo, notes, rhythm, etc. – so that the piece would be entirely random. As with a large body of his work, Cage wanted to explore the “ability of a piece to be performed in substantially different ways.”

I really admire this piece for its exploration of patterns and how it embraced complete randomness. Music is heavily based on patterns – repeating choruses and motifs, among others – and we consider “good” music to have such patterns. This piece in contrast seems very disconnected and disorienting, and challenges those notions of “good” music. It is thought-provoking and interesting, if hard to listen to.

NatalieKS-Project-05

sketch

//Natalie Schmidt
//nkschmid@andrew.cmu.edu
//Sectiond D
//Project-05

var x = 0;
var y = 0;

function setup() {
    createCanvas(400, 480);
    background(102, 159, 166);
}

function draw() {

    for (var y = -460; y < height - 35; y += 140) {
        for (var x = -50; x < width - 50; x += 130) {
            leaf(x, y);
            push();
            fill(191, 158, 57);
            triangle(x + 5, y + 55, x + 18, y + 40, x + 30, y + 55);
            triangle(x + 5, y + 55, x + 18, y + 70, x + 30, y + 55);
            noFill();
            stroke(191, 158, 57);
            strokeWeight(2);
            triangle(x, y + 55, x + 18, y + 35, x + 35, y + 55);
            triangle(x, y + 55, x + 18, y + 75, x + 35, y + 55);
            pop();
        }
    }
    noLoop();

}

function leaf(x, y) {
    stroke(47, 87, 53);
    strokeWeight(1);
    fill(65, 121, 73);
// top leaf 1 - right
    beginShape();
    curveVertex(x + 25, y + 400);
    curveVertex(x + 25, y + 400);
    curveVertex(x + 35, y + 403);
    curveVertex(x + 45, y + 408);
    curveVertex(x + 50, y + 420);
    curveVertex(x + 45, y + 430);
    curveVertex(x + 45, y + 430);
    endShape();
//top leaf 1 - left
    beginShape();
    curveVertex(x + 25, y + 400);
    curveVertex(x + 25, y + 400);
    curveVertex(x + 23, y + 406);
    curveVertex(x + 23, y + 409);
    curveVertex(x + 26, y + 420);
    curveVertex(x + 30, y + 425);
    curveVertex(x + 35, y + 428);
    curveVertex(x + 45, y + 430);
    curveVertex(x + 45, y + 430);
    endShape();
// top leaf 2 - right
    beginShape();
    curveVertex(x + 45, y + 388 - 8);
    curveVertex(x + 45, y + 388 - 8);
    curveVertex(x + 55, y + 391 - 8);
    curveVertex(x + 65, y + 396 - 8);
    curveVertex(x + 70, y + 408 - 8);
    curveVertex(x + 65, y + 418 - 8);
    curveVertex(x + 65, y + 418 - 8);
    endShape();
//top leaf 2 - left
    beginShape();
    curveVertex(x + 45, y + 388 - 8);
    curveVertex(x + 45, y + 388 - 8);
    curveVertex(x + 43, y + 394 - 8);
    curveVertex(x + 43, y + 397 - 8);
    curveVertex(x + 46, y + 408 - 8);
    curveVertex(x + 49, y + 413 - 8);
    curveVertex(x + 55, y + 416 - 8);
    curveVertex(x + 65, y + 418 - 8);
    curveVertex(x + 65, y + 418 - 8);
    endShape();
// top leaf 3 - right
    beginShape();
    curveVertex(x + 51 + 9, y + 388 - 29);
    curveVertex(x + 51 + 9, y + 388 - 29);
    curveVertex(x + 61 + 9, y + 391 - 29);
    curveVertex(x + 71 + 9, y + 396 - 29);
    curveVertex(x + 76 + 9, y + 408 - 29);
    curveVertex(x + 71 + 9, y + 418 - 29);
    curveVertex(x + 71 + 9, y + 418 - 29);
    endShape();
//top leaf 3 - left
    beginShape();
    curveVertex(x + 51 + 9, y + 388 - 29);
    curveVertex(x + 51 + 9, y + 388 - 29);
    curveVertex(x + 49 + 9, y + 394 - 29);
    curveVertex(x + 49 + 9, y + 397 - 29);
    curveVertex(x + 52 + 9, y + 408 - 29);
    curveVertex(x + 55 + 9, y + 413 - 29);
    curveVertex(x + 61 + 9, y + 416 - 29);
    curveVertex(x + 71 + 9, y + 418 - 29);
    curveVertex(x + 71 + 9, y + 418 - 29);
    endShape();
// top leaf 4 - right
    beginShape();
    curveVertex(x + 51 + 24, y + 388 - 52);
    curveVertex(x + 51 + 24, y + 388 - 52);
    curveVertex(x + 61 + 24, y + 391 - 52);
    curveVertex(x + 71 + 24, y + 396 - 52);
    curveVertex(x + 76 + 24, y + 408 - 52);
    curveVertex(x + 71 + 24, y + 418 - 52);
    curveVertex(x + 71 + 24, y + 418 - 52);
    endShape();
//top leaf 4 - left
    beginShape();
    curveVertex(x + 51 + 24, y + 388 - 52);
    curveVertex(x + 51 + 24, y + 388 - 52);
    curveVertex(x + 49 + 24, y + 394 - 52);
    curveVertex(x + 49 + 24, y + 397 - 52);
    curveVertex(x + 52 + 24, y + 408 - 52);
    curveVertex(x + 55 + 24, y + 413 - 52);
    curveVertex(x + 61 + 24, y + 416 - 52);
    curveVertex(x + 71 + 24, y + 418 - 52);
    curveVertex(x + 71 + 24, y + 418 - 52);
    endShape();
// bottom leaf 1 - right
    beginShape();
    curveVertex(x + 51 + 49, y + 388 - 25);
    curveVertex(x + 51 + 49, y + 388 - 25);
    curveVertex(x + 61 + 49, y + 391 - 25);
    curveVertex(x + 71 + 49, y + 396 - 25);
    curveVertex(x + 76 + 49, y + 408 - 25);
    curveVertex(x + 71 + 49, y + 418 - 25);
    curveVertex(x + 71 + 49, y + 418 - 25);
    endShape();
//bottom leaf 1 - left
    beginShape();
    curveVertex(x + 51 + 49, y + 388 - 25);
    curveVertex(x + 51 + 49, y + 388 - 25);
    curveVertex(x + 49 + 49, y + 394 - 25);
    curveVertex(x + 49 + 49, y + 397 - 25);
    curveVertex(x + 52 + 49, y + 408 - 25);
    curveVertex(x + 55 + 49, y + 413 - 25);
    curveVertex(x + 62 + 49, y + 416 - 25);
    curveVertex(x + 71 + 49, y + 418 - 25);
    curveVertex(x + 71 + 49, y + 418 - 25);
    endShape();
// bottom leaf 2 - right
    beginShape();
    curveVertex(x + 51 + 33, y + 388 - 1);
    curveVertex(x + 51 + 33, y + 388 - 1);
    curveVertex(x + 61 + 33, y + 391 - 1);
    curveVertex(x + 71 + 33, y + 396 - 1);
    curveVertex(x + 76 + 33, y + 408 - 1);
    curveVertex(x + 71 + 33, y + 418 - 1);
    curveVertex(x + 71 + 33, y + 418 - 1);
    endShape();
//bottom leaf 2 - left
    beginShape();
    curveVertex(x + 51 + 33, y + 388 - 1);
    curveVertex(x + 51 + 33, y + 388 - 1);
    curveVertex(x + 49 + 33, y + 394 - 1);
    curveVertex(x + 49 + 33, y + 397 - 1);
    curveVertex(x + 52 + 33, y + 408 - 1);
    curveVertex(x + 55 + 33, y + 413 - 1);
    curveVertex(x + 62 + 33, y + 416 - 1);
    curveVertex(x + 71 + 33, y + 418 - 1);
    curveVertex(x + 71 + 33, y + 418 - 1);
    endShape();
// bottom leaf 3 - right
    beginShape();
    curveVertex(x + 51 + 15, y + 388 + 18);
    curveVertex(x + 51 + 15, y + 388 + 18);
    curveVertex(x + 61 + 15, y + 391 + 18);
    curveVertex(x + 71 + 15, y + 396 + 18);
    curveVertex(x + 76 + 15, y + 408 + 18);
    curveVertex(x + 71 + 15, y + 418 + 18);
    curveVertex(x + 71 + 15, y + 418 + 18);
    endShape();
//bottom leaf 3 - left
    beginShape();
    curveVertex(x + 51 + 15, y + 388 + 18);
    curveVertex(x + 51 + 15, y + 388 + 18);
    curveVertex(x + 49 + 15, y + 394 + 18);
    curveVertex(x + 49 + 15, y + 397 + 18);
    curveVertex(x + 52 + 15, y + 408 + 18);
    curveVertex(x + 55 + 15, y + 413 + 18);
    curveVertex(x + 62 + 15, y + 416 + 18);
    curveVertex(x + 71 + 15, y + 418 + 18);
    curveVertex(x + 71 + 15, y + 418 + 18);
    endShape();
// bottom leaf 4 - right
    beginShape();
    curveVertex(x + 51 - 2, y + 388 + 35);
    curveVertex(x + 51 - 2, y + 388 + 35);
    curveVertex(x + 61 - 2, y + 391 + 35);
    curveVertex(x + 71 - 2, y + 396 + 35);
    curveVertex(x + 76 - 2, y + 408 + 35);
    curveVertex(x + 71 - 2, y + 418 + 35);
    curveVertex(x + 71 - 2, y + 418 + 35);
    endShape();
    //bottom leaf 3 - left
    beginShape();
    curveVertex(x + 51 - 2, y + 388 + 35);
    curveVertex(x + 51 - 2, y + 388 + 35);
    curveVertex(x + 49 - 2, y + 394 + 35);
    curveVertex(x + 49 - 2, y + 397 + 35);
    curveVertex(x + 52 - 2, y + 408 + 35);
    curveVertex(x + 55 - 2, y + 413 + 35);
    curveVertex(x + 62 - 2, y + 416 + 35);
    curveVertex(x + 71 - 2, y + 418 + 35);
    curveVertex(x + 71 - 2, y + 418 + 35);
    endShape();
    fill(73, 135, 82);
    stroke(191, 158, 57);
    strokeWeight(1);
//center line for leaf
    push();
    noFill();
    stroke(47, 87, 53);
    strokeWeight(3);
    beginShape();
    curveVertex(x + 30, y + 310);
    curveVertex(x + 30, y + 435);
    curveVertex(x + 100, y + 360);
    curveVertex(x + 50, y + 360)
    endShape();
    pop();
}

I really wanted to do something with plant leaves and gold, and started at first to sketch out what I wanted. That ended up changing quite a lot, as I couldn’t for the life of me figure out how to write a loop that would loop the leaf shape rather than having to figure out the coordinates for each one individually. I asked multiple people for help, including a TA and some students in other CS courses, but none of us could really make it work. I wish I could’ve figured that out and implemented it for this project, because it would’ve saved a lot of time. Otherwise, figuring out how to loop the whole plant was relatively easy, since we had learned a version of how to do so in class.

The original ideas for my wallpaper. I wanted to do some sort of fern, and did a rough sketch of what that might look like.

Trying to figure out coordinates for the leaves. Figuring out the first leaf took most of my time, as I was pretty new to using curveVertex().

A friend (from another CS course) tried to help me figure out how to write a loop for the leaves by drawing it out on paper. In the end, we couldn’t figure it out.

rkondrup-Looking-Outwards-05

The Arabesque Wall is a highly complex computer-generated form created by Benjamin Dillenburger and Michael Hansmeyer for the 3DXL exhibition. At almost 10 feet tall, the form was modeled using complex algorithms and subsequently 3D printed as thousands of layers. The Arabesque Wall,a 50 gigabyte file, took months to design and four days to print the sheets, which were then assembled in a four-hour period.
The work is a highly complex form which folds and intersects with its own surface hundreds of thousands of times, producing a form with over 200 million individual surfaces. These complexities are of a level so intricate that humans could not fully conceive of them without the aid of computers. Hansmeyer and Dillenburger believe that this type of application of technology in architecture can augment our understanding and experience of architecture, saying “Architecture should surprise, excite, and irritate. . . it should address not only the mind, but all the senses – viscerally. It must be judged by the experiences it generates.”