Published
Edited
Dec 22, 2020
1 star
md`# WebGL Image effect with observable generator`
draw(progress)
draw = (progress) => {
gl.clear({color: [0,0,0,1]})
const renderer = gl(renderImage)
renderer({ progress })
}
progress = {
let value = 0;
let direction = 1;
while (true) {
value += 0.01 * direction;
if (value <= 0 || value >= 1) {
direction *= -1;
}
yield value;
}
}
renderImage = ({
vert,
frag,
attributes: {
position: [[-1,1], [1,1],[1, -1], [-1, 1], [1, -1], [-1, -1]],
},
uniforms: {
progress: gl.prop('progress'),
image: gl.texture({ data : image, flipY: true })
},
count: 6
})
vert = `
precision mediump float;
uniform float time;
varying vec2 uv;
attribute vec2 position;
uniform vec2 pixels;
uniform float progress;
void main() {
uv = position * 0.5 + 0.5;
gl_Position = vec4(position, 0., 1.);
}
`
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
frag = `
precision mediump float;
uniform sampler2D image;
uniform float progress;
varying vec2 uv;
void main() {
float distance = length(uv - vec2(0.5));
float maxDistance = length(vec2(0.5));
float normalizedDistance = distance / maxDistance;
float stickTo = normalizedDistance;
float stickProgress = min(2.*progress, 2.*(1. - progress));
float zProgress = clamp(.5*progress, 0.,1.);
gl_FragColor = mix(texture2D(image, uv), vec4(0.,0.,0.,1.), 2.*stickTo * stickProgress - zProgress);
}
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
