2d:null 2e:["$","title",null,{"children":"Pixel-8 | nxrix | Observable"}] 33:T64d,{ const outlineOffsets = [ [-1, -1], [0, -1], [1, -1], [-1, 0], [1, 0], [-1, 1], [0, 1], [1, 1] ]; const printOutline = function (px8, t, x, y, a, b, c) { outlineOffsets.forEach(([i, j], k) => { px8.print(t, x + i, y + j, k < 3 ? 20 : 0); }); }; let t = 0; const str = "hello world"; function update(px8) { px8.cls(); for (let y = 0; y < px8.h; y++) { for (let x = 0; x < px8.w; x++) { const dy = Math.abs(y - px8.h2 + 0.5); const z = 1.0 / (dy + 1); const c = (Math.floor((x - px8.w2) * z + 8 + Math.sin(t / 128) * 4) + Math.floor(z * 64 + t / 64)) % 2; const h = dy / px8.h2; px8.pset( x, y, [0, 20, 24, 1, 2, 3][ ((c * 0.9 + 0.1) * h * h * 5 + Pixel8.class.bayer4x4[x & 3][y & 3] / 16) | 0 ] ); } } const g = Math.sin(t / 32) ** 3 * 12 + 12; for (let i in str) { for (let j = 0; j < 7; j++) { printOutline( px8, str[i], px8.w2 - str.length * 2 + i * 4, px8.h2 - 2 - Math.sin((i + j) / 4 + t / 16) * g - (j - 3.5) ); } } for (let i in str) { for (let j = 0; j < 7; j++) { px8.print( str[i], px8.w2 - str.length * 2 + i * 4, px8.h2 - 2 - Math.sin((i + j) / 4 + t / 16) * g - (j - 3.5), [25, 22, 13, 15, 10, 6, 3][j] ); } } t++; } return Pixel8.canvas(update, { w: 128, h: 128, s: 3, invalidation }); }34:T67d,## API `px8.w`: buffer width `px8.h`: buffer height `px8.w2` half buffer width `px8.h2` half buffer height `srnd(s?)`: set random number generator seed to `s` `rnd(x?)`: generate a random number from 0 to `x` or select a random item from array `x` ( 0-1 if no value ) `cls(c?)`: fill the buffer with color `c` ( 0 if no value ) `pset(x,y,c)`: set pixel `[x,y]` to color `c` `pget(x,y)`: get color of pixel `[x,y]` `camera(x?,y?)`: move camera to `[x,y]` ( [0,0] if no values ) `clip(x0?,y0?,x1?,y1?)`: clip drawing to `[x0,y0]` & `[x1,y1]` ( resets to default if no values ) `fillp(p?,c?)`: set a pattern applied to all drawing functions. `p` is a number with 16 bits and each 4x4 area gets the same pattern. `c` is the pattern’s base color. If c was 0, the pattern color will be transparent (use 32 for black) ( resets to default if no values ) `palt(c?,t?)`: set `c` to be transparent ( resets to default if no values ) `line(x0,y0,x1,y1,c)`: draw a line from `[x0,y0]` to `[x1,y1]` with color `c` `rect(x0,y0,x1,y1,c)`: draw a rectangle from `[x0,y0]` to `[x1,y1]` with color `c` `rectfill(x0,y0,x1,y1,c)`: draw a filled rectangle from `[x0,y0]` to `[x1,y1]` with color `c` `circ(x,y,r,c)`: draw a circle at `[x,y]` with radius `r`, and color `c` `circfill(x,y,r,c)`: draw a filled circle at `[x,y]` with radius `r`, and color `c` `rrect(x,y,w,h,r,c)` draw a rounded rectangle from `[x0,y0]` to `[x1,y1]` with border radius `r`, and color `c` `sspr(s,x,y,w,h)`: draw sprite `s` at `[x,y]` with width `w` and height `h`. The sprite should be exported using PNG to sprite tool `print(t,x,y,c)`: print string `t` at `[x,y]` with color `c`35:T5e5,Pixel8 = { const o = {}; o.class = new Function( `${await ( await fetch( "https://raw.githubusercontent.com/nxrix/pixel-8/refs/heads/main/src/pixel8.js" ) ).text()};return Pixel8` )(); o.canvas = function ( update, { w = 256, h = 256, s = 1, paused = false } = {} ) { let px8 = new o.class(w, h); const canvas = document.createElement("canvas"); canvas.style.imageRendering = "pixelated"; canvas.width = w; canvas.height = h; canvas.style.width = w * s + "px"; canvas.style.maxWidth = "100%"; const ctx = canvas.getContext("2d"); const img = ctx.createImageData(w, h); const img_data = img.data; let id = null; const u = function (t) { update(px8); for (let i = 0; i < px8.w * px8.h; i++) { const c = o.class.palette[px8.buffer[i]]; const index = i * 4; img_data[index] = c[0]; img_data[index + 1] = c[1]; img_data[index + 2] = c[2]; img_data[index + 3] = 255; } ctx.putImageData(img, 0, 0); if (!paused) id = requestAnimationFrame(u); }; u(); Inputs.disposal(canvas).then(() => { cancelAnimationFrame(id); }); canvas.pause = () => { if (id) { cancelAnimationFrame(id); id = null; paused = true; } }; canvas.resume = () => { if (!id && paused) { paused = false; id = requestAnimationFrame(u); } }; return canvas; }; return o; }36:[] 31:{"id":"760c9872e7ab6045","slug":"pixel-8","title":"Pixel-8","thumbnail":"d4e35d3c8cea49de9490709472aabf7d7d252cec782c19da6fb8ddcadc57f78a","access_level":"public","create_time":"$D2025-07-17T19:09:55.790Z","update_time":"$D2026-09-04T20:56:55.951Z","view_time":null,"first_public_time":"$D2026-06-12T12:23:26.170Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"d6840fab65eebcab","login":"nxrix","name":"nxrix","avatar_url":"https://avatars-next.observableusercontent.com/e64bf55bfe8edb531a8042147a84d2906d224f9102c11c06b67fae3be08b1a80","tier":"starter_2024"},"version":476,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9d8e4bfddc4592ef","login":"nxrix","name":"nxrix","avatar_url":"https://avatars-next.observableusercontent.com/e64bf55bfe8edb531a8042147a84d2906d224f9102c11c06b67fae3be08b1a80","tier":null}],"members":[{"type":"individual","id":"9d8e4bfddc4592ef","login":"nxrix","name":"nxrix","avatar_url":"https://avatars-next.observableusercontent.com/e64bf55bfe8edb531a8042147a84d2906d224f9102c11c06b67fae3be08b1a80","tier":null,"role":"editor"},{"type":"team","id":"d6840fab65eebcab","login":"nxrix","name":"nxrix","avatar_url":"https://avatars-next.observableusercontent.com/e64bf55bfe8edb531a8042147a84d2906d224f9102c11c06b67fae3be08b1a80","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Pixel-8","cells":[{"id":0,"value":"# Pixel-8\n\nA web based fantasy console and JavaScript library. \nCheck the [GitHub repository](https://github.com/nxrix/pixel-8) to learn more.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"## Usage\n\nTo use in your notebooks, start by importing the library:\n\n```js\nimport { Pixel8 } from \"@nxrix/pixel-8\"\n```\n\nNext, create a new cell and paste the code below. This snippet creates a 128×128 canvas with 2x scaling and runs a loop that renders a moving diagonal gradient:\n\n```js\n{\n let t = 0;\n function update(px8) {\n px8.cls();\n for (let i = 0; i < px8.w; i++) {\n for (let j = 0; j < px8.h; j++) {\n px8.pset(i, j, (i + j + t) / 4);\n }\n }\n t++;\n }\n return Pixel8.canvas(update, { w: 128, h: 128, s: 2 });\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":238,"value":"## Palette","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":240,"value":"{\n const sx = 9;\n const sy = 8;\n function update(px8) {\n for (let i = 0; i < 8; i++) {\n for (let j = 0; j < 4; j++) {\n px8.rectfill(\n i * sx,\n j * sy,\n i * sx + sx - 1,\n j * sy + sy - 1,\n i * 4 + j\n );\n px8.print(\n i * 4 + j,\n i * sx + 3 - (i * 4 + j > 9 ? 2 : 0),\n j * sy + 2,\n i * 4 + j === 3 ? 0 : 3\n );\n }\n }\n }\n return Pixel8.canvas(update, { w: 72, h: 32, s: 2, paused: true });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"## Font","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":217,"value":"{\n function update(px8) {\n for (let i = 0; i < 16; i++) {\n for (let j = 0; j < 6; j++) {\n px8.print(\n String.fromCharCode(i + j * 16 + 32),\n i * 4 + 1,\n j * 5 + 1,\n 3\n );\n }\n }\n }\n return Pixel8.canvas(update, { w: 65, h: 31, s: 2, paused: true });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":191,"value":"## Core","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"2","titling":"auto"}} 32:"$31:body"