JSFiddle - React, Tailwind, and code Playground

by tfoller

HTML

<canvas id="main_canvas" style="width:500px;height:300px;border:1px solid #774777;background:rgba(0,0,0,1.0);"></canvas>
<script type="x-shader/x-vertex" id="vert_uv" export="true">
        out vec2 ouv;
        void main() {
        ouv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
        }
    </script>
    <script type="x-shader/x-fragment" id="frag_ContourGradient" export="true">
        in vec2 ouv;
        uniform vec3 colors[_LENGTH_];
        uniform float steps[_LENGTH_];

        uniform float lines[_LINEPOINTS_];

        bool pointInTriangle(float x2, float y2, float x3, float y3, float x, float y, out float dist)
        {
        float den = 1.0 / (x2 * y3 - x3 * y2);
        float wa = ((y2 - y3) * x + (x3 - x2) * y - x3 * y2 + x2 * y3) * den;
        if(wa < 0.0 || wa > 1.0) return false;
        float wb = (y3 * x - x3 * y) * den;
        if(wb < 0.0 || wb > 1.0) return false;
        float wc = 1.0 - wa - wb;
        if(wc < 0.0 || wc > 1.0) return false;

        den = -x * (y2 - y3) + y * (x2 - x3);
        float crx = x * (x2 * y3 - y2 * x3)/den;
        float cry = y * (x2 * y3 - y2 * x3)/den;
        dist = length(vec2(x,y)) / length(vec2(crx, cry));
        return true;
        }

        void main()
        {
        float dist = 0.0;
        for(int j = 0; j < _LINEPOINTS_; j+=4) {
        if(pointInTriangle(lines[j], lines[j+1], lines[j+2], lines[j+3], ouv.x, ouv.y, dist)) break;
        }

        vec3 color = mix(colors[0], colors[1], smoothstep(steps[0], steps[1], dist));
        for(int i = 2; i < _LENGTH_; i++) {
        color = mix(color, colors[i], smoothstep(steps[i-1], steps[i], dist));
        }
        gl_FragColor = vec4(color, 1.0);
        }
    </script>
    <script type="x-shader/x-fragment" id="frag_LinearGradient" export="true">
        in vec2 ouv;
        uniform vec3 colors[_LENGTH_];
        uniform float steps[_LENGTH_];
        void main()
        {
        float dist =...

CSS

body {
  background: #112233;
}

JavaScript

// THREE globals

 let scene, renderer, camera;

 let _C = {
   degToRad: 0.017453292519943295,
   radToDeg: 57.29577951308232,
   play: false,
   canvas: "main_canvas",
   alpha: false,
   premultipliedAlpha: false,
   depth: true,
   stencil: false,
   antialias: true,
   canvas_bg: "rgba(0,0,0,1.0)",
   workspace: {
     width: 500,
     height: 300,
     color: 1118481
   },
   aspect: 2,
   cam: {
     r: 250,
     t: 150
   },
   banner: {
     width: 500,
     height: 300,
     bgColor: 1118481,
     borderColor: "774777"
   }
 };

 init();
 animate();

 function init() {

   // scene

   scene = new THREE.Scene();
   scene.background = new THREE.Color().setHex(_C.workspace.color);

   // renderer

   renderer = new THREE.WebGLRenderer({
     canvas: document.getElementById(_C.canvas),
     alpha: _C.alpha,
     premultipliedAlpha: _C.premultipliedAlpha,
     depth: _C.depth,
     stencil: _C.stencil,
     antialias: _C.antialias,
   });

   renderer.setPixelRatio(window.devicePixelRatio);
   renderer.setSize(_C.workspace.width, _C.workspace.height, true);

   camera = new THREE.OrthographicCamera(-_C.cam.r, _C.cam.r, _C.cam.t, -_C.cam.t, _C.cam.n, _C.cam.f);




   /* world beg */

   let get = (id) => {
     return document.getElementById(id);
   }


   function makeGeom(path) {
     let SBG = [];
     for (let p of path) {
       let beg, end;
       let threeShape = new THREE.Shape();
       var comm = p.match(/([MQL][0-9\. ]*)/g);
       for (let c of comm) {
         var t = c.slice(0, 1);
         var args = c.slice(1).split(' ').map((e, i) => {
           e = Number(e);
           if (i % 2) e *= -1;
           return e;
         });
         if (!beg) beg = [args[0], args[1]];
         end = args.slice(-2);
         switch (t) {
           case 'M':
             threeShape.moveTo(args[0], args[1]);
             args.splice(0, 2);
           case 'L':
             for (let i = 0; i < args.length; i += 2)
              ...