🧪 Indie software researcher & developer
👾 React game developer
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
listComments(code)
height = 700
table = {
if (hash === "") {
return createRandomRuleTable(stateCount);
}
return getDigits(BigInt(hash.substr(1)), stateCount)
.concat(Array.from({ length: stateCount ** 4 }, () => 0))
.slice(0, stateCount ** 4);
}
function createRandomRuleTable(stateCount) {
return Array.from({ length: stateCount ** 4 }, () =>
Math.floor(Math.random() * stateCount)
);
}
function createCanvasAndDraw(spacetime, colorMap) {
const w = spacetime[0].length;
const h = spacetime.length;
const context = DOM.context2d(w, h, 1);
context.canvas.style.imageRendering = "pixelated";
colorMap = colorMap.map(colorHash6ToAbgr);
const imageData = new ImageDataUint32(context.getImageData(0, 0, w, h));
for (let i = 0; i < h; i++) {
for (let j = 0; j < w; j++) {
imageData.setPixel(j, i, colorMap[spacetime[i][j]]);
}
}
context.putImageData(imageData, 0, 0);
return context.canvas;
}
hash = Generators.observe(notify => {
const hashchange = () => notify(location.hash);
hashchange();
addEventListener("hashchange", hashchange);
return () => removeEventListener("hashchange", hashchange);
})
function ColorMap(args) {
const { value, label } = args;
const els = value.map(v => html`<input type="color" value="${v}">`);
const el = html`${label ? label + ": " : ""}${els}`;
Object.defineProperty(el, "value", {
get() {
return els.map(el => el.value);
}
});
return el;
}
class ImageDataUint32 extends ImageData {
constructor(imageData) {
super(imageData.data, imageData.width, imageData.height);
this.dataUint32 = new Uint32Array(this.data.buffer);
}
setPixel(x, y, abgr) {
this.dataUint32[y * this.width + x] = abgr;
}
}
function colorHash6ToAbgr(hash6) {
const a = 0xff;
const r = parseInt(hash6.substr(1, 2), 16);
const g = parseInt(hash6.substr(3, 2), 16);
const b = parseInt(hash6.substr(5, 2), 16);
return (a << 24) | (b << 16) | (g << 8) | r;
}
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.
