JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<!--
alasql stuff
-->
<script src="https://cdn.rawgit.com/agershun/alasql/develop/dist/alasql.min.js"></script>
<canvas id=blur width=1000px height=1000px></canvas>
<canvas id=x width=1000px height=1000px></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>jitter</div>
    <input type="range" step="0.1"  min="0" max="10" value="0" class="slider" id="jitter" oninput="showVal(this)"><br>
</div>
<textarea id="output"></textarea>

CSS

canvas {
  width: 1000px;
  height: 1000px;
  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);
    display: none;
}
canvas#x {
    z-index: -11;
    filter: hue-rotate(1.2rad);
}
.slidecontainer {
  z-index: 10;
  left: 0px;
  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 = 5;
var yo = 5;
/* 
var bsx = (cw/(xo*2));
var bsy = (ch/(yo*2));
*/

var spiral_data_width = 100;
var spiral_data_height = 100;

var isDrawing = 0;

var MAP;

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 = {};

function map (width, height) {
	this.x = 0;
  this.y = 0;
  this.w = width;
  this.h = height;
  this.points = [];
  
  this.inRange=(v)=>{
  	return !((v.x<this.x) || (v.x>this.x+this.w) || (v.y<this.y) || (v.y>this.y+this.h));
  };
  this.insert = (v)=>{
    if(!this.inRange(v)) {
      return -1;
    } 

    this.count++;
    this.points.push(
    	{
        x: v.x,
        y: v.y,
        jx: v.jx,
        jy: v.jy,
      }
    );
  }
}



/*
	what data needs to be known about the galaxy
  dunno
  x,y,jitter
*/

/*
alasql(`create table galaxy (
	id SERIAL PRIMARY KEY,
  x INT,
  y INT)`
  );
alasql(`INSERT INTO galaxy (x, y) VALUES (10, 10)`);

console.log(alasql("SELECT * FROM galaxy"));
*/

//alasql("INSERT INTO galaxy VALUES ('Rome',2863223), ('Paris',2249975), ('Berlin',3517424), ('Madrid',3041579)");


//var res = alasql("SELECT * FROM galaxy WHERE population < 3500000 ORDER BY population DESC");


//console.log(res);





/* 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() {
  MAP =...