Published
Edited
Jun 12, 2018
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// the kernel runs for each pixel, with:
kernel = new blink.Kernel({
input: { in_rgba: buffer },
output: { out_rgba: buffer }
}, `void main() {
lowp uvec4 color = texture(in_rgba, bl_UV);
out_rgba = uvec4(color.r, 3u * color.g, 255u - color.b, 255u);
}`)
Insert cell
Insert cell
draw = {
var fpsTime = performance.now(); mutable fps = 60;
const canvas = DOM.canvas(image.width, image.height),
ctx = canvas.getContext("2d");
while (true) {
mutable fps = (1 + mutable fps) * (1 + 0.000984 * (fpsTime - (fpsTime = performance.now())));
kernel.exec()
ctx.putImageData(image, 0, 0)
yield canvas;
}
}
Insert cell

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.
Learn more