JSFiddle - React, Tailwind, and code Playground

by wsams

HTML

<!--

     See http://jsart.wjsams.com for more examples and source or
     my github repository. https://github.com/wsams/JsArt
     &copy;2013 https://github.com/wsams/JsArt/blob/master/LICENSE

-->
<div id="container">
    <canvas id="output" width="10" height="10"></canvas>
    <br />
    <br />
    <canvas id="outputv2" width="10" height="10"></canvas>
</div>

CSS

body {
    font-family:sans-serif;
    font-size:100%;
    color:#404040;
}
input {
    padding:3px;
    border:1px solid #404040;
}
input:focus {
    background-color:#E6E7D7;
}
input:active {
    background-color:gray;
    color:white;
}
.smalltext {
    font-size:.75em;
    color:gray;
}

JavaScript

// The number of rows and the number of columns.
xmax = 256;
ymax = xmax;

// This width and height of each cell.
hmax = 1;
wmax = hmax;

/**
 * This function always returns an integer between 0-255 or 0 if a string is input.
 */
function make_int(int) {
    if (isNaN(int)) {
        return 0;
    }

    // make positive
    int = Math.sqrt(Math.pow(int, 2));

    // convert to integer [1-99]
    if (int < 1 && int > 0) {
        int = Math.round(int * 100);
    }

    // convert to integer [0-255]
    int = Math.round(int);
    if (int > 255) {
        int = int % 256;
    }

    return int;
}

function render(context) {
    var curx = 0;
    var cury = 0;
    for (x=0; x<xmax; x++) {
        for (y=0; y<ymax; y++) {
            curx = x * wmax;
            cury = y * hmax;
            r = make_int(x * Math.sqrt(y));
            g = make_int(x+y);
            b = make_int(r+g);
            color = r + "," + g + "," + b;
            context.fillStyle = "rgba(" + r + ", " + g + ", " + b + ", 1)";
            context.fillRect(curx, cury, wmax, hmax);
        }
    }
}

function render_v2(context) {
    var curx = 0;
    var cury = 0;
    for (x = 0; x < xmax; x++) {
        for (y = 0; y < ymax; y++) {
            curx = x * wmax;
            cury = y * hmax;
            r = make_int(Math.sqrt(x) * Math.sqrt(y));
            g = make_int(Math.sqrt(x) * Math.sqrt(r));
            b = make_int(Math.sqrt(x) * Math.sqrt(g));
            color = r + "," + g + "," + b;
            context.fillStyle = "rgba(" + r + ", " + g + ", " + b + ", 1)";
            context.fillRect(curx, cury, wmax, hmax);
        }
    }
}

$(document).ready(function () {
    // Override default canvas size.
    $("canvas#output").attr("width", xmax * hmax).attr("height", ymax * wmax);

    // Build canvas and render image.
    var canvas = document.getElementById("output");
    context = canvas.getContext("2d");
    render(context);
    
    // --- Below is a second version ---

    // Override...