JSFiddle - React, Tailwind, and code Playground

by loktar

HTML

<canvas id="myCanvas" width="1200" height="800"></canvas>

CSS

canvas {
    border: 1px solid black;
}

JavaScript

init();

var canvas;
var context; // The canvas's 2d context

function setupCanvas() {
    canvas = document.getElementById('myCanvas');
    if (canvas.getContext) {
        context = canvas.getContext('2d');
        context.fillStyle = "black"; // this is default anyway
        context.fillRect(0, 0, canvas.width, canvas.height);
    }
}

function init() {
    setupCanvas();
    startGating();
}

var images = new Array();
var gatingTimer;
var curIndex, imgWidth = 100,
    imgHeight = 80;

function redrawImages() {
    curIndex++;
    if (curIndex > 16) curIndex = 1;

    for (var x = 0; x < 8; x++) {
        for (var y = 0; y < 8; y++) {
            drawCustomImage(x * 150, y * 100);
        }
    }
}

function drawCustomImage(xLoc, yLoc) {
    // create a new pixel array
    imageData = context.createImageData(imgWidth, imgHeight);

    pos = 0; // index position into imagedata array
    xoff = imgWidth / (yLoc / 3); // offsets to "center"
    yoff = imgHeight / 3;

    for (y = 0; y < imgHeight; y++) {
        for (x = 0; x < imgWidth; x++) {
            // calculate sine based on distance
            x2 = x - xoff;
            y2 = y - yoff;
            d = Math.sqrt(x2 * x2 + y2 * y2);
            t = Math.sin(d / 6.0);

            // calculate RGB values based on sine
            r = t * 200;
            g = 125 + t * 80;
            b = 235 + t * 20;

            // set red, green, blue, and alpha:
            imageData.data[pos++] = Math.max(0, Math.min(255, r));
            imageData.data[pos++] = Math.max(0, Math.min(255, g));
            imageData.data[pos++] = Math.max(0, Math.min(255, b));
            imageData.data[pos++] = 255; // opaque alpha
        }
    }

    // copy the image data back onto the canvas
    //context.putImageData(imageData, xLoc, yLoc); // Works... kinda
    context.putImageData(imageData, xLoc, yLoc, 0, 0, imgWidth, imgHeight); // Doesn't work. Why?
}


function startGating() {
    setTimeout(redrawImages, 30);
}

function...