gl-toaster.js

const regl = require('regl')()

const video = document.createElement('video')
video.src = 'mario.mp4'
video.currentTime = window.localStorage.getItem('currentTime') | 0

function persistVideoLocation () {
  window.localStorage.setItem('currentTime', video.currentTime)
}

video.addEventListener('canplay', function () {
  video.play()

  let mouse = [0, 0]
  window.addEventListener('mousemove', (ev) => {
    mouse[0] = 2 * ev.clientX / window.innerWidth - 1
    mouse[1] = 1 - 2 * ev.clientY / window.innerHeight
  })

  const videoTexture = regl.texture({
    data: video,
    min: 'linear',
    mag: 'linear',
    flipY: true
  })

  const drawVideo = regl({
    frag: `
    precision mediump float;
    varying vec2 uv;
    uniform sampler2D videoTexture;
    uniform vec2 mouse;
    uniform float time;

    vec4 video (vec2 p) {
      return texture2D(videoTexture, 0.5 * (p + 1.));
    }

    vec3 saturate (vec3 c) {
      float lo = min(min(c.x, c.y), c.z);
      float hi = max(max(c.x, c.y), c.z);
      return (c - lo) / (hi - lo);
    }

    void main () {
      vec2 d = uv - mouse;

      float theta = atan(uv.y, uv.x);
      float radius = length(uv) * (0.25 + length(d));

      theta += 0.1 * radius * cos(10. * time);

      vec2 p = radius * vec2(cos(theta), sin(theta));

      vec3 c = video(p +
        0.01 * vec2(sin(time + 10. * uv.y), 0)).rgb;

      gl_FragColor = vec4(c.bgr, 1.);
    }
    `,

    vert: `
    precision mediump float;
    attribute vec2 position;
    varying vec2 uv;
    void main () {
      uv = 2. * position - 1.;
      gl_Position = vec4(2. * position - 1., 0, 1);
    }
    `,

    attributes: {
      position: [
        0, 0,
        1, 0,
        0, 1,
        0, 1,
        1, 0,
        1, 1
      ]
    },

    uniforms: {
      videoTexture: () => videoTexture.subimage(video),
      time: ({tick}) => tick / 1000,
      mouse: () => mouse
    },

    count: 6
  })

  regl.frame(({tick}) => {
    regl.clear({
      color: [0, 0, 0, 1]
    })
    drawVideo()
    video.playbackRate = 1 + 0.25 * Math.abs(Math.sin(0.1 * tick))
  })

  setInterval(persistVideoLocation, 100)
})