Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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)
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment