JSFiddle - React, Tailwind, and code Playground

by esteewhy

JavaScript

var can = document.createElement('canvas');
can.width=384;
can.height=256;

document.body.appendChild(can);

var ctx = can.getContext('2d');
var imageData = ctx.getImageData(0,0,can.width,can.height);

function frame(ctx, imageData, art) { 
    var data = imageData.data;
    var x = 0, y = 0;

    for (var i = 0, len = data.length; i < len;) {
        data[i++] = art.RED(x, y);
        data[i++] = art.GREEN(x, y);
        data[i++] = art.BLUE(x, y);
        data[i++] = 255;
        if (++x === can.width) x=0, y++;
    }
}

var US_FLAG = {
    RED: function(x,y){
        if(x>600||y>560) return 1024
        x+=35,y+=41
        return y%124<20&&x%108<20?1024:(y+62)%124<20&&(x+54)%108<20?1024:0
    },
    GREEN: function(x,y){
        if(x>600||y>560) return y%160<80?0:1024
        x+=35,y+=41
        return y%124<20&&x%108<20?1024:(y+62)%124<20&&(x+54)%108<20?1024:0
    },
    BLUE: function(x,y) {
        return ((x>600||y>560)&&y%160<80)?0:1024;
    }
};

var A2 = function(t) {
    var fn = function(i, j) { return i&&j?(i%j)&(j%i)&t:0; }
    return { RED: fn, GREEN: fn, BLUE: fn }
};

var RANDOM = function(t) {
    function rand(n) { return Math.random() * 1000 % n; }
    var r = [], g = [], b = [];
    function c(data) {
        return function fn(i, j) {
            data[i] = data[i] || [];
            return!data[i][j]
                ?data[i][j] = !rand(999)
                    ?rand(256)
                    :c(data, (i+rand(2))%1024,(j+rand(2))%1024)
                :data[i][j];
        }
    }
    return { RED: c(r), GREEN: c(g), BLUE: c(b) };
};

function _sq(x) { return x * x; }

var SWIRL = function(t) {
    function c(x1, x2, x3, x4) {
        return function(i, j) {
            return (Math.sqrt(_sq(x1-i)+_sq(x2-j))+1)
            /(Math.sqrt(Math.abs(Math.sin((Math.sqrt(_sq(x3-i)+_sq(x4-j)))/115.0)))+1)
            /t*10;
        };
    }
    
    return {
        RED: c(148, 1000, 500, 400),
        GREEN: c(610, 60, 864, 860),
        BLUE: c(180,...