open web tools for creativity and community
canvas = {
const canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
const context = canvas.getContext("2d");
let af, videoEl, videoWidth, videoHeight, videoX;
let x = 0;
function init() {
cancelAnimationFrame(af);
videoEl = webcam.querySelector("video");
if (!videoEl) throw new Error("webcam video not found.");
videoWidth = videoEl.videoWidth;
videoHeight = videoEl.videoHeight;
if (!videoWidth) throw new Error("webcam video not started.");
videoX = Math.floor(videoWidth * 0.5);
context.clearRect(0, 0, width, height);
x = 0;
draw();
}
function draw() {
af = requestAnimationFrame(draw);
context.drawImage(videoEl, videoX, 0, 1, videoHeight, x, 0, 1, height);
x++;
if (x > width) cancelAnimationFrame(af);
}
const ui = html`<button>Scan`;
ui.addEventListener("click", init);
return html`<div>${[ui, canvas]}`;
}
viewof width = Inputs.number({ value: 1280 })
viewof height = Inputs.number({ value: 720 })
import("https://cdn.jsdelivr.net/gh/meemoo/meemoo-elements@main/src/mm-debug.js")
import("https://cdn.jsdelivr.net/gh/meemoo/meemoo-elements@main/src/mm-webcam.js")
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.
