Processing clocks

2015-08-05 Processing clock

by schrodingers

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.13/processing.min.js"></script>
<canvas></canvas>

CSS

</style> <script type="text/javascript"> window.addEventListener('load', function() {
    var scripts=document.body.getElementsByTagName('script');
    var canvases=document.body.getElementsByTagName('canvas');
    new Processing(canvases[0], scripts[0].text);
}
, false);
 // Here prevent javascript in body from throwing error </script> <style>

JavaScript

/* 
 title: Clocks - futurelearn w2_04
 date: 2015-08-05
 */
color[] pastel = {
  #0d60ae, #238acc, #fad31c, #fdb717, #faaa21, #f1753f, #ed5724, #f04639, #ea2830, #bc2326, #8c0c03, #e5185d, #f384ae, #fac6d2, #b296c7, #7b67ae, #5f3577, #c3def1, #55beed, #31a8e0, #ffe617, #143b86, #001b4a, #7dcdc2, #00a8a8, #12959f, #c1d18a, #799155, #80bc42, #4aa03f, #16884a, #003f2e, #381e11, #c05c20, #bf9b6b, #e9d4a7, #e7e6e1, #cfd0d2, #8a8b8f, #778590, #474d4d, #98a2ab, #9f8759, #8c6641, #f7f7f7, #e39b7d, #bcbfa3, #89b399, #6e6460
};

void setup() {
  size(600, 600);
  smooth();
  noLoop(); // execute draw() once
  ellipseMode(CENTER); //
  noStroke();
}

void draw() {
  int num = 5;
  int margin = 5; // margin between the edges of screen and items-grid
  int gap = 5; // gap between items
  // calculate the cellsize for given num of squares and gap between them
  float cellsize = (width - (2 * margin) - gap * (num - 1)) / num; // diam of figure
  int circleCount = 0; //counter
  //fill(240, 10); // background
  //rect(0, 0, width, height); // background
  for (int i = 0; i < num; i++) { //col
    for (int j = 0; j < num; j++) { //row
      ++circleCount;
      // compute position for each figure
      float tx = margin + cellsize/2 + (cellsize + gap) * j;
       float ty = margin + cellsize/2 + (cellsize + gap) * i;
      
      // draw figure
      hands(tx,ty,cellsize, circleCount * TWO_PI * millis());
//        ellipse(tx, ty, cellsize, cellsize);
    }
  }
}
      
      void hands(float x, float y, float size, float angle){
     float tempX = x + size/2 * cos(angle);
     float tempY = y + size/2 * sin(angle);
     noStroke();
      ellipse(tempX, tempY, 100, 100);
      fill(120);
      line(x, y, tempX, tempY);
     fill(100);
          
      ellipse(tempX,tempY,10,10);
      }
void keyPressed() {
  // save your drawing when you press keyboard 's'
  if (key == 's') {
    saveFrame("clocks-###.png");
    println("Your image saved");
  }

  // erase your drawing when you...