Published
Edited
Mar 28, 2022
8 forks
21 stars
viewof camera = md`<input type=checkbox>`
function getimagedata(v) {
const w = Math.min(400, v.width || Infinity), h = Math.min(300, v.height || Infinity);
const context = DOM.context2d(w, h, 1);
context.drawImage(v, 0, 0, w, h);
return context.getImageData(0, 0, w, h);
}
GPU = require("gpu.js@2.15.2")
// the kernel runs for each pixel, with:
// - this.thread.x = horizontal position in pixels from the left edge
// - this.thread.y = vertical position in pixels from the bottom edge (*opposite of canvas*)
kernel = function(data, wobble) {
var x = this.thread.x,
y = this.thread.y;
//var data = this.constants.data;
// wouldn't be fun if the kernel did _nothing_
x = Math.floor(x + wobble * Math.sin(y / 10));
y = Math.floor(y + wobble * Math.cos(x / 10));
var n = 4 * ( x + this.constants.w * (this.constants.h - y) );
this.color(data[n]/256, data[n+1]/256,data[n+2]/256,1);
}
render = new GPU.GPU({ mode: "gpu" })
.createKernel(kernel)
.setConstants({ w: image.width, h: image.height })
.setOutput([image.width, image.height])
.setGraphical(true)
draw = {
var fpsTime = performance.now(); mutable fps = 60;
while (true) {
render(image.data, 14 * Math.sin(Date.now() / 400));
yield render.getCanvas();
mutable fps = (1 + mutable fps) * (1 + 0.000984 * (fpsTime - (fpsTime = performance.now())));
}
}
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.
