diff --git a/examples/html/random-color-pixel-strip b/examples/html/random-color-pixel-strip
new file mode 100644
index 0000000000000000000000000000000000000000..7de1b7c80dae3990e3cacad8acc4c622beb4d8f8
--- /dev/null
+++ b/examples/html/random-color-pixel-strip
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
+<style type="text/css">
+
+ body {
+ background: #222;
+ color: #ddd;
+ font: 15px verdana;
+ }
+
+ #connectionStatus {
+ font-weight: bold;
+ font-size: 20px;
+ }
+
+ label {
+ display: block;
+ width: 100px;
+ margin: 10px 0 0 0;
+ }
+
+ input {
+ width: 400px;
+ height: 25px;
+ margin: 10px 20px;
+ }
+
+ span.value {
+ font: 20px monospace;
+ }
+
+</style>
+<script type="text/javascript">
+
+ /*
+ * Experiment with random Color Queue
+ */
+
+ $(function() {
+
+ function hexToRgb(hex) {
+ // http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
+ // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+ var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+ hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+ return r + r + g + g + b + b;
+ });
+
+ var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+ return result ? {
+ r: parseInt(result[1], 16),
+ g: parseInt(result[2], 16),
+ b: parseInt(result[3], 16)
+ } : null;
+ }
+
+ // Scrape values from our form
+ var color = {r:0,b:0,g:0};
+
+ // Set all pixels to a given color
+ function writeFrame(red, green, blue) {
+ var leds = 60;
+ var packet = new Uint8ClampedArray(4 + leds * 3);
+ // console.log(packet);
+ 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;
+
+ //http://www.paulirish.com/2009/random-hex-color-code-snippets/
+ var myRandColor = '#'+Math.floor(Math.random()*16777215).toString(16);
+ var myHtmlText = "<div style='color:" + myRandColor + "'>"+ myRandColor + "</div>";
+ var myObj = hexToRgb(myRandColor);
+ $("#colorQueue").append(myHtmlText);
+
+
+ // Sample the center pixel of each LED
+ for (var led = 0; led < leds; led++) {
+
+ //protection against null from random color.
+ myObj === null ? myObj = {r:0,b:0,g:0} : myObj;
+
+ packet[dest++] = myObj.r;
+ packet[dest++] = myObj.g;
+ packet[dest++] = myObj.b;
+ }
+ socket.send(packet.buffer);
+ }
+
+ // Animation parameters
+ var lastTime = 0;
+ var phase = 0;
+
+ // Animation loop
+ var animate = function() {
+
+ // Get time delta
+
+ writeFrame(
+ color.r,
+ color.g,
+ color.b);
+
+ setTimeout(animate, 3000);
+ }
+
+ // 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>
+<form>
+
+ <div id="connectionStatus"></div>
+
+ <h3> Next Color: </h3>
+ <div id="colorQueue"></div>
+
+ <br/>
+
+</form>
+</body>
+</html>