JSFiddle - React, Tailwind, and code Playground

by nathan

HTML

<canvas id="grid" width="1024" height="1024"></canvas>

JavaScript

var centrePointX,
    centrePointY,
    grid = [],
    i,
    recursion = 0,
    gridSize = 1024,
    squareSize = gridSize,
    sigma = 127;

for (i = 0; i < gridSize; i++) {
    grid[i] = [];
    grid[i].length = gridSize;
}

grid[0][0] = 127;

function getHeight(v1, v2, v3, v4) {
    var rand = Math.round(
        (v1 + v2 + v3 + v4) / 4 +
        (Math.random() - 0.5) *
        sigma
        //Math.pow(2, -0.001*(squareSize / gridSize - 2)) * 255
    );
    if (rand > 255) {
        return 255;
    }
    if (rand < 0) {
        return 0;
    }
    return rand;
}

while (squareSize % 2 === 0) {
    // square phase
    yPos = 0;
    while (yPos < gridSize) {
        xPos = 0;
        while (xPos < gridSize) {
            rightSide = (xPos + squareSize) % gridSize;
            bottomSide = (rightSide + squareSize) % gridSize;
        
            centrePointX = xPos + squareSize / 2;
            centrePointY = yPos + squareSize / 2;
        
            grid[centrePointX][centrePointY] = getHeight(
                grid[xPos][yPos],
                grid[xPos][bottomSide],
                grid[rightSide][bottomSide],
                grid[rightSide][yPos]
            );
            xPos = xPos + squareSize;
        }
        yPos = yPos + squareSize;
    }

    // diamond phase
    yPos = 0;
    xPos = 0;
    while (yPos < gridSize) {
        while (xPos < gridSize) {
            centrePointX = (xPos + squareSize / 2) % gridSize;
            centrePointY = yPos;
            grid[centrePointX][yPos] = getHeight(
                grid[xPos][yPos],
                grid[centrePointX][(yPos + squareSize / 2) % gridSize],
                grid[(xPos + squareSize) % gridSize][yPos],
                grid[centrePointX][(yPos - squareSize / 2 + gridSize) % gridSize]
            );
            xPos = xPos + squareSize;
        }
        yPos = yPos + squareSize / 2;
        if (yPos % squareSize === 0) {
            xPos = 0;
        } else {
            xPos = squareSize / 2;
...