processing.js - simple grid test

gistfile1.js

"use strict";

var H_PADDING = 10;
var V_PADDING = 10;
var ROWS = 20, COLUMNS = 20;


function app(processing) {
    var midX, midY, colWidth, rowHeight;
    var colors = {
        white: processing.color(255, 255, 255),
        black: processing.color(0, 0, 0),
        gray: processing.color(200, 200, 200),
        red: processing.color(255, 0, 0),
        green: processing.color(0, 255, 0),
        blue: processing.color(0, 0, 255),
    };
    
    var drawGrid = function() {
        processing.fill(255);
        for (var i = 0; i <= ROWS; i++) {
            processing.line(H_PADDING, 
                            rowHeight * i + V_PADDING,
                            processing.width - H_PADDING, 
                            rowHeight * i + V_PADDING);
        }
        for (var i = 0; i <= COLUMNS; i++) {
            processing.line(colWidth * i + H_PADDING,
                            V_PADDING,
                            colWidth * i + H_PADDING,
                            processing.height - V_PADDING);
        }
    };
    
    var xyToGrid = function(x, y) {
        return [x * colWidth + H_PADDING,
                y * rowHeight + V_PADDING];
    };
    
    var boxAt = function(x, y, color) {
        var coord = xyToGrid(x, y);
        processing.fill(color);
        processing.rect(coord[0], coord[1], colWidth, rowHeight);
    };
    
    var randInt = function(n) {
        return Math.floor(Math.random() * n);
    };
    
    processing.setup = function() {
        processing.frameRate(2);
        processing.size(320, 320);
        
        midX = processing.width / 2;
        midY = processing.height / 2;
        colWidth = (processing.width - H_PADDING * 2) / COLUMNS;
        rowHeight = (processing.height - V_PADDING * 2) / ROWS;
    }
    
    processing.draw = function() {
        processing.background(colors.gray);
        drawGrid();
        
        var copts = [colors.red, colors.green, colors.blue];
        for (var i = 0; i < 50; i++) {
            boxAt(randInt(COLUMNS), randInt(ROWS),
                  copts[randInt(copts.length)]);
        }
    }
}

var $canvas = document.getElementById("primary-canvas");
var $o = new Processing($canvas, app);