JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<!--
swirl generator
-->


<canvas id=blur width=400 height=400></canvas>
<canvas id=x width=400 height=400></canvas>
<div class="slidecontainer">
<div>rotation</div>
  <input type="range" step="0.001" min="0" max="6.28319" value="3.14159" class="slider" id="rotation" oninput="showVal(this)"><br>
<div>spread</div>
    <input type="range" step="0.001"  min="0" max="15" value="200" class="slider" id="spread" oninput="showVal(this)"><br>
<div>length</div>
    <input type="range" step="0.001"  min="0" max="50" value="20" class="slider" id="length" oninput="showVal(this)"><br>
<div>scale</div>
    <input type="range" step="0.001"  min="0.01" max="5" value="5" class="slider" id="scale" oninput="showVal(this)"><br>
<div>expand</div>
    <input type="range" step="0.001"  min="0.01" max="10" value="3.14159" class="slider" id="stretch" oninput="showVal(this)">
<div>spirals</div>
    <input type="range" step="1"  min="1" max="20" value="2" class="slider" id="iterations" oninput="showVal(this)"><br>
<div>whisp</div>
    <input type="range" min="0.1" max="1" value="1" step="0.1" class="slider" id="whisp" oninput="showVal(this)"><br>
<div>Box-Muller transform</div>
    <input type="checkbox" value="1" class="slider" id="random_mode" oninput="showVal(this)"><br>
<div>random seed</div>
    <input type="range" min="10000" max="99999" value="1245" step="100" class="slider" id="random_seed" oninput="showVal(this)"><br>
<div>render gridify</div>
    <input type="range" step="1"  min="1" max="6" value="2" class="slider" id="jitter" oninput="showVal(this)"><br>
</div>
<textarea id="output"></textarea>

CSS

canvas {
  width: 400px;
  height: 400px;
  image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  image-rendering: optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;

  position: absolute;
  margin:10px;
}
canvas#blur {
    z-index: -12;
    filter: blur(20px);
}
canvas#x {
    z-index: -11;
    filter: hue-rotate(1.2rad);
}
.slidecontainer {
  z-index: 10;
  left: 400px;
  top: 0px;
  position: absolute;
  transform: scale(0.5);
  padding: 0px;
  margin: 0px;
  width: 400px;
  background-color: rgba(0, 0, 0, 0.5);
  filter: opacity(0.9);
  color: rgba(255, 255, 255, 1);
  font-size: 1.5em;
  font-weight: normal;
}

div {
  width: 200px;
  float: left;
  padding: 5px;
}

input {
  clear: right;
  float: left;
}

textarea {
  position: absolute;
  top: 450px;
  left: 0px;
  width: 400px;
  height: 200px;
  color: #444400;
  background-color: #000;
  border: 0px solid black;
}
body{
  color: #fff;
  background-color: #000;
}

JavaScript

var theCanvas = document.getElementById("x");
var ctx = theCanvas.getContext("2d");
var blurCanvas = document.getElementById("blur");
var ctx_blur = blurCanvas.getContext("2d");
var cw = theCanvas.width;
var ch = theCanvas.height;
var xo = 20;
var yo = 20;
var isDrawing = 0;
var spiral = {
  random_seed: 41500,
  rotation: 1.922,
  spread: 2.747,
  length: 9.594,
  scale: 1.186,
  stretch: 0.35,
  iterations: 3,
  random_mode: false,
  step_size: 0.1,
  whisp: 0.7,
  jitter: 2,
};

var tmp_random_seed = 0;
var points = {};


/* draw and update text area etc */
initDials();
showVal({id: null});



/* functions below */

function showVal(e) {
  if(e.id == "random_mode") {
  	spiral[e.id] = e.checked; 
  } else {
  	spiral[e.id] = parseFloat(e.value,10);
  }
  if(isDrawing !== 1) {
  	generate_spirals();
    output.value = JSON.stringify(spiral,null,2).replaceAll("\"","");
  }
}

function generate_spirals() {
  points = {};
  // set random seed
  tmp_random_seed = spiral.random_seed;

	for(var i=0;i<spiral.iterations;i++) {
    generate_spiral();
    rotate_points(spiral.rotation);
  }
  //jitter_points(); //doesnt work still looks gridified
  // set random seed
  tmp_random_seed = spiral.random_seed;
  draw_points();
}

/*

function jitter_points (m){
		var tmp_points = {};
	  Object.keys(points).forEach(
  		point => {
        var p = points[point];
        var tmp_point = new Vector(p.x, p.y);
        var tmp_jitter = new Vector(
        Math.floor((Math.random() -0.5) * 10),Math.floor((Math.random() -0.5) * 10));
        //console.log(Math.random() * m);
        tmp_point.add(tmp_jitter);
        tmp_point.x = Math.round(tmp_point.x);
        tmp_point.y = Math.round(tmp_point.y);
      	var pixel = (tmp_point.y * (xo*2)) + tmp_point.x;
      	tmp_points[pixel] = {x: tmp_point.x, y: tmp_point.y};
    	}
    );
    points = tmp_points;
}
*/
function draw_points(){
    
		ctx.fillStyle= "#000";
    ctx.clearRect(0,0,cw, cw);
    ctx_blur.clearRect(0,0,cw,ch);

	 ...