Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="glcanvas"></canvas>   <script id="vertex-shader" type="x-shader/x-vertex">     attribute vec2 a_position;     void main() {       gl_Position = vec4(a_position, 0.0, 1.0);     }   </script> <script id="fragment-shader" type="x-shader/x-fragment">   precision mediump float; uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; vec3 palette( float t ) {     vec3 a = vec3(0.5, 0.5, 0.5);     vec3 b = vec3(0.5, 0.5, 0.5);     vec3 c = vec3(1.0, 1.0, 1.0);     vec3 d = vec3(0.263,0.416,0.557);      return a + b*cos( 6.28318*(c*t+d) ); } float oscillate(float time, float minVal, float maxVal) {     float sineWave = sin(time);     float normalizedSine = (sineWave + 1.0) / 2.0;     return mix(minVal, maxVal, normalizedSine); }  void main() {     float time = u_time/5.0;     vec2 st = (gl_FragCoord.xy * 2.0 - u_resolution.xy) / u_resolution.y;     st = abs(st);     float d = length(st) * exp(-length(st))/oscillate(time, 0.01, 0.09) * sin(st.x  + st.y + time) * cos(st.y + st.x + time);     d *= sin(time) * cos(fract(st.y));     d = sin(d*7. + time)/7.;       st.x = length(st) * fract(st.x + d + time)/fract(st.y + d + time) * 0.4;     st.y = length(st) * fract(st.y + d + time)/fract(st.x + d + time) * 0.2;            vec3 color = palette(d);     color = vec3(color);      gl_FragColor = vec4(color,1.0); } </script>
</body>
</html>

console.log("Event Fired")
   const canvas = document.getElementById('glcanvas');
    const gl = canvas.getContext('webgl');

canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

function getShaderSource(id) {
      return document.getElementById(id).textContent;
    }

const vertexShaderSource = getShaderSource('vertex-shader');
    const fragmentShaderSource = getShaderSource('fragment-shader');

function createShader(gl, type, source) {
      const shader = gl.createShader(type);
      gl.shaderSource(shader, source);
      gl.compileShader(shader);
      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error('An error occurred compiling the shaders:', gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
      }
      return shader;
    }

function createProgram(gl, vertexShader, fragmentShader) {
      const program = gl.createProgram();
      gl.attachShader(program, vertexShader);
      gl.attachShader(program, fragmentShader);
      gl.linkProgram(program);
      if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
        console.error('Unable to initialize the shader program:', gl.getProgramInfoLog(program));
        return null;
      }
      return program;
    }

const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
    const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
    const program = createProgram(gl, vertexShader, fragmentShader);

const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    const positions = [
      -1.0, -1.0,
       1.0, -1.0,
      -1.0,  1.0,
       1.0,  1.0,
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

const positionLocation = gl.getAttribLocation(program, 'a_position');
    gl.enableVertexAttribArray(positionLocation);
    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

gl.useProgram(program);

const resolutionLocation = gl.getUniformLocation(program, 'u_resolution');
    const timeLocation = gl.getUniformLocation(program, 'u_time');

function render(time) {
      gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
      gl.uniform1f(timeLocation, time * 0.001);
      
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
      requestAnimationFrame(render);
    }

resize();
    function resize() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
    }

window.addEventListener('resize', resize);

requestAnimationFrame(render);

Frontend Forever App