JSFiddle - React, Tailwind, and code Playground

by capsadmin

HTML

<canvas id="myCanvas" width="1920" height="1080" style="border:1px solid #000000;"></canvas>

JavaScript

const canvas = document.getElementById("myCanvas")
const context2D = canvas.getContext("2d")

const canvasWidth = 192
const innerRingHalfRadius = 36
const outterRingHalfRadius = 48
const centerOfRing = (innerRingHalfRadius + outterRingHalfRadius) / 2
const embosRepetitions = 9

const xOffset = canvasWidth / 2
const yOffset = outterRingHalfRadius

const isInsidePortal = (R) => {
	return R < innerRingHalfRadius
}

const isInsideOfRing = (R) => {
	return R > innerRingHalfRadius && R < outterRingHalfRadius
}

const pixel = (x, y, w, h) => {
	context2D.fillRect(x + xOffset, y + yOffset, w, h)
}

const calculateWaves = (X, Y, R, timeElapsed, n) => {
	n--
	return (
		n &&
		Math.cos(Y / 2 + (X * Y) / outterRingHalfRadius + timeElapsed * 9) *
			Math.cos(Y / 4 - calculateWaves(X, Y, R, timeElapsed, n) * 2) -
			R / 6
	)
}

function render(timeElapsed) {
	canvas.width = canvasWidth

	const iterations = outterRingHalfRadius * 2 * (outterRingHalfRadius * 2) - 1152 // this makes it so the bottom does not render fully in the Y axis
	for (let i = iterations; i--; i > 0) {
		const X = (i % (canvasWidth / 2)) - outterRingHalfRadius
		const Y = i / (canvasWidth / 2) - outterRingHalfRadius
		const R = Math.pow(X * X + Y * Y, 0.5)

		if (isInsideOfRing(R)) {
			const shouldEmboss = ((Math.cos(Math.atan2(X, Y) * embosRepetitions) * 20 - R) & 44) == 0

			if (shouldEmboss) {
				pixel(X, Y, 1, 1)
			} else {
				pixel(X, Y, R < centerOfRing ? Y / outterRingHalfRadius : X / outterRingHalfRadius, 1)
			}
		} else if (isInsidePortal(R)) {
			pixel(X, Y, 1, calculateWaves(X, Y, R, timeElapsed, 3) / 5)
		}
	}
}

const start = Date.now()
setInterval(function () {
	const elapsedMs = Date.now() - start
	render(elapsedMs / 1000)
}, 1000 / 60)