Public
Edited
Jan 27, 2023
5 stars
{
pathdraw // reference in cell to trigger re-draw
Stereogram.render({
el: 'obs3d',
colors: generatePalette(10),
depthMapper: new CanvasDepthMapper(document.getElementById('can')),
});
}
context = can.getContext("2d")
CanvasDepthMapper = Stereogram.DepthMapper.extend({
constructor: function (canvas, opts) {
opts = opts || {};
this.canvas = canvas;
this.inverted = opts.inverted !== false;
},
make: function () {
var x,
y,
offset,
canvas = this.canvas,
context = canvas.getContext("2d"),
depthMap = [],
width = canvas.width,
height = canvas.height,
pixelData = context.getImageData(0, 0, width, height).data;
for (y = 0; y < height; y++) {
depthMap[y] = new Float32Array(width);
offset = width * y * 4;
for (x = 0; x < width; x++) {
// assume grayscale (R, G, and B are equal)
if (this.inverted) {
depthMap[y][x] = 1 - pixelData[offset + x * 4] / 255;
} else {
depthMap[y][x] = pixelData[offset + x * 4] / 255;
}
}
}
return depthMap;
}
});
generatePalette = (numColors) => {
return Array(numColors).fill().map((c) => {
return [
Math.floor(Math.random() * 256),
Math.floor(Math.random() * 256),
Math.floor(Math.random() * 256),
255
];
});
}
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.
