JSFiddle - React, Tailwind, and code Playground

by Eshy Lavi

HTML

<body>
<button id="b" style="position:fixed;bottom:41px;left:80%;">
fill
</button>
<button id="d" style="position:fixed;bottom:41px;left:68%;">
looser
</button>
<button id="e" style="position:fixed;bottom:41px;left:53%;">
faster
</button>
<button id="d2" style="position:fixed;bottom:11px;left:68%;">
tighter
</button>
<button id="e2" style="position:fixed;bottom:11px;left:53%;">
slower
</button>
<div style="color:white;position:fixed;left:71.4%;top:3.6%;">
<p class="ps author" id='p1'>
</p>
<p class="ps es" id='p2'>
</p>
<p class="ps hy" id='p3'>
</p>
<p class="ps lavi" id="p4">
By Eshy Lavi
</p>

</div>
<canvas id="c" width="561" height="379" style="border:4px solid white;"></canvas>

</body>

CSS

body{background-color:black;}
.ps{margin:0;padding:0;}

JavaScript

var c   = document.getElementById('c');
var ctx = c.getContext('2d');
var author = "Eshy Lavi try emailing me at the g."
var _r=243;var _b=228;var _g=213;
var _dg=2;var _dr=1;var _db=3;
var _a=1;
var xs=[];
var ys=[];
var odiss=[];
var diss=[];
var odis;
var N=36;
var theta=0;
var radnow=200;
var rate=0.2;
var delta=14;
var maxrad=122;
var xzero=249;
var yzero=190;
var dnf=true;
var oxs=[];var oys=[];
var rnr=0;var nrn=0;var aqa=0;
var fillitv;



function filliter(){
fillitv*=-1;}
function looserter(){
delta+=0.75;
document.getElementById('p1').innerHTML="N     = "+N;
document.getElementById('p2').innerHTML="rate  = "+rate.toFixed(2);
document.getElementById('p3').innerHTML="delta = "+delta.toFixed(2);
}
function fasterter(){
rate+=0.25;
document.getElementById('p1').innerHTML="N     = "+N;
document.getElementById('p2').innerHTML="rate  = "+rate.toFixed(2);
document.getElementById('p3').innerHTML="delta = "+delta.toFixed(2);
}
function loosertera(){
delta-=0.75;
document.getElementById('p1').innerHTML="N     = "+N;
document.getElementById('p2').innerHTML="rate  = "+rate.toFixed(2);
document.getElementById('p3').innerHTML="delta = "+delta.toFixed(2);
}
function fastertera(){
rate-=0.25;
document.getElementById('p1').innerHTML="N     = "+N;
document.getElementById('p2').innerHTML="rate  = "+rate.toFixed(2);
document.getElementById('p3').innerHTML="delta = "+delta.toFixed(2);
}

function init(){
document.getElementById('p1').innerHTML="N     = "+N;
document.getElementById('p2').innerHTML="rate  = "+rate.toFixed(2);
document.getElementById('p3').innerHTML="delta = "+delta.toFixed(2);

 for (var i=0;i<N;i++){
  radnow=/*Math.random()**/maxrad;
  theta=(i*360/N);/*+Math.random()*360/N;*/  
  xs.push(xzero+radnow*Math.cos(theta/57.3));
  ys.push(yzero-radnow*Math.sin(theta/57.3));
 }
 for (var ii=1;ii<N;ii++){
  odiss[ii]=Math.sqrt((xs[i]-xs[i-1])*(xs[i]-xs[i-1])+(ys[i]-ys[i-1])*(ys[i]-ys[i-1]));
 }
...