JSFiddle - React, Tailwind, and code Playground

by tJener

HTML

<form id="form">
    <input id="particleCount" type="number" min="0" step="100" value="1000">
</form>
<div id="report"></div>
<canvas id="glcanvas" width="640" height="480" style="width: 640px; height: 480px; margin: 0 auto;"></canvas>

CSS

</style>

<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
void main(void) {
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>

<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;

void main(void) {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
}
</script>

<style>

JavaScript

$(document).ready(function() {
    (function() {
        $('#form').submit(function() {
            return false;
        });
    })();
    
    var gl;

    (function() {
        Math.log10 = function(n) {
            return Math.log(n) / Math.log(10);
        };

        Random = {};
        Random.inRange = function(l, h) {
            var range = h - l;
            return Math.random() * range + l;
        };
    })();

    (function() {
        var currentDevice = null;

        RenderDevice = function() {

        };

        RenderDevice.BlendState = {
            None: 0,
            Overwrite: 1,
            Alpha: 2,
            Multiply: 3,
            Add: 4,
            AlphaAdd: 5,
            Count: 6
        };

        RenderDevice.prototype.getCurrentDevice = function() {
            if (currentDevice == null) {
                currentDevice = new RenderDevice();
            }

            return currentDevice;
        };
        RenderDevice.prototype.drawPrimitiveType = function(primitiveType, count) {

        };
    })();

    // glMatrix v0.9.5
    glMatrixArrayType = typeof Float32Array != "undefined" ? Float32Array : typeof WebGLFloatArray != "undefined" ? WebGLFloatArray : Array;
    var vec3 = {};
    vec3.create = function(a) {
        var b = new glMatrixArrayType(3);
        if (a) {
            b[0] = a[0];
            b[1] = a[1];
            b[2] = a[2]
        }
        return b
    };
    vec3.set = function(a, b) {
        b[0] = a[0];
        b[1] = a[1];
        b[2] = a[2];
        return b
    };
    vec3.add = function(a, b, c) {
        if (!c || a == c) {
            a[0] += b[0];
            a[1] += b[1];
            a[2] += b[2];
            return a
        }
        c[0] = a[0] + b[0];
        c[1] = a[1] + b[1];
        c[2] = a[2] + b[2];
        return c
    };
    vec3.subtract = function(a, b, c) {
        if (!c || a == c) {
            a[0] -= b[0];
            a[1] -= b[1];
            a[2] -= b[2];
         ...