JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

<canvas id="canvas" width="500" height="500"></canvas>

JavaScript

function txt( f ) {
    return f.toString().replace( /^.+\n|.+$/g, '' );
}

var vsSrc = txt(function() {/*
    attribute vec3 aPosition;
    attribute vec3 aColor;
    varying vec3 vTint;
    void main() {
        vTint = aColor;
        vTint = vec3(1,0,1);
        gl_PointSize = 32.0;
        gl_Position = vec4( aPosition, 1 );
    }
*/});

var fsSrc = txt(function() {/*
    precision mediump float;
    uniform sampler2D uTexture;
    varying vec3 vTint;
    void main() {
        vec4 texColor = texture2D( uTexture, gl_PointCoord );
        //gl_FragColor = texColor * vec4(1,0,1,1);// * vec4( vTint, 1 );
        gl_FragColor = vec4( vTint, 1 );
    }
*/});

var NUM_PARTICLES = 20;

var canvas = document.getElementById( 'canvas' );
var gl = canvas.getContext( 'experimental-webgl' );

gl.enable( gl.BLEND );
//gl.disable( gl.DEPTH_TEST );
gl.blendFunc( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA );

var positions = [];
var colors = [];

for ( var i = 0; i < NUM_PARTICLES; i++ ) {

    positions.push(
        -1 + Math.random() * 2,
        -1 + Math.random() * 2,
        -1 + Math.random() * 2
    );

    colors.push(
        Math.random(),
        Math.random(),
        Math.random()
    );
}

function getShader( src, type ) {

    var shad = gl.createShader( type );
    gl.shaderSource( shad, src );
    gl.compileShader( shad );

    if ( !gl.getShaderParameter( shad, gl.COMPILE_STATUS ) )

        throw gl.getShaderInfoLog( shad );

    return shad;
}

function getProgram( vsSrc, fsSrc ) {

    var vs = getShader( vsSrc, gl.VERTEX_SHADER );
    var fs = getShader( fsSrc, gl.FRAGMENT_SHADER );

    var prog = gl.createProgram();
    gl.attachShader( prog, vs );
    gl.attachShader( prog, fs );
    gl.linkProgram( prog );

    if ( !gl.getProgramParameter( prog, gl.LINK_STATUS ) )

        throw gl.getProgramInfoLog( prog );

    return prog;
}

function getTexture() {

    var can = document.createElement( 'canvas' );
    var ctx = can.getContext( '2d' );
    can.width...