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

Sammie Kim – Project 06 – Abstract Clock

//Sammie Kim
//Section D
//sammiek@andrew.cmu.edu
//Project 06 - Abstract Clock

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

function draw(){
    background(0);
    //variables for time
    var s = second();
    var m = minute();
    var hr = hour();

    //Shining stars and black night background
    for (var i = 0; i < 100; i ++) {
        frameRate(2);
        fill(225);
        var eSize = random(1, 5);
        var x = random(0, width);
        var y = random(0, height);
        ellipse(x, y, eSize, eSize);
     }

    //Mapping time to shape components
    var secIncrease = map(s, 0,59, 0, height);
    var minIncrease = map(m,0, 59, 50, height/2);
    var hrIncrease = map(hr, 0, 23, 100, height * 3/4);

    //Every minute, the blue sky background will decrease, slowly revealing the space
    fill(102, 153, 255);
    rect(0, 0, width, height - minIncrease);

    //Rocket flies upwards every second
    fill(78, 78, 252);
    triangle(225, 525 - secIncrease, 190, 570 - secIncrease, 260, 570 -secIncrease);
    fill(252, 84, 78)
    rect(190, 570 - secIncrease, 70, 100);
    stroke(0);
    strokeWeight(10);
    fill(255);
    ellipse(225, 600 - secIncrease, 30, 30);
    noStroke();
    fill(252, 153, 78);
    triangle(190, 670 - secIncrease, 225, 730 - secIncrease, 260, 670 - secIncrease);
    fill(170, 110, 196);
    triangle(190, 670 - secIncrease, 190, 710 - secIncrease, 230, 670 - secIncrease);

    //Pink circle is the sun, which is changing color every hour
    //The sun also goes down every hour
    noStroke();
    fill(hrIncrease, 180, 220);
    ellipse(100, hrIncrease, 60, 60);
  }

This project was challenging as I had to analyze how to incorporate the time concept into my canvas, letting each element pace by a specific rate of time. I imagined a rocket flying up by each second, and the sky slowly disappearing along as the rocket goes further up. The sun would also go down at the same time by every hour. With this, I got to review the map function once more, as I got to think about the range that is needed to limit the movement of the rocket. Also it took some time figuring out how to move the rocket in second increments up, which I eventually did by subtracting “secIncrease,” since the coordinates get smaller as it gets nearer to the top.

Ian Kaneko Looking-Outwards-06

A really cool project I found that uses randomness is a musical piece called “Birds on The Wires” by Jarbas Agnelli. This project likened a picture of birds on a telephone wire to notes on a staff. There just so happened to be 5 telephone wires which correspond to the 5 lines on a musical staff.

The original picture of the birds and the translation to music beneath it

While the placement of the birds is not completely random (animals have their biases too) it was still completely out of the artist’s control where the birds decided to land.

This project does a good job at balancing the randomness with the creativity of the artist. While the birds gave him the notes, he freely decided the rhythm that notes would be played. Also in the audio of the piece, you can hear many embellishments in percussion, counter-melodies, and harmonies that where not decided by the birds.

Video of the piece on the artist’s YouTube channel

Ian Kaneko Project-06-Abstract-Clock

ikaneko abstract clock

// Ian Kaneko
// Project-06

var h = 180; // candle height
var w = 40; // candle width
var b = 340; //y position of the bottom of the candle
var ww = 5; // wick width
var wh = 20; // wick height
var w2 = 150; // outer glow width
var h2 = 190; // outer glow height
var glow1 = 0; // outer glow color
var w3 = 80; // inner glow width
var h3 = 120; // inner glow height
var glow2 = 0; // inner glow color
var fw = 20; // flame width
var fh = 30; // flame height
var w4 = 450; // outer bottom glow width
var h4 = 80; // outer bottom glow height



function setup(){
    createCanvas(480, 480);
    frameRate(1);
    glow1 = color(250, 240, 150);
    glow2 = color(250, 170, 50);
        
}

function draw() {
    background(0);
    noStroke();

    glow1.setAlpha(100);
    glow2.setAlpha(130);
    
    h = 180 - (minute() * (160 / 60)); // Height decreases each minute

    for(i = 0; i < hour(); i ++) { // The number of background candles represents hours
        fill(glow1);
        ellipse(15 + (470 / 24) * i, 100, 20, 40);
        fill(glow2);
        ellipse(15 + (470 / 24) * i, 100, 12, 20);
        fill(250, 240, 240);
        ellipse(15 + (470 / 24) * i, 100, 5, 7); 

        }  
    

    //candle

    //The candle will decrease in height every minute and reset on the hour
    
    glow1.setAlpha(100); // Bottom glow of the candle
    fill(glow1);
    ellipse(width / 2, b, w4, h4);

    fill(220, 210, 210); //The candle itself
    rect(width / 2 - w / 2, b - h, w, h);
    ellipse(width / 2, b, w, 15);
    fill(250, 240, 240);
    ellipse(width / 2, b - h, w, 15);
    fill(0);
    rect(width / 2 - ww / 2, b - h - wh, 5, wh)

    
    fill(glow1); // Outer glow of flame
    ellipse(width / 2, b - h - wh, w2, h2);

    glow2.setAlpha(130); // Inner glow of flame
    fill(glow2);
    ellipse(width / 2, b - h - wh, w3, h3);

    fill(250, 240, 240); // Flame on the candle
    ellipse(width / 2, b - h - wh, fw, fh);


    //The candle flickers every second
    w2 = random(130, 170);
    h2 = random(180, 210);
    w3 = random(70, 90);
    h3 = random(110, 130);
    fw = random(18, 22);
    fh = random(30, 35);
    w4 = random(430, 480);
    h4 = random(75, 85);

   

    

}

For this project the hardest part was trying to conceptualize a way of telling time that would not just look like a clock. I started to think about what kinds of things naturally change shape overtime. My original idea was an iceberg melting, then I thought of a moon waxing and waning. I ended up choosing a candle melting though because I liked the idea of playing with opacity to show it emitting light. While my clock doesn’t exactly document how many seconds have passed, it does react by randomizing the candle glow every second. The candle gets shorter every minute, and a candle in the distance is lit every hour.

Monica Chang – Project 06 – Abstract Clock

sketch

//Monica Chang
//mjchang@andrew.cmu.edu
//Section D
//Project 06 - Abstract Clock

var prevSec;
var millisRolloverTime;

var rVal = 50;
var bVal = 50;

//--------------------------
function setup() {
    createCanvas(480, 480);
    millisRolloverTime = 0;
    frameRate(5);
    r = random(255);
    g = random(255);
    b = random(255);
}

//--------------------------


function draw() {
    background(0);
  
    //millis is represented in drawGrid
    drawGrid();
    
    // Fetch the current time
    var H = hour(); 
    var M = minute();
    var S = second();
    var a = H*3600 + M*60 + S;
    
    // Reckon the current millisecond, 
    // particularly if the second has rolled over.
    // Note that this is more correct than using millis()%1000;
    if (prevSec != S) {
        frameRate(25);
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);
    
    fill(128,100,100);
    stroke(128,100,100);
    text("Hour: "   + H, 10, 22);
    text("Minute: " + M, 10, 42);
    text("Second: " + S, 10, 62);
    text("Millis: " + mils, 10, 82);
    
    var hourCircSize = map(H, 0, 23, 0, width);
    var minuteBarWidth = map(M, 0, 59, 0, width);
    
    var blueChange = map(S, 0, 60, 0, 255); //blue changing color
    var radiusChange = map(S, 0, 60, 0, 400); //increasing circle size
  
  // hours
    fill(3);
    noStroke();
    ellipse(width / 2, height / 2, hourCircSize / 2);
    

  //minutes
  
    rectMode(CORNER);
    noStroke();
    fill(20);
    rect(50, height / 2, 380, 20);//darker background
    noStroke();
    fill(r, g, b);
    rect(50, height / 2, minuteBarWidth, 20); //minutes passed
    strokeWeight(1);
  
  
  //seconds: empty, blue circles getting bigger and bigger.
    noFill();
    stroke(66, blueChange, 244);
    ellipse(width / 2, height / 2, radiusChange);
    a = a + 1;
    
 
  
  //analog clock
    fill(128,100,100);
    noStroke();
    textAlign(LEFT);
    text(H % 12, width / 2 - 20, 460);

    textAlign(CENTER);
    text(M, width / 2 , 460);
  
    textAlign(LEFT);
    text(S, width / 2 + 7, 460);
    
}

//millis
function drawGrid() {
  // noprotect
    for (var y = 0; y < 490; y += 10) {
        for (var x = 0; x < 650; x += 10) {
            frameRate(millis());
            rVal = (rVal - 1) % 200;
            bVal = (bVal + 3) % 200;
            //color gradient
            fill(rVal, 0, bVal);
            noStroke();
            ellipse(x, y, 10, 10);
            
        }
  }
}

It was really interesting how much I had to think about the readability of this concept. To make something that we look at daily, making it abstract can arguably take more time for it to function regularly like it does now for it. With this idea, I concentrated on abstracting the form of the clock while also allowing it to still require not that much cognitive processing to understand.

Mari Kubota- Project- 06- Abstract Clock

sketch

/*  Mari Kubota
    49-104 Section D
    mkubota@andrew.cmu.edu 
    Assignment 6
*/


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

function draw(){
    background(178,208,166);
    noStroke();
    //creates vars to call on time
    var sec= second();
    var min= minute();
    var hr= hour();
    var size= 200;

    //Mapping time to shape components
    var mappedSec = map(sec, 0,59, width/2-size,width/2+size);
    var mappedMin = map(min,0, 59, 0, size);
    var mappedHr = map(hr, 0, 23, 270, 630);

    //blue circle
    fill(178,208,220);
    ellipse(width/2, height/2, size, size);

    //Background color circle ellipsing blue circle (seconds)
    fill(178,208,166);
    ellipse(mappedSec, height/2, size, size);

    //white circle (minutes)
    fill(225);
    ellipse(width/2, height/2, mappedMin, mappedMin);

    //yellow arc (hours)
    angleMode(DEGREES);
    stroke(255,248,175);
    noFill();
    strokeWeight(10);
    arc(width/2, height/2, size+50, size+50, 270, mappedHr);



    }

In this project I was inspired by the waxing and waning of the moon. Every second shifted a background colored circle over the blue circle to give an illusion of an eclipse. The center white circle grows bigger every minute. And the yellow arc on the outside grows longer every hour in a 24 hour period. The most challenging part of this assignment was adjusting the time variables to the right numbers and components.

Monica Chang – Looking Outwards – 06

There’s always a fear that the use of random data can imply that the creator has no sense of intentionality or ability to make a decision. However, designers have been able to develop a way that randomness becomes more of a generative tool that helps overcome the limits of the artists’ imaginations than an arbitrary statement.

Aaron Tobey, the creator of the project below, agrees with this idea as he specifically states that integrating randomness in design does not “eliminate” the artist, but rather “displaces” the artist in the process of the creation. With this project, Tobey was required to create a pseudo random number generator using the “register and tap” method to also create a design. He was also required to consider the idea of “working” as a set of logical operations rather than watching what the generator comes up with. Furthermore, he creates a frame-by-frame animation with this collection of randomized, data-driven imagery.

Coding Architecture Project: Randomness by Aaron Tobey

A closer look into a single frame of Tobey’s Randomness project.

The amount of thought and registration that was required for this project is what intrigued and satisfied me the most. Integrating randomness within art or a design was something that was always tricky in the notion of producing an elaborate creation. Many believe that when a creator utilizes randomness in their artwork, they either lack in depth or purpose and is nothing but made of surface. However, with this project, it helps build a visual piece of evidence that even randomness can open the creator’s option of forming a design that can be composed within the artist’s visual field.

CJ Walsh – Looking Outwards 06 – Randomness

The piece that I chose to focus on for this week’s Looking Outwards is by Georg Nees. He is considered a pioneer in the world computer art and graphics. While this piece is pretty simple, I enjoyed it for a variety of reasons. I like to sketch in a lot of my notebooks, and all of the lines remind me of the things that I doodle when I’m in class. Another aspect that really stands out to me is on their own, each of the small drawings would seem insignificant. But, when combined into the large grid with all of the other generated drawings, it creates a really intriguing image. It almost feels like a diagram of some kind of language or alphabet, which is cool.

In order to create this piece, Nees set random parameters for each graphic. The rules that he set was that eight dots would be placed inside the established canvas, and then they would be connected by lines into a closed edge shape. He states that, “The program for each graphic repeats generative fundamental operations so that the mere repetitions, the aesthetic redundancy, produce the random parametric values of the aesthetic improbability of the graphic during each repetition.”

It is interesting to think about how far computer graphics and art has come since Nees first created and presented these works. Looking back at this piece now, we see it as quite simple compared to the other forms you can create using code. At the time, this work was revolutionary. This piece conveys a sense of experimentation, which reflects exactly what Nees was doing with his work. It wasnt about creating an artistically beautiful work of art. It was a part of a larger experiment into the capabilities of programming. And even if this may not be considered high art, it is a cool piece to look at and one that I admire.

Sarah Choi – Looking Outwards – 06

Norimichi Hirakawa , 16 unknowns and the irreversible (2013) from norimichi hirakawa on Vimeo.

Norimichi Hrakawa’s The Irreversible is a sequence of a thousand and twenty-four randomized two-second digital videos depicting the art of time. This recorded reversed time ticks forward in real-time on the minds of his audience. He explains he wanted to convey the idea of the past and present. He plays with the idea of realizing how the now is perceived to be different from what happened to people individually in the past as recent as a couple of seconds ago.

The algorithms in which he was able to create his piece was completely through digital manipulation of his code. He focused on using inverse operations and generating a random method to create a moving illusion for two seconds. After each two-second video, he made his code restart, similar to the i = 0 functions we’ve been learning in class.

In its final form, Hrakawa’s work brings out abstract and randomly produced generative art produced solely through digital manipulation. His creativity and play on time were intriguing to read about. He believes technological tools and computation develop innovative ideas for his art. From the beginning, Hrakawa relied on computation to explore more areas for themes to his art. He applied theorems of math and physics as parameters, and further advanced his art through playing with plotted pixels based on two-dimensional paintings. In terms of color, he explored R, G, and B color formats and created equations to randomize specific colors to his work.

http://counteraktiv.com/#wrk

Mari Kubota- Looking Outwards- 06

A program by a computational mathematician Andrej Bauer generates a piece of art randomly when you put in a title. The program is implemented in ocaml with the online version being implemented using ocamljs. How the program works is that the title you input becomes a seed for a number that is used to construct a mathematical formula which determines the placement of each pixel on the canvas. The art itself isn’t randomly generated each time since the same title yields the same results. The name of a picture should consist of two words with the first word determining the colors and the layout of focal points, and the second word determining the selection and arrangement of graphical elements. Therefore, by changing the first word and keeping the second, the colors and the layout change while the style remains the same. As a result, keeping the first word and changing the second one leads to a very different picture. The program is implemented in ocaml with the online version being implemented using ocamljs.

I found this program intriguing because rather than making art completely random, Andrej Bauer found a way of using mathematical algorithms to equate a specific word to a specific image that never fails to change.

Raymond Pai-Looking Outwards-06

Nick Cave, <em>Amass</eM>. Image courtesy of Apple.

Amass is an augmented reality experience created by artist Nick Cave. Nick Cave creates sculptures and fashion which aim to show diversity and beauty while confronting the darkest parts of humanity. He is known for his garments and events, which are a collection of many fabricator’s textiles created in collaboration with Cave. It consists of randomly generated wind spinners, usually found in gardens reflecting sunlight. Amass can be experienced through a phone’s AR camera. I admire the use of AR to create an artistic experience. The randomly generated positions of the spinners in space feels very relevant to pseudorandom numbers, as the spinners are all about the same distance from each other and do not go beyond the walls, floor, or roof of the room. The colors of the spinners are also randomly generated, creating aesthetic gradients of shimmering light. Users can walk around and look at them from many angles.

Image result for nick cave project amass

More about the artist:

https://art21.org/artist/nick-cave/

More about Amass:

Why Apple’s New Augmented-Reality Collaboration With Famous Artists Won’t Help Us Reach the Next Stage of [AR]T