Public
Edited
May 16, 2021
Importers
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
cloneCanvas = canvas => {
const copy = document.createElement('canvas');
const context = copy.getContext('2d');
copy.width = canvas.width;
copy.height = canvas.height;
context.drawImage(canvas, 0, 0);
return copy;
}
Insert cell
Insert cell
sharedGraphicalKernel = (gpu, algo, options) => {
Object.assign(options, { dynamicArguments: true, graphical: true });
const kernel = gpu.createKernel(algo, options);
const canvas = kernel.canvas;
let lastArgs;
return container => (...args) => {
// If active container is changing
if (canvas.parentNode != container) {
// Freeze the canvas in previously active container (if any)
if (canvas.parentNode) {
// Run the kernel with previous arguments before cloning the result
kernel(...lastArgs);
// Replace the kernel canvas with a static copy
canvas.replaceWith(cloneCanvas(canvas));
}
// Transfer kernel canvas to active container
container.firstChild && container.firstChild.remove();
container.append(canvas);
}
// Run kernel in active container
kernel(...(lastArgs = args));
};
}
Insert cell
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