JSFiddle - React, Tailwind, and code Playground

by Jon Eyrick

HTML

<canvas id="canvas1" width="1000", height="700"></canvas>

JavaScript

function setPixel(imageData, x, y, r, g, b, a) {
    index = (x + y * imageData.width) * 4;
    imageData.data[index+0] = r;
    imageData.data[index+1] = g;
    imageData.data[index+2] = b;
    imageData.data[index+3] = a;
}
element = document.getElementById("canvas1");
c = element.getContext("2d");
width = element.width;
height = element.height;
imageData = c.createImageData(width, height);

xoff = width / 2;
yoff = height / 2;
var f = -55;
//_redraw();
setInterval("_redraw();",60);
////////////////////////////////
function _redraw() {
	pos = 0;
	f+=0.1;
	for (y = 0; y < height; y++) {
		for (x = 0; x < width; x++) {
			// calculate sine based on distance
			x2 = x - xoff;
			y2 = y - yoff;
			d = Math.sqrt(x2*x2 + y2*y2);
			t = Math.sin(d/f);
			// calculate RGB values based on sine
			r = t * 200;
			g = 125 + t * 80;
			b = 235 + t * 20;
			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;
		}
	}
	c.putImageData(imageData, 0, 0);
	if ( f > 55 ) f*= -1;
}