JSFiddle - React, Tailwind, and code Playground

by ryubro

HTML

<script src="https://developer.mozilla.org/samples/webgl/sample2/sylvester.js"></script>
<script src="https://developer.mozilla.org/samples/webgl/sample2/glUtils.js"></script>
<body onload="start()">
    <canvas id="glcanvas" width="480" height="240">Your browser doesn't appear to support the <code>&lt;canvas&gt;</code> element.</canvas>
    <script id="shader-vs" type="x-shader/x-vertex">
        attribute vec3 aVertexPosition;
        attribute vec2 aTextureCoord;

        varying highp vec2 vTextureCoord;

        void main(void) {
            gl_Position = vec4(aVertexPosition, 1.0);
            vTextureCoord = aTextureCoord;
        }
    </script>
    <script id="shader-fs" type="x-shader/x-fragment">
        varying highp vec2 vTextureCoord;

        uniform sampler2D uSampler;

        uniform highp vec4 uOrigColor;
        uniform highp vec4 uDestColor;

        void main(void) {
            highp vec4 orig = texture2D(uSampler, vTextureCoord);
            highp vec4 dest = orig;
            highp float gap = 0.05; // threshold
            if (orig.r > uOrigColor.r - gap && orig.r < uOrigColor.r + gap && orig.g > uOrigColor.g - gap && orig.g < uOrigColor.g + gap && orig.b > uOrigColor.b - gap && orig.b < uOrigColor.b + gap) {
                dest = uDestColor;
            }
            gl_FragColor = dest;
        }
    </script>
    <br/>
    <label style="display:inline-block;width: 80px">from:</label>
    <input type="color" id="original_color" value="#dd0000" />
    <br/>
    <label style="display:inline-block;width: 80px">to:</label>
    <input type="color" id="destined_color" value="#dd00dd" />
    <br/>
    <button id="change_button">Change</button>
    <p>Color code from top:</p>
    <ul class="color_list">
        <li>#dd0000</li>
        <li>#fe6230</li>
        <li>#fef600</li>
        <li>#00bb00</li>
        <li>#009bfe</li>
        <li>#000083</li>
        <li>#30009b</li>
    </ul>
</body>

CSS

body {
    font-family: monospace
}
label {
    display: inline-block;
    width: 80px;
}
.color_list li{
    cursor: pointer;
    color: blue;
}

JavaScript

function changeColor() {
    console.log('change');
    origColInt = hexToRgb($('#original_color').val());
    origColFloat = rgbIntToFloat(origColInt);

    destColInt = hexToRgb($('#destined_color').val());
    destColFloat = rgbIntToFloat(destColInt);

    if (gl && gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
        uniformOrigColor = gl.getUniformLocation(shaderProgram, "uOrigColor");
        uniformDestColor = gl.getUniformLocation(shaderProgram, "uDestColor");
        gl.uniform4f(uniformOrigColor, origColFloat[0], origColFloat[1], origColFloat[2], 1.0);
        gl.uniform4f(uniformDestColor, destColFloat[0], destColFloat[1], destColFloat[2], 1.0);
    }
}

// http://stackoverflow.com/a/5624139/1236145
function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

function rgbIntToFloat(rgb) {
    rgbFloat = [];
    $.each(rgb, function () {
        rgbFloat.push(this / 255.0);
    });
    return rgbFloat;
}

var gl; // A global variable for the WebGL context

function start() {
    var canvas = document.getElementById("glcanvas");

    // Initialize the GL context
    gl = initWebGL(canvas);

    // Only continue if WebGL is available and working

    if (gl) {
        initShaders();
        initBuffers();
        initTextures();
        //drawScene();
        setInterval(drawScene, 15);
    }

    $('#change_button').click(changeColor);
    $('.color_list li').click(function() {
        $('#original_color').val($(this).html());
    });
}

function initWebGL(canvas) {
    gl = null;

    try {
        // Try to grab the standard context. If it fails, fallback to experimental.
        gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
    } catch (e) {}

    // If we don't have a GL context, give up now
    if (!gl) {
        alert("Unable to...