JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="treecanvas"></canvas>
CSS
#treecanvas {
background: white;
width:430px;
}
JavaScript
if (typeof requestAnimationFrame != 'function') {
['moz', 'webkit', 'ms'].some(function (p) {
var f = this[p + 'RequestAnimationFrame']
return typeof f == 'function' ? (requestAnimationFrame = f) : false
}) || (requestAnimationFrame = function (f) {
return setTimeout(f, 0)
}) /* jshint -W030 */
}
(function (canvas) {
/* Settings */
var thetaEnd = 6 * Math.PI,
lineSpacing = 1 / 30,
lineLength = 0.5 * lineSpacing,
rate = 1 / (2 * Math.PI),
factor = rate / 3,
cycle = 200,
scene = [],
/* Rendering */
offsetX = 250,
offsetY = 300,
scaleX = 400,
scaleY = 400,
camX = 0,
camY = 2,
camZ = -Math.PI,
cSize = 500,
c = document.getElementById('treecanvas').getContext('2d')
canvas.width = canvas.height = cSize
c.lineWidth = 1.44
scene.push(new Coil({
color: '55,150,150',
theta0: Math.PI
}))
scene.push(new Coil({
color: '190,400,255',
theta0: Math.PI / 3
}))
scene.push(new Coil({
color: '50,255,190',
theta0: -Math.PI / 3
}))
requestAnimationFrame(paint)
function paint() {
var offset = 1 - Date.now() / cycle % 1,
i = 0
requestAnimationFrame(paint)
c.clearRect(0, 0, cSize, cSize)
for (; i < scene.length; ++i)
scene[i].paint(offset)
}
function project(point) {
return [offsetX + scaleX * (point[0] - camX) / -(point[2] + camZ),
offsetY + scaleY * (point[1] - camY) / -(point[2] + camZ)]
}
function clamp(val, a, b) {
return (val < a) ? a : (val > b) ? b : val
}
function pow3(a) {
return a * a * a
}
function Coil(options) {
this.color =...