Category: SectionC

Aaron Lee – Project – 06 – Abstract Clock

 sketch

/*
Aaron Lee
//Section C
//sangwon2@andrew.cmu.edu
Project-06-Abstract Clock
*/




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

function draw(){

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

   for (H = 0; H < 23; H++) {
    noStroke();
    let z = map(H, 0, 23, 255, 0);// mapping background day and night
    let m = map(H, 0, 23, 0, 240); //mapping moon and sun
    background(0, z, 255); //druing the day it is light blue, during night it is dark blue
    fill (252, m, 3); //during the day it is red(sun) during night it is yellow (moon)
    ellipse(width / 2, height / 2, 200, 200);

    stroke(255);//satellite that represents seconds
    noFill();
    let sec1 = map (S, 0, 60, 360, 0);
    arc (200, 200, 300, 300, sec1, 0);
    stroke(0, z, 255)
    let sec2 = map (S-1, 0, 60, 360, 0);
    arc (200, 200, 300, 300, sec2, 0);

    stroke(255);//satellite that represents minutes 
    noFill();
    let min1 = map (M, 0, 60, 0, 360);
    arc (200, 200, 250, 250, 0, min1);
    stroke(0, z, 255);
    let min2 = map (M-1, 0, 60, 0, 360);
    arc (200, 200, 250, 250, 0, min2);

    stroke(255);//satellite that represents hours
    noFill();
    let hr1 = map (H, 0, 24, 0, 360);
    arc (200, 200, 350, 350, 0, hr1);
    stroke(0, z, 255);
    let hr2 = map (H-1, 0, 24, 0, 360);
    arc (200, 200, 350, 350, 0, hr2);
  }
    
}

sketch

Color of the background and the sphere changes in order to indicate time. The movement of the satellites that orbit around each represent hr, min and sec.

Austin Garcia – Looking Outwards – 05 – Section C

Randomly Generated art constrained by normalized frames

I have always been interested in random and/or procedural generation, but for me, I also like to exhibit a certain amount of control over my work, not allowing for the randomly generated aspects to exist entirely on their own. For this reason, when I found the art of a group who calls themselves “Painting By Code” I was most interested in their work which had some elements of deliberate touch alongside the randomly generated geometries.

Fanjie Jin – Project-06-Abstract-Clock

53

//Fanjie Jin
//Section C
//fjin@andrew.cmu.edu
//Project 6

function setup() {
    createCanvas(480,480);
}
    
function draw() {
   background(15, 20, 60);

//change the hour, min and sec into variables
    var S = second();
    var M = minute();
    var H = hour();
    
//display the grid for percentages
    stroke(255)
    strokeWeight(1)
    line(240, 25, 240, 455)

    stroke(255)
    strokeWeight(1)
    line(20, 240, 480, 240)

//display the percentage signs
    fill(255);
    text(" 0% ", 450, 237);
    fill(255);

    text(" 25% ", 228, 470);
    fill(255);

    text(" 50% ", 5, 237);

    fill(255);
    text(" 75% ", 228, 18);

//outer circle
    stroke(255);
    noFill();
    ellipse(240, 240, 400, 400);

//arc plate displays hours overall percentage of hour
    MappedH = H / 24;
    strokeWeight(1);
    fill(100, 140, 222);
    arc(240,240, 400, 400, 0, MappedH *2 * PI);

//outer circle
    fill(15, 20, 60);
    stroke(255);
    ellipse(260, 240, 300, 300);

//display the grid for hours
    for(a = 0 ;a < 360; a += 15){
      push();
      translate(240,240);
      strokeWeight(1);
      stroke(255, 255, 0);
      rotate(radians(a));
      line(0,0,200,0);
      pop();
    }

//outer circle
    fill(15, 20, 60);
    stroke(255);
    ellipse(260, 240, 300, 300);

//display the grid for seconds and how many seconds have passed
    for(i = 0 ;i < 360; i += 6){
      push();
      translate(260,240);
      stroke(255, 0, 0);
      rotate(radians(i));
      line(0,0,150,0);
      pop();
    }
      push();
      translate(260,240);
      rotate(radians(6 * S));
      stroke(255);
      line(0,0,150,0);       
      pop();

    fill(15, 20, 60);
    ellipse(270, 240, 200, 200);

//display how many minutes have passed 
    MappedM = M / 60;
    push();
    translate(270, 240);
    noStroke();
    fill(100, 108, 222);
    arc(0,0, 200, 200, 0, MappedM *2 * PI);
    pop();

//draw grid for minutes
    for(a = 0 ;a < 360; a += 6){
      push();
      translate(270,240);
      strokeWeight(1);
      stroke(255, 255, 0);
      rotate(radians(a));
      line(0,0,100,0);
      pop();
    } 

//inner ellipse 3
    fill(15, 20, 60);
    stroke(255);
    ellipse(249, 240, 150, 150);

//circle at the center would expand based on seconds 
    fill(50, 20, 60);
    noStroke();
    ellipse(249, 240, S * 2.5, S * 2.5);

//display the actual time at the middle of the canvas
    fill(255);
    text(nf(H, 2,0) + ":", 220, 237);
    text(nf(M, 2,0) + ":", 240, 237);
    text(nf(S, 2,0), 260, 237);

//line showing the beginning     
    stroke(255);
    strokeWeight(2);
    line(240, 240, 600, 240);
}

In this abstract clock project, I have decided to treat it with a minimalistic approach. Overall, there are three rings, and from the center to the outer ring, the minutes, seconds, and hours are being displayed. The gird has showed the percentage, so from the clock, viewer will be understand how much percent of the day has been passed. There is a circle expanding constantly at the center of the clock based on how many seconds have been passed. Lastly, I have experimented with the idea of offset so compositionally, its more intriguing.

Sarah Kang-Project-06-Abstract Clock

clockk

//sarah kang
//section c
//sarahk1@andrew.cmu.edu
//project-06-clock

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

 function draw() {
    //current time
    var S = second();
    var M = minute();
    var H = hour(); 

    //remap
    var RMH = map(H, 0, 23, 0, 360);
    var RMM = map(M, 0, 59, 0, 360);
    var RMS = map(S, 0, 59, 0, 360);
    var sec = S / 60;

    var rad = 100;
    var dim = 80;
    var dim2 = 40;
    var dim3 = 30;
    var x1 = 220;
    var y1 = 160;
    var x2 = 350;
    var y2 = 260;
    var x3 = 200;
    var y3 = 340;
    var x4 = 80;
    var y4 = 390;
    var x5 = 400;
    var y5 = 60;

    angleMode(DEGREES);

    //first bubble
    fill(63, 57, 64);
    noStroke();
    ellipse(220, 160, sec * dim, sec * dim); //center
    //big ring for hours
    noFill();
    stroke(105, 9, 46);
    strokeWeight(1);
    arc(x1, y1, rad + 80, rad + 80, 0, RMH);
    //med ring for minutes
    stroke(240, 192, 201);
    strokeWeight(4);
    arc(x1, y1, rad + 50, rad + 50, 0, RMM);
    //small ring for seconds
    stroke(201, 231, 255);
    strokeWeight(7);
    arc(x1, y1, rad, rad, 0, RMS);


    //second bubble
    fill(94, 86, 93);
    noStroke();
    ellipse(350, 260, sec * dim, sec * dim); //center
    //big ring for seconds
    noFill();
    stroke(105, 9, 46);
    strokeWeight(4);
    arc(x2, y2, rad + 100, rad + 100, 0, RMS);
    //med ring for minutes
    stroke(240, 192, 201);
    strokeWeight(8);
    arc(x2, y2, rad + 75, rad + 75, 0, RMM);
    //small ring for hours
    stroke(201, 231, 255);
    strokeWeight(12);
    arc(x2, y2, rad + 20, rad + 20, 0, RMH);

    //third bubble
    fill(99, 101, 115);
    noStroke();
    ellipse(200, 340, sec * dim2, sec * dim2); //center
    //big ring for seconds
    noFill();
    stroke(105, 9, 46);
    strokeWeight(1);
    arc(x3, y3, rad + 40, rad + 40, 0, RMS);
    //med ring for seconds
    stroke(240, 192, 201);
    strokeWeight(2);
    arc(x3, y3, rad + 20, rad + 20, 0, RMS);
    //small ring for seconds
    stroke(201, 231, 255);
    strokeWeight(4);
    arc(x3, y3, rad, rad, 0, RMS);

    //4th bubble
    fill(140, 143, 161);
    noStroke();
    ellipse(80, 390, sec * dim2, sec * dim2); //center
    //big ring for seconds
    noFill();
    stroke(105, 9, 46);
    strokeWeight(1);
    arc(x4, y4, rad, rad, 0, RMS);
    //med ring for seconds
    stroke(240, 192, 201);
    strokeWeight(2);
    arc(x4, y4, rad - 10, rad - 10, 0, RMS);
    //small ring for seconds
    stroke(201, 231, 255);
    strokeWeight(4);
    arc(x4, y4, rad - 20, rad - 20, 0, RMS);

    //5th bubble
    fill(149, 140, 161);
    noStroke();
    ellipse(400, 60, sec * dim3, sec * dim3); //center
    //big ring for seconds
    noFill();
    stroke(105, 9, 46);
    strokeWeight(1);
    arc(x5, y5, rad - 20, rad - 20, 0, RMS);
    //med ring for seconds
    stroke(240, 192, 201);
    strokeWeight(2);
    arc(x5, y5, rad - 30, rad - 30, 0, RMS);
    //small ring for seconds
    stroke(201, 231, 255);
    strokeWeight(4);
    arc(x5, y5, rad - 45, rad - 45, 0, RMS);

}

I wanted to make a bubble clock and vary the hour, minute, and second variables by the layers of the bubbles. To make the frame changes more apparent, I used more seconds variables in the visualization.

SooA Kim: Looking Outwards – 06


Takeshi Murata is an American media artist and one of his works, Monster Movie (2005), uses a digital file that has been datamoshed. In his work, he tends to use video and animation techniques to create this datamosh effect. I enjoy watching the randomness of images or pixels popping out from the result of datamoshing. I believe he was able to achieve this effect by manipulating different kinds of frames, which are I-frames, P-frames, and B-frames. He removes one of those types of frames in this process, where the video player generates the video without realizing that the actual image content has been changed. This results as datamoshing with abstract motion of pixels with other types of frames in the video to continue with the next frame pixels.

Carly Sacco – Project 6 – Abstract Clock

sketch

//Carly Sacco
//Section C
//csacco@andrew.cmu.edu
//Project 6 - Abstract Clock

function setup() {
	createCanvas(450, 450);	
}
	
function draw() {
	var sec = second();
	var min = minute();
	var hr = hour();
	var start = 140; //start is how far over on x axis you start drawing
	var diameter = 20; 

	background(225, 244, 252);
	
	//leaf
	fill(96, 163, 140);
	stroke(96, 163, 140);
	bezier(400, 150, 350, 400, 250, 450, 100, 400); //bottom of leaf
	bezier(400, 150, 250, 200, 250, 150, 100, 400); //top of leaf
	
	fill(151, 209, 185);
	bezier(400, 150, 325, 200, 400, 350, 100, 400);
	bezier(400, 150, 200, 250, 250, 250, 100, 400);

	//caterpillar
	k = hr % 12 
	for(i = 1; i <= k; i +=1) {
		noStroke();
		fill(217, 56, 102);
		ellipse(start + ((diameter)*(i)), 385 - (i * 18), diameter, diameter);
	}
	
	//caterpillar face
	fill(255, 231, 153);
	ellipse(155, 365, 5, 5);
	ellipse(160, 370, 5, 5);
	
	//antennas
	noFill();
	stroke(0);
	bezier(160, 360, 162, 360, 165, 355, 170, 354);
	bezier(165, 365, 162, 363, 164, 362, 170, 360);
	
	//nose
	noStroke();
	fill(255, 195, 186);
	ellipse(155, 370, 7, 7);
	
	//fly
	var wingy = 90
	var flyBodyY = 100
		
		noStroke();
		let flyBodyX = map(min, 0, 60, 0, 450); // makes the x position correspond to the minute
												//and the width of the canvas
		if (sec % 2 == 0) {//makes the fly bounce every second
		//fly wing
		fill(162, 166, 168);
		ellipse(flyBodyX, wingy, 45, 15);
		
		//fly body
		fill(208, 212, 214)
		ellipse(flyBodyX, flyBodyY, 50, 20);	
		
		//fly eye
		fill(0);
		ellipse(flyBodyX + 15, wingy + 5, 5, 5);
		
		} else {
		//wing
		fill(162, 166, 168);
		ellipse(flyBodyX, wingy + 5, 45, 15);
		
		//body
		fill(208, 212, 214)
		ellipse(flyBodyX, flyBodyY + 5, 50, 20);
		
		//fly eye
		fill(0);
		ellipse(flyBodyX + 15, wingy + 10, 5, 5);		
		}
}

When I was thinking about what to make for this project a fly had landed on my computer. I then thought about a creative way to use insects to represent the time. I thought an easy way to represent hour was by using a caterpillars body, and each circle of his body could represent the hour. The fly flapping every second was my next idea and then by letting him move across the screen to represent the minutes I thought was a cute way to add more motion to the screen.

I at first had trouble with how to convert the actual time to numbers to run in the code, but after solving those minor issues, I enjoyed drawing on the face and adding the leaf.

Carly Sacco – Looking Outwards-06

Multiple examples of Perlin Noise.

Perlin Noise is a visual representation of what “natural” texture and surfaces that were created to contrast with the “machine – like” look of graphics at the time. Although the algorithm is simple, the components of it are kept simple. The images are produced off of a box – grid system with random gradient vectors, computation of the dot products of the distance and gradient vectors, and an interpolation between these. Random number generators can be used and by the altering of the algorithm, different images can appear every time.

Ken Perlin invented this algorithm in 1983 because he wanted there to be a way for something natural to appear even on a screen. After creating this algorithm he was awarded an Academy Award for Technical Achievement and continued to use the algorithm for texture synthesis and 3D implecations.

Jasmine Lee – Project 06 – Abstract Clock

abstractclock

//Jasmine Lee
//jasmine4@andrew.cmu.edu
//Section C
//Project-06-Abstract Clock

var h;
var m;
var s;
var start;

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

function draw(){
    h = hour();
    m = minute();
    s = second();
    start = 270;
    var cloudX = s * 8;

    //determines if day-sky or night-sky
    if (h > 6 & h < 19){
        background(156, 224, 229);
    } else{
        background(31, 47, 71);
    }

    angleMode(DEGREES);

    //minute-cloud
    if (cloudX > width){
        cloudX = 0;
    } else{ 
        cloudX = cloudX + width / 60 / 60;
    }
    noStroke();
    fill(255, 255, 255, 240);
    ellipse(cloudX, 130, 100, 40);
    ellipse(cloudX + 20, 105, 40, 40);
    ellipse(cloudX - 10, 110, 60, 40);

    //rainbow
    noFill();
    strokeWeight(20);
    //red-hours-clock
    stroke(255, 89, 74, 100);
    arc(240, 125, 200, 200, start, start + h * 15);
    //yellow-minutes-clock
    stroke(255, 234, 74, 100);
    arc(240, 125, 180, 180, start, start + m * 6);
    //blue-seconds-clock
    stroke(74, 146, 255, 100);
    arc(240, 125, 160, 160, start, start + s * 6);

    //lens-flares
    strokeWeight(1);
    stroke(255, 255, 255);
    ellipse(240, 125, 280, 280);
    strokeWeight(3);
    stroke(255, 255, 255, 100);
    ellipse(240, 125, 295, 295);
    noStroke();
    fill(255, 255, 255, 50);
    ellipse(120, 225, 60, 60);
    ellipse(150, 200, 30, 30);
    ellipse(320, 70, 10, 10);
    ellipse(350, 50, 40, 40);

    //determines whether sun or moon is in center
    if (h > 6 & h < 19){

        //sun
        fill(255, 234, 74);
        ellipse(240, 125, 100, 100);

        //sun-rays
        push();
        noStroke();
        translate(240, 125);
        triangle(-10, 0, 10, 0, 0, 70 * (s % 2));
        triangle(-10, 0, 10, 0, 0, -70 * (s % 2));
        triangle(-70 * (s % 2), 0, 0, 10, 0, -10);
        triangle(70 * (s % 2), 0, 0, 10, 0, -10);
        pop();

        } else{

        //moon
        noStroke();
        fill(189, 201, 219, 240);
        ellipse(240, 125, 130, 130);
        ellipse(270, 110, 10, 10);
        ellipse(235, 105, 30, 30);
        ellipse(210, 80, 20, 20);
        ellipse(270, 150, 40, 40);
        ellipse(270, 80, 10, 10);
        ellipse(290, 95, 5, 5);
        ellipse(230, 175, 20, 20);
        ellipse(205, 140, 40, 40);

        //lower-left-star
        push();
        noStroke();
        fill(229, 241, 255);
        translate(120, 225);
        triangle(-5, 0, 5, 0, 0, 20 * (s % 2));
        triangle(-5, 0, 5, 0, 0, -20 * (s % 2));
        triangle(-20 * (s % 2), 0, 0, 5, 0, -5);
        triangle(20 * (s % 2), 0, 0, 5, 0, -5);
        pop();

        //upper-right-star
        push();
        noStroke();
        fill(229, 241, 255);
        translate(350, 50);
        triangle(-5, 0, 5, 0, 0, 30 * (s % 2));
        triangle(-5, 0, 5, 0, 0, -30 * (s % 2));
        triangle(-30 * (s % 2), 0, 0, 5, 0, -5);
        triangle(30 * (s % 2), 0, 0, 5, 0, -5);
    }

}

Preliminary Sketch of my Abstract Clock.

I decided to use the sun and moon symbols in my abstract clock because I felt they were both universal symbols for representing time. I also experimented with transparency and movement when I created the cloud and stars moving in the sky. I was able to use modulus as a way to make the stars twinkle. With this exercise, I was able to learn a lot about using rotation, push, and pop.It was a bit frustrating getting everything to move in order with each other, but in the end I managed to make it work.

Timothy Liu — Project 06 — Abstract Clock

tcliu-openended-06

// Timothy Liu
// 15-104 Section C
// tcliu@andrew.cmu.edu
// OpenEnded-06

// variables defining the sapling + base characteristics
var leaf = 12;
var stem = 50;
var stemW = 4;
var base = 30;
var leafMax = 16;
var leafMin = 11;
var leafChange = 0.1;
var leafH;

function setup() {
	createCanvas(480, 200);
    frameRate(20);
}

function draw() {

    noStroke();

    // time variables; militaryH uses a 24 hr scale, and H uses a 12 hr scale with the modular
    var militaryH = hour();
    var H = hour() % 12;
    var M = minute();
    var S = second();
    var mM = map(M, 0, 59, 0, 50); // mapping mM so it's constrained between 0 and 50, the height of each sapling

    // these variables are used later when determining sky color and when it should change
    var mH1 = militaryH + 1;
    var H3 = H - 3;
    
    // defining where leafH is
    leafH = height / 2;

    // the following if statements make the sky change color based on the time, indicating am vs. pm:
    // ex: if there are 2.5 saplings grown, and the sky is dark blue, it must be 2.5am because it's still dark outside.
    
    // if it's from 12am - 8am, the sky slowly gets brighter every hour
    if (militaryH < 8) {
        fill(0 + (15 * mH1), 15 + (20 * mH1), 100 + (15 * mH1));
        rect(0, 0, width, 2 * height / 3); 

    // if it's 8am - 4pm, the sky stays consistently bright out
    } else if (militaryH >= 8 & militaryH < 16) {
        fill(120, 175, 220);
        rect(0, 0, width, 2 * height / 3); 

    // if it's 4pm - 12pm, the sky slowly gets darker every hour
    } else {
        fill(120 - (15 * H3), 171 - (20 * H3), 220 - (15 * H3));
        rect(0, 0, width, 2 * height / 3); 
    }

    // base ground color
    fill(191, 148, 115);
    rect(0, 2 * height / 3, width, height / 3);

    // this for loop draws all of the 12 saplings and the mounds of dirt they grow out of
    for (var a = 0; a < 12; a++) {

        // dirt mounds around base of saplings
        fill(171, 125, 91);
        ellipse((a + 1) * width / 13 + (stemW / 2), height / 2 + stem, base, base / 2);   

        // this if statement draws all the saplings that are already fully grown
        if (a < H) {
            fill(84, 61, 40);
            ellipse((a + 1) * width / 13 + (stemW / 2), height / 2 + stem, 8, 4); // shadow at base of sapling
            fill(63, 209, 0); // sapling color
            rect((a + 1) * width / 13, height / 2, stemW, stem);
            arc(((a + 1) * width / 13) - (stemW), leafH, leaf, leaf / 2, 0, 5 * PI / 4, CHORD); 
            arc(((a + 1) * width / 13) + (2 * stemW), leafH, leaf, leaf / 2, 7 * PI / 4, PI, CHORD);
        }

        // this if statement draws the sapling that is currently growing
        if (a == H) {
            fill(84, 61, 40);
            ellipse((a + 1) * width / 13 + (stemW / 2), height / 2 + stem, 8, 4); // shadow at base of sapling
            fill(63, 209, 0); // sapling color            
            rect((a + 1) * width / 13, leafH + stem, stemW, -mM);
            arc(((a + 1) * width / 13) - (stemW), leafH + stem - mM, leaf, leaf / 2, 0, 5 * PI / 4, CHORD); 
            arc(((a + 1) * width / 13) + (2 * stemW), leafH + stem - mM, leaf, leaf / 2, 7 * PI / 4, PI, CHORD); 
        }
        
        // this if statement makes the leaves flutter/pulsate once every second, serving as a measure of S (seconds)
        if (S % 2 == 0) {
            leaf = min(leaf + leafChange, leafMax);
        } else {
            leaf = max(leaf - leafChange, leafMin);
        }
    
    }

}

I really enjoyed the concept of envisioning an abstract clock. Time in itself is such an abstract construct, so it was a fun challenge trying to represent it in an unconventional way. One of my first ideas about showing time was through plants, like bamboo, that grow at a rapid rate. I realized that I could play with this concept using plant saplings, so my abstract clock portrays a series of 12 saplings that grow and sway in the wind with the seconds, minutes, and hours in the day.

A few key things to note about my clock:

  1. I decided to only show 12 saplings to represent the two 12-hour halves in the day because I felt that 24 saplings would cause my clock to lose meaning and groundedness. To help represent AM vs. PM time, I made the sky change color as a function of what hour is. From 12AM — 8AM, the sky slowly changes from dark blue to light blue each hour. At 8AM, the sky is light blue, and it stays that way until 4PM. Then, from 4PM — 12AM, the sky slowly gets darker again every hour. Using this logic, the user can deduce what time it is in the day; for example, if I see that there are 3.5 saplings and the sky is dark, that means it must be 3:30AM and it’s not light out yet. If there are 3.5 saplings and it’s light out, it must be 3:30PM in the early afternoon.
  2. My program has the leaves of the saplings pulsating/fluttering once every second. They serve as a good way to track the number of seconds in my clock, as even though there’s no counter, it’s an easy metric to count and follow.

Below are some sketches from my ideation phase.

Some of the sketches from my notebook. I started with a two-row concept, but switched to one because it was easier to follow.

Kimberlyn Cho- Project 06- Abstract Clock

ycho2-06

/* Kimberlyn Cho
Section C
ycho2@andrew.cmu.edu
Project-06 */

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

function draw() {
	noStroke();
	var h = hour();
	var m = minute();
	var s = second();

	var hr = h % 12
	var sec = map(s, 0, 59, 0, width);

	background(hr + hr * 20);

	//cloud
	fill(230);
	ellipse(sec, 45, 70, 55);
	ellipse(sec + 35, 50, 70, 55);
	ellipse(sec + 65, 45, 60, 45);
	ellipse(sec + 25, 25, 50, 35);
	ellipse(sec + 52, 25, 50, 35);	

	//buildings
	fill(0);
	rect(0, 100, 60, 300);
	rect(65, 150, 45, 250);
	rect(110, 75, 75, 325);
	rect(185, 110, 50, 300);
	rect(235, 200, 35, 100);
	rect(275, 50, 80, 250);
	rect(355, 125, 40, 175);
	rect(400, 80, 80, 220);

	//window1
	var a = 115
	for (var y = 0; y < 8; y++) {
		var wa = a + y * 25
		fill(255);
		rect(15, wa, 10, 10);
		rect(35, wa, 10, 10);
	};

	//window2
	var bx = 122
	var by = 85
	var count = 0
	for (var y = 0; y < 8; y++) {
		for (var x = 0; x < 3; x++) {
			var wbx = bx + x * 20
			var wby = by + y * 28

			if (count == m & count < 24) {
			fill(255, 255, 0);
			rect(wbx, wby, 10, 10);

		    } else {
		    	fill(100);
		    	rect(wbx, wby, 10, 10);
		    }
		    count += 1
		};
	};

	//window3
	var c = 120
	for (var y = 0; y < 12; y++) {
		var wc = c + y * 15
		fill(230);
		rect(192, wc, 30, 5);
	};

	//window4
	var d = 65
	for (var y = 0; y < 7; y++) {
		var wd = d + y * 35
		fill(255);
		rect(290, wd, 10, 20);
		rect(310, wd, 10, 20);
		rect(330, wd, 10, 20);
	};

	//window5
	var ex = 412
	var ey = 90
	for (var y = 0; y < 9; y++) {
		for (var x = 0; x < 4; x++) {
			var wex = ex + x * 15
			var wey = ey + y * 24

			if (count == m & count > 23) {
			fill(255, 255, 0);
			rect(wex, wey, 10, 10);

		    } else {
		    	fill(100);
		    	rect(wex, wey, 10, 10);
		    }
		    count += 1
		};
	};	
};

I was inspired by the night view of my home, NYC. The lights in some of the buildings light up according to the minutes to represent how the city is never really dead. The clouds move by the second and the background color changes a different shade of gray based on the hour. I went through different iterations in the input parameters for the time through my sketches.