WIP LCD System

main.js

var canvas = document.getElementById('canvas');
window.reqFrame = window.webkitRequestAnimationFrame || window.requestAnimationFrame;

/* System */
var System = {
    BG_COLOR: '#fafafa',
    PX_COLOR_100: '#222222',
    PX_COLOR_75: '#656565',
    PX_COLOR_50: '#999999',
    PX_COLOR_25: '#cccccc',
    PX_COLOR_OFF: '#f5f5f5',
    
    PX_COLORS: [],
    
    PX_SCALE: 4,
    PX_MARGIN: 1,
    
    ctx: null,
    
    Initialize: function(canvas) {
        var canvasWidth = System.Screen.Width * (System.PX_SCALE + (System.PX_MARGIN * 2));
        var canvasHeight = System.Screen.Height * (System.PX_SCALE + (System.PX_MARGIN * 2));
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;
        System.ctx = canvas.getContext('2d');
        
        System.PX_COLORS.push(System.PX_COLOR_OFF);
        System.PX_COLORS.push(System.PX_COLOR_100);
        System.PX_COLORS.push(System.PX_COLOR_75);
        System.PX_COLORS.push(System.PX_COLOR_50);
        System.PX_COLORS.push(System.PX_COLOR_25);
        
        System.ctx.fillStyle = System.BG_COLOR;
        System.ctx.fillRect(0, 0, canvasWidth, canvasHeight);
        
        var margin = 1;
        
        for (var x = 0; x < System.Screen.Width; x++) {
            System.Video.Buffer[x] = {};
            
            for (var y = 0; y < System.Screen.Height; y++) {
                //System.ctx.fillStyle = System.PX_COLOR_OFF;
                //var pos = System.getPosition(x, y);
                //System.ctx.fillRect(pos.x, pos.y, 4, 4);
                System.Video.Buffer[x][y] = 0;
            }
        }
    },
    
    getPosition: function(x, y) {
        var margin = 1;
        var square = 4;
        return { x: ((margin * 2) * x) + margin + (square * x),
                 y: ((margin * 2) * y) + margin + (square * y)};
    },
    
    Screen: {
        
        Width: 160,
        Height: 144
    },
    
    Video: {
        Buffer: {}
    },
        
    Drawing: {
        drawLine: function(sx, sy, w, h) {
            for (var i = sx; i < sx+w; i++) {
            }
        },
            
        drawBuffer: function() {
            for (var x = 0; x < System.Screen.Width; x++) {
                for (var y = 0; y < System.Screen.Height; y++) {
                    System.ctx.fillStyle = System.PX_COLORS[System.Video.Buffer[x][y]];
                    var pos = System.getPosition(x, y);
                    System.ctx.fillRect(pos.x, pos.y, 4, 4);
                }
            }
        }
    }
};

System.Initialize(canvas);

reqFrame(nextFrame);

var ball = {x: 0, y: 0};

function nextFrame() {
    System.Video.Buffer[ball.x][ball.y] = 0;
    ball.x += 1;
    ball.y += 1;
    if (ball.x >= System.Screen.Width) {
        ball.x = 0;
    }
    if (ball.y >= System.Screen.Height) {
        ball.y = 0;
    }
    System.Video.Buffer[ball.x][ball.y] = 2;
    System.Drawing.drawBuffer();
    reqFrame(nextFrame);
}