// Simple way to attach js code to the canvas is by using a function

function sketchClock(processing)
{
    // Override draw function, by default it will be called 60 times per second
    processing.draw = function ()
    {


        // determine center and max clock arm length
        var centerX = processing.width / 2,
            centerY = processing.height / 2;
        var maxArmLength = Math.min(centerX, centerY);

        processing.size(100, 100);
        processing.stroke(0);
        processing.smooth();
        processing.background(255);

        processing.noStroke();


        function drawArm(position, lengthScale, weight)
        {
            processing.fill(255);
            processing.ellipse(50, 50, 95, 95);
            processing.stroke(0);
            processing.smooth();

            var now = new Date();
            //Hours
            position = (now.getHours() % 12 + now.getMinutes() / 60) / 12;
            lengthScale = 0.5;
            weight = 5;
            processing.strokeWeight(weight);
            processing.line(centerX, centerY, centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength, centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength);

            //Minutes
            position = (now.getMinutes() + now.getSeconds() / 60) / 60;
            lengthScale = 0.80;
            weight = 3;
            processing.strokeWeight(weight);
            processing.line(centerX, centerY, centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength, centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength);

            //Seconds
            position = now.getSeconds() / 60;
            lengthScale = 0.90;
            weight = 1;
            processing.strokeWeight(weight);
            processing.line(centerX, centerY, centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength, centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength);
        }

        // erase background
        processing.background(0);
        drawArm();
    };
}