KaoShader Example

<html>
  <head>
    <script src="assets/js/jquery-3.1.1.min.js"></script>
    <script src="assets/js/KaoShader.js"></script>

    <script type="text/javascript">
      $(document).ready(() => {
        try {
          var time_start = +new Date();
          var canvas = $('<canvas class="main"></canvas>')
            .appendTo(document.body)
            .KaoShader({
              shaderF : `
                #define PI 3.1415926538
                precision mediump float;
                varying vec2 c_pos;
                varying vec2 a_pos;
                uniform float time;

                float coerce(float ang)
                {
                  return mod(mod(ang,PI*2.)+PI*2.,PI*2.);
                }

                float color(float i_ang, float index, float p_ang)
                {
                  float t_ang = i_ang * index;
                  float d_ang = coerce( abs(t_ang - p_ang) );
                  return max(i_ang - d_ang, i_ang - PI*2. + d_ang) / i_ang;
                }

                void main(void)
                {
                  float p_ang = coerce( atan(c_pos.y,c_pos.x) + time / 10. );
                  float i_ang = PI * 2. / 3.;

                  float c_dist = sqrt(pow(c_pos.x,2.)+pow(c_pos.y,2.));

                  vec3 col = vec3(
                    color(i_ang,0.,p_ang),
                    color(i_ang,1.,p_ang),
                    color(i_ang,2.,p_ang)
                  ) * c_dist;

                    gl_FragColor = vec4(col,1.);
                }
              `,
              uniforms : {
                time : 0,
              },
            });

          setInterval(() => {
            var time_stamp = +new Date() - time_start;
            canvas
              .KaoShader_input({time:time_stamp / 1000})
              .KaoShader_draw();
          },100);
        } catch(e) {
          console.error(e);
        }
      });
    </script>
    <style type="text/css">
      .main {
        position : fixed;
        top : 0;
        bottom : 0;
        left : 0;
        right : 0;
        width : 100vw;
        height : 100vh;
      }
    </style>
  </head>
  <body>

  </body>
</html>