Pacman Clock

For this assignment, I thought it would be cool to build off last week’s wallpaper and make my Pacman a dynamic clock. It is supposed to be read left to right, then down. So the two horizontal Pacmans are the hour and minute (top and bottom) and the vertical Pacman is the seconds.

clock_asu

// Your name: Ashley Su
// Your andrew ID: ashleysu
// Your section (C):  

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

function dotGrid() {
  var PADDING = 20;
  var ROWS =19;
  var COLUMNS =13;
  var CELL_COLOR = 'Blue'


  for (var col=0;col<COLUMNS;col++) {
    for (var row=0;row<ROWS;row++) {
      var left = PADDING+(col*34);
      var top = PADDING+(row*34.3);
      fill(random(255),random(255),random(255))
      circle(left,top,10);
    }
  }
}

function blueBaracades() {

  var PADDING = 40;
  var ROWS = 4;
  var COLUMNS = 3;
  var CELL_SIZE = 140;
  var CELL_COLOR = 'Blue'


  fill(0);
  stroke('Blue')
  strokeWeight(3);


  for (var col=0;col<COLUMNS;col++) {
    for (var row=0;row<ROWS;row++) {
      var left = PADDING+(col*CELL_SIZE);
      var top = PADDING+(row*CELL_SIZE);
      var size = CELL_SIZE - 50;
      rect(left,top,size,size);
    }
  }
}

function pacmanH(h){
  
  fill('yellow');
  noStroke();

    push()                                                //hour
    translate(10,height/3.2);
    rotate(radians(310));
    arc(h*10,h*10,35,35,radians(80),radians(35)/2);        // increments by *10 pixels to the right
    pop();
}

function pacmanM(m){

  fill('yellow');
  noStroke();

    push();                                              // minute
    translate(width,height/1.33);
    rotate(radians(140));
    arc(m*4,m*4,35,35,radians(80),radians(20)/2);        // increments by *4 pixels to the left
    pop();
}

function pacmanS(s){

  fill('yellow');
  noStroke();

    push();                                                // second 
    translate(2*width/3-7,height/26);
    rotate(radians(45));
    arc(s*6,s*6,35,35,radians(80),radians(20)/2);           // increments by *6 pixels down
    pop();

}



function draw(){
  background('Black');
  dotGrid();
  blueBaracades();

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

  pacmanH(h);
  pacmanM(m);
  pacmanS(s);


}