HTML App Creator

<h1>Strange Pictures Generator</h1>
<h1>Choose your color</h1>
<h2 class="button" onclick="javascript:setup('red');">Red</h2><br />
<h2 class="button" onclick="javascript:setup('green');">Green</h2><br />
<h2 class="button" onclick="javascript:setup('blue');">Blue</h2><br />
<h2 class="button" onclick="javascript:setup('gray');">Gray</h2><br />
<h2 class="button" onclick="javascript:setup('multi');">Multicolor</h2><br />
<div id="source"><a href="https://walter.tw/html-app-creator/?app=f7402d27&amp;version=38">source</a></div>

body {
    margin: 0;
    padding: 0;
    font-family: Helvetica, Arial, Sans-Serif;
    color: #ecf0f1;
    background-color: #2c3e50;
    text-align: center;
}

h2 {
    margin: 20px;
    padding: 10px;
    border: 3px solid #34495e;
    background-color: #34495e;
    border-radius: 10px;
    width: 25vw;
    min-width: 200px;
    display: inline-block;
    cursor: pointer;
}

canvas {
    cursor: pointer;
}

canvas {
    filter: blur(1px);
}

#source {
    position: fixed;
    bottom: 10px;
    right: 10px;
}

#source > a {
    text-decoration: none;
    color: #ecf0f1;
}

#loading {
    position: fixed;
    z-index: 0;
    left: 0;
    top: 20vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    text-align: center;
}

// Configuration
var step = 1; // Size of cells
var diff = 0.01; // Each cell cannot have a biggest difference than that (relative to its neighbors)
var color = "red"; // "red", "green", "blue", "gray" or "multi"

// Global variables
var canvas, ctx;

// Prepare the display
function setup(c) {
    // Empty the page
    document.body.innerHTML = "<div id=\"loading\"><h3>Generating your image....</h3></div>";
    document.body.style.backgroundColor = "black";
    document.body.style.overflow = "hidden";
    document.body.style.textAlign = "left";
    
    // Let the time to the loading gif to be displayed
    setTimeout(function() {
    
        // Create canvas
        canvas = document.createElement( 'canvas' );
        canvas.style.position = 'absolute';
        canvas.style.zIndex = 2;
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        canvas.id = "myCanvas";
        canvas.title = "Click to generate another";
        canvas.onclick = function() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            setTimeout(function() {
                draw();
            }, 100);
        };
        document.body.appendChild( canvas );
        ctx = canvas.getContext( '2d' );
        
        // Save the color
        color = c;
        
        // Make a first draw
        draw();
        
    }, 100);
    
}


// Draw function
function draw() {
    
    // Fill in black
    ctx.fillStyle = "#000000";
    
    // Generate the two matrix
    var matrix1 = genMatrix();
    var matrix2 = genMatrix();
    
    // Unique random value (needed for the "multi" option)
    var uniqueRandom = Math.random();
    
    // Take the min (one matrix must be read from right to left)
    for (var i = 0; i < canvas.height / step; i++) {
        for (var j = 0; j < canvas.width / step; j++) {
            // Draw it
            var val = Math.floor(Math.min(matrix1[i][j], matrix2[i][(canvas.width/step) - j]) * 255);
            // With the good color
            switch (color) {
                case "green":
                    ctx.fillStyle = "rgb(" + Math.floor(val/10) + "," + val + "," + Math.floor(val/10) + ")";
                    break;
                case "blue":
                    ctx.fillStyle = "rgb(" + Math.floor(val/10) + "," + Math.floor(val/10) + "," + val + ")";
                    break;
                case "gray":
                    ctx.fillStyle = "rgb(" + val + "," + val + "," + val + ")";
                    break;
                case "multi":
                    if (val < 50) {
                        if (uniqueRandom < 0.33) {
                            ctx.fillStyle = "rgb(" + val + "," + Math.floor(val/10) + "," + Math.floor(val/10) + ")";
                        } else if (uniqueRandom < 0.66) {
                            ctx.fillStyle = "rgb(" + Math.floor(val/10) + "," + val + "," + Math.floor(val/10) + ")";
                        } else {
                            ctx.fillStyle = "rgb(" + Math.floor(val/10) + "," + Math.floor(val/10) + "," + val + ")";
                        }
                    } else if (val < 150) {
                        if (uniqueRandom < 0.33) {
                            ctx.fillStyle = "rgb(" + Math.floor(val/10) + "," + Math.floor(val/10) + "," + val + ")";
                        } else if (uniqueRandom < 0.66) {
                            ctx.fillStyle = "rgb(" + val + "," + Math.floor(val/10) + "," + Math.floor(val/10) + ")";
                        } else {
                            ctx.fillStyle = "rgb(" + Math.floor(val/10) + "," + val + "," + Math.floor(val/10) + ")";
                        }
                    } else {
                        if (uniqueRandom < 0.33) {
                            ctx.fillStyle = "rgb(" + Math.floor(val/10) + "," + val + "," + Math.floor(val/10) + ")";
                        } else if (uniqueRandom < 0.66) {
                            ctx.fillStyle = "rgb(" + Math.floor(val/10) + "," + Math.floor(val/10) + "," + val + ")";
                        } else {
                            ctx.fillStyle = "rgb(" + val + "," + Math.floor(val/10) + "," + Math.floor(val/10) + ")";
                        }
                    }
                    break;
                default:
                    ctx.fillStyle = "rgb(" + val + "," + Math.floor(val/10) + "," + Math.floor(val/10) + ")";
                    break;
            }
            ctx.fillRect(j*step, i*step, step, step);
        }
    }
    
}

function genMatrix() {
    var matrix = new Array(Math.floor(canvas.height / step));
    for (var i = 0; i < canvas.height / step; i++) {
        matrix[i] = new Array(Math.floor(canvas.width / step));
        for (var j = 0; j < canvas.width / step; j++) {
            var top, left;
            if (i === 0 && j === 0) {
                top = Math.random(); // If this is the first line and row, we took a random value as first reference
            } else if (i === 0) {
                top = matrix[i][j-1]; // If this is the first line but not the first row, we used the left cell as top reference
            } else {
                top = matrix[i-1][j];
            }
            if (j === 0) {
                left = top; // If it is the first row, we took the top cell as a reference
            } else {
                left = matrix[i][j-1];
            }
            // Get the minimum gap we can take
            var gap = left < top ? left : top;
            // Generate the new value
            matrix[i][j] = (Math.random() < 0.5 ? left : top) + (Math.random() * diff * 2) - diff;
        }
    }
    return matrix;
}

JavaScript Console