Public
Edited
Apr 26, 2024
3 forks
4 stars
simulation.filter((d) => !d.contents && d.collapsed)
// probView = {
// let context = DOM.context2d(
// spriteColumns * kernelSize,
// spriteRows * kernelSize
// );
// context.fillStyle = "white";
// context.fillRect(0, 0, spriteColumns * kernelSize, spriteRows * kernelSize);
// // For clean rendering pixel art
// context.canvas.style.width = width + "px";
// context.canvas.style["image-rendering"] = "pixelated";
// context.canvas.style["image-rendering"] = "crisp-edges";
// context.strokeStyle = "black";
// context.lineWidth = 0.02;
// // Helper function to calculate average color
// const calculateAverageColor = (colors) => {
// const sumColor = colors.reduce(
// (acc, color) => {
// acc[0] += color[0];
// acc[1] += color[1];
// acc[2] += color[2];
// return acc;
// },
// [0, 0, 0]
// );
// return sumColor.map((val) => Math.floor(val / colors.length));
// };
// spriteSimulation.forEach((cell) => {
// context.strokeRect(
// cell.x * kernelSize,
// cell.y * kernelSize,
// kernelSize,
// kernelSize
// );
// if (!cell.collapsed) {
// // For non-collapsed cells, calculate and draw the blurry average
// const pixelColors = Array.from(
// { length: kernelSize * kernelSize },
// () => []
// );
// cell.options.forEach((optionIndex) => {
// const tileData = spriteTileSet[optionIndex].tileData;
// for (let i = 0; i < tileData.length; i += 4) {
// const pixelIndex = i / 4;
// pixelColors[pixelIndex].push([
// tileData[i],
// tileData[i + 1],
// tileData[i + 2]
// ]);
// }
// });
// pixelColors.forEach((colors, index) => {
// if (colors.length > 0) {
// const averageColor = calculateAverageColor(colors);
// const colorString = `rgb(${averageColor[0]},${averageColor[1]},${averageColor[2]})`;
// const dx = index % kernelSize;
// const dy = Math.floor(index / kernelSize);
// context.fillStyle = colorString;
// context.fillRect(
// cell.x * kernelSize + dx,
// cell.y * kernelSize + dy,
// 1,
// 1
// );
// }
// });
// } else if (cell.contents?.tileData) {
// // For collapsed cells with contents, draw as before
// for (let i = 0; i < cell.contents.tileData.length; i += 4) {
// const tileData = cell.contents.tileData;
// const color = `rgb(${tileData[i]},${tileData[i + 1]},${
// tileData[i + 2]
// })`;
// const pixelIndex = i / 4;
// const dx = pixelIndex % kernelSize;
// const dy = Math.floor(pixelIndex / kernelSize);
// context.fillStyle = color;
// context.fillRect(
// cell.x * kernelSize + dx,
// cell.y * kernelSize + dy,
// 1,
// 1
// );
// }
// } else {
// // Fallback for collapsed cells without contents (should not happen in a correct simulation)
// context.fillStyle = "black";
// context.fillRect(
// cell.x * kernelSize,
// cell.y * kernelSize,
// kernelSize,
// kernelSize
// );
// }
// });
// return context.canvas;
// }
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.
