Month: October 2019

Claire Yoon – Looking Outwards – 06

Random generative art piece using a film

This art piece by Vladimir Kanic, a transmedia artist filmmaker, is part of a series of artwork that incorporates chaos theory and randomness to create structured art. Vladimir created a process that alters the film to create itself from spontaneous occurrences in everyday material world. He devised a concept called ‘Magic box ‘ where twelve boxes are given to different art directors and they put in a random number of objects. A group of random people would then procede to put them in a stash and the artist would create a film by observing and measuring randomness from the objects from any one of the boxes. I found this piece particularly interesting as a unique piece of art is created through measuring randomness through a random model system of chaos.

lrchu – project 06 – abstract clock

lrchu

// lee chu
// section c
// lrchu@andrew.cmu.edu
// project - 06

var h;
var m;
var s;
var rad = 50;
var start = 58;

var mer;
var ce;
var des;

function setup() {
    createCanvas(480, 300);
    mer = 12;
    ce = 30;
    des = 30;
}

function draw() {
    background(252, 245, 225);
    h = hour();
    m = minute();
    s = second();

    // spinning animation
    mer += 1/60 ; ce += 1/12 ; des += 1/12;

    // digits
    firstDigit(start, 90);
    secondDigit(start + 2 * rad, 90);
    thirdDigit(start + 4.25 * rad, 90);
    fourthDigit(start + 6.25 * rad, 90);

    // second counting dots
    fill(150);
    strokeWeight(0);
    if (s % 2 == 0) {
        ellipse(start + 3.625 * rad, 90 + rad / 2, 10, 10);
        ellipse(start + 3.625 * rad, 90 + 3 * rad / 2, 10, 10);
    }
}

// conditinals for each digit
function firstDigit(x, y) {
    if (h < 10) {
        zero(x, y);
    }
    else if (h > 9 & h < 20) {
        one(x, y);
    }
    else if (h > 19) {
        two(x, y);
    }

}

function secondDigit(x, y) {
    if (h % 10 == 0) {
        zero(x, y);
    }
    else if (h % 10 == 1) {
        one(x, y);
    }
    else if (h % 10 == 2) {
        two(x, y);
    }
    else if (h % 10 == 3) {
        three(x, y);
    }
    else if (h % 10 == 4) {
        four(x, y);
    }
    else if (h % 10 == 5) {
        five(x, y);
    }
    else if (h % 10 == 6) {
        six(x, y);
    }
    else if (h % 10 == 7) {
        seven(x, y);
    }
    else if (h % 10 == 8) {
        eight(x, y);
    }
    else if (h % 10 == 9) {
        nine(x, y);
    }
}

function thirdDigit(x, y) {
    if (m < 10) {
        zero(x, y);
    }
    else if (m > 9 & m < 20) {
        one(x, y);
    }
    else if (m > 19 & m < 30) {
        two(x, y);
    }
    else if (m > 29 & m < 40) {
        three(x, y);
    }
    else if (m > 39 & m < 50) {
        four(x, y);
    }
    else if (m > 49 & m < 60) {
        five(x, y);
    }
}

function fourthDigit(x, y) {
    if (m % 10 == 0) {
        zero(x, y);
    }
    else if (m % 10 == 1) {
        one(x, y);
    }
    else if (m % 10 == 2) {
        two(x, y);
    }
    else if (m % 10 == 3) {
        three(x, y);
    }
    else if (m % 10 == 4) {
        four(x, y);
    }
    else if (m % 10 == 5) {
        five(x, y);
    }
    else if (m % 10 == 6) {
        six(x, y);
    }
    else if (m % 10 == 7) {
        seven(x, y);
    }
    else if (m % 10 == 8) {
        eight(x, y);
    }
    else if (m % 10 == 9) {
        nine(x, y);
    }
}

// pre-assigned positions for each number variation
function zero(x, y) {
    clock(x, y, 3, 30, 15);
    clock(x, y + rad, 12, 30, 0);
    clock(x, y + 2 * rad, 12, 15, 0);
    clock(x + rad, y, 9, 30, 45);
    clock(x + rad, y + rad, 12, 30, 0);
    clock(x + rad, y + 2 * rad, 12, 45, 0);
}

function one(x, y) {
    // mer ce des
    clock(x, y, mer, ce, des);
    clock(x, y + rad, mer, ce, des);
    clock(x, y + 2 * rad, mer, ce, des);

    clock(x + rad, y, 6, 30, 30);
    clock(x + rad, y + rad, 12, 30, 30);
    clock(x + rad, y + 2 * rad, 12, 0, 0);
}

function two(x, y) {
    clock(x, y, 3, 15, 15);
    clock(x + rad, y, 9, 30, 45);
    clock(x + rad, y + rad, 12, 45, 0);
    clock(x, y + rad, 3, 30, 15);
    clock(x, y + 2 * rad, 12, 15, 0);
    clock(x + rad, y + 2 * rad, 9, 45, 45);
}

function three(x, y) {
    clock(x, y, 3, 15, 15);
    clock(x + rad, y, 9, 30, 45);
    clock(x + rad, y + rad, 12, 30, 45);
    clock(x, y + rad, 3, 15, 15);
    clock(x, y + 2 * rad, 3, 15, 15);
    clock(x + rad, y + 2 * rad, 12, 45, 0);
}

function four(x, y) {
    clock(x, y, 6, 30, 30);
    clock(x, y + rad, 12, 15, 15);
    clock(x + rad, y, 6, 30, 30);
    clock(x + rad, y + rad, 12, 30, 45);
    clock(x + rad, y + 2 * rad, 12, 0, 0);
    clock(x, y + 2 * rad, mer, ce, des);
}

function five(x, y) {
    clock(x, y, 3, 30, 15);
    clock(x + rad, y, 9, 45, 45);
    clock(x, y + rad, 12, 15, 15);
    clock(x + rad, y + rad, 9, 30, 45);
    clock(x, y + 2 * rad, 3, 15, 15);
    clock(x + rad, y + 2 * rad, 12, 45, 0);
}

function six(x, y) {
    clock(x, y, 3, 30, 15);
    clock(x + rad, y, 9, 45, 45);
    clock(x, y + rad, 12, 30, 15);
    clock(x, y + 2 * rad, 12, 15, 0);
    clock(x + rad, y + rad, 9, 30, 45);
    clock(x + rad, y + 2 * rad, 12, 45, 0);
}

function seven(x, y) {
    clock(x, y, 3, 15, 15);
    clock(x + rad, y, 9, 30, 45);
    clock(x + rad, y + rad, 12, 30, 0);
    clock(x + rad, y + 2 * rad, 12, 0, 0);
    clock(x, y + rad, mer, ce, des);
    clock(x, y + 2 * rad, mer, ce, des);
}

function eight(x, y) {
    clock(x, y, 3, 30, 15);
    clock(x + rad, y, 9, 30, 45);
    clock(x + rad, y + rad, 12, 30, 45);
    clock(x, y + rad, 12, 30, 15);
    clock(x, y + 2 * rad, 12, 15, 0);
    clock(x + rad, y + 2 * rad, 12, 45, 0);
}

function nine(x, y) {
    clock(x, y, 3, 30, 15);
    clock(x + rad, y, 9, 30, 45);
    clock(x, y + rad, 12, 15, 0);
    clock(x + rad, y + rad, 12, 30, 45);
    clock(x + rad, y + 2 * rad, 12, 0, 0);
    clock(x, y + 2 * rad, mer, ce, des);
}

// basic clock unit

function clock(x, y, h, m, s) {
    push();
    translate(x, y);
    strokeWeight(0);
    fill(150);
    circle(5, 5, rad - 2);
    strokeWeight(0.75);
    fill('white');
    circle(0, 0, rad - 2);

    // hour hand
    push();
    strokeWeight(2);
    rotate(h / 12 * 2 * PI);
    line(0, 0, 0, -rad / 2 + 6);
    pop();

    // minute hand
    push();
    strokeWeight(2);
    rotate(m / 60 * 2 * PI);
    line(0, 0, 0, -rad / 2 + 4);
    lastM = m;
    pop();

    // second hand
    push();
    strokeWeight(1.5);
    rotate(s / 60 * 2 * PI);
    line(0, 0, 0, -rad / 2 + 3);
    lastS = s;
    pop();
    pop();
}

I had seen a clock made of multiple clocks somewhere on the internet before, and I wanted to replicate that effect. However, a main issue I had a difficult time grasping was having each clock rotate its hands to the next assigned position, which would probably require arrays of the old positions and new positions.

Alec Albright – Project 06 – Abstract Clock

sketch

// Alec Albright
// aalbrigh@andrew.cmu.edu
// Section B
// Project 06

var quartPossibleTop = [] // possible upper y values for quarter notes
var quartPlacesTop = [] // actual upper y values for quarter notes
var quartPossibleBottom = [] // possible lower y values for quarter notes
var quartPlacesBottom = [] // actual lower y values for quarter notes
var halfPossibleTop = [] // possible upper y values for half notes
var halfPlacesTop = [] // actual upper y values for half notes
var halfPossibleBottom = [] // possible lower y values for half notes
var halfPlacesBottom = [] // actual lower y values for half notes
var wholePossible = [] // possible y values for whole notes
var wholePlaces = [] // actual y values for whole notes

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

    // defining possible quarter note y values
    for(i = 20; i < 92; i += 8){
        quartPossibleTop.push(i);
    }
    for(i = 115; i < 185; i += 8){
        quartPossibleBottom.push(i);
    }
    // predetermines random vertical placements on the staff
    for(i = 0; i <= 30; i++){
        quartPlacesTop.push(random(quartPossibleTop));
    }
    for(i = 0; i <= 30; i++){
        quartPlacesBottom.push(random(quartPossibleBottom));
    }
    
    // defining possible half note y values
    for(i = 205; i < 275; i += 8){
        halfPossibleTop.push(i);
    }
    for(i = 300; i < 370; i += 8){
        halfPossibleBottom.push(i);
    }
    // predetermines random vertical placements on the staff
    for(i = 0; i <= 30; i++){
        halfPlacesTop.push(random(halfPossibleTop));
    }
    for(i = 0; i <= 30; i++){
        halfPlacesBottom.push(random(halfPossibleBottom));
    }
    
    // defining possible whole note y values
    for(i = 390; i < 460; i += 8){
        wholePossible.push(i);
    }
    // predetermines random vertical placements on the staff
    for(i = 0; i < 24; i++){
        wholePlaces.push(random(wholePossible));
    }
}

function draw(){
    // record current time
    var h = hour();
    var m = minute();
    var s = second();

    background("white");
    stroke("black");
    strokeWeight(1.5);

    // drawing seconds
    fill("black")
    for(i = 1; i <= s; i++){
        // draws a quarter note depending on minute
        if(i <= 30){
            // head
            ellipse(15 * i, quartPlacesTop[i], 10, 8);
            // stem
            // top half
            if(quartPlacesTop[i] < 52){
                line(15 * i + 5, quartPlacesTop[i], 15 * i + 5,
                     quartPlacesTop[i] - 15);
            // bottom half
            } else {
                line(15 * i - 5, quartPlacesTop[i], 15 * i - 5,
                     quartPlacesTop[i] + 15);
            }
        } else {
            ellipse(15 * (i - 30), quartPlacesBottom[(i - 30)], 10, 8);
            // stem
            // top half
            if(quartPlacesBottom[(i - 30)] < 147){
                line(15 * (i - 30) + 5, quartPlacesBottom[(i - 30)],
                 15 * (i - 30) + 5, quartPlacesBottom[(i - 30)] - 15);
            // bottom half
            } else {
                line(15 * (i - 30) - 5, quartPlacesBottom[(i - 30)],
                 15 * (i - 30) - 5, quartPlacesBottom[(i - 30)] + 15);
            }
        }
    }

    // drawing minutes
    fill("white")
    for(i = 1; i <= m; i++){
        // draws a half note depending on minute
        if(i <= 30){
            // head
            ellipse(15 * i, halfPlacesTop[i], 10, 8);
            // stem
            if(halfPlacesTop[i] < 237){
                line(15 * i + 5, halfPlacesTop[i], 15 * i + 5,
                     halfPlacesTop[i] - 15);
            } else {
                line(15 * i + 5, halfPlacesTop[i], 15 * i + 5,
                     halfPlacesTop[i] + 15);
            }
        } else {
            // head
            ellipse(15 * (i - 30), halfPlacesBottom[(i - 30)], 10, 8);
            // stem
            // top half
            if(halfPlacesBottom[(i - 30)] < 348){
                line(15 * (i - 30) + 5, halfPlacesBottom[(i - 30)],
                 15 * (i - 30) + 5, halfPlacesBottom[(i - 30)] - 15);
            // bottom half
            } else {
                line(15 * (i - 30) - 5, halfPlacesBottom[(i - 30)],
                 15 * (i - 30) - 5, halfPlacesBottom[(i - 30)] + 15);
            }
        }
    }

    // drawing hours
    for(i = 1; i <= h; i++){
        // draws a whole note
        ellipse(36 * i, wholePlaces[i], 10, 8);
    }   

    // drawing staves
    // seconds
    strokeWeight(1);
    drawStaff(20);
    drawStaff(115);
    // connecting
    line(10, 20, 10, 179);
    strokeWeight(3);
    line(5, 15, 5, 184);
    line(5, 15, 15, 12);
    line(5, 184, 15, 188);
    // resetting strokeweight
    strokeWeight(1);
    
    // minutes
    drawStaff(205);
    drawStaff(300);
    // connecting
    line(10, 205, 10, 364);
    strokeWeight(3);
    line(5, 200, 5, 369);
    line(5, 200, 15, 197);
    line(5, 369, 15, 372);
    // resetting strokeweight
    strokeWeight(1);

    // hours
    drawStaff(390)
}

// function to draw a staff
function drawStaff(startY){
    stroke("black");

    // draw a consistent staff
    for(i = 0; i < 80; i += 16){
        let lineY = startY + i
        line(10, lineY, width, lineY);
    }
}

In the creation of this clock, I wanted to see whether some interesting musical elements could be added, leading me to represent various elements of time by different rhythms, with notes placed randomly every increment of time. In this way, a new “piece” of music can be generated every second, with very low likelihood of being reproduced by any replication of this program due to the amount of randomness involved. Though unorthodox, this method of keeping time is certainly interesting. Particularly difficult was managing the spacing of the staves and the notes within a line, simply due to the fact that there can be as many as 30 notes on one line at a time in this representation.

Initial sketch of idea

YouieCho-Project-06-Abstract-Clock

sketch

/* Youie Cho
   Section E
   minyounc@andrew.cmu.edu
   Project-06-Abstract-Clock*/

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

function draw() {
    background(0);

    // Current time
    var M = minute(); // MIN: face width
    var S = second(); // SEC: face color, mouth curve, sparkling background
    var H = hour(); // HR: eyebrow angle, white bar progression
    noStroke();

    // SEC background sparkles as one frame is displayed per second
    for (var i = 0; i < 60; i ++) {
        frameRate(1);
        var x = random(0, width);
        var y = random(0, height);
        var diam = random(0.1, 2);
        ellipse(x, y, diam, diam);
    }

    // MIN face changes from narrow to wide from 0 to 59 minutes
    var face = map(M, 0, 59, 120, 230);
    // SEC face color gets redder from 0 to 59 seconds
    var g = map(S, 0, 59, 197, 21);
    var b = map(S, 0, 59, 143, 0);
    fill(225, g, b);
    ellipse(150, 150, face, 195);

    //SEC mouth changes from a downward to an upward curve from 0 to 59 seconds
    fill(255, 116, 74);
    var mouth  = map(S, 0, 59, 0, width);
    bezier(110, 180, 130, 220 - mouth / 3, 170, 220 - mouth / 3, 190, 180);

    //HR eyebrows move from horizontal lines to angled lines from 0 to 23 hours
    stroke(255);
    strokeWeight(7);
    var brow = map (H, 0, 23, 95, 75);
    line(105, 95, 130, brow);
    line(170, brow, 195, 95);

    //HR white bar progresses from left until the flame icon from 0 to 23 hours
    noStroke();
    fill(30);
    rect(67, 350, 176, 20);
    fill(255);
    var HBar = map(H, 0, 23, 0, 176);
    rect(67, 350, HBar, 20);

    //static elements:
    //eyes
    stroke(0);
    fill(0);
    ellipse(120, 120, 8, 8);
    ellipse(180, 120, 8, 8);
    //flame icon
    ellipseMode(CENTER);
    noStroke();
        //outer flame
    fill(168, 45, 0);
    ellipse(238, 364, 31, 31);
    triangle(223, 359, 238, 329, 253, 359);
        //inner flame
    fill("yellow");
    ellipse(238, 369, 21, 21);
    triangle(228.5, 364, 238, 349, 247, 364);
}

The idea I had for this project was showing stress level throughout the day in a comical way, because I was particularly very tired and frustrated when I began working on this. The face shows a sad expression, redder color, etc. as the time passes, and the bar at the bottom shows how much you are through the day. I could really understand how a clock can work by starting with the base code. I think it was a good opportunity for me to clarify what different variables can mean. For instance, if I make a “second” variable, I have to know if I am referring to the exact number, or a variable that somewhat represents the change of numbers. Overall, it was fun.

Sarah Kang- Looking Outwards – 06

“Medusa”, by Fabio Morreale, PHD

Fabio Morreale’s research focuses on how understanding the influence of computer technologies in shaping the way people compose, learn, listen to, and perform music. “Medusa” is one of his few visual works that “explore the redistribution of control between human and computer agents in the creation of visual artworks” (Morreale). What first drew me to this artwork was the fluidity and organic nature of the composition. This project was coded on Processing. Morreale uses the initial position of a virtual pen on his virtual canvas as his driver, and traces lines that produce numbers of autonomous agents that independently begin to roam the canvas, while leaving a trail. The only human control in this artwork is the original location of the agents, not the control over their evolution. Through this artwork, Morreale explores the cause and effect evolution paths between the relationship of humans with computer technologies, and the ratio of control between the two spectrums.

Another piece from “Medusa”, by Fabio Morreale, PHD

https://fabio.kiwi/medusa

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.

My quick candle sketch done on staff paper because I don’t have normal paper

Caroline Song – Project 06 – Abstract Clock

sketch

//Caroline Song
//Section E
//chsong@andrew.cmu.edu
//Project 06 - Abstract Clock

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

function draw(){
    background(127, 227, 250);
    //calling current time values
    var S = second();
    var M = minute();
    var H = hour(); 
    var arcSize = 200;

    //fitting time values to arcs
    var mappedS = map(S, 0, 59, 180, 360);
    var mappedM = map(M, 0, 59, 180, 360);
    var mappedH = map(H, 0, 23, 180, 360);
    //outer ring for seconds
    angleMode(DEGREES);
    noFill();
    stroke(252, 177, 228);
    strokeWeight(30);
    arc(width/2, height/2, arcSize + 120, arcSize + 120, 180, mappedS);
    //middle ring for minutes
    noFill();
    stroke(250, 247, 100);
    strokeWeight(30);
    arc(width/2, height/2, arcSize + 60, arcSize + 60, 180, mappedM);
    //inner ring for hours
    noFill();
    stroke(0, 209, 24);
    strokeWeight(30);
    arc(width/2, height/2, arcSize, arcSize, 180, mappedH);

    //draw clouds
    fill("white");
    noStroke();
    //cloud1
    ellipse(45, height/2 + 75, 60, 60);
    ellipse(95, height/2 + 65, 95, 95);
    ellipse(130, height/2 + 60, 80, 80);
    ellipse(165, height/2 + 80, 60, 60);
    //cloud2
    ellipse(width/2 + 50, height/2 + 70, 75, 75);
    ellipse(width/2 + 100, height/2 + 70, 100, 100);
    ellipse(width/2 + 150, height/2 + 70, 85, 85);
    ellipse(width/2 + 175, height/2 + 95, 50, 50);
}

Initial sketch of clock design

For this project, I wanted to communicate time in a lighthearted manner. For all those times that people are stressed or in a bad mood when looking at time, I wanted to combat those feelings with an engaging and colorful depiction of time.

*the pink seconds arc makes a full 360 arc each time it reaches 60 seconds, but it’s only supposed to return back to 180 degrees and repeat, which it does in Sublime but not when I embed it into WordPress.

Ghalya Alsanea – LO-06 -Randomness in Nature

An art show displaying Patterns that Emerge From Randomness in Nature

This work is created by Jonathan McCabe, a generative artist and designer, based in Australia. The work was inspired by Turing’s theory about naturally occurring random patterns (aka- the reaction-diffusion method).

Turing’s Theory : He believed that randomness result from the interactions between individual cells. (i.e. the state of a cell influences it’s neighbor, which influences it’s neighbor and so forth, creating a pattern of randomness.

McCabe’s Art: He created a digital representation of Turing’s theory, but instead of cells he used pixels.

“Each pixel gets a random value, usually a number between -1 and 1, which is represented in the final image by a color. Then, McCabe applies a set of rules that dictate how each pixel’s value shifts in response to the ones around it. As the program progresses, pixel values change, creating clusters of shapes that begin to emerge from the originally random mix of numbers.”

NADIA DRAKE

The reason why I chose this project is the fact that McCabe’s art starts to strangely resemble what you would see in a cell under a microscope. I am also very fascinated by the idea of a “natural random pattern” because it’s so ironic. Randomness usually means without a pattern, but yet the natural world is basically a bunch of structured randomness. Other than that, the art is also mesmerizing to look at.

Read more on the back story and the work behind the art here.

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.

my sketch