Draws a clock. Outside radius arcs with seconds

  Circle goes:  

                3*PI/2 at the top

                      |

  PI on the left    - o -       0 on the right

                      |

                PI/2 at the bottom

Program works by rotating the drawing surface proportional to the angle

of each hand, then drawing the line for the hand.

​

created 22 Aug 2012

re-written for P5.js 1 May 2016

by Tom Igoe

*/

​

// parameters of the clock:

var clockRadius = 200;

var hourHand = 60;

var minuteHand = 90;

var secondHand = minuteHand;

var handStart = -10;

​

var serial; // variable to hold an instance of the serialport library

var portName = 'COM12';  // fill in your serial port name here

var inData;                             // for incoming serial data

​

function setup() {

  // set the general parameters for drawing:

  createCanvas(windowWidth, windowHeight);

  smooth();

  strokeWeight(2);

  strokeCap(ROUND);

    sserial = new p5.SerialPort();       // make a new instance of the serialport library

  serial.on('list', printList);  // set a callback function for the serialport list event

  serial.on('connected', serverConnected); // callback for connecting to the server

  serial.on('open', portOpen);        // callback for the port opening

  serial.on('data', serialEvent);     // callback for when new data arrives

  serial.on('error', serialError);    // callback for errors

  serial.on('close', portClose);      // callback for the port closing

  serial.list();                      // list the serial ports

  serial.open('COM12');              // open a serial port

}

​

// get the list of ports:

function printList(portList) {

 // portList is an array of serial port names

 for (var i = 0; i < portList.length; i++) {

 // Display the list the console:

 println(i + " " + portList[i]);

 }

}

​

function serverConnected() {

  println('connected to server.');

}

function portOpen() {

  println('the serial port opened.')

}

function serialEvent() {

 inData = Number(serial.read());

}

function serialError(err) {

  println('Something went wrong with the serial port. ' + err);

}

function portClose() {

  println('The serial port closed.');

}

​

function draw() {

​

        background(255); // white background

  translate(width / 2, height / 2); // move to the center of the window

  rotate(3 * PI / 2); // rotate drawing 270 degrees to get 0 at the top

​

  // draw second hand:

  drawHand(second(), '#ccc', secondHand, 60);

  // draw minute hand:

  drawHand(minute(), '#ace', minuteHand, 60);

  // draw hour hand:

  drawHand(hour(), '#ace', hourHand, 12);

​

  // draw arc from 0 to current second:

  push();

  stroke("#5597cf"); // set arc color

  noFill(); // no fill for the arc

  arc(0, 0, clockRadius, clockRadius, 0, second() * PI / 30);

  pop();

​

}

​

// this function draws a hand, given the unit value, hand color, length,

// and how many divisions in a circle (e.g. minute: 60, hour: 12):

​

function drawHand(unitValue, handColor, handLength, divisions) {

 if (inData>100) {

    print("we in");

     push();

  rotate(unitValue * 2 * PI / divisions); // rotate to draw hand

  stroke(handColor); // set line color

  line(handStart, 0, handLength + handStart, 0);

  pop();

            }

        }