Project-06-Abstract-Clock – Page 8 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

creyes1-Project-06-Abstract-Clock

//Christopher Reyes
//Section D
//creyes1@andrew.cmu.edu
//Project-06 (Abstract Clock)

var prevSec;
var millisRolloverTime;

var moonX = 280;
var moonY = 160;
var moonSize = 260;
var moonShadowSize = moonSize*.9

var bgColor = [192, 214, 180];

var jewelHue;
var bgColorH;

var cx = moonX;
var cy = moonY;

function setup() {
    createCanvas(480, 480);
    colorMode(HSL);
    angleMode(DEGREES);
    background(bgColor);
    millisRolloverTime = 0;
}

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

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

    var secondsWithFraction   = S + (mils / 1000.0);
    var secondsWithNoFraction = S;

    //Converts current time to a number between 0 and 24
    var currentTime = H + (M/60) + (secondsWithFraction/3600);

    //Changes background color every minute, lighter in AM, darker in PM
    var bgColorH = map(currentTime%6, 0, 6, 0, 360);
    var bgColorS = map(currentTime, 0, 24, 30, 60);
    var bgColorL = map(currentTime, 0, 24, 80, 20);

    background(bgColorH, bgColorS, bgColorL);

    //Lighter background ellipse towards bottom
    noStroke();
    fill(bgColorH, bgColorS-5, bgColorL+5);
    ellipse(width/2, height, 500, 315);

    //Moon
    fill(0, 0, 90, 1);
    ellipse(moonX, moonY, moonSize);

    fill(0, 100, 100, 1);
    ellipse(moonX, moonY, moonSize*.95);

    fill(0, 0, 90, 1);
    moonDetail(moonX, moonY);

    //Moves shadow throughout the day, creating an eclipse at noon
    var moonShadowX = map(currentTime, 0, 24,
                          moonX-(moonSize/2+moonShadowSize/2),
                          moonX+(moonSize/2+moonShadowSize/2));

    //Moon Shadow, changes color along with background
    fill(bgColorH, bgColorS, bgColorL, 1);
    ellipse(moonShadowX, moonY, moonShadowSize);

    //Clockwise spinnning ring based on current secondsWithFraction
    stroke(0, 100, 100, 1);
    noFill();
    strokeWeight(5);

    push();
    translate(moonX, moonY);
    rotate(map(secondsWithFraction, 0, 60, 0, 360));
    arc(0, 0, moonSize*1.75, moonSize*1.75, 10, 110);
    arc(0, 0, moonSize*1.75, moonSize*1.75, 130, 230);
    arc(0, 0, moonSize*1.75, moonSize*1.75, 250, 350);
    pop();

    //Counter-clockwise spinning ring, also based on current secondsWithFraction
    strokeWeight(2);

    push();
    translate(moonX, moonY);
    rotate(map(secondsWithFraction, 0, 60, 360, 0));
    arc(0, 0, moonSize*1.7, moonSize*1.7, 10, 110);
    arc(0, 0, moonSize*1.7, moonSize*1.7, 130, 230);
    arc(0, 0, moonSize*1.7, moonSize*1.7, 250, 350);
    pop();

    noStroke();

    //Creates clouds that float across the screen every minute
    var cloudX = map(secondsWithFraction, 0, 60, -100, width+140);

    fill(0, 0, 95, .8);
    cloud((cloudX-40)*1.05, 250+35, 1);
    cloud((cloudX-30)*.9, 250-20, 1);
    cloud(cloudX, 250, 1);
    cloud((cloudX+20)*.95, 250-30, 1);
    cloud((cloudX+30)*1.1, 250+30, 1);
    cloud(cloudX+50, 250-25, 1);

    //Jewel color is 180 degrees less the background's hue, including wraparound
    var jewelHue = bgColorH - 180;

    if (bgColorH < 180) {
        jewelHue = 360 - (180-bgColorH);
    } else {
        var jewelHue = bgColorH - 180;
    }

    //Static jewels
    jewel(115, 275, 1, jewelHue);
    jewel(160, 350, .6, jewelHue);
    jewel(65, 375, .8, jewelHue);

    //Rotates 3 jewels around moon in a clock-like fashion according to time
    var handOffset = 270; //Readjusts hands to start at 0 mark of the clock
    var handPlace = moonSize;

    //Second hand
    var handAngleS = map(secondsWithFraction, 0, 60,
                         handOffset, 360+handOffset);
    jewel(computeX(handPlace, handAngleS), computeY(handPlace, handAngleS),
          .2, jewelHue);

    //Minute hand
    var handAngleM = map(M+(secondsWithFraction/60), 0, 60,
                         handOffset, 360+handOffset);
    jewel(computeX(handPlace, handAngleM), computeY(handPlace, handAngleM),
          .2, jewelHue);

    //Hour hand
    var handAngleH = map(currentTime%12, 0, 12, handOffset, 360+handOffset);
    jewel(computeX(handPlace, handAngleH), computeY(handPlace, handAngleH),
          .2, jewelHue);

}

function cloud(x, y, SCALE) {
    quad(x, y+(20*SCALE), x+(40*SCALE), y, x, y-(20*SCALE), x-(40*SCALE), y);
}

function moonDetail(x, y) {
    var moonDetailX = [x+55, x-25, x+20, x, x+70, x+103, x-70, x-55];
    var moonDetailY = [y-15, y-45, y-78, y+30, y+30, y-10, y, y+55];
    var moonDetailScale = [1.8, 1.2, .65, .8, .9, .5, .5, .3];

    for (var i = 0; i < 8; i++) {
        push();
        translate(moonDetailX[i], moonDetailY[i]);
        rotate(45)
        cloud(0, 0, moonDetailScale[i]);
        pop();
    }
}

function jewel(x, y, SCALE, col) {

    //I || Base shape
    fill(col, 54, 71);
    quad(x+(35*SCALE), y+(10*SCALE),
         x, y-(83*SCALE),
         x-(35*SCALE), y+(10*SCALE),
         x, y+(83*SCALE));

    //II
    fill(col, 68, 80);
    triangle(x-(35*SCALE), y+(10*SCALE),
             x-(10*SCALE), y+(20*SCALE),
             x, y-(83*SCALE));
    //III
    fill(col, 75, 75);
    triangle(x-(35*SCALE), y+(10*SCALE),
             x-(10*SCALE), y+(20*SCALE),
             x, y+(83*SCALE));

    //IV
    fill(col, 46, 64);
    triangle(x+(35*SCALE), y+(10*SCALE),
             x-(10*SCALE), y+(20*SCALE),
             x, y+(83*SCALE));

}

//Computes the X position of a point on a circle according to given parameters
function computeX(handRadius, angle) {
return cx + handRadius*cos(angle);
}

//Computes the Y position of a point on a circle according to given parameters
function computeY(handRadius, angle) {
return cy + handRadius*sin(angle);
}

For this project I wanted to loosely base it off of the eclipse mechanic I included in my Dynamic Drawing assignment, but still create a unique stand-alone image.

The shadow of the moon displays the time on a 24-hour cycle, eclipsing at noon every day, and all the colors of the image change throughout the course of the day in hue, saturation, and lightness. A lot of my process regarding this project simply came from experimenting and adding layers of elements to see what was effective.

Through the creation of this, I enjoyed being able to play around with the timing of my elements and seeing the little interactions between them as their cycles played out.

ablackbu-Project-06-Abstract-Clock

water clock

sketch

var red1 = 0
var green1 = 0
var blue1 = 0

var red2 = 0
var green2 = 0
var blue2 = 0

var wid = 5

function setup() {
    createCanvas(300, 300);
    strokeWeight(0);

}

function draw() {
    background(208,236,245);
        
    //get time
    var hr = hour();
    if(hr > 12){
        hr = hr - 12}
    var min = minute();
    var sec = second(); 

    //tubes
    strokeWeight(10);
    noFill()
    stroke(red1,green1,blue1);
    arc(115,95,120,120,PI/2,PI)
    stroke(red2,green2,blue2);
    arc(210,190,120,120,PI/2,PI)

    //color of tube 1
    if(sec == 59){
        red1 = 52
        green1 = 198
        blue1 = 244
    }else{
        red1 = 80
        green1 = 80
        blue1 = 80
    }

    //collor of tube 2
    if(sec == 59 & min == 59){
        red2 = 52
        green2 = 198
        blue2 = 244
    }else{
        red2 = 80
        green2 = 80
        blue2 = 80
    }

    //bowls of water
    fill(52,198,244);
    stroke(0);
    strokeWeight(3);
    rect(15,15,80,80);
    rect(110,110,80,80);
    rect(205,205,80,80);
    
    //extention of background to hide lid (not visible)
    strokeWeight(0);
    fill(208,236,245);
    rect(10,10,90,16)
    rect(105,105,90,16)
    rect(200,200,90,16)

    //compute the height of the water
    var secfull = map(sec, 0, 60, 77, 7);
    var minfull = map(min, 0, 60, 77, 7);
    var hrfull = map(hr, 0, 12, 77, 7);

    //display the water
    fill(208,236,245);
    rect(17,17.5,77,secfull);
    rect(112,112.5,77,minfull);
    rect(207,207.5,77,hrfull);

    //water marks
    fill(0)
    dist1 = 0
        //ticks for vessle 1 and 2
    for(var i = 0; i < 13; i++){
        rect(50,95-dist1,wid,1/2)
        rect(145,190-dist1,wid,1/2)
        dist1 += 5.9
            if((i + 1) % 3 == 0){
                wid = 10
            }else{
                wid = 5
            }
    }

        //ticks for vessle 3
    dist3 = 0
    for(var k = 0; k < 13; k++){
        rect(240,285-dist3,10,1/2)
        dist3 +=5.9
    }

    //digital time
    fill(0);
    text(nf(hr,2,0) + ':' + nf(min,2,0) + ':' + nf(sec,2,0),10,290);

}

For this project, I got a lot of inspiration from the water clock that was discussed in the video. I had a lot of trouble coming up with an idea to show time that was creative without being overdone. I knew that a lot of people were planning on doing interesting circular clocks but I wanted to do something a little different.

Basically the premise of this machine is that when the water in the seconds cup overfills, it empties into the minute and so on into the hours. My favorite part of this is that when you look at it (besides the fact that there is a digital time keeper in the corner) you should have no idea it is a clock, just interacting water vessels.

juyeonk-AbstractClock-06

sketch

var prevSec;
var millisRolloverTime;

var startingPoint = -90; //lets the bar-graph clocks start from the 0 o'clock position
var transparency1 = 255; //determines the transparency of the second bar graph
var transparency2 = 255; //determines the transparency of the minute bar graph
var transparency3 = 255; //determines the transparency of the hour bar graph



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

function draw() {
    angleMode(DEGREES);
    
    var heur = hour();
    var minutee = minute();
    var seconde = second();
    var milliseconde = millis();
    
   
    background(0);
    
    
    if (prevSec != seconde) {
        millisRolloverTime = millis();
    }
    prevSec = seconde;
    var mils = floor(millis() - millisRolloverTime);
    
    
    
    
    var secondsWithFraction   = (mils / 1000.0);
    
    //remaps the millisecond accordingly to the width of the path of the bar graphs
    var secondBarWidthSmooth  = map(secondsWithFraction, 0, 1, 0, width-100);
    
    
    //position of the bar graphs; the +50 is so that the left side of the bar graphs would be touching the left wall at second=0
    var position = secondBarWidthSmooth+ 50;
    
    
    
    //to produce an oscillating motion of the bar graphs: if the second is an odd number than the 
    if (seconde % 2 == 1) {
        position = width-50-secondBarWidthSmooth;
    }
    else {
        position = position;
    }
    
    
    
    
    //outline of the clock
    stroke(255)
    noFill();
    ellipse(position, height/2, 100, 100)
    
    
    //hour
    noStroke();
    fill(255-heur*3, 255-heur*2, 255, transparency3);
    arc(position, height/2, 100, 100, startingPoint, startingPoint+360/12*heur);
    
    
    //minute
    noStroke();
    fill(200,100+minutee*2,80+minutee,transparency2);
    arc(position, height/2, 75, 75, startingPoint, startingPoint+360/60*minutee);
    
    
    //second
    noStroke();
    fill(180,10,10, transparency1);
    arc(position, height/2, 50, 50, startingPoint, startingPoint+360/60*seconde);
    
    
    
    
    
    //corresponding bar graph will disappear if the second/minute/hour hand hits zero and then reappear when it hits 1
    if (seconde == 0 || seconde > 59) {
        transparency1 =0;
    }
    else {
        transparency1 = 255;
    }
    
    
    if (minutee == 0) {
        transparency2 = 0;
    }
    else {
        transparency2 = 255;
    }
    
    
    if (heur == 0) {
        transparency3 = 0;
    }
    else {
        transparency3 = 255;
    }
    
  
    
 
}

For this project I created a clock made of three pie graphs, each representing the second, minute and the hour, that oscillates between the two walls every second. The graphs also change their colors over the course of minute/hour.

At first I didn’t know what/how the clock has to do/look like for it to be ‘abstract’, so I tried to create a clock that looks like Mondrian’s painting.

But then I realized maybe it’s something that tells the time without explicitly displaying what time it is. So I tried to incorporate color/position of the clock itself to imply a change in time.

Hardest part of this project was probably making the clock oscillate accordingly each second smoothly, instead of moving one pixel and then stopping and then moving and then stopping. At first I was thinking of manipulating the framecount, but I figured it’d be easier to play around with the code that was posted on the Deliverables page that created a bar that creeps up smoothly every second. First I had to change it so that the position of the circle is the one changing instead of the width of the rectangle, and then the clock would reset itself to the origin after each second. And then I had to remap the value of the millisecond so that one second would take up the entire width of the canvas. Then I had to make sure that the clock would change its direction and creeps back towards the origin instead of transporting back to it.

karinac-Project-06

//Karina Chiu
//Section C
//karinac@andrew.cmu.edu
//Project-06


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

function draw() {
    background(0);
    angleMode(DEGREES);

    //Second Hand Rotation
    stroke(255);
    strokeWeight(1);
    noFill();
    ellipseMode(CENTER);
    ellipse(240,240,70,70);

    push();
    translate(width/2, height/2);
    rotate((second()*6)-90);
    noStroke();
    fill(156,144,94);
    ellipse(35,0,20,20);
    pop();

    //Minute Hand Rotation
    stroke(255);
    strokeWeight(1);
    noFill();
    ellipseMode(CENTER);
    ellipse(240,240,200,200);

    push();
    translate(width/2, height/2);
    rotate((minute()*6)-90);
    noStroke();
    fill(156,144,94);
    ellipse(100,0,35,35);
    pop();

    //Hour Hand Rotation
    stroke(255);
    strokeWeight(1);
    noFill();
    ellipseMode(CENTER);
    ellipse(240,240,350,350);

    push();
    translate(width/2, height/2);
    rotate((hour()*30)-90);
    noStroke();
    fill(156,144,94);
    ellipse(175,0,50,50);
    pop();

    //printed time
    noStroke();
    fill(255);
    textAlign(CENTER);
    text(hour(), 20, 20);
    text(minute(), 40, 20);
    text(second(), 60, 20);
}

I wasn’t exactly sure how I wanted to create this clock at first, so the end design really came up by trial and error.

I had a lot of difficulty with the movement of the ellipses. It took me a while to figure out how I could start at the top of the pathway and move counterclockwise. Overall, I am very excited to see how my clock turned out. I absolutely love the classy design and I believe it is something that I would actually use.

yoonyouk-project06-abstractclock

sketch

function setup() {
    createCanvas(300, 480);
    background(162, 220, 254);

    angleMode(DEGREES);
}

function draw() {
background(162, 220, 254);

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

    
    var mappedH = map(H, 0,23, 100, 500);
    var mappedM = map(M, 0, 59, 0, 400);
    var mappedS = map(S, 0, 59, 0, 480);

    noStroke();

    //background sky color - seconds
    //the darker blue dropping down on the canvas indicates the seconds
    fill(111, 173, 254);
    rect(0, 0, width, mappedS);


    //stem - minutes
    //growth of the stem indicates the greater minutes
    //the taller the stem, the more minutes
    fill(100, 212, 126);
    rect(width/2-10, height, 20, -1* mappedM);

    //sunflower petals = hours
    //the number of petals indicates the hour of the time

    if(H==0){
        H=12;
    }

    if(H<24 & H>12){
        H-=11;
    }
 
    for (var i=1; i<H; i++){
        push();
        translate(width/2, height-mappedM);
        rotate(30*i);
        strokeWeight(30); 
        stroke(255, 208, 54);
        line(0, 0, 0, -75);
        pop();
    }


    //sunflower head
    noStroke();
    fill(112, 84, 69);
    ellipse(width/2, height-mappedM, 100, 100);



}

I was inspired to use a sunflower as my abstract clock when researching Kircher’s sunflower clock. Although Kircher used the orientation and the position of the sunflower to determine time, I decided to use the physical characteristics of the sunflower to indicate the seconds, minutes, and hours.

mecha-project06-abstract-clock

sketch

//maddy cha
//section e
//mecha@andrew.cmu.edu
//project-06

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

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

    var w = width/10;
    var h2 = height/3
    background(142,185,196);   

    //body
    noStroke();
    fill(256,256,256,120);
    rect(100,80,330,340,40,40,40,40);


    //changes from 24 hour to 12 hour clock
    if(h == 0){
        h = 12;
    } else if(h > 12 & h < 24){
        h-=12;
    } else{
        h = hour();
    }

    //calls function that uses minutes to determine how many eyelashes to draw
    minuteLashes();

    for(var i = 0; i < 12 ; i++){
        //allows for two rows of eyes
        if(i < 6){
            fill(256);
            noStroke();
            arc(w*(i+3),h2,30,15,0,180);
            arc(w*(i+3),h2,30,15,180,360);
            //eye will turn red corresponding to hour
            if(i == h-1){
                fill(255,map(m,0,60,0,120),map(m,0,60,0,120));
            } else 
                fill(142,185,196);

            //blue iris (top row)
            ellipse(w*(i+3),h2,15,15);

            //pupil (top row)
            fill(20);
            ellipse(w*(i+3),h2,10,10);     

        } else{
            fill(256);
            noStroke();
            arc(w*(i-3),h2+30,30,15,0,180);
            arc(w*(i-3),h2+30,30,15,180,360);

            //eye will turn red corresponding to hour
            if(i == h-1){
                fill(255,100,100);
            } else 
            //blue iris (bottom row)
            fill(142,185,196);
            ellipse(w*(i-3),h2+30,15,15);

            //pupil (bottom row)
            fill(20);
            ellipse(w*(i-3),h2+30,10,10);        

        }
    
        //drooping eyelinds
        if(s >= 55 || s <= 5){
            if(i<6){
            fill(100,150,160);
            arc(w*(i+3),h2,30,15,180,360);
        } else{
            fill(100,150,160);
            arc(w*(i-3),h2+30,30,15,180,360);
        }
    }

        //blinks every minute
        if(s == 0){
            fill(100,150,160);
            if(i < 6){
                arc(w*(i+3),h2,30,15,0,180);
                arc(w*(i+3),h2,30,15,180,360);  
            } else{
                arc(w*(i-3),h2+30,30,15,0,180);
                arc(w*(i-3),h2+30,30,15,180,360);            
            }
        }
            
    }
}

function minuteLashes(){
    var s = second();
    //minute tally marks
    for(var j = 0; j <= s; j++){

        //draws five lashes per eye based on seconds
        if(j!=0 & j<=5){
            stroke(100,150,160);
            strokeWeight(2);
            line(128+5*j,145, 128+5*j,160);
        }
        if(j >5 & j<=10){
            line(152+5*j,145, 152+5*j,160);
        }
        if(j >10 & j<=15){
            line(174+5*j,145, 174+5*j,160);
        }
        if(j >15 & j<=20){
            line(198+5*j,145, 198+5*j,160);
        }
        if(j >20 & j<=25){
            line(221+5*j,145, 221+5*j,160);
        }
        if(j >25 & j<=30){
            line(244+5*j,145, 244+5*j,160);
        }
        if(j >30 & j<=35){
            line(128+5*(j-30),175, 128+5*(j-30),190);
        }
        if(j >35 & j<=40){
            line(152+5*(j-30),175, 152+5*(j-30),190);
        }
        if(j >40 & j<=45){
            line(174+5*(j-30),175, 174+5*(j-30),190);
        }
        if(j >45 & j<=50){
            line(198+5*(j-30),175, 198+5*(j-30),190);
        }
        if(j >50 & j<=55){
            line(221+5*(j-30),175, 221+5*(j-30),190);
        }
        if(j >55 & j<=60){
            line(244+5*(j-30),175, 244+5*(j-30),190);
        }
    }
    mouth();
}

function mouth(){
    var m = minute();

    noStroke();
    fill(255,map(m,0,60,0,120),map(m,0,60,0,120));    
    rect(150,220,230,map(m,0,60,20,180),90,90,40,40);
    noStroke();
    fill(255);
}

For this project, I decided to use hours, minutes, and seconds of the current time in order to create a graphic picture. I started by sketching out a monster that I could use to show the passage of time.

While I messed around with a couple different coded designs, I went with using eyes to indicate the hour, mouth size to indicate minutes, and eyelashes to indicate seconds. One of the eyes turns red corresponding to the current hour, and the monster blinks every minute (his eyelids appear 5 seconds before and after he blinks). He gains a new eyelash every second, and the size of his mouth is dependent on the current minute.

sntong-Project-06-Abstract-Clock

sketch

//Scarlet Tong
//sntong@andrew.cmu.edu
//Section A
// Project 06 - Abstract Clock


// center of the bacteria
var cx = 240;
var cy = 220;
//radius of the moving "dial" around the color ring
var dotR = 4;
// arrays used for color assignment for each hour on the color ring
var R = [234,225,141,115,242,225,214,238,243,42,98,125];
var G = [218,160,213,100,214,152,88,51,121,165,114,198];
var B = [133,60,230,115,185,146,128,85,105,141,100,127];
// angles used to divide the ring into 12 segements
var angles = [0,30,60,90,120,150,180,210,240,270,300,330];
var nVals = angles.length;

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

function draw() {
  background(0);
  var Min = minute();
  // white petri dish background for the bacteria
  fill(255);
  ellipse(cx,cy,350,350);

// drawing the color rings that will indicate hour
  for (var i = 0; i < nVals; i++) {
    stroke(R[i],G[i],B[i]);
    strokeWeight(10);
    strokeCap(SQUARE);
    arc(cx,cy,350,350,angles[i]-105,angles[i+1]-105);
    push();
    translate(240,220);
    rotate(-90);
    var eX = cos(angles[i])*170;
    var eY = sin(angles[i])*170;
    ellipse(eX,eY,10,10);
    pop();
  }

// make bacteria rotate each minute
  push();
  translate(cx,cy);
  angleMode(DEGREES);
  var mappedMin = map(Min,0,60,0,360);
  rotate(mappedMin);
  bacteria();
  pop();

  // isolate the "seconds" dot and the text from other fill and stroke statements above
  push();
  dot();
  textAlign(CENTER);
  text("Specimen :  #",190,430);
  text(month(),240, 430);
  text("-" , 260,430);
  text(day(), 270,430);
  text("-", 280,430);
  text(year()-2000,295,430);
  pop();


}

//bacteria at the middle of the petri dish
function bacteria(){
  var H = hour();
  // introduce some jitter because bacteria are always moving
  var jitterX = random(-.8,.8);
  var jitterY = random (-.7,.7);

// body of the bacteria
  rectMode(CENTER);
  strokeWeight(5);
  stroke(0);
  strokeCap(ROUND);
  // because the color ring only has 12 colors, the hour() value must be converted to within 12 hrs.
  if (H <= 12) {
    Hr = hour();
  } if(H > 12) {
    Hr = hour()-12;
  }

// the color assignment corresponds to the color ring and hour it indicates
  fill(R[Hr],G[Hr],B[Hr],200);
  rect(0+jitterX,0+jitterY,50,150,25);

  // little legs around the bacteria
  line(0,-75,0+jitterX,-110); // minute hand for time
  line(-10,73+jitterY,-13,80);
  line(10+jitterX,73,13,85+jitterY);
  line(-25+jitterX,50,-35+jitterX,50);
  line(-25,-60+jitterY,-30+jitterX,-65);
  line(-18,-70+jitterY,-26,-80);
  line(18+jitterX,-70,20+jitterX,-73);
  line(25,-30+jitterY,30,-30);
  line(25,-40,34,-40+jitterY);

  // little dots inside the bacterias, the guts
  noStroke();
  fill(0);
  ellipse(10+jitterX,10+jitterY,dotR,dotR);
  ellipse(-10+jitterX,-40+jitterY,dotR,dotR);
  ellipse(5+jitterX,-30+jitterY,dotR,dotR);
  ellipse(-10+jitterX,40+jitterY,dotR,dotR);
  ellipse(5+jitterX,55+jitterY,dotR,dotR);
  ellipse(-5+jitterX,30+jitterY,dotR,dotR);
  ellipse(5+jitterX,-20+jitterY,dotR,dotR);
  ellipse(-6+jitterX,13+jitterY,dotR,dotR);
}

// small dot that act as the "dial" for a microscope
// moves along the ring per second
function dot(){
  var Sec = second();
  var mappedSec = map(Sec, 0,60, 0,360)-90;
  var x = cos(mappedSec)*150;
  var y = sin(mappedSec)*150;
  fill(200);
  noStroke();
  ellipse(cx+x,cy+y,10,10);
}

For this assignment I imagined as if we are viewing into a microscope to see a small bacteria that is moving around in the petri dish. The longest “leg” on the bacteria is the minute hand. The bacteria changes color according to the hour color that is found on the color ring. The specimen name is the listed as month/date/year, which completes this “clock”. I took a long time to figure out the small adjustments for each element to work together (i.e those extra 90 degree changes and shifting) and align in color, but small sketches and tables help me organize the data before I input them to arrays.

serinal – project 06 (section C)

For this abstract clock assignment, I used the base of my extra credit regular clock code and altered it a bit. I wanted it to resemble a bit of a flower (which is hopefully indicative through the colors as well). My sketch up made it seem really complex, but when I actually started to code it, it seemed to work out pretty well. I wanted everything to stay until it made a full circle and since it’s a 24 hour clock, the seconds is the clearest indicator of it constantly disappearing and reappearing.

sketch

//Serina Liu
//Section C
//serinal@andrew.cmu.edu
//Project 06

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

function draw() {
    background(255, 240, 245);
    var H = hour();
    var M = minute();
    var S = second();

    fill (230,230,250);
    noStroke();
    ellipse (240, 240, 350, 350);

    for(var s = 0; s < S; s++) { //seconds hand
        push();
        translate (240, 240);
        rotate(6*s); //60 seconds
        strokeWeight (2);
        stroke (128, 0, 128); //dark purple
        line(0, 0, 0, -150);
        pop();
    }

    for(var m =0; m<M; m++){ //minutes hand
        push();
        translate (240, 240);
        rotate(6*m); //60 minutes
        strokeWeight (4);
        stroke (221, 160, 221); //plum
        line(0, 0, 0, -100);
        pop();   
    }
    for (var h=0; h<H; h++){ //hour hand
        push();
        translate (240, 240);
        rotate(15*h) //24 hour clock
        strokeWeight (5); 
        stroke(256); //white
        line(0, 0, 0, -50);
        pop(); 
    }
}

ghou-Project-06-AbstractClock

sketch

//Grace Wanying Hou
//15-104 Section D
//ghou@andrew.cmu.edu
//Assignment 06

//background colours
var br = 245;
var bg = 250;
var bb = 255;
//bubbles
var bol = [];
var xarray = [];
var yarray = [];

function setup(){
    createCanvas(300,300);
    angleMode(DEGREES);
    //setting up the pink bubbles
    for (var i=0;i<150;i++){
        bol.push(new moving());
    }
}
function mousePressed(){
        this.x = 150;
        this.y = 150;
}
function draw (){
    background(br,bg,bb);
    var h = hour();
    var m = minute();
    var s = second();    

    //the pink bubbles moving
    for (var i=0;i<bol.length; i++){
        bol[i].move();
        bol[i].display();
    }
    // the bubbles created from dragging the mouse
    for (var a = 0; a < xarray.length; a++){
        fill(250,200,230,200);
        ellipse(xarray[a],yarray[a],20);
        yarray[a] += 1;
    }
    
    //thte clock bubbles
    push();
    noStroke();
    fill(br,bg,bb);
    translate(width/2,height/2);
    rotate(s*(360/60));
    rotate(-90);
    ellipse(110,0,55);
    pop();
    
    push();
    noStroke();
    fill(br,bg,bb);
    translate(width/2,height/2);
    rotate(m*(360/60));
    rotate(-90);
    ellipse(60,0,40);
    pop();
    
    push();
    noStroke();
    fill(br,bg,bb);
    translate(width/2,height/2);
    rotate(h*(360/12));
    rotate(-90);
    ellipse(30,0,25);
    pop();
}


//having new bubbles follow mouse when mouse dragged
function mouseDragged(){
    xarray.push(mouseX);
    yarray.push(mouseY);
}
//moving bubbles and how they move 
function moving(){
    this.x = 150;
    this.y = 150;
    this.diameter = (20);
    this.speedx = random(-1.3,1.3);
    this.speedy = random(-1.3,1.3);
    
    this.move = function() {
        this.x += this.speedx;
        this.y += this.speedy;
        if (this.x >= width-5 || this.x <= 5){
            this.speedx = -this.speedx;
        }
        if (this.y >= height-5 || this.y <= 5){
            this.speedy = -this.speedy;
        }
    };
    
    this.display = function(){
        fill(250,200,230,200);
        noStroke();
        ellipse(this.x,this.y,this.diameter,this.diameter);
    };
    
}

For this project I first looked up some abstract clocks in our project references for some inspiration. I wanted to make the “clock hands” as subtle as possible but still visible if one looked long enough at this project.

here are some sketches I did to plan for this project. I decided to make the clock hands “melt” into the background and invisible without the background distraction bubbles.

aranders-project-06

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

function draw() {
  background(255, 225, 225);

  //strawberry jam jar
  push();
  fill(255, 26, 26);
  ellipse(70, 170, 100, 30);
  pop();
  line(20, 40, 20, 170);
  line(120, 40, 120, 170);
  push();
  noStroke();
  fill(255);
  ellipse(70, 40, 100, 30);
  fill(255, 26, 26);
  ellipse(70, 40, 30, 10);
  pop();

  //raspberry jam jar
  push();
  fill(102, 0, 34);
  ellipse(200, 170, 100, 30);
  pop();
  line(150, 40, 150, 170);
  line(250, 40, 250, 170);
  push();
  noStroke();
  fill(255);
  ellipse(200, 40, 100, 30);
  fill(102, 0, 34);
  ellipse(200, 40, 30, 10);
  pop();

  //apricot jam jar
  push();
  fill(240, 90, 26);
  ellipse(330, 170, 100, 30);
  pop();
  line(280, 40, 280, 170);
  line(380, 40, 380, 170);
  push();
  noStroke();
  fill(255);
  ellipse(330, 40, 100, 30);
  fill(240, 90, 26);
  ellipse(330, 40, 30, 10);
  pop();

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

  //height of jam based on time
  var maph = map(h, 0, 23, 0, height / 2.25);
  var mapm = map(m, 0, 59, 0, height / 2.25);
  var maps = map(s, 0, 59, 0, height / 2.25);

  push();
  noStroke();

  //strawberry jam
  fill(255, 26, 26);
  rect(20, 170, 100, - maps)

  //raspberry jam
  fill(102, 0, 34);
  rect(150, 170, 100, - mapm)

  //apricot jam
  fill(240, 90, 26);
  rect(280, 170, 100, - maph)

  pop();

  textSize(18);
  text("strawberry", 25, 225);
  text("raspberry", 160, 225);
  text("apricot", 300, 225);

}

I chose to use different jams as a representation of time. Strawberry jam sells more than the other two which is why I made it seconds. Raspberry sells faster than apricot which is why I made it minutes.