JSFiddle - React, Tailwind, and code Playground

by IronZaphilith

HTML

<canvas id=canvas width=400 height=300></canvas>

<div>
<label>width: <input type=number min=1 id=width value=400></label>
<label>height: <input type=number min=1 id=height value=300></label>
<label><input type=checkbox id=run checked>Run</label>
</div>
<div>
<label>a: <input type=number min=0 max=1 step=0.01 value=0.5 id=a></label>
<label>b: <input type=number min=0 max=1 step=0.01 value=0.74 id=b></label>
<label>step: <input type=number min=0.01 max=3.14 step=0.01 value=0.1 id=step></label>
<label>delta: <input type=number min=-6.28 max=6.28 step=0.01 value=1.57 id=delta></label>
<label>zoom: <input type=number min=0.5 max=4 step=0.1 value=2 id=zoom></label>
<label>color cycle: <input type=checkbox checked id=color></label>
</div>

CSS

canvas{
}
html,body{
  background-color: #00215b;
  color: #f2f2f2;
  text-align: center;
}

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var t = 0;
var x,y;
function draw(){
  if(document.getElementById('run').checked){
  	var a = document.getElementById('a').value;
    var b = document.getElementById('b').value;
    var delta = Number(document.getElementById('delta').value)
    var zoom = Number(document.getElementById('zoom').value);
  	var x1 = canvas.width/2 + canvas.width/zoom * Math.sin(a*t+delta);
    var y1 = canvas.height/2 + canvas.height/zoom * Math.sin(b*t);
    //console.log(a,b,x1,y1,t);
    if(x===undefined){
    	x = x1;
      y = y1;
    }
    context.beginPath();
    if(document.getElementById('color').checked){
    	context.strokeStyle = "hsl("+t+",100%,50%)";
    }
    context.moveTo(x,y);
    context.lineTo(x1, y1);
    context.stroke();
    t+=Number(document.getElementById('step').value);
    x = x1;
    y = y1;
    window.requestAnimationFrame(draw);
  }
}
function startStopDraw(evt){
	if(evt.target.checked){
  	x = y = undefined;
    canvas.width = Number(document.getElementById('width').value);
    canvas.height = Number(document.getElementById('height').value);
  	context.clearRect(0, 0, canvas.width, canvas.height);
  }
	draw();
}
document.getElementById('run').addEventListener('change', startStopDraw);
draw();