October 2017 – Page 57 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

BrandonHyun-LookingOutwards-06

Holger Lippmann is an artist who uses Processing, which is a drawing software, to create these visuals that are randomly generated and modified in a way where he decides the composition of the work. He also developed the Processing program so it would have certain aesthetic feel in his work. With them, he composes delicate structures and abstract geometrical patterns where he can layer and vary. The LUMAS pieces are based on a special program, in which the artist set a range of parameters to regulate the scattering of the geometrical elements. Lippmann then unites different compositions made in this way into cohesive pieces. “My internal process is the same as it was when I was working with paint and canvas,” Lippmann explains. “That’s why I call my current work digital or computer-aided painting.” Lippmann is also a painter, who knows what color he should use and has a knowledge about what the right composition is. So he is aware of what type of visual choices he makes.

Holger Lipmann’s Website

Jihee Kim_SectionD_Project-06-Abstract-Clock

jiheek1_project6

//Jihee Kim
//15-104 MWF 9:30
//jiheek1@andrew.cmu.edu
//project6 Abstract Clock
//section D

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

function draw() {
    background(127, 87, 75);
    drawGrid(); // draw a picnic table pattern in the background with grid
    var H = hour()%12; //the hour restarts on a 12-hour basis
    var M = minute();
    var S = second();

    //SECONDS
    //for every second, a salt particle comes out of the shaker
    //draw the salt shaker
    stroke(180);
    strokeWeight(2);
    fill(220);
    ellipse(77.5, 120, 55, 55); // head of the shaker
    fill(255);
    stroke(180);
    quad(35, 20, 50, 120, 105, 120, 120, 20); // the body of salt shaker
    line(55, 20, 70, 120); // left profile line of shaker
    line(100, 20, 85, 120); // right profile line of shaker
    noStroke();
    fill(180);
    ellipse(73, 138, 5, 5); // hole left
    ellipse(82, 138, 5, 5); // hole right
    ellipse(77.5, 144, 5, 5); // hole middle
    //have the salt particles come out every second
    for (var i = 0; i < S; i ++) {
    fill(255);
    rect(76, 152 + i*5, 2.5, 2.5);
    }

    // MINUTES
    // a ring forms on the plate of eggs every minute
    //draw the plate of eggs
    fill(230);
    noStroke();
    ellipse(width*3/4-1, height/4+3, 403, 403); // plate shadow for volume
    fill(255);
    ellipse(width*3/4, height/4, 400, 400); // plate
    //draw navy blue patterns on the plate
    noFill();
    stroke(155, 187, 234);
    strokeWeight(1);
    //have ring draw every minute
    for (var i = 0; i < M; i++) {
    ellipse(width*3/4, height/4, 390-i*6.5, 390-i*6.5);
    }

    //draw the eggs
    noStroke();
    //Egg1
    fill(239, 228, 202); //428
    ellipse(270, height/2-96, 153, 133); //egg white shadow for volume
    fill(249, 245, 232);
    ellipse(270, height/2-100, 150, 130); //egg white
    fill(237, 130, 37);
    ellipse(width-230, height/2-85, 53, 53); //egg yolk shadow for volume
    fill(242, 139, 40);
    ellipse(width-232, height/2-86, 50, 50); //egg yolk
    //Egg2
    fill(239, 228, 202); //362
    ellipse(width*3/4+2, height/2-5, 153, 133); //egg white shadow for volume
    fill(249, 245, 232);
    ellipse(width*3/4, height/2-9, 150, 130); //egg white
    fill(237, 143, 50);
    ellipse(width-133, height/2-13, 53, 53); //egg yolk shadow for volume
    fill(242, 152, 54);
    ellipse(width-135, height/2-14, 50, 50); //egg yolk


    //HOURS
    //a sausage will appear every hour
    //the tray of sausages will clear every 12 hours
    //draw a tray for sausage
    fill(255);
    rect(width/3-45, height-100, width*2/3+45, 100);
    rect(width/3-30, height-115, width*2/3+30, 15);
    ellipse(width/3-30, height-100, 30, 30); //round the corner of the tray
    //draw patterns on the tray
    noFill();
    stroke(160, 157, 78);
    strokeWeight(1);
    line(width/3-42, height-100, width/3-42, height);
    line(width/3-27, height-112, width, height-112);
    arc(width/3-27, height-97, 30, 30, PI, 3*PI/2);
    //draw sausage (a sausage appears every hour)
    var X = [130, 160, 190, 220, 250, 280, 310, 340, 370, 400, 430, 460];
    var Y = 410;
    for (var i = 0; i < H; i++) {
        stroke(147, 49, 28);
        strokeWeight(15); //thickness of the sausage
        line(X[i], Y, X[i] + 15, Y + 40);
    }
}

function drawGrid() {
    // cover canvas with vertical lines to depict a wood table
    for (var y = 0; y < height; y ++) {
        for (var x = 50; x < width; x += 50) {
            stroke(102, 69, 56);
            strokeWeight(3);
            line(x, y, x, height);
        }
    }
}

For this project, I created an abstract clock in a picnic setting. I used a hierarchy in size to depict the seconds, minutes and hours. The smallest element, which is the salt particles, represent the seconds. The second in size, which is the blue rings/pattern that form on the plate, depict the minutes. Lastly, the biggest element, the sausages represent the hours. The tray of sausages clears every 12 hours, making this clock based on a 12hr system.

Jihee Kim (Section D)– LookingOutwards-06

Forms (excerpt) from Memo Akten on Vimeo.

Forms is a computational project that is a collaboration between Memo Akten and Quayola, both who are visual/media artists. From March to September of 2012, Forms was a part of the In the Blink of an Eye: Media and Movement exhibition at the National Media Museum in Bradford, England. The project reflects restricted randomness that leads to a dynamic, organic animation of movements.

The project explores interaction between the human body and forces in movements, concentrating on athletes who exert significant forces. It is interesting how through abstract visual elements, the authors portray relationships between the human and its environment, such as balance, force, and beauty. The video below compares the software-generated art and the subject(athletes) that was studied.

Forms (process) from Memo Akten on Vimeo.

In the initial stages of the project, the artists created a setting that responds to the dynamic movements of the human body, acquired data on the athletes and ran physics-based simulations. This beginning stage is when they came across random yet predicted animations using 3D Studio Max and custom-made software. Although the animation may seem to be following the athlete’s motions strictly and simply depicting his/her movements, a sense of randomness exists in that the artists of the project focused more on what they see. If the hands of the person is being the attractor point, the authors augmented that part of the body more than other ones and created a flowing, enticing, random project. The end product is a combination of multiple layers that each focuses on different powers and actions of various parts of the athlete’s body.

It is intriguing how Memo Akten and Quayola were able to depict natural activities through random, anthropogenic elements and engage the audience through different senses. Their concentration on collisions between nature and “data dramatizations” as artists successfully manifest itself in the project.

More information can be found on the artists’ websites:

Memo Akten

Quayola

kyungak-project-06-abstract-clock

sketch

//Kyunga Ko
//15104B
//kyungak@andrew.cmu.edu
//Project 06

var ellcenx = 85;
var ellceny = 100;
var dia = 140;

function setup() {
    createCanvas(480, 200);
    angleMode(DEGREES);
    noStroke();
}

function draw() {

    background(213,158,153); //pink background

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

    var mappedH = map(h, 0,23, 0,255);
    var mappedM = map(m, 0,59, 0,255);
    var mappedS = map(s, 0,59, 0,255);

    //donut base
    fill(195,132,46); //donut brown
    ellipse(ellcenx,ellceny,dia,dia); //left donut base
    ellipse(ellcenx+155,ellceny,dia,dia); //middle donut base
    ellipse(width-ellcenx,ellceny,dia,dia); //right donut base

    noStroke();
    //chocolate filling on left donut
    //color changes according to hours (blue - pink)
    fill(mappedH,100,150); 
    beginShape();
    for (var a = 0; a < 360; a += 40) {
        let x = 60 * sin(a+1) + ellcenx;
        let y = 60 * cos(a+1) + ellceny;
        vertex(x,y);
    }
    endShape(CLOSE);

    //chocolate filling on middle donut
    //color changes according to minutes (red - yellow)
    fill(200,mappedM,50); 
    beginShape();
    for (var a = 0; a < 360; a += 40) {
        let x = 60 * sin(a+1) + ellcenx+155;
        let y = 60 * cos(a+1) + ellceny;
        vertex(x,y);
    }
    endShape(CLOSE);

    //chocolate filling on right donut
    //color changes according to seconds (brown - purple)
    fill(100,50,mappedS); 
    beginShape();
    for (var a = 0; a < 360; a += 40) {
        let x = 60 * sin(a+1) + width-ellcenx;
        let y = 60 * cos(a+1) + ellceny;
        vertex(x,y);
    }
    endShape(CLOSE);

    //donut hole
    fill(213,158,153);
    ellipse(ellcenx,ellceny,dia-100,dia-100); //left donut hole
    ellipse(ellcenx+155,ellceny,dia-100,dia-100); //middle donut hole
    ellipse(width-ellcenx,ellceny,dia-100,dia-100); //right donut hole

    //left donut sprinkle
    fill(250,233,3);
    rect(ellcenx-30,ellceny-30,3,7);
    rect(ellcenx-38,ellceny-10,7,3);
    rect(ellcenx-10,ellceny+30,3,7);
    rect(ellcenx+20,ellceny-40,7,3);
    rect(ellcenx+30,ellceny+35,3,7);
    rect(ellcenx-30,ellceny+20,7,3);
    rect(ellcenx,ellceny-40,3,7);
    rect(ellcenx+30,ellceny-20,7,3);
    rect(ellcenx+40,ellceny+10,7,3);
    rect(ellcenx+10,ellceny+30,7,3);
    rect(ellcenx-40,ellceny+10,3,7);

    //middle donut sprinkle
    fill(255);
    rect(ellcenx-30+155,ellceny-30,3,7);
    rect(ellcenx-38+155,ellceny-10,7,3);
    rect(ellcenx-10+155,ellceny+30,3,7);
    rect(ellcenx+20+155,ellceny-40,7,3);
    rect(ellcenx+30+155,ellceny+35,3,7);
    rect(ellcenx-30+155,ellceny+20,7,3);
    rect(ellcenx+155,ellceny-40,3,7);
    rect(ellcenx+30+155,ellceny-20,7,3);
    rect(ellcenx+40+155,ellceny+10,7,3);
    rect(ellcenx+10+155,ellceny+30,7,3);
    rect(ellcenx-40+155,ellceny+10,3,7);

    //right donut sprinkle
    fill(255,145,0);
    rect(width-ellcenx-30,ellceny-30,3,7);
    rect(width-ellcenx-38,ellceny-10,7,3);
    rect(width-ellcenx-10,ellceny+30,3,7);
    rect(width-ellcenx+20,ellceny-40,7,3);
    rect(width-ellcenx+30,ellceny+35,3,7);
    rect(width-ellcenx-30,ellceny+20,7,3);
    rect(width-ellcenx,ellceny-40,3,7);
    rect(width-ellcenx+30,ellceny-20,7,3);
    rect(width-ellcenx+40,ellceny+10,7,3);
    rect(width-ellcenx+10,ellceny+30,7,3);
    rect(width-ellcenx-40,ellceny+10,3,7);

    fill(0);
    textSize(10);
    text( h + " hour(s) " + m + " minute(s) " + s + " second(s) ", 20,20);
}

For this project, I wanted to make three donuts that each represented hours, minutes, and seconds of time. Instead of tallying the time changes with visual elements, I wanted to express it through color. For me, using color meant taking more of an abstract approach to time, which is always expressed as exact numbers. By letting time gradually alter the icing color of the donut, I wanted the viewers to not be able to tell the time in a glance but to feel the time tick and change. Because hours and minutes don’t go by so quickly, I put a reference on the top to let people know that the clock is working. But by paying attention to the color changes, one can easily tell that the clock is doing its job, but in a unique way.

mmiller5-Project-06

sketch

//Michael Miller
//Section A
//mmiller5@andrew.cmu.edu
//Project-06

//Coordinates for pandas
var pandaX = [30, 90, 150, 210, 270, 330, 390, 450,
	      30, 90, 150, 210, 270, 330, 390, 450,
	      30, 90, 150, 210, 270, 330, 390, 450];
var pandaY = [298, 298, 298, 298, 298, 298, 298, 298,
	      455, 455, 455, 455, 455, 455, 455, 455, 
	      200, 200, 200, 200, 200, 200, 200, 200];

function setup() {
    createCanvas(480, 480);
    frameRate(1);
    noStroke();
}

function draw() {
    //relates time to ratio of circular motion for sun and moon
    var hourRat = ((hour() + (minute() / 60)) / 24) * 2 * PI;
    var bambooX = [];
    var bambooY = [];
    //darkens during night, brightens during day
    var bgCol = color(49, 49, constrain(160 + 120 * -cos(hourRat), 49, 200));
    background(bgCol);
    //sun
    fill(255, 255, 0);
    ellipse(width / 2 - sin(hourRat) * 200, height / 2 + cos(hourRat) * 200,
	    150, 150);
    //moon
    fill(230);
    ellipse(width / 2 + sin(hourRat) * 200, height / 2 - cos(hourRat) * 200,
	    100, 100);
    fill(bgCol);
    ellipse(width / 2 + sin(hourRat + .2) * 200,
	    height / 2 - cos(hourRat + .2) * 200,
	    75, 75);
    //midground
    fill(116, 116, 55);
    rect(0, 2 * height / 3 - 100, width, 2 * height / 3 - 100);
    //foreground
    fill(154, 116, 55);
    rect(0, 2 * height / 3, width, 2 * height / 3);
    //time tracking mechanics
    bambooFall(width / 2, 2 * height / 3);
    //every hour, a new panda comes to feast on the accumulated bamboo
    for(var i = 0; i < hour(); i ++) {	
	panda(pandaX[i], pandaY[i]);
    }
    bambooGrow(width / 2, 2 * height / 3);
}
//central bamboo grows one stalk per second, making happy pandas
function bambooGrow(x, y) {
    for(var sec = 0; sec < second(); sec ++) {
	    fill(120, 180, 56);
	    rect(x, y - 4 * sec, 3, 3);
	    fill(128, 75, 35);
	    rect(x, y - 4 * sec - 1, 3, 1);
	}
}
//when bamboo gets too tall, it falls in a half circle, stacking up every minute
function bambooFall(x, y) {
    for(var min = 0; min < minute(); min ++) {
	fill(177, 200, 60);
	push();
	translate(x, y);
	rotate(radians(2 + (min / 60) * 176));
	rect(0, 0, 180, 3);
	pop();
    }
}
//panda and its body parts
function panda(x, y) {
    pandaBody(x, y);
    pandaHead(x, y - 40);
}
function pandaHead(x, y) {
    fill(255);
    ellipse(x, y, 50, 50);
    fill(0);
    ellipse(x - 20, y - 20, 15, 15);
    ellipse(x + 20, y - 20, 15, 15);
    ellipse(x - 10, y, 10, 10);
    ellipse(x + 10, y, 10, 10);
    ellipse(x, y + 7, 8, 6);
    fill(255);
    ellipse(x - 9, y - 1, 2, 4);
    ellipse(x + 9, y - 1, 2, 4);
}
function pandaBody(x, y) {
    fill(255);
    ellipse(x, y, 55, 50);
    fill(0);
    ellipse(x - 18, y - 12, 20, 25);
    ellipse(x + 18, y - 12, 20, 25);
    ellipse(x - 19, y + 13, 25, 23);
    ellipse(x + 19, y + 13, 25, 23);
}

Yep, more bamboo. Why? I was inspired by the exceptional speed at which bamboo grows, but then I thought, “Now what if it grew super fast?” The consequences of lightning bamboo are staggering — potential building material, fuel, and of course, food for pandas! Imagine an infinity ice cream dispenser, except that you never get full (or fat, we’ll ignore that too) — that’s exactly what this is for pandas! I think word of this would spread pretty quickly, but pandas are slow so they take a while to get there (1 hour exactly, actually. Punctual pandas).

Now I don’t actually do all that much art, so my product probably doesn’t look as amazing as it could — the pandas are a buncha colored circles — but I think it works. The coding was pretty fun for this project, and it took me some time to figure out how to make the time countable. I probably would’ve been more comfortable doing something more abstract, but I thought I’d give this a try, and I think it worked out in the end.

ziningy1 – section c – project 06 – abstract clock

I start this project by considering what aspects can be manipulated with the passage of second, minute and hour. So I come up with the idea of growing size, color and transparency. Based on simple arc shapes, the second, minute and hour arc will change all those aspects in different rate. The second hand, for example, will change most dramatically so it creates this exploding effect every minute.

preliminary sketch:

sketch

//Zining Ye 
//15104 lecture 1 recitation C
//ziningy1@andrew.cmu.edu 
//Project-06



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

function draw() {

    var s = second();  
    var h = hour(); 
    var m = minute(); 
    var centerx= width/2;
    var centery= height/2;
    var adjust = 90;
    var gunit = 10; //growing rate  



    angleMode(DEGREES);
    background(220);


   
    // second hand(arc)
    // convert the 60 seconds to 360 degree 
    var slength = map(s,0,59,0,359); 

    //the color changes with the second changes 
    fill(5*s,s*2,s*2,2*gunit*(s/4));
    noStroke();
    //draw the second arc, the size will grow with time  
    arc(centerx,centery,gunit*s,gunit*s,0-adjust,slength-adjust);

    //convert the 60 minutes to 360 degree 
    var mlength = map(m,0,59,0,359); 
    //color changes as the second hand
    fill(4*m,m,m,gunit*(m/4));
    noStroke();
    //size also grow with time with a smaller rate 
    arc(centerx,centery,5*m,5*m,0-adjust,mlength-adjust);

    //convert the 24 hours to 360 degrees 
    var hlength = map(h,0,23,0,359); 
    fill(4*h,h/2,h/2,gunit*h/3);
    noStroke();
    //size grow in a even smaller rate than minute hand
    arc(centerx,centery,4*h,4*h,0-adjust,hlength-adjust)



}

mjanco – lookingoutwards06 – randomness – section B

I looked at Marc Adrian’s Computer Poem, Text I, from 1963. This was a randomized, computer-generated poem of black text on a white background. The poem was made using a simple method which randomized the selection of specific words, (words that could be read the same in English and in German) and the font size and location of the words on the canvas. I thought this piece was interesting because, in Adrian’s words, “it allows the spectator to find [their] own meanings in the association of words more easily, since their choice, size, and disposition are determined at random.” I also thought it was intriguing that poetry commonly seems quite personal, and based on experiences and influences of human beings. However, in this piece, the viewer is the one creating the personal aspects and personal meaning due to the vagueness and open-endedness of a randomly-generated computer-made poem. I think Adrian was right to keep the font and colors very stark and straightforward. However, I wish the conceptual side of the words chosen (able to be read in English and German) was a bit more interesting. I don’t think that concept is open-ended enough to give viewers power to make their own connections with the words. Also, Adrian experienced the end of WWII and the terrifying events of the Nazi regime, which motivated him to turn to pieces of “rationality, analysis, and multi-media” which is in some ways shown in this particular piece, through its multi-media blend of poetry, computation, and visual art.

http://glia.ca/conu/digitalPoetics/prehistoric-blog/2008/08/20/1963-marc-adrain-text-i/

jennyzha-Project 06

sketch

// Jenny Zhang
// Section D
// jennyzha@andrew.cmu.edu
// Project 06

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var r = 100;
var b = 100;
var g = 100;
var e1 = 100;
var e2 = 100;
var e3 = 100;
var mouthSizeW = 5;
var mouthSizeH = 10;
var prevSec;
var millisRolloverTime;

function setup() {
    createCanvas(480, 480);
        millisRolloverTime = 0;
}

function draw() {
    background(255,250,200);

	// Fetch the current time
	var H = hour();
	var M = minute();
	var S = second();

	if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);

    var hourBarWidth   = map(H, 0, 23, 0, width);
    var minuteBarWidth = map(M, 0, 59, 0, width);
    var secondBarWidth = map(S, 0, 59, 0, width);

    var secondsWithFraction   = S + (mils / 1000.0);
    var secondsWithNoFraction = S;
    var secondBarWidthChunky  = map(secondsWithNoFraction, 0, 60, 0, width);
    var secondBarWidthSmooth  = map(secondsWithFraction,   0, 60, 0, width);

    noStroke();
    fill(255, 200, 200);
    ellipse(width/2, height/2, hourBarWidth, hourBarWidth);
    var eyeLX = width/2 - hourBarWidth*0.25;
    var eyeRX = width/2 + hourBarWidth * 0.25;
    fill(0,90,150);
    ellipse(eyeLX, height/2, minuteBarWidth/3, minuteBarWidth/3);
    ellipse(eyeRX, height/2, minuteBarWidth/3, minuteBarWidth/3);
    fill(226,43,42);
    var mouth = width/2 
    ellipse(mouth, height-height/4, secondBarWidthChunky/3, secondBarWidthChunky/3)
}

This project was inspired by our third project, the variable faces, where I made the head the hour, the eyes the minute, and the mouth a function of the seconds. I enjoyed going back to my previous project and reviewing, improving, and understanding my past code on a deeper level as I refined it into an abstract clock for this project.

nahyunk1-Looking Outwards 06

https://creators.vice.com/en_us/article/kbnqxx/siebren-versteegs-computer-generated-abstract-paintings

here is the link to a set of artworks created by computers. This is all random in the meaning that these computers “creatively” generated a set of drawings on their own without the guidance of a person. Its randomness does come from a set of codes that a generator initially put into its system, however, its abstract paintings get formed through the computer itself without any help of the creator. This signifies the fact that humans create a way for computers to think and self-generate art, however, it’s something that I do not admire or encourage to be advanced to have them accomplish more complex tasks later on in the future.

Jdbrown – Project 6 – Nature Clock

Actual Clock-Jdbrown

// Joshua Brown
// Jdbrown@andrew.cmu.edu
// Project 6: Clock
// Section C

var slowVel = 1.0;
var medVel = 1.5;
var speedyVel = 2;

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

function draw () {
    background (25, 150, 150, 150);

    var S = second ();
    var M = minute ();
    var H = hour ();

    // setting up the Sun (measurement of seconds);

    push ();
    stroke (255);
    strokeWeight (2.5);
    translate (width, 0);
    rotate (radians (S * 6));
    fill (0, 0);
    arc (0, 0, 320, 320, radians (0), radians (45));
    arc (0, 0, 320, 320, radians (55), radians (100));
    arc (0, 0, 320, 320, radians (110), radians (155));
    arc (0, 0, 320, 320, radians (165), radians (210));
    arc (0, 0, 320, 320, radians (220), radians (265));
    arc (0, 0, 320, 320, radians (275), radians (310));
    arc (0, 0, 320, 320, radians (320), radians (350));
    fill (200, 180, 70);
    ellipse (0, 0, 200 + (H * 3), 200 + (H * 3));   // draws the sun
    fill (255);
    ellipse (0, 0, S + 75, S + 75);     // draws the white ball in the sun, growing every second
    pop ();

    push ();
    stroke (255);
    strokeWeight (1.5);
    translate (width, 0);
    rotate (radians (S * -6));
    fill (0, 0);
    arc (0, 0, 300, 300, radians (0), radians (45));
    arc (0, 0, 300, 300, radians (55), radians (100));
    arc (0, 0, 300, 300, radians (110), radians (155));
    arc (0, 0, 300, 300, radians (165), radians (210));
    arc (0, 0, 300, 300, radians (220), radians (265));
    arc (0, 0, 300, 300, radians (275), radians (310));
    arc (0, 0, 300, 300, radians (320), radians (350));
    fill (200, 180, 70);
    pop ();

    push ();
    stroke (255);
    strokeWeight (1);
    translate (width, 0);
    rotate (radians (S * 6));
    fill (0, 0);
    arc (0, 0, 280, 280, radians (0), radians (45));
    arc (0, 0, 280, 280, radians (55), radians (100));
    arc (0, 0, 280, 280, radians (110), radians (155));
    arc (0, 0, 280, 280, radians (165), radians (210));
    arc (0, 0, 280, 280, radians (220), radians (265));
    arc (0, 0, 280, 280, radians (275), radians (310));
    arc (0, 0, 280, 280, radians (320), radians (350));
    fill (200, 180, 70);
    pop ();
    
    // making the scenery, measuring hours;

    if (H >= 12) {

    noStroke();
    fill (100 - (H * 3), 205 - (H * 3), 50, 200);
    rect (0, 0 - 15, 150, 400); // filter (top)
    fill (100 - (H * 3), 205 - (H * 3), 50, 200);
    rect (0, height - 75, 200, 400);    // filter (bottom)
    fill (100 - (H * 3), 205 - (H * 3), 50, 200);
    rect (200, 150, 200, 400);    // filter (side)
    fill (25, 150, 150);
    ellipse (365, 190, 105, 105); // curve
    fill (100 - (H * 3), 205 - (H * 3), 50, 200);
    ellipse (365, 190, 50, 50); // curve
    fill (40 - (H * 3), 75 - (H * 3), 200, 150);
    ellipse (0, height, 400, 500);  // waterfall
    fill (67 - (H * 3), 75 - (H * 3), 100, 150);
    ellipse (0, height, 300, 300);  // waterfall shadow
    fill (100 - (H * 3), 75 - (H * 3), 100, 150);
    ellipse (0, height, 120, 150);  // waterfall shadow

    }

    if (H < 12) {

    noStroke();
    fill (100 + (H * 3), 205 + (H * 3), 50, 200);
    rect (0, 0 - 15, 150, 400); // filter (top)
    fill (100 + (H * 3), 205 + (H * 3), 50, 200);
    rect (0, height - 75, 200, 400);    // filter (bottom)
    fill (100 + (H * 3), 205 + (H * 3), 50, 200);
    rect (200, 150, 200, 400);    // filter (side)
    fill (25, 150, 150);
    ellipse (365, 190, 105, 105); // curve
    fill (100 + (H * 3), 205 + (H * 3), 50, 200);
    ellipse (365, 190, 50, 50); // curve
    fill (40 + (H * 3), 75 + (H * 3), 200, 150);
    ellipse (0, height, 400, 500);  // waterfall
    fill (67 + (H * 3), 75 + (H * 3), 100, 150);
    ellipse (0, height, 300, 300);  // waterfall shadow
    fill (100 + (H * 3), 75 + (H * 3), 100, 150);
    ellipse (0, height, 120, 150);  // waterfall shadow

    }

    // drawing little bird boi;

    birdBoi();


    
   
        

    // drawing sky stuff, measuring minutes;
    
    var cloudX = -100;

    fill (255 - (M * 3), 200);
    ellipse (cloudX + slowVel, 50, 200, 25);
    ellipse ((cloudX + medVel), 90, 200, 25);
    ellipse ((cloudX + speedyVel) - 250, 150, 200, 25);
    

    slowVel += 1 + (M / 10);
    medVel += 1.2 + (M / 5);
    speedyVel += 1.5 + (M / 2.5);

    // making sure that clouds will respawn on the other side;

    if (cloudX + slowVel > width + 100) {
        cloudX = -200;
        slowVel = 1;
    }
    if (cloudX + medVel > width + 100) {
        cloudX = -200;
        medVel = 1.2;
    }
    if (cloudX + speedyVel > width  + 400) {
        cloudX = -200;
        speedyVel = 1.5;
    }
}

// making the bird boy

function birdBoi () {

    var H = hour();
    var M = minute ();
    var S = second ();

    for (var i = 0; i < 20; i++) {
        push ();
        translate (30, 250);
        rotate (radians (i * 6));
        rotate (radians (i));
        stroke (0);
        strokeWeight (2.5);
        line (0, 0, 10 + i, 10 + i);
        pop ();
    }

    fill (0);
    triangle (30, 245, 75, 245, 35, 255);  // beak
    fill (255);
    ellipse (30, 270, 30, 30);  // body
    ellipse (35, 250, 25, 25);  // head
    fill (200);
    ellipse (25, 270, 18, 25);  // body shadow
    fill (200);
    ellipse (32, 251.5, 18, 20);  // head shadow
    fill (0);
    ellipse (40, 248, 5, 5);    // eye

    for (var i = 0; i < 20; i++) {
        push ();
        translate (20, 255);
        rotate (radians (i * 6));
        rotate (radians (i));
        stroke (0);
        strokeWeight (2.5);
        line (0, 0, 10 + i, 10 + i);
        pop ();
    }
}

For this project, I had a lot of different ideas. Most of them were HORRIBLE. But I settled on a peaceful scene, a hummingbird-boi partying and communing with nature.

The “clock” portion of the design is as follows:

Seconds are measured by the rotation of the sun’s rays, as well as the little white ball in the middle of the sun.

Minutes are measured by the clouds’ speed and color.

Hours are measured by pigment changes in the physical landscape (bright, warm for morning and dark blues for night).