<canvas width="300" height="300" id="canvas" style="background-color:black;"/>
<script type=" " id="vert">
attribute vec2 v;
uniform vec2 mouse;
uniform float time;
uniform float burst;
void main(void) {
gl_PointSize = 2.7;
vec2 p = v;
vec2 m = mouse*2. - 1.;
vec2 r = p - m;
if (dot(r,r) < .1) {
float a = atan(r.y, r.x);
vec2 p1 = m+vec2(cos(a),sin(a))*.3;
p = mix(p, p1, burst);
}
gl_Position = vec4(p, 0., 1.);
}
</script>
<script type=" " id="frag">
precision highp float;
void main(void) {
gl_FragColor = vec4(.8, .8, .8, 1.);
}
</script>
<script>
let active = false, burst = 0, size = 22, vertices = [];
for (var x=0; x<size; x++) for (var y=0; y<size; y++)
vertices.push(1/size + x*2/size - 1, 1/size + y*2/size - 1)
let gl = canvas.getContext('webgl');
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
let pid = gl.createProgram();
shader(vert.textContent, gl.VERTEX_SHADER);
shader(frag.textContent, gl.FRAGMENT_SHADER);
gl.linkProgram(pid);
gl.useProgram(pid);
let v = gl.getAttribLocation(pid, "v");
gl.vertexAttribPointer(v, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(v);
let timeUniform = gl.getUniformLocation(pid, 'time');
let burstUniform = gl.getUniformLocation(pid, 'burst');
let mouseUniform = gl.getUniformLocation(pid, 'mouse');
requestAnimationFrame(draw);
canvas.addEventListener('mousemove', e => {
gl.uniform2f(mouseUniform, e.x/gl.drawingBufferWidth, 1-e.y/gl.drawingBufferHeight)
active = true;
})
function draw(t) {
if (active) {
burst = Math.min(1, burst+0.07)
if (burst === 1) active = false;
} else {
burst = Math.max(0, burst-0.01)
}
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.clearColor(0, 0, 0, 0);
gl.uniform1f(timeUniform, t/1000);
gl.uniform1f(burstUniform, burst)
// draw dots (every vertex)
gl.vertexAttribPointer(v, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.POINTS, 0, size*size);
// draw lines
for (var x=0; x<size; x++){
gl.vertexAttribPointer(v, 2, gl.FLOAT, false, 0, x*size*8);
gl.drawArrays(gl.LINE_STRIP, 0, size);
gl.vertexAttribPointer(v, 2, gl.FLOAT, false, (size)*8, x*8);
gl.drawArrays(gl.LINE_STRIP, 0, size);
}
requestAnimationFrame(draw);
}
function shader(src, type) {
let sid = gl.createShader(type);
gl.shaderSource(sid, src);
gl.compileShader(sid);
var message = gl.getShaderInfoLog(sid);
gl.attachShader(pid, sid);
if (message.length > 0) {
console.log(src.split("\n").map((str, i) => (""+(1+i)).padStart(4, "0")+": "+str).join("\n"));
throw message;
}
}
</script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>