JSFiddle - React, Tailwind, and code Playground

by phil_mcc

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<canvas id="mycanvas" ></canvas>
<table>
  <thead>
      <tr>
        <th>Offsets</th>
        <th>Amplitudes</th>
        <th>Stretches</th>
        <th>Offset Stretches</th>
      </tr>
  </thead>
  <tbody id="output">
    
  </tbody>
</table>

CSS

html, body {
  width:  100%;
  height: 100%;
  margin: 0px;
}

JavaScript

function sketchProc(processing) {  
  processing.draw = function () {
     // clear the drawing area
    processing.background(255);
   
    var now = + new Date;
    var dt = now - lastUpdate;
    lastUpdate = now;
    update(dt);
    draw();
    
   
  };
  processing.setup = function () {
     processing.size( 500, 300 );
     processing.frameRate( 60 );
  };
  
}

var canvas = document.getElementById("mycanvas");
// attaching the sketchProc function to the canvas
var lastUpdate = + new Date;
var pjs = new Processing(canvas, sketchProc);


// Resolution of simulation
var NUM_POINTS = 80;
// Width of simulation
var WIDTH = 600;
// Spring constant for forces applied by adjacent points
var SPRING_CONSTANT = 0.005;
// Sprint constant for force applied to baseline
var SPRING_CONSTANT_BASELINE = 0.005;
// Vertical draw offset of simulation
var Y_OFFSET = 200;
// Damping to apply to speed changes
var  DAMPING = 0.99;
// Number of iterations of point-influences-point to do on wave per step
// (this makes the waves animate faster)
var ITERATIONS = 5;

// Make points to go on the wave
function makeWavePoints(numPoints) {
    var t = [];
    for (var n = 0; n < numPoints; n++) {
        // This represents a point on the wave
        var newPoint = {
            x: n / numPoints * WIDTH,
            y: Y_OFFSET,
            spd: {y:0}, // speed with vertical component zero
            mass: 1
        }
        t.push(newPoint);
    }
    return t
}

// A phase difference to apply to each sine
var offset = 0;

var NUM_BACKGROUND_WAVES = 7;
var BACKGROUND_WAVE_MAX_HEIGHT = 6;
var BACKGROUND_WAVE_COMPRESSION = 1/10;
// Amounts by which a particular sine is offset
var sineOffsets = [];
// Amounts by which a particular sine is amplified
var sineAmplitudes = [];
// Amounts by which a particular sine is stretched
var sineStretches = [];
// Amounts by which a particular sine's offset is multiplied
var offsetStretches = [];
// Set each sine's values to a reasonable random...