JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<div id=x></div>

<!-- This bg pattern is downloaded from www.subtlepatterns.com -->

CSS

span {
  text-align: right;
}
input {
  padding: 0px;
  margin: 0px;
  border: 2px inset #ffffff;
}
button {
  padding: 2px;
  margin: 0px;
  border: 2px outset #ffffff;
  font-size: 8px;
}
body {
  margin: 50px;
  background-color: #f08080;
  font-size: 10px;
  background: url(http://i.imgur.com/EUfuLv5.png);
}
canvas {
 //border: 2px inset #a0a0a0;
  background-color: #606060;
}

JavaScript

var elements = [];
var id = 0;
var X = 0;
var sin1to4_canvas = ['SinusPic49','SinusPic43','SinusPic42','SinusPic41']
var sin1to4_length = ['txtSinLen45', 'txtSinLen34', 'txtSinLen33', 'txtSinLen32'];
var sin1to4_offset = ['txtSinOffs31','txtSinOffs30','txtSinOffs29','txtSinOffs28'];
var sin1to4_periods = ['txtSinWaves27','txtSinWaves26','txtSinWaves25','txtSinWaves24'];
var sin1to4_minimum = ['txtSinMin48','txtSinMin39','txtSinMin37','txtSinMin35'];
var sin1to4_maximum = ['txtSinMax47','txtSinMax40','txtSinMax38','txtSinMax36'];
var sin1to4_origin = ['txtSinOrigin9','txtSinOrigin8','txtSinOrigin7','txtSinOrigin6'];
var sin1to4_range = ['txtSinRange5','txtSinRange4','txtSinRange3','txtSinRange2'];
var sin1to4_speed = ['txtSinSpeed16','txtSinSpeed15','txtSinSpeed14','txtSinSpeed13'];
var sin1to4_on = ['checkSin23','checkSin22','checkSin21','checkSin20'];
var previewStepsX = 'txtPrvXmax17';
var previewMinY = 'txtPrvYmin18';
var previewMaxY = 'txtPrvYmax19';
var previewCanvas = 'picPreview44';

init();

function draw() {
  var  sin1ctx = document.getElementById(sin1to4_canvas[0]).getContext('2d');
  var  sin2ctx = document.getElementById(sin1to4_canvas[1]).getContext('2d');
  var  sin3ctx = document.getElementById(sin1to4_canvas[2]).getContext('2d');
  var  sin4ctx = document.getElementById(sin1to4_canvas[3]).getContext('2d');

  sin1_length = V(sin1to4_length[0]);
  sin2_length = V(sin1to4_length[1]);
  sin3_length = V(sin1to4_length[2]);
  sin4_length = V(sin1to4_length[3]);

  sin1_offset = V(sin1to4_offset[0]);
  sin2_offset = V(sin1to4_offset[1]);
  sin3_offset = V(sin1to4_offset[2]);
  sin4_offset = V(sin1to4_offset[3]);

  sin1_periods = V(sin1to4_periods[0])  * (Math.PI*2) ;
  sin2_periods = V(sin1to4_periods[1])  * (Math.PI*2) ;
  sin3_periods = V(sin1to4_periods[2])  * (Math.PI*2) ;
  sin4_periods = V(sin1to4_periods[3])  * (Math.PI*2) ;

  sin1_minimum = V(sin1to4_minimum[0]);
  sin2_minimum = V(sin1to4_minimum[1]);
  sin3_minimum = V(sin1to4_minimum[2]);
...