From Binary to Color

Each pixel is defined by 4 values, red, green, blue and alpha. Each of these values is defined by a byte of data, so 8 bits. This graphic interface shows each bit as a black or color square, and the color is the color determined by all the bits together. Effectively, this data presents its own color. Download the app and try for yourself. Toggle A for auto mode, n for new random color, and click on any square to flip it and see the changed color. Press S to save a frame, it will be saved to your hard disk in the /data directory.

Note that the first byte is red, the second byte is green, and the third byte is blue. The fourth of course is alpha.

The code is Version 03 is linked here. To run the code, download Processing.org

let squareSize = 100;
let rows = 4;
let cols = 8;
let squares = [];
let redFactor = 128;
let greenFactor = 128;
let blueFactor = 128;
let alphaFactor = 128;
let auto = false;

function setup() {
    createCanvas(cols * squareSize, rows * squareSize);
    initializeGrid();
    frameRate(30);
}

function draw() {
    // Draw background
    background(0);
    
    // Draw color overlay with alpha
    fill(redFactor, greenFactor, blueFactor, alphaFactor);
    rect(0, 0, width, height);
    
    // Draw circles
    for (let i = 0; i < rows; i++) {
        for (let j = 0; j < cols; j++) {
            let circleColor = squares[i][j] == 0 ? color(0) : color(255);
            fill(circleColor);
            noStroke();
            ellipse(j * squareSize + squareSize / 2, i * squareSize + squareSize / 2, squareSize / 3, squareSize / 3);
        }
    }
    
    if (auto) {
        generateRandomSquares();
        setColorFactors();
        frameRate(1);
    } else {
        frameRate(30);
    }
}

function initializeGrid() {
    for (let i = 0; i < rows; i++) {
        squares[i] = [];
        for (let j = 0; j < cols; j++) {
            squares[i][j] = 1; // Start with white circles
        }
    }
    setColorFactors();
}

function mousePressed() {
    let colIndex = Math.floor(mouseX / squareSize);
    let rowIndex = Math.floor(mouseY / squareSize);
    
    if (colIndex >= 0 && colIndex < cols && rowIndex >= 0 && rowIndex < rows) {
        squares[rowIndex][colIndex] = 1 - squares[rowIndex][colIndex];
        setColorFactors();
    }
}

function keyPressed() {
    if (key === 'n' || key === 'N') {
        generateRandomSquares();
        setColorFactors();
    } else if (key === 'a' || key === 'A') {
        auto = !auto;
    } else if (key === 's' || key === 'S') {
        saveCanvas('colors', 'png');
    }
}

function generateRandomSquares() {
    for (let i = 0; i < rows; i++) {
        for (let j = 0; j < cols; j++) {
            squares[i][j] = Math.floor(random(2));
        }
    }
}

function setColorFactors() {
    let redString = squares[0].join('');
    let greenString = squares[1].join('');
    let blueString = squares[2].join('');
    let alphaString = squares[3].join('');
    
    redFactor = parseInt(redString, 2);
    greenFactor = parseInt(greenString, 2);
    blueFactor = parseInt(blueString, 2);
    alphaFactor = parseInt(alphaString, 2);
}

Code Blog