Month: October 2022

Project 6 abstract clock

I sort of messed around with the changing of these blocks for a while. I had them as notches for a second but I liked how at midnight it’ll turn to a black screen and slowly become red green and blue again. I also liked the layering effect of seconds in front of minutes in front of hours. It would be interesting to try to make it into more of a shifting gradient of red green and blue.

sketchDownload
//felix cooper fcooper D
var secs = {x:200, y:240, w:100, r:0};
var mins = {x:100, y:240, w:100, g:0};
var hours = {x:0, y:240, w:100, b:0}; //initializes each time box as an object

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

function draw() {
    let s=second(); //sets a variable connected to each set of time
    let m=minute();
    let h=hour();

    background(255);

    fill(0,0,hours.b);
    noStroke();
    rect(hours.x,hours.y-4,300,240); //draws rectangle across canvas
    hours.y=map(hour() + norm(minute(), 0, 60),0,24,0,240); //mapps y value to hours
    hours.b=map(hour() + norm(minute(), 0, 60),0,24,0,255);//same for b value, the norm function makes it move in minute incriments
    if(h == 0){
        hours.y=240; //resets at midnight
    }

    fill(0,mins.g,0);
    noStroke();
    rect(mins.x,mins.y-4,300,240); //does the same stuff just for minutes 
    mins.y=map(minute() + norm(second(), 0, 60),0,60,0,240);
    mins.g=map(minute() + norm(second(), 0, 60),0,60,0,255);
    if(m == 0){
        mins.y=240;
    }

    fill(secs.r,0,0);
    noStroke(); //does the same stuff just for seconds 
    rect(secs.x,secs.y-4,300,240);
    secs.y=map(second(),0,60,0,240);
    secs.r=map(second(),0,60,0,255);
    if(s == 0){
        secs.y=240;
    }

}

Project-06

This is my abstract clock:

In the sunflower I draw, I use its stem to represent the hour, that as time goes, the sunflower will gradually be taller; I use the petal of the flower to represent the minute; I use the color change of the leaf and the text to represent the second.

sketch

function setup() {
    createCanvas(300, 400);
    background(255);
}



function draw() {

    noStroke();
    background(242, 226, 204);

    //background leaf -- represent second
    if (second()%2 == 0) {
        fill(123, 142, 31);
    } else {
        fill(230, 143, 89)
    }

    push();
    translate(140, 200);
    rotate(radians(30))
    ellipse(-10, 0, 50, 15);
    rotate(radians(-60));
    ellipse(10, 30, 40, 10);
    pop();
    
    //base-flowerpot
    var pX = 150;
    var pY = 250
    var pHeight = 8;
    
    fill(187, 160, 133);
    beginShape();
    vertex(pX-50, pY);
    vertex(pX-60, pY+pHeight);
    vertex(pX-50, pY+2*pHeight);
    vertex(pX+50, pY+2*pHeight);
    vertex(pX+60, pY+pHeight);
    vertex(pX+50, pY)
    endShape();

    fill(170,119, 98)
    beginShape();
    vertex(pX-50, pY+2*pHeight);
    vertex(pX-30, pY+10*pHeight);
    vertex(pX+30, pY+10*pHeight);
    vertex(pX+50, pY+2*pHeight);
    endShape();


    //flower stem -- represents hour
    var sWidth = 10
    var sHeight= 50
    sHeight += hour();
    fill(123, 142, 31)
    beginShape();
    curveVertex(pX-sWidth, pY);
    curveVertex(pX-sWidth, pY);
    curveVertex(pX-sWidth/2, pY-sHeight);
    curveVertex(pX-sWidth*2, pY-2*sHeight);
    curveVertex(pX-sWidth, pY-2*sHeight);
    curveVertex(pX+sWidth/2, pY-sHeight);
    curveVertex(pX, pY);
    curveVertex(pX, pY);
    endShape();

    //sunflower petal -- represent minute
    push();
    translate(pX-sWidth, pY-2*sHeight);
    noStroke();
    for (var i=0; i<minute(); i++) {
        rotate(radians(6));
        fill(252, 171, 1);
        ellipse(0, 20, 5, 65);
        fill(228, 121, 1);
        ellipse(0, 20, 3, 35);
    }

    //seeds
    fill(41, 5, 2);
    circle(0, 0, 60);
    fill(37, 22, 1);
    circle(0, 0, 30);
    fill(34, 28, 0);
    circle(0, 0, 20);
    pop();
    
    //Text -- represent second
    if (second() %2 == 0) {
        textSize(25);
        fill(254, 203, 1, 220);
        text('Have A Good Day!', 40, 40);
    } 
   
}

Looking Outwards-06

The project I found this week is Aaron Tobey’s “Visualizing Randomness”, which would be an excellent example of using randomness in the computation of art. The two pictures I’m specifically interested in are ‘Graphic random number generator run matrix(1min)’ and ‘Graphic random number generator run matrix process’. When the generator starts working, the random white lines that appear on the black background begin to create a spatial feeling and balance of density. Abstractness shown in the lines creates visual artistry and there are many possibilities for future development in this drawing.

Another interesting point of randomness art is that computers could satisfy the need for surprise in the artwork. If the Visualizing Randomness is created by hand, though a good artist can also achieve great hierarchy and order in the drawing, there would be details that the artist hasn’t considered. With the incorporation of digital tools, the content can be more subconscious and balanced.

here is the link to more information:

https://aarontobey.com/Visualizing-Randomness

Project 06

sleeping earth, suns, moons, and stars!

sketch
// Sowang Kundeling skundeli Section C Project 05

var angle = 0;
var x = 480/2;
var y = 480;
var z = 60; // size

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

function draw() {
    background('black');
    push();
    frameRate(1);
    translate(240, 480);
    rotate(radians(7) * second());
    galaxy();
    pop();
  
    noStroke();
    fill('black')
    var eyeLX = x + 60
    var eyeRX = x - 60
    ellipse(eyeLX, y-60, z+10, z); // left eye
    ellipse(eyeRX, y-60, z+10, z); // right eye
    fill(9, 130, 13);
    ellipse(eyeLX, y-75, z+15, z); // cut out left eye
    ellipse(eyeRX, y-75, z+15, z) // cut out right eye
  
    push();
    frameRate(1);
    translate(x-120, y-350);
    rotate(radians(5) * second());
    star(0+minute(), 0+minute(), 10, 30, 5); // left star
    pop();
  
    push();
    frameRate(1);
    translate(x+120, y-380);
    rotate(-radians(5) * second());
    star(0+minute(), 0+minute(), 5, 20, 5); // right star
    pop();
}

function galaxy() {
    // earth
    translate(-240, -480);
    fill(9, 130, 13); // green
    noStroke();
    circle(x, y, z*5);
  
    // yellow
    noStroke();
    fill(245, 206, 51); // yellow
    circle(x, y-200, z);
    fill(242, 221, 136); // inner yellow
    circle(x, y-200, z/2)
  
    // orange
    fill(245, 145, 51); // orange
    circle(x+200, y, z);
    fill(242, 188, 138); // inner orange
    circle(x+200, y, z/2);
  
    // dark blue
    fill(74, 51, 245); // dark blue
    circle(x, y+200, z);
    fill(167, 156, 247); // inner dark blue
    circle(x, y+200, z/2);

    // light blue
    fill(150, 198, 250); // light blue
    circle(x-200, y, z);
    fill(211, 227, 245); // inner light blue
    circle(x-200, y, z/2)

}

function star(x, y, radius1, radius2, npoints) { // reference star https://editor.p5js.org/p5/sketches/Form:_Star
    fill(241, 242, 153)
    let angle = TWO_PI / npoints;
    let halfAngle = angle / 2.0;
    beginShape();
    for (let a = 0; a < TWO_PI; a += angle) {
      let sx = x + cos(a) * radius2;
      let sy = y + sin(a) * radius2;
      vertex(sx, sy);
      sx = x + cos(a + halfAngle) * radius1;
      sy = y + sin(a + halfAngle) * radius1;
      vertex(sx, sy);
    }
    endShape(CLOSE);
}

Project 06 – Abstract Clock

For my abstract clock, I wanted to make the design very sophisticated yet modular so that it resembles the shape and form of that of a clock. I wanted to maintain the layered approach of the clock.

Ideation for the project
sketch
// Juhi Kedia 
// SEction D 
// jkedia@andrew.cmu.edu
//Project-06 

var x = [];
var y = [];
var r = 450;


function setup() {
    createCanvas(450, 450);
    background(220);
    for(var i = 1; i<60; i++){ // initializing 60 circles 
        x.push(i*7.5);
        y.push(i*7.5);

  }    
}

function draw() {
    background (220);
    fill(255);
    strokeWeight(1);
    push();
    translate(width/2, height/2); // draing the main circle 
    ellipse(0,0, r,r);
    pop();
    push();
    translate(r/2, r/2);

    for (var i = 0 ; i<60; i++){ // filling red for the minute clock
    if (i == minute()){
            fill(255,0,0);
            stroke(0);
            ellipse(0,0,x[i], y[i]);  
        }

    }



    for (var i = 0 ; i<60; i++){ // disappearing the circle for the second clock  
        
        if (i != second()){
            noFill();
            ellipse(0,0,x[i], y[i]);  
        }
        
    }

    for (var i = 0 ; i<24; i++){ // bolding the stroke for the hour clock
        if (i +1 == hour()){
            strokeWeight(2);
            ellipse(0,0,x[i], y[i]); 
            
        }


    }
   // print(hour()); // used to check if it was a 12 hour preset or a 24 hour preset


    




}

Blog 06

Manolo Gamboa Naon is a creative coder from Argentina with a focus on generative visual aesthetics. Through the combination of image and video, he strives to discover the line between chaos and order. In his piece Manoloide, Last Flowers, he displays selections of different variations of black, red, yellow, white, and blue. The pieces look like acrylic paint lathered onto a canvas, giving the illusion of texture. The shapes are also flower-like and fragmented, with no shape repeating. Naon certainly achieves an organized chaos in his work, with the feeling of a pattern but no exactly repeating imagery. You can also see where the colors ever so slightly blend together to create fine lines.

Project 06

sketchDownload
// Ilia Urgen
// Section B
// iurgen@andrew.cmu.edu
// Project-06

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

function draw() { 
    // 0:00 to 8:00
    if (hour() >= 0 & hour() <= 8) {
        sleep(); 
    }

    // 8:00 to 20:00
    else if (hour() >= 8 & hour() <= 20) {
        daytime();
    }

    // 20:00 to 24:00
    else if (hour() >= 20 & hour() <= 24) {
        sleep();
    }

}

// 0:00 to 8:00 and 20:00 to 24:00
function sleep() {
    
    var s = map (minute(), 0, 60, 0, 3600) + second();
    var c = map (hour(), 0, 20, 0, 70);
    var h = map (s, 0, 3600, 0, 90);

    
    color_1 = color (120,29,173);
    color_2 = color (0);

    // ombre 
    for (var y = 0; y < height; y++ ) {
        n = map (y,0, height, 0, 1);
        var color_3 = lerpColor (color_1, color_2, n);
        stroke (color_3);
        line (0, y, width, y);
    }

    stroke (0);
    strokeWeight (8);

    // canvas border lines
    line (1,1,1,449);
    line (1,1,449,1);
    line (1,449,449,449);
    line (449,1,449,449); 

    // window
    fill (11,11,10 + c);
    rect (width/2, height/2 - 180, 200, 200);

    // moon
    noStroke();
    fill (230,230,180);
    ellipse (320,120,100,100);
    fill (11,11,10 + c);
    ellipse (375 - h,120,95,110);

    // bed
    fill (152,118,84);
    strokeWeight (0.5);
    rect (width/2 - 200, height/4 + 210, 300, 100);
    rect (width/2 - 200, height/4 + 310, 40, 40);
    rect (width/2 + 60, height/4 + 310, 40, 40);

    // hair on head
    fill (255);
    ellipse (280,315,100,40);

    // pillow
    fill (0);
    ellipse (280,300,70,45);

    //blanket
    strokeWeight (2);
    fill (123,24,26);
    square (width/2 - 200, height/4 + 170, 50);
    square (width/2 - 150, height/4 + 220, 50);
    square (width/2 - 100, height/4 + 170, 50);
    square (width/2 - 50, height/4 + 220, 50);
    square (width/2, height/4 + 170, 50);
    square (width/2 - 200, height/4 + 270, 50);
    square (width/2 - 100, height/4 + 270, 50);
    square (width/2, height/4 + 270, 50);

    fill (0,65,169);
    square (width/2 - 200, height/4 + 220, 50);
    square (width/2 - 150, height/4 + 170, 50);
    square (width/2 - 100, height/4 + 220, 50);
    square (width/2 - 50, height/4 + 170, 50);
    square (width/2, height/4 + 220, 50);
    square (width/2 - 150, height/4 + 270, 50);
    square (width/2 - 50, height/4 + 270, 50);
    
    // Flickering Zzz's
    zzz();
}

function zzz() {
    
    if (second () % 2 == 0) {
        stroke (255);
        strokeWeight (4);
        line (280,270,320,270);
        line (280,230,320,230);
        line (280,270,320,230);

        push();
        translate (40, -20);
        line (280,270,320,270);
        line (280,230,320,230);
        line (280,270,320,230);
        pop();

        push();
        translate (80, -40);
        line (280,270,320,270);
        line (280,230,320,230);
        line (280,270,320,230);
        pop();
    }   
}

// 8:00 to 20:00
function daytime () {
    
    var s = map (minute (), 0, 60, 0, 3600) + second();
    var m = floor (map (minute (), 2, 60, 2, 10));
    var x = map (s, 0, 3600, 0, 340);
    var c = map (hour (), 3, 20, 0, 100);
    
    
    color_1 = color (25,206,255 - m);
    color_2 = color (0,129,150 - m);

    // ombre
    for (var y = 0; y < height; y++ ) {
        n = map (y,0, height, 0, 1);
        var color_3 = lerpColor (color_1, color_2, n);
        stroke (color_3);
        line (0, y, width, y);
    } 
    
    // moving clouds
    noStroke();
    fill (255);
    circle (300 + c,120,50);
    circle (300 + c,90,50);
    circle (340 + c,120,50);
    circle (340 + c,90,50);
    circle (282 + c,105,50);
    circle (358 + c,105,50);
    
    push();
    translate (72,80);
    circle (300 + c,120,50);
    circle (300 + c,90,50);
    circle (340 + c,120,50);
    circle (340 + c,90,50);
    circle (282 + c,105,50);
    circle (358 + c,105,50);
    pop();

    stroke (0);
    strokeWeight (8);
    
    // walls
    noFill();
    rect (width/2, height/2 - 180, 200, 200);
    
    fill (255,127,80);
    noStroke();
    rect (0, height/6 - 80, 221, 260);
    rect (height/2 - 12, 0, 240, 41);
    rect (0, height/2 + 24, width, 202);
    rect (height/2 + 204, 0, 22, 300);

    
    // countertop
    fill (255);
    rect (0,width/2 + 24, width, 30);

    // cabinets
    fill (86,60,40);
    rect (0,width/2 + 48, width, 200);

    stroke (0);
    noFill();
    strokeWeight (2);
    rect (28,width/2 + 72, 80, 140);
    rect (132,width/2 + 72, 80, 140);
    rect (236,width/2 + 72, 80, 140);
    rect (340,width/2 + 72, 80, 140);

    // doorknobs
    noStroke();
    fill (212,175,55);
    circle (90,330,20);
    circle (150,330,20);
    circle (300,330,20);
    circle (360,330,20);

    strokeWeight (8);

    // canvas border lines
    line (1,1,1,449);
    line (1,1,449,1);
    line (1,449,449,449);
    line (449,1,449,449);

    // "GOOD"
    if (second () % 2 == 0) {
        
        push();
        translate (20,40);
        stroke (0);
        strokeWeight (4);
        line (20,20,40,20);
        line (20,20,20,60); 
        line (20,60,40,60);
        line (40,60,40,40); 
        line (40,40,30,40); 

        line (60,20,80,20);
        line (60,20,60,60); 
        line (60,60,80,60);
        line (80,60,80,20);

        push();
        translate (40,0);
        line (60,20,80,20);
        line (60,20,60,60); 
        line (60,60,80,60);
        line (80,60,80,20); 
        pop();

        line (140,20,140,60);
        line (140,20,160,40);
        line (140,60,160,40);
        pop();

    }

    // "DAY!!!"
    if (second () % 2 == 1) {
        
        push();
        translate (20,40);
        stroke (0);
        strokeWeight (4);
        line (20,80,20,120);
        line (20,80,40,100);
        line (20,120,40,100);
        
        line (60,80,80,80);
        line (60,80,60,120); 
        line (60,100,80,100);
        line (80,120,80,80); 

        line (100,80,110,100); 
        line (110,100,120,80); 
        line (110,100,110,120); 

        line (140,80,140,110);
        line (150,80,150,110);
        line (160,80,160,110);

        point (140,120);
        point (150,120);
        point (160,120);
        pop();
    }  
}

Looking Outwards-06

I browsed through various articles showcasing beautiful randomized computational art, but the artwork that I found the most unique was Rami Hammour’s “A Text of Random Meanings“.

“A Text of Random Meanings” by Rami Hammour

Hammour is an architectural designer based in Brooklyn, NY and has garnered his artistic attention through his sporadic, yet structured artworks. For this piece in particular, I admire the randomized bars and lines that look like a collection of mazes, or a labyrinth. Hammour creates this effect using a random number generator to visually create 18 lines of a “Registers and Taps” coupled with python scripts. The drawing comparing three different registers of 9, 11, and 13. I can see how Hammour’s artistic sensibilities manifest into this randomly simulated artwork because he aims to create random yet systematic pieces, and blend both the natural randomness of mathematics with artistic mapping.

Blog 06 – Randomness – srauch

I find Paul Dunham’s installation Click::RAND to be fascinating. It’s based on the book A Million Random Digits with 100,000 Normal Deviates, which was published by the RAND corporation in 1955 to allow computer programmers to have an extensive amount of truly random numbers on hand. (The numbers themselves were generated by a program designed to work as a roulette wheel.) The book was available in standard print, but also as computer punchcards, and it’s the latter version that Dunham was inspired by. He created “instruments” by wiring together a grid of old-fashioned electromagnetic relays that make an audible click when they open and close, then feeding them the random numbers provided by the punchcards as instructions on when to move. The result is an audible experience of randomness, with ephemeral patterns seemingly flashing in and out of the composition.

The listening experience seems to say something about how we as humans tend to try to impose order on our surroundings. Because of the way our neural networks work, we aren’t capable of thinking in a truly random way, and we have an inherent tendency to seek patterns. So, it’s an interesting experience to listen to something random and watch your brain spin itself out looking for patterns that actually aren’t there. 

Here is a video of Click::RAND in action. Scroll to about halfway in to see it in all its glory:

Blog – 06


The work of Katharina Brunner most inspires me. She is an artist and data scientist from Germany that often uses randomness in her artwork. She also is involved in the fields of technical writing and research. Recently, she created a software package in R called generative art. She publicly posted this package on GitHub so that people can access and experiment with randomly generated art. According to her website, she says that her package allows for the creation of images based on thousands of points. Additionally, the position of every single point in the picture is calculated by a formula that takes in random parameters. Thus, every image looks different due to the built-in randomness. Her work stands out to me because she is creating her own artwork while simultaneously working to inspire others by giving them the initial tools to learn about the field of generative art. Check out her work below!

By: Katie Makarska

https://katharinabrunner.de/generativeart/