/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>

  <script>


      var startTime = (new Date().getTime());

    // Set all pixels to a given color
        function writeFrame(red, green, blue) {
            var leds = 12;
            var packet = new Uint8ClampedArray(4 + leds * 3);

            if (socket.readyState != 1 /* OPEN */) {
                // The server connection isn't open. Nothing to do.
                return;
            }

            if (socket.bufferedAmount > packet.length) {
                // The network is lagging, and we still haven't sent the previous frame.
                // Don't flood the network, it will just make us laggy.
                // If fcserver is running on the same computer, it should always be able
                // to keep up with the frames we send, so we shouldn't reach this point.
                return;
            }

                 // Dest position in our packet. Start right after the header.
            var dest = 4;

            var thisTime = (new Date().getTime()); //milliseconds
            var seconds = thisTime * 0.001;
            var minutes = seconds / 60.0;
            var hours = minutes / 60.0;
            var elapsed = (thisTime - startTime);

            var secondHand = Math.round(seconds) % leds;
            var minuteHand = Math.round(minutes) % leds;
            var hourHand = Math.round(hours) % leds;
            // Sample the center pixel of each LED
            for (var led = 0; led < leds; led++) {

              var angle = (2* Math.PI * led) / leds;

              var redVal, greenVal, blueVal;

              if(led == secondHand) {
                redVal = 255;
                greenVal = 0;
                blueVal = 0;
              }
              else if(led == minuteHand) {
                redVal = 0;
                greenVal = 255;
                blueVal = 0;
              }
              else if(led == hourHand) {
                redVal = 0;
                greenVal = 0;
                blueVal = 255;
              }
              else {
                redVal = 0;
                greenVal = 0;
                blueVal = 0;
              }
              //var br = Math.sin(angle + elapsed*4.0)+0.8;

                packet[dest++] = redVal;
                packet[dest++] = greenVal;
                packet[dest++] = blueVal;
            }
            socket.send(packet.buffer);
        }


    var red = Math.random(0, 255);
    var green = Math.random(0, 255);
    var blue = Math.random(0, 255);

// Animation loop
        var animate = function() {
            writeFrame(red, green, blue);
            setTimeout(animate, 1); //milliseconds
        }


      // Connect to a Fadecandy server running on the same computer, on the default port
        var socket = new WebSocket('ws://localhost:7890');

        // Put some connection status text in the corner of the screen
        $('#connectionStatus').text('Connecting to fcserver...');
        socket.onclose = function(event) {
            $('#connectionStatus').text('Not connected to fcserver');
        }
        socket.onopen = function(event) {
            $('#connectionStatus').text('Connected');
            animate();
        }

  </script>


</head>
<body>


</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://code.jquery.com/jquery-git.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>

	<script>


	var startTime = (new Date().getTime());

	// Set all pixels to a given color
	function writeFrame(red, green, blue) {
	var leds = 12;
	var packet = new Uint8ClampedArray(4 + leds * 3);

	if (socket.readyState != 1 /* OPEN */) {
	// The server connection isn't open. Nothing to do.
	return;
	}

	if (socket.bufferedAmount > packet.length) {
	// The network is lagging, and we still haven't sent the previous frame.
	// Don't flood the network, it will just make us laggy.
	// If fcserver is running on the same computer, it should always be able
	// to keep up with the frames we send, so we shouldn't reach this point.
	return;
	}

	// Dest position in our packet. Start right after the header.
	var dest = 4;

	var thisTime = (new Date().getTime()); //milliseconds
	var seconds = thisTime * 0.001;
	var minutes = seconds / 60.0;
	var hours = minutes / 60.0;
	var elapsed = (thisTime - startTime);

	var secondHand = Math.round(seconds) % leds;
	var minuteHand = Math.round(minutes) % leds;
	var hourHand = Math.round(hours) % leds;
	// Sample the center pixel of each LED
	for (var led = 0; led < leds; led++) {

	var angle = (2* Math.PI * led) / leds;

	var redVal, greenVal, blueVal;

	if(led == secondHand) {
	redVal = 255;
	greenVal = 0;
	blueVal = 0;
	}
	else if(led == minuteHand) {
	redVal = 0;
	greenVal = 255;
	blueVal = 0;
	}
	else if(led == hourHand) {
	redVal = 0;
	greenVal = 0;
	blueVal = 255;
	}
	else {
	redVal = 0;
	greenVal = 0;
	blueVal = 0;
	}
	//var br = Math.sin(angle + elapsed*4.0)+0.8;

	packet[dest++] = redVal;
	packet[dest++] = greenVal;
	packet[dest++] = blueVal;
	}
	socket.send(packet.buffer);
	}


	var red = Math.random(0, 255);
	var green = Math.random(0, 255);
	var blue = Math.random(0, 255);

	// Animation loop
	var animate = function() {
	writeFrame(red, green, blue);
	setTimeout(animate, 1); //milliseconds
	}




	// Connect to a Fadecandy server running on the same computer, on the default port
	var socket = new WebSocket('ws://localhost:7890');

	// Put some connection status text in the corner of the screen
	$('#connectionStatus').text('Connecting to fcserver...');
	socket.onclose = function(event) {
	$('#connectionStatus').text('Not connected to fcserver');
	}
	socket.onopen = function(event) {
	$('#connectionStatus').text('Connected');
	animate();
	}

	</script>


	</head>
	<body>




	</body>
	</html>