Category: Project-06-Abstract-Clock

Matthew Erlebacher Project-06 Abstract Clock

Abstract Clock

// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-06

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

function draw() {
    background(125);

    var H = hour();
    var M = minute();
    var S = second();
    // Sets up variables for time

    var mappedH = map(H, 0, 23, 20, 240);
    var mappedM = map(M, 0, 59, 0, width);
    var mappedS = map(S, 0, 59, 0, width / 2);
    // Maps time variables to different values

    fill(255);
    ellipse(width / 2, height / 2, width, height);
    // Creates giant circle in the background

    fill(75);
    rect(width / 2 - 5, 0, 10, mappedS);
    // Creates rectangle that extends downward length is connected to seconds

    fill(0);
    rect(0, height - 20, mappedM, 20);
    // Creates rectangle at the bottom extends rightward lenght is connected to minutes

    fill(0);
    ellipse(width / 2, mappedS, mappedH, mappedH);
    // Creates circle in the middle of canvas radius connected to hours

    fill(125);
    text(H, width / 2, 3 * height / 4 + 40);
    text(M, width / 2, 3 * height / 4 + 60);
    text(S, width / 2, 3 * height / 4 + 80);
    // Creates texts that list time
}

The end design was definitely very abstract. The design was a circle that lowers as each second passes. The radius of the circle increases by the hour, and there is a bar at the bottom that increases by the minute. I also included the time in text since I thought it might be unclear as to what everything meant. Originally the circle was supposed to come from the bottom, but I realized that it would be easier to implement, and it also looked better in the end. While I would have liked to make a more interesting design, I didn’t have the time since I was already struggling with arrays, and the time variables. Despite this, I enjoyed what I came up with, and its overall simplicity.

dayoungl Project 06

sketch

//Sharon Lee
//dayoungl@andrew.cmu.edu
//Section E
//Project-06
var d = 15;
var r = 0;
var g = 0;
var b = 0;
function setup() {
    createCanvas(450,450);
}

function draw(){
    background(255);
    fill(0, 10);
    stroke(0, 160);
    var H = hour();
    var M = minute();
    var S = second();
    // rectangle rotates by seconds
    translate(width/2, height/2);
    for (i = 0; i < S; i++) {
        push();
        rotate(i / 6.0);
        scale(i / 10.0);
        stroke(r,g,b);
        r = i * 10;
        b = i * 4;
        rect(0, -50, 10, 50);
        // print(S);
        pop();
    }
    //displays time
    var lo = height/2;
    textSize(20);
    textAlign(CENTER);
    fill(0);
    noStroke();
    text(H + " : ", 40, lo);
    text(M + " : ", 80, lo);
    text(S, 120, lo);

    // for (i = 0; i < H; i ++){
    //     r = 240;
    //     g = 240;
    //     b = 240;
    //     background(r,g,b);


}

    // var mappedH = map(H, 0,23, 0, width);
    // var mappedM = map(M, 0,59, 0, width);
    // var mappedS = map(S, 0,59, 0, width);

//     for (j = 0; j < 6; j ++){
//         for (i = 0; i <= S; i++){
//             stroke(r,g,b);
//             strokeWeight(2);
//             r = i * 5;
//             g = i * 3;
//             // line(10 * i, 100 * j, 10 * i, 150);
//             ellipse(10 * i, 10 * j, 50, 50);
//         }     
//     }
// }
//     for (i = 0; i <= M; i ++){
//         ellipse(10 * i, 10 * j, 50, 50);


//     }
    //second
//     for (i = 0; i < 6; i ++){
//         for(j = 0; j < 10; j ++){
//             // happy = [60 * j];
//             // sad = [60 * i];
//             push();
//             translate(40,40);
//             noStroke();
//             for (k = 0; k < S; k ++){
//                 fill(255);
//                 ellipse (20 * i, 60, d,d);
//             pop();
//             }
//         }
//     }    
// }       
    

    //Display the ellipses
    //ellipses change colour as time passes
    // for (i = 0; i < 24; i ++){
    //     var mappedH = map(H, 0,23, 0, d);
    //     fill(255);
    //     // r -= hour(-50);

    // }
    // for (i = 0; i < 24; i ++){
    //     var mappedM = map(M, 0.59, 0, d);
    //     fill (255,237,68);
    //     r = 255;
    //     g = 237;
    //     b -= 50;        
    //     ellipse(width/3 + 100, 100, d, d);
    // }
    // for (i = 0; i < 60; i ++){
    //     map (S, 0.59, 0, d); 
    //     fill(r,g,b);
    //     r = H - 5;
    //     g = H - 5;
    //     b = H - 5;
    //     ellipse(width/3 + 250, 100, d, d);
    // }

rkondrup-06-project-abstract-clock

sketch

// ryu kondrup
// rkondrup@andrew.cmu.edu
// section D
// project-06-abstract-clock

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

function draw() {
  background(255);

    var centerPt = width/2;
    var sWidth = 100;
    var mWidth = 60;
    var hWidth = 30;
    var s = second();
    var m = minute();
    var h = hour();
    var sAngle = radians(s*6)-PI/2;
    var mAngle = radians(m*6)-PI/2;
    var hAngle = radians(h*30)-PI/2;

    //sin cos positioning of each circle


    //big center circle
    fill(120, 210, 200);
    stroke(255, 245, 210);
    strokeWeight(3);
    ellipse(centerPt, centerPt, width);

//to make 60 lines
for (var i = 0; i < 60; i++) {

    //seconds
    var sPositionX = cos(sAngle)*150+centerPt;
    var sPositionY = sin(sAngle)*150+centerPt;
    //minutes
    var mPositionX = cos(mAngle)*100+centerPt;
    var mPositionY = sin(mAngle)*100+centerPt;
    //hours
    var hPositionX = cos(hAngle)*60+centerPt;
    var hPositionY = sin(hAngle)*60+centerPt;
    //main background circle
    var xPerimeter = cos(radians(6*i))*240+240;
    var yPerimeter = sin(radians(6*i))*240+240;
    //new perimeter circle
    var x2Perimeter = cos(radians(i*s))*240+240;
    var y2Perimeter = sin(radians(i*s))*240+240;


//LINES!!!!!!!!!!!!!!!!!!!!
    stroke(245, 255, 210);
    strokeWeight(1);
    noFill();
        beginShape();
        //center reference point
        curveVertex(centerPt, centerPt);
        //fixed perimeter
        curveVertex(xPerimeter, yPerimeter);
        //second hand
        curveVertex(sPositionX, sPositionY);
        //minute hand
        curveVertex(mPositionX, mPositionY);
        //hour hand
        curveVertex(hPositionX, hPositionY);
        //fixed perimeter
        curveVertex(x2Perimeter, y2Perimeter);
        //back to center reference point
        curveVertex(centerPt, centerPt);
        endShape();
    }

// //CIRCLES!!!!!!!! HIDDEN
// fill(230, 230, 230);
// //seconds
// ellipse(sPositionX, sPositionY, sWidth)
// //minutes
// ellipse(mPositionX, mPositionY, mWidth)
// //hours
// ellipse(hPositionX, hPositionY, hWidth)


}

In this assignment I originally wanted to make circles which rotate inside of other rotating circles in the way that the moon orbits the earth as the earth orbits the sun, but because of time constraints and because I was not able to come up with a way to do it by friday morning, I had to settle on a different design concept. Instead I chose to depict time as a collection of curving lines which share three common points representing the second, minute, and hour. I then attached the lines to the perimeter of the bounding circle. The way that the line density changes each second was an accident but because it made the image more dynamic I decided to leave it.

elizabew-Project-06- Abstract-Clock

sketch

//Elizabeth Wang
//Section E
//elizabew@andrew.cmu.edu
//Project 6: Abstract clock

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

function draw() {

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

  background(0,167,225);

  fill(255);
  noStroke();
  ellipse (150, 120, 50, 100); //left ear
  ellipse (250, 120, 50, 100); //right ear
  ellipse (200, 200, 200, 200); //head

  fill(255,200,87);
  ellipse (175, 210, 20, 10); //nose

  stroke(0);
  strokeWeight(2);
  fill(255);
  ellipse (140, 180, 50, 50); //right eye
  ellipse (220, 180, 50, 50); //left eye

  var thetaSecond = ((3*PI)/2) + (PI/30) * s; //increments of 60 for seconds
  var xls = 140 + 10*cos(thetaSecond); //x left eye position
  var yls = 180 + 10*sin(thetaSecond); //y left eye position
  var xrs = 220 + 10*cos(thetaSecond); //x right eye position
  var yrs = 180 + 10*sin(thetaSecond); //y right eye position
  fill(0);
  noStroke();
  ellipse (xls, yls, 30, 30); //left eye moving
  ellipse (xrs, yrs, 30, 30); //right eye moving


  //mouth
  noStroke();
  fill(52,52,52);
  rect(158, 225, 40, 2*m, 20, 20, 10, 10); //mouth gets bigger every minute
  if (m>30){ //when mouth gets big, also a mark for when it is past 30 minutes

    var xt = 100 + 80*cos(thetaSecond); //x right eye position
    var yt = 200 + 80*sin(thetaSecond); //y right eye position
    textSize(20);
    text("it's been 30 minutes, I'M LATE!", xt, yt);
    fill(189,217,191);

  }


  //cheek blush

  if (h == 0){ //changing from 24 to 12 hour time
    h = 12;
  }
  if (h > 12){
    h = h - 12;
  }

  for(var x = 0; x < h ; x++){ //every hour there is a new blush line
    stroke(237,106,90);
    var spacing = x * 15;
    line(spacing + 130, 200, spacing + 90, 220);

  }

}

Reflection

This project was difficult for me in the sense that it was hard for me to distance myself from what actual clocks generally looks like. At first I tested out trying to make a flower grow out of a cactus and eventually die as the day went on, but it ended up being too complicated, so I simplified it to a face instead. I’m happy with how the final looks, but I still feel as though if I had more time, I would add more graphic elements. The face itself rolls its eyes every second, and every minute that passes, the mouth gets longer. Once 30 minutes passes, text pops up that informs the user that it has been over 30 minutes. For the hour, I added “blush” lines, and each line represents one hour.

amui1-Project-06-Abstract-Clock

amui1-p6

//Allison Mui
//15-104 Section A
//amui1@andrew.cmu.edu
//Project-06

//variables for solar system
solarSize = 325;
//variables for star

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

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

    //get time
    var hr = hour();
    var twelveHr = hr%12;
    var min = minute();
    var sec = second();

    //print time
    fill(255);
    strokeWeight(0);
    text(nf(twelveHr,2,0) + ':' + nf(min,2,0) + ':' + nf(sec,2,0),30,30);

    //border of solar system
    noFill();
    stroke(60,60,85);
    strokeWeight(6);
    ellipse(width/2,height/2,solarSize,solarSize);
    ellipse(width/2,height/2,solarSize-100,solarSize-100);


    //HOURS

    //flag stick
    push();
    translate(width/2,height/2);
    rotate(hr);
    stroke(255);
    strokeWeight(5);
    line(0,0,0,90);
    pop();

    //flag
    push();
    translate(width/2,height/2);
    fill(255);
    strokeWeight(0);
    rotate(hr);
    rectMode(CENTER);
    fill(164,216,150);
    rect(-25,78,40,30,5);
    pop();

    //flag symbol
    push();
    translate(width/2,height/2);
    fill(255,255,0);
    strokeWeight(0);
    rotate(hr);
    ellipse(-25,78,10,10);

    pop();

    //sun

    //assign random variables to make sun move
    var sunX = random(-.5,.5);
    var sunY = random(-.5,.5);

    fill(255,198,0);
    strokeWeight(0);
    ellipse(width/2,height/2,solarSize/4,solarSize/4);
    //flares
    for (i=0; i < 20; i++) {
      push();
      translate(width/2,height/2);
      rotate(TWO_PI*i/20);
      fill(255,172,0);
      triangle(10+sunX,50+sunY,40-sunX,20+sunY,20+sunX,30+sunY);
      pop();
    }


    //SECONDS

    //star
    fill(255,255,0);
    //makes star move
    var offset = second();
    //maps second to width of the canvas
    var offset = map(offset,0,60,0,width);
    translate(0,50);
    var xStar = [16+offset,20+offset,
                30+offset,25+offset,
                23+offset,15+offset,
                7+offset,9+offset,
                4+offset,14+offset];
    var yStar = [5,10,
                15,20,
                30,25,
                30,20,
                15,10];

    var lenStar = xStar.length;

    beginShape();
    for (var i = 0; i <lenStar; i++) {
      vertex(xStar[i],yStar[i]);
    }
    endShape();
    //shooting star
    stroke(255);
    strokeWeight(2);
    line(-50+offset,15,0+offset,15);
    line(-50+offset,20,0+offset,20);

    //spaceship
    fill(211,211,211);
    strokeWeight(1);

    //MINUTES

    //makes spaceship move
    var shipOff = minute();
    var shipOff = map(shipOff,0,60,0,width);
    //variables for ship x and y movement
    var sxDist = 6;
    var syDist = 10;
    //to test
    //print('subtracted=' + shipOff/syDist);

    //draws ship
    stroke(0);
    translate(0,0);

    //right side of circle
    //left side of circle
    //base triangle
    triangle(-5+shipOff,height-90-shipOff/syDist,
            27.5+shipOff,height-75-shipOff/syDist,
            60+shipOff,height-90-shipOff/syDist);
    //base little circles
    ellipse(27.5+shipOff,height-73-shipOff/syDist,8,3);
    ellipse(27.5+shipOff,height-70-shipOff/syDist,6,3);
    ellipse(27.5+shipOff,height-66-shipOff/syDist,4,3);

    //body of ship
    strokeWeight(0);
    //light pink
    fill(249,170,202);
    rect(-5+shipOff,height-95-shipOff/syDist,63,10,5);
    //darker pink
    fill(241,43,122);
    rect(-10+shipOff,height-100-shipOff/syDist,75,8,5);

    // top triangle
    fill(172,153,198);
    triangle(-5+shipOff,height-100-shipOff/syDist,
            27.5+shipOff,height-120-shipOff/syDist,
            60+shipOff,height-100-shipOff/syDist);
    fill(209,209,227);
    //top window thingy
    arc(27.5+shipOff,height-106-shipOff/syDist,35,40,PI,0,CHORD);

    //draws alien


    //alien head
    fill(164,216,150);
    ellipse(27.5+shipOff,height-111-shipOff/syDist,10,10);
    stroke(164,216,150);
    strokeWeight(2);
    //alien attenae
    line(27.5+shipOff,height-111-shipOff/syDist,
          23.5+shipOff,height-119-shipOff/syDist);
    line(27.5+shipOff,height-111-shipOff/syDist,
          31.5+shipOff,height-119-shipOff/syDist);
    ellipse(22.5+shipOff,height-120-shipOff/syDist,5,1);
    ellipse(33.5+shipOff,height-120-shipOff/syDist,5,1);

    //alien eyes
    fill(0);
    strokeWeight(0);
    ellipse(25.5+shipOff,height-112-shipOff/syDist,2,2);
    ellipse(29.5+shipOff,height-112-shipOff/syDist,2,2);

}

I found this project to be one of the more challenging assignments. However, I liked it because there was a lot of room for creativity. Similar to the other projects, I wanted to tell time, but somehow include a story. I had the most trouble coordinating the rotations with the hours/seconds/minutes. In the future, I would like to spend more time expanding on that further.

 

This was what my idea started out as.

daphnel-Project 06-Abstract Clock

Clock

var petals = 0;
var petals2 = 0;
var ellipseSize=200;
var minuteCircleSize=7;

function setup() {
    createCanvas(480, 480);
}
function draw() {
    background(229, 255, 255);
    var H = hour();
    var M = minute();
    var S = second();

    angleMode(RADIANS);
    petals += 4;
    petals2 += 3;
    strokeWeight(0);
    for(var i=0; i<5; i++){
        //increment based on i and to make the zig zag petal pattern;
        var x = width/13 + 100 * i;
        fill(255, 204, 204, 204);
        arc(x, 30 + petals, 15, 10,PI+QUARTER_PI, QUARTER_PI);
        arc(x, 150 + petals, 15, 10,PI+QUARTER_PI, QUARTER_PI);
        arc(x, 270 + petals, 15, 10,PI+QUARTER_PI, QUARTER_PI);
        var x1 = width/5 + 100 * i;
        arc(x1, 90 + petals2, 15, 10,PI+QUARTER_PI, QUARTER_PI);
        arc(x1, 210 + petals2, 15, 10,PI+QUARTER_PI, QUARTER_PI);
        arc(x1, 330 + petals2, 15, 10,PI+QUARTER_PI, QUARTER_PI);
    }

    if(petals>height){
      petals=-50;
      petals2=-50; //to make the petals loop;
    }

    angleMode(DEGREES);
    noStroke();
    //the flower petals that grow by the hour
    if (H==0){
        H = 12;
      }else if(H < 24 & H > 12){
        H -= 11;
      }else{
        H = hour();
      }
    for(h=1; h<H; h++){ //the petals that increase by the hour;
        push();
        translate(width/2, height/2);
        rotate(h*30);
        fill(255, 204, 204, 204);
        ellipse(width/5, 0, ellipseSize,ellipseSize/2);
        pop();
    }
    for(m = 0; m<M; m++){ //the brown circles representing minutes;
        push();
        translate(width/2,height/2);
        rotate(6 * m);
        fill(230, 77, 0, 50); //4th number is for transparency;
        ellipse(width/8,0, minuteCircleSize, minuteCircleSize);
        pop();
      }

    for(s = 0; s<S; s++){ //the yellow stamens representing seconds;
        push();
        translate(width/2,height/2);
        rotate(6 * s);
        strokeWeight(2);
        stroke(255, 255, 204);
        line(0,0,0,-60);
        pop();
    }
}

The hardest part about this assignment was making my code more efficient. After making the petals and the rest of the flower, something seemed to be a little boring so I tried to create a background that would loop in the back, but I just couldn’t think of how to make it loop more efficiently even though it looks like an easy fix. I found it interesting to see the process of my clock actually changing throughout time. Since I like cherry blossoms and the color of the original pink background, I decided to use those as my inspirations for this project. It was hard for me to work with the arc function as it was my first time using it and there were a lot of components to it as well. The top photo below was something I used as sort of an inspiration of how I wanted my clock to look like. I changed up some of the components to match the number of hours, minutes and seconds.


jwchou-project06-abstractClock

sketch 66

//Jackie Chou
//Section E
//jwchou@andrew.cmu.edu
//Project 06 Abstract Clock

var prevSec;
var millisRolloverTime;

//--------------------------
function setup() {
    createCanvas(480, 480);
    millisRolloverTime = 0;   
}
//--------------------------
function draw() {
	noStroke;
	fill(255, 60, 60); //red background
	rect(35,0, width-70, height); 
	fill(255);
	rect(0,0, 35, height); //left white margin
	rect(width-35, 0, 35, height); //right white margin
	rect(0,0, width, 15); //top white margin
	rect(0,height-15, width, 15); //bottom white margin
	var fillLevel = 255/24; //rectangle opacity

 
  	for(i=0; i < 23; i++) { //create 24 evenly columns spanning canvas
   	  noStroke;
   	  filllevel = fillLevel * i;
   	  fill(255, 255, 255, fillLevel);
   	  rect(35,0,((width-70)/24)*i, height); //keeps margins in consideration
    }
    
    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
    
    // Reckon the current millisecond, 
    // particularly if the second has rolled over.
    // Note that this is more correct than using millis()%1000;
    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);
    
    fill(128,100,100);
    text("Hour: "   + H, 10, 22);
    text("Minute: " + M, 10, 42);
    text("Second: " + S, 10, 62);
    text("Millis: " + mils, 10, 82);
    
    var hourBarWidth   = map(H, 0, 23, 45, height-45);
    var minuteBarWidth = map(M, 0, 59, 0, width);
    var secondBarWidth = map(S, 0, 59, 0, width);
    
    // Make a bar which *smoothly* interpolates across 1 minute.
    // We calculate a version that goes from 0...60, 
    // but with a fractional remainder:
    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);
    var yPos = secondBarWidth-53  //vertical second position 
    var xPos = hourBarWidth-39.5 //horizontal hour position

    //plane
    noStroke();
    fill(190);
    ellipse(xPos + 40, yPos + 40, 70, 11); //wings
    ellipse(xPos + 40, yPos + 20, 35, 8); //horz stabilizer
    fill(108, 190, 225);
    ellipse(xPos + 40, yPos + 40, 17, 45); //fuselage
    ellipse(xPos + 57, yPos + 45, 6, 15); //left engine
    ellipse(xPos + 23, yPos + 45, 6, 15); //right engine
    fill(0);
    ellipse(xPos + 23, yPos + 50, 10, 2); //right propeler
    ellipse(xPos + 57, yPos + 50, 10, 2); //left propeller
    fill(190);
    ellipse(xPos + 40, yPos + 15, 5, 17); //tail
    fill(0);
    beginShape(); //cockpit
    vertex(xPos + 35, yPos + 50);
    vertex(xPos + 40, yPos + 57);
    vertex(xPos + 45, yPos + 50);
    vertex(xPos + 45, yPos + 45);
    vertex(xPos + 40, yPos + 50);
    vertex(xPos + 35, yPos + 45);
    vertex(xPos + 35,yPos +  50);
    endShape();

	for(c=0; c < M; c++) { //create dots trailing the plane to tell minutes
	  fill(255);
	  ellipse(hourBarWidth, yPos - 6.5*c, 3, 3) //dots using yPos of plane +hour position
	}    
}

For this project, I wanted to continue the theme of planes that I started last week.

I was wondering how I would depict time using the plane. This sketch represents my initial idea:

I wanted the plane to move vertically, 1/24 of its way through the canvas per hour, with a trail of dots behind it to signify the minutes. However, I quickly realized, after coding it, that the minute dots would go off the canvas for an entire hour at a time if the time was in the morning.

So I revised my idea, so that the plane would move horizontally one unit per hour. The dots would still signify the minutes. To signify seconds, the plane would move vertically by a 1/60 of the height every second. In this second configuration, the dots behind the plane are visible at least for a few moments per minute.

 

 

mjeong1-06-Abstract-Clock-SectionA

sketch

//Min Young Jeong
//mjeong1@andrew.cmu.edu
//Project-06
//section A

function setup() {
    createCanvas(500,500);//create canvas 500X500 
}

function draw() {
    background(51,51,51);

    var h = hour(); 
    var m = minute(); 
    var s = second(); 
    //setting up variables for the time
    var mappedh= map(h,0,24,0,4);
    //divide 24 hours into 4 so that later I can create 4 rectangles that represents hours 
    //each rectangle will represent 6 hours

    stroke(203,203,203);
    strokeWeight(5);
    fill(33,33,33);
    quad(20,330,480,330,460,490,40,490);
    stroke(0);
    //initial back ground which is the machine 

    for(var i = 0; i<mappedh; i++){
        fill(255,100,100);
        noStroke();
        rect(i*70+35,370,60,60,20);
        fill(0);
        noStroke();
        textSize(20);
        text("25%",i * 70+45,405);
    }
    //hour each pink rectancle represents 6 hours so that 4 rectangles as totall will have 100% which is 24 hours

    if(m%2 ==0){
        fill(255,50,50);
        rect(350,370,80,80,15);
    }
    else{
        fill(7,196,7);
        rect(350,370,80,80,15);
    }
    //min 
    //spin button will change the color, green to red, red to green. 
    //color change happens every minute
    fill(0);
    strokeWeight(2);
    textSize(25);
    text("SPIN",360,415);
    noStroke();
    fill(162,162,162);
    rect(0,0,500,350);
    fill(68,62,64);
    quad(10,10,490,10,470,30,30,30);
    fill(102,102,102);
    quad(10,10,30,30,30,320,10,340);
    fill(221,221,221);
    quad(10,340,30,320,470,320,490,340);
    fill(124,122,116);
    quad(490,340,470,320,470,30,490,10);
    fill(0);
    rect(30,30,440,290);
    //background of slot machine
    //grey picture frame

    for(var i = 0; i<3; i++){
        fill(255);
        stroke(180);
        strokeWeight(3);
        rect(i*150+35,50,130,200);
        //three white background for three screens
        //use for loop create three rectangles using on rect command
        if(m<20){
            fill(255,50,50);
            stroke(0);
            textSize(180);
            text("7",150*(i-2)+50,210);
            fill(200);
            rect(350,100,100,100);
            rect(200,100,100,100);
        }
        //if we have min 0 to 19(for example 06:15am or pm), then we have one 7 and two rectangles
        //on the screen
        if (m>=20 & m<40){
            fill(255,50,50);
            stroke(0);
            textSize(180);
            text("7",150*(i-1)+50,210);
            fill(200);
            rect(350,100,100,100);
        //if the minute is 20 to 39, then it has two 7s and one rectangle 

        }
        if (m>=40 & m<60){
            fill(255,50,50);
            stroke(0);
            textSize(180);
            text("7",150*i+50,210);
        }
        //if the minute is 40 to 59, then we have three 7s

        if (m<60 & m>50){
            fill(255,50,50);
            stroke(0);
            textSize(180);
            text("7",150*i+50+random(1,5),210);
        }
        //from 50 min to 60 min, 7s are shaking
    }

    for(var i = 0; i<s; i++){
        fill(255,50,50);
        stroke(255);
        strokeWeight(2);
        rect(i*7+35,290,7,20);
    }
    //number of red rectanlges that represent the secs

    if(m==0){
        textSize(50);
        text("JACKPOT",50,480);
    }
    //each o'clock will have jackpot, ex)3 o'clock, 4 o'clock

}

For this assignment I created slot machine that represents abstract clock. Every second, the number of red rectangles under the slot machine screes will increase. Every other minute, the color of button will change its color. And every 20 min you get “7” on your screen which increases its number at 20 min, 40min, and 60min. As the number of the “7” will increase and when it reaches three “7”s, then you will get “jackpot”

adev_Project 6_abstract_clock

adev_Project_6

//Aisha Dev
//15-104 SECTION E
//Project 6





var rectPitY = 80;


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


 function draw(){
 	background(0);
    // Pittsburgh time (EST)
 	var Hpit = hour();
 	var Mpit = minute();
    

   // Time in New Delhi
 	var Hdel = Hpit + 9;
 	var Mdel = Mdel + 30;

 	for (var i = 0; i <= second(); i ++){
 		strokeWeight(0.3);
 		 fill (55,55,55,50);
     line (400, height/2, width/i, i*20);
 		strokeWeight(0.5);
 		stroke(255);
     line (i, 0, i*20, i+width);
     }
   
    //Hours in Pittsburgh
     fill(255);
     stroke(40);
     rect (width/2, 80+Hpit, 150, 20);

     //Hours in Delhi
     noFill();
     stroke(255);
     strokeWeight (3);
     rect(width/4 + Hdel, 300, 20+(4*Hdel), 150);

     //Minutes in Pittsburgh
     for (var i = 0; i <= Mpit; i ++){
     	stroke(10);
 		strokeWeight(2);
 		 fill (255);
     ellipse(i*2.2, 50+(i*1.3), 70, 70);
     }

      //Minutes in Delhi
     for (var i = 0; i <= Mpit; i ++){
     	stroke(255);
 		strokeWeight(1);
 		 noFill ();
     ellipse(200+(i*1.5), 320, 20, 20);
     }

 }

I wanted to include multiple time zones because I feel like that is how I experience time. I wanted to include what Indian Standard Time means to me when I’m on Eastern standard time.

keuchuka project 6

project6

//Fon Euchukanonchai
//15-105 SECTION A
//keuchuka@andrew.cmu.edu
//Project-06

//defining arrays for X and Y of gold coins
var A = [196,210,227,141,156,168,183,245,260,204,190,177,222,239, 163, 150, 250, 199, 186, 213, 231, 172, 243, 159, 195, 209, 229, 182, 239, 168, 204, 220, 190, 176, 233, 205, 221, 191, 177, 235,195, 211, 181, 224,199, 213, 184, 226, 210, 198, 184, 202, 190, 217, 186, 199, 213, 191, 206, 200]

var B = [327,327,327,327,327,327,327,327,327,324,324,324,324,324,324,324,324, 319,319,319,319,319,319,319, 314, 314,314,314,314,314, 310,310,310,310,310, 305,305,305,305,305, 303,303,303,303, 298,298,298,298, 294,294,294, 290,290,290, 285,285,285, 280,280, 275];

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

function draw() {

    background(255);
    
    //putting time functions in variables
    var S = second();
    var M = minute();
    var H = hour();

    //values to shake increase as seconds get higher as it nears one minute
    var mShake = map(S, 0, 60, 0, 1.5);
    var shake = random(-mShake, mShake)

    //map for cloak to expand according to minute value
    expandX = map(M, 0, 60, 0, 100 )
    expandY = map(M, 0, 60, 0, 30)

    //map for cloak to change brightness/darkness according to hour of the day
    if (H >= 0 & H <= 12){
    hourMap = map(H, 0, 12, 0, 255)
    }

    if (H >= 12 && H <= 24){
    hourMap = map(H, 12, 24, 255, 0)
    }

    //cloak
    beginShape();
    fill(hourMap);
    noStroke();
    curveVertex(91-expandX, 400);
    curveVertex(91-expandX, 400);
    curveVertex(111-expandX*0.8, 217);
    curveVertex(129-expandX*0.65, 96);
    curveVertex(178-expandX*0.4, 57-expandY);
    curveVertex(218+expandX*0.4, 59-expandY);
    curveVertex(270+expandX*0.65, 96);
    curveVertex(286+expandX*0.8, 217);
    curveVertex(309+expandX, 400);
    curveVertex(309+expandX, 400);
    endShape();

    //face
    push();
    beginShape();
    fill(221, 231, 229)
    noStroke();
    curveVertex(136, 112);
    curveVertex(136, 112);
    curveVertex(157, 83);
    curveVertex(190, 69);
    curveVertex(239, 85);
    curveVertex(259, 131);
    curveVertex(241, 254);
    curveVertex(182, 275);
    curveVertex(146, 237);
    curveVertex(131, 167);
    curveVertex(136, 112);
    curveVertex(136, 112);
    endShape();
    pop();

    //inner face
    beginShape();
    fill(255)
    noStroke();
    curveVertex(196, 80);
    curveVertex(196, 80);
    curveVertex(228, 92);
    curveVertex(249, 139);
    curveVertex(244, 203);
    curveVertex(235, 240);
    curveVertex(226, 256);
    curveVertex(202, 272);
    curveVertex(174, 270);
    curveVertex(150, 240);
    curveVertex(139, 205);
    curveVertex(135, 161);
    curveVertex(139, 120);
    curveVertex(161, 85);
    curveVertex(196, 80);
    curveVertex(196, 80);
    endShape();

    //right eyebrow
    beginShape();
    fill(158, 133, 189);
    noStroke();
    curveVertex(160, 105);
    curveVertex(160, 105);
    curveVertex(165, 105)
    curveVertex(168, 118);
    curveVertex(170, 129)
    curveVertex(168, 137);
    curveVertex(161, 140);
    curveVertex(153, 138);
    curveVertex(150, 133)
    curveVertex(151, 125);
    curveVertex(154, 117);
    curveVertex(160, 105);
    curveVertex(160, 105);
    endShape();


    //left eyebrow
    beginShape();
    fill(158, 133, 189);
    noStroke();
    curveVertex(230, 105);
    curveVertex(230, 105);
    curveVertex(237, 112)
    curveVertex(245, 131);
    curveVertex(242, 139)
    curveVertex(236, 141);
    curveVertex(230, 140);
    curveVertex(225, 136);
    curveVertex(225, 123)
    curveVertex(226, 113);
    curveVertex(230, 105);
    curveVertex(230, 105);
    endShape();

    //left eye
    fill(0);
    beginShape();
    push();
    noStroke();
    frameRate(1);
    curveVertex(146+shake, 152);
    curveVertex(146+shake, 152);
    curveVertex(152+shake, 149);
    curveVertex(163+shake, 147);
    curveVertex(172+shake, 151);
    curveVertex(175+shake, 157);
    curveVertex(170+shake, 162);
    curveVertex(159+shake, 164);
    curveVertex(145+shake, 159);
    curveVertex(146+shake, 152);
    curveVertex(146+shake, 152);
    pop();
    endShape();

    //right eye

    beginShape();
    fill(0);
    frameRate(1);
    noStroke();
    curveVertex(233+shake, 147);
    curveVertex(233, 147+shake);
    curveVertex(249+shake, 149);
    curveVertex(254, 159+shake);
    curveVertex(244+shake, 164);
    curveVertex(232, 164+shake);
    curveVertex(224+shake, 159);
    curveVertex(222, 154+shake);
    curveVertex(225+shake, 150);
    curveVertex(233, 147+shake);
    curveVertex(233+shake, 147);
    endShape();

    //left under eye
    beginShape();
    fill(131);
    noStroke();
    curveVertex(161, 170);
    curveVertex(161, 170);
    curveVertex(171, 168);
    curveVertex(172, 168);
    curveVertex(164, 175);
    curveVertex(149, 172);
    curveVertex(148, 170);
    curveVertex(161, 170);
    curveVertex(161, 170);
    endShape();

    //right under eye
    beginShape();
    fill(131);
    noStroke();
    curveVertex(235, 169);
    curveVertex(235, 169);
    curveVertex(246, 169);
    curveVertex(247, 171);
    curveVertex(235, 174);
    curveVertex(227, 173);
    curveVertex(223, 170);
    curveVertex(225, 168);
    curveVertex(235, 169);
    curveVertex(235, 169);
    endShape();

    //left cheek
    beginShape();
    fill(158, 133, 189);
    noStroke();
    curveVertex(151, 188);
    curveVertex(151, 188);
    curveVertex(153, 182)
    curveVertex(157, 180);
    curveVertex(169, 185)
    curveVertex(170, 210);
    curveVertex(170, 218);
    curveVertex(168, 226);
    curveVertex(165, 226);
    curveVertex(158, 214);
    curveVertex(151, 188);
    curveVertex(151, 188);

    endShape();

    //right cheek
    beginShape();
    fill(158, 133, 189);
    noStroke();
    curveVertex(242, 190);
    curveVertex(242, 190);
    curveVertex(239, 207)
    curveVertex(231, 226);
    curveVertex(226, 224)
    curveVertex(224, 190);
    curveVertex(230, 180);
    curveVertex(238, 181);
    curveVertex(242, 190);
    curveVertex(242, 190);
    endShape();

    //chin mark

    beginShape();
    fill(158, 133, 189);
    noStroke();
    curveVertex(198, 256);
    curveVertex(198, 256);
    curveVertex(208, 255)
    curveVertex(210, 256);
    curveVertex(199, 263)
    curveVertex(189, 261);
    curveVertex(185, 257);
    curveVertex(186, 255);
    curveVertex(198, 256);
    curveVertex(198, 256);
    endShape();

    //heart comes up near end of minute
    if (S>57){
        push();
        heart(0,0);
        heart(77, 0);
        pop();
    }

    //mouth eating
    var mouthExpandx= 0;
    var mouthExpandy= 0;

    //mouth gets wider at end of minute
    if (55 < S & S < 60){
    mouthExpandx = map(S, 50, 57, 0, 10);
    mouthExpandy = map(S, 50, 57, 0, 50);
    }
    
    //mouth shuts at end of minute
    if (S > 59){
    mouthExpandx = map(S, 58, 60, 10, 0);
    mouthExpandy = map(S, 58, 60, 50, 0);
    }

    //mouth
    fill(0);
    beginShape();
    frameRate(10);
    noStroke();
    curveVertex(197+shake, 237+shake);
    curveVertex(197, 237+shake);
    curveVertex(211+shake, 236)
    curveVertex(218, 239+shake);
    curveVertex(220+shake, 244+shake)
    curveVertex(214+mouthExpandx, 249+shake+mouthExpandy);
    curveVertex(190+shake, 250+mouthExpandy);
    curveVertex(179+shake-mouthExpandx, 248+shake+mouthExpandy);
    curveVertex(175, 244+shake);
    curveVertex(177+shake, 239+shake);
    curveVertex(185, 236+shake);    
    curveVertex(197+shake, 237+shake);
    curveVertex(197, 237+shake);
    endShape();


    //bowl top
    fill(120, 18, 20)
    arc(198, 329, 186, 54, 0, PI)

    //bowl bottom
    fill(239, 59, 57)
    ellipse(198, 329, 184, 5)


    //calling array values for gold coins every second plus jitter
    for (var i = 0; i < S; i++){
        frameRate(20);
        var shakeX = A[i] + random(-0.5,0.5)
        var shakeY = B[i] + random(-0.5 ,0.5)
        coin(shakeX, shakeY);
    }

}

//gold coin
function coin(x, y) {
    push();
    translate(x, y);
    fill(226, 156, 37);
    ellipse(0, 0, 22, 8);
    fill(252, 207, 117);
    ellipse(0, 0, 19, 5);
    fill(255, 232, 192);
    ellipse(0, -1, 10, 2);
    pop();
}

 //heart
 function heart(x,y) {
    beginShape();
    noStroke();
    translate(x,y);
    fill(255, 0 ,0);
    curveVertex(160, 161)
    curveVertex(160, 161)
    curveVertex(157, 157)
    curveVertex(155, 152)
    curveVertex(158, 151)
    curveVertex(159, 154)
    curveVertex(160, 152)
    curveVertex(162, 150)
    curveVertex(165, 151)
    curveVertex(163, 157)
    curveVertex(160, 161)
    curveVertex(160, 161)
    endShape();
}

I wanted to create a clock based on a toy that is based on a character from a Ghibli movie. The seconds are the most apparent from the coins, the size of the cloak follows the minute, and the color of the cloak is based on the hour. I wasn’t too concerned with being able to tell time. Overall this was satisfying to make even though there are issues with the smoothness of animation.