Spidey Wall Playground

Test your animations for the Spidey Wall: http://robdobson.com/2015/07/spidey-wall/

HTML

<script src="https://13a61f84be5375f31efe94bd8a5d879e4a5a8385-www.googledrive.com/host/0B6FSCZaRapc1QU5fZC0wd3dGNWM/SpideyGeometry.js"></script>
<canvas id="ledCanvas"></canvas>

CSS

body {
    background-color: #888888;
    margin:0;
}

JavaScript

// LED size in pixels
var ledRad = 4;
var ledDiameter = ledRad * 2;

// Scan all the LEDs and find the range of values to expect
var minX = Number.MAX_VALUE;
var maxX = Number.MIN_VALUE;
var minY = Number.MAX_VALUE;
var maxY = Number.MIN_VALUE;
var maxLedIndex = Number.MIN_VALUE;
var maxPadIndex = Number.MIN_VALUE;
for (var i = 0; i < SpideyGeometry.leds.length; ++i) {
    var led = SpideyGeometry.leds[i];
    if (led.ledIdx >= 0) {
        minX = Math.min(led.x, minX);
        minY = Math.min(led.y, minY);
        maxX = Math.max(led.x, maxX);
        maxY = Math.max(led.y, maxY);
        maxLedIndex = Math.max(maxLedIndex, led.ledIdx);
        maxPadIndex = Math.max(maxPadIndex, led.padIdx);
    }
}
var rangeX = maxX - minX;
var rangeY = maxY - minY;

// The canvas where the LEDs will be drawn
var canvas = document.getElementById("ledCanvas");
var ctx = canvas.getContext("2d");

// Resize the canvas to fit the LEDs
canvas.width = maxX + ledDiameter;
canvas.height = maxY + ledDiameter;

// Start animation
window.requestAnimationFrame(renderLoop);

// Animation loop (called for every frame)
function renderLoop(timestamp) {
    try {
        // Clear the canvas ready for the new frame
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // For every LED
        for (var i = 0; i < SpideyGeometry.leds.length; ++i) {
            var led = SpideyGeometry.leds[i];
            if (led.ledIdx >= 0) {
                // Normalized (between 0 and 1) versions of the LED properties
                var normX = (led.x - minX) / rangeX;
                var normY = (led.y - minY) / rangeY;
                var normLedIndex = led.ledIdx / maxLedIndex;
                var normPadIndex = led.padIdx / maxPadIndex;
                
                /*                
                This is where the LED color is controlled.
                It can be based on position, LED index, pad index,
                or the timestamp (in milliseconds) if you want it
               ...