JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<canvas id="forceView" width=100 height=2048></canvas>
<canvas id="view" width=655 height=2048></canvas>
<div id="readout"></div>

CSS

body{
    background: #ddd;
    display: flex;
    flex-direction: row;
    padding-bottom: 100px;
}

canvas{
    background: #fff;
}

#readout{
    position: fixed;
    bottom: 0;
    left: 0;
}

JavaScript

const WindTexture_timeSize = 2048;
const WindTexture_periodSize = 256; // in units of 0.125s
const WindTexture_dampingSize = 4;
const periodFactor = 1.0/20.0; // how many seconds one wind period is

class WindTextureGenerator{
    constructor() {
        // this.windTextureArray = new float[WindTexture_dampingSize][WindTexture_periodSize][WindTexture_timeSize];
        let a = this.windTextureArray = [];
        for(let i=0; i<WindTexture_dampingSize; i++) {
            a[i] = [];
            for(let j=0; j<WindTexture_periodSize; j++) {
                a[i][j] = [];
                for(let k=0; k<WindTexture_timeSize; k++) {
                    a[i][j][k] = 0.0;
                }
            }
        }

        this.forceArray = new Array(WindTexture_timeSize);

        this.stepSize = 60.0 / WindTexture_timeSize;
        this.zetaMap = [0.02, 0.2, 0.4, 1.1];
    }

    makeTexture(gl) {
        this.fillForceArray();
        this.fillTextureArray(); // fills windTextureArray
    }

    fillForceArray() {
        const forceTimeArrayLength = 5*60+1;
        const forceTimeArray = new Array(forceTimeArrayLength);
        let i = 0;

        while(i < forceTimeArrayLength) {
            const minForce = -0.6;
            const maxForce = 1.0;
            const variance = 0.6;

            let lower;
            let prev = (i == 0) ? 0.0 : forceTimeArray[i-1];
            if(prev + variance > maxForce) {
                lower = maxForce - variance*2;
            }else if(prev - variance < minForce) {
                lower = minForce;
            }else{
                lower = prev - variance;
            }

            let next = Math.random() * variance * 2 + lower;
            let num = Math.floor(Math.random() * 5 + 1);
            for(let n = 0; n < num && i < forceTimeArrayLength; n++) {
                forceTimeArray[i++] = next;
            }
        }

        for(let timeIndex = 0; timeIndex < WindTexture_timeSize; timeIndex++) {
            let time =...