29:null 2a:["$","title",null,{"children":"Binary and Decimal | Christophe Yamahata | Observable"}] 2f:Tcda,viewof single_column_explanation = { const editorCanvas = createPixelEditor(["01010011"], 1); editorCanvas.style.margin = "0"; editorCanvas.style.display = "block"; editorCanvas.style.borderColor = "#ccc"; const container = html`

`; container.querySelector(".editor-holder").appendChild(editorCanvas); function updateMath() { const leftHolder = container.querySelector(".left-math-holder"); const rightHolder = container.querySelector(".right-math-holder"); leftHolder.innerHTML = ""; rightHolder.innerHTML = ""; const vramArray = editorCanvas.value; const binStr = vramArray[0]; const bits = binStr.split("").map(Number); let totalDecimal = 0; let activeValues = []; for (let y = 0; y < 7; y++) { const bitIndex = 7 - y; const isPixelOn = bits[bitIndex]; const bitValue = Math.pow(2, y); const calculatedValue = isPixelOn ? bitValue : 0; if (isPixelOn) { totalDecimal += bitValue; activeValues.push(bitValue); } const lsbLabel = y === 0 ? " (LSB)" : ""; leftHolder.appendChild(html`

2${y} = ${bitValue.toString().padStart(3, ' ')}

`); rightHolder.appendChild(html`

➔ ${isPixelOn} × ${bitValue.toString().padStart(3, ' ')} = ${calculatedValue.toString().padStart(3, ' ')}${lsbLabel}

`); } leftHolder.appendChild(html`

27 = 128

`); rightHolder.appendChild(html`

➔ 0 × 128 =   0 (MSB)

`); leftHolder.appendChild(html`

`); rightHolder.appendChild(html`

--------------------

`); leftHolder.appendChild(html`

`); const sumString = activeValues.length > 0 ? activeValues.join(" + ") : "0"; rightHolder.appendChild(html`

Decimal value: ${sumString} = ${totalDecimal}

`); container.value = totalDecimal; container.dispatchEvent(new CustomEvent("input", { bubbles: true })); } editorCanvas.addEventListener("input", updateMath); updateMath(); return container; } 30:T727,viewof LCD_Sharp_PC1500A = { const imageUrl = await FileAttachment("IvQpf.jpg").url(); const containerWidth = 800; const containerHeight = 388; const screenLeft = 123.8; const screenTop = 94; const canvasWidth = 428; const canvasHeight = 22.5; const container = html`

`; const ctx = DOM.context2d(canvasWidth, canvasHeight); ctx.imageSmoothingEnabled = false; ctx.canvas.style.position = "absolute"; ctx.canvas.style.left = `${screenLeft}px`; ctx.canvas.style.top = `${screenTop}px`; ctx.canvas.style.mixBlendMode = "multiply"; const columns = 156; const rows = 7; const vram = new Uint8Array(columns); const totalSpan = columns + Frame1_decimal.length; const offset = (tick % totalSpan) - Frame1_decimal.length; const currentFrame = (tick % 2 === 0) ? Frame1_decimal : Frame2_decimal; for (let i = 0; i < currentFrame.length; i++) { const targetX = offset + i; if (targetX >= 0 && targetX < columns) { vram[targetX] = currentFrame[i]; } } const pixelWidth = canvasWidth / columns; const pixelHeight = canvasHeight / rows; ctx.clearRect(0, 0, canvasWidth, canvasHeight); for (let x = 0; x < columns; x++) { const byte = vram[x]; for (let y = 0; y < rows; y++) { const isPixelOn = (byte >> y) & 1; if (isPixelOn) { ctx.fillStyle = "rgba(0, 0, 0, 0.6)"; ctx.fillRect(x * pixelWidth, y * pixelHeight, pixelWidth, pixelHeight); } ctx.strokeStyle = "rgba(0, 0, 0, 0.03)"; ctx.strokeRect(x * pixelWidth, y * pixelHeight, pixelWidth, pixelHeight); } } container.appendChild(ctx.canvas); return container; } 31:T47c,viewof display_inspect = { const el = htl.html`

Variables & Functions

⇣ Check to inspect the script

`; const checkbox = el.querySelector("input"); const spacer = el.querySelector("div"); function update() { const show = checkbox.checked; document.querySelectorAll(".observablehq--inspect").forEach(node => { if (el.contains(node)) return; node.style.display = show ? "" : "none"; }); spacer.style.height = show ? "0" : "20vh"; } checkbox.addEventListener("change", update); // Keep watching the DOM for new inspectors const observer = new MutationObserver(update); observer.observe(document.body, { childList: true, subtree: true }); // Initial state update(); // Clean up when the cell is re-run invalidation.then(() => observer.disconnect()); return el; }32:T7b7,function createPixelEditor(sourceBinaryData, columns) { const rows = 7; const scale = 20; let matrix = sourceBinaryData.map(col => col.split("").map(Number)); if (matrix.length < columns) { while (matrix.length < columns) matrix.push(new Array(8).fill(0)); } else if (matrix.length > columns) { matrix = matrix.slice(0, columns); } const canvas = DOM.canvas(columns * scale, rows * scale); const ctx = canvas.getContext("2d"); canvas.style.border = "2px solid #555"; canvas.style.cursor = "crosshair"; canvas.style.display = "block"; canvas.style.marginBottom = "10px"; function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let x = 0; x < columns; x++) { for (let y = 0; y < rows; y++) { const isPixelOn = matrix[x][7 - y]; ctx.fillStyle = isPixelOn ? "#1e251a" : "#ebf0e9"; ctx.fillRect(x * scale, y * scale, scale, scale); ctx.strokeStyle = "#ccc"; ctx.strokeRect(x * scale, y * scale, scale, scale); } } } let drawMode = null; function handlePixelInteraction(e) { const rect = canvas.getBoundingClientRect(); const mouseX = e.clientX - rect.left; const mouseY = e.clientY - rect.top; const x = Math.floor(mouseX / scale); const y = Math.floor(mouseY / scale); if (x >= 0 && x < columns && y >= 0 && y < rows) { const targetY = 7 - y; if (drawMode === null) { drawMode = matrix[x][targetY] === 1 ? 0 : 1; } matrix[x][targetY] = drawMode; draw(); canvas.value = matrix.map(col => col.join("")); canvas.dispatchEvent(new CustomEvent("input", { bubbles: true })); } } canvas.addEventListener("mousedown", (e) => { drawMode = null; handlePixelInteraction(e); }); window.addEventListener("mousemove", (e) => { if (e.buttons === 1) handlePixelInteraction(e); }); draw(); canvas.value = matrix.map(col => col.join("")); return canvas; } 33:[{"id":"ec151d401abaf375fd135339c3d1ddbe96973ff99175b64534b604610867d94d4f5e052fb2deae6439dec21137bae810b6504ba0120fddbdb01cf30c1e96a073","href":"https://static.observableusercontent.com/files/ec151d401abaf375fd135339c3d1ddbe96973ff99175b64534b604610867d94d4f5e052fb2deae6439dec21137bae810b6504ba0120fddbdb01cf30c1e96a073","name":"IvQpf.jpg","type":"image/jpeg","lastModified":1790505515943,"size":303320}] 2d:{"id":"68989a1a0cefa8fa","slug":"binary-and-decimal","title":"Binary and Decimal","thumbnail":"7914ee95d66d987311fccefadc503abfbf08ffac4b12301a5179ca24c2161d26","access_level":"public","create_time":"$D2026-09-27T10:22:24.165Z","update_time":"$D2026-09-27T17:04:21.995Z","view_time":null,"first_public_time":"$D2026-09-27T15:57:59.782Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024"},"version":394,"publish_version":394,"role":null,"authored":false,"authors":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null}],"members":[{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Binary and Decimal","cells":[{"id":1,"value":"# Binary and Decimal\n\n*Binary encoding can feel abstract at first. When I was around 10 years old, I received a Japanese Sharp PC-1500 series pocket computer, complete with its legendary CE-150 plotter dock. It was on this remarkable machine that I discovered **binary encoding** and wrote my very first lines of code in BASIC.*\n\n*As a tribute to my early spark of curiosity triggered by this pocket computer, this notebook recreates my childhood journey: from sketching a crocodile on a sheet of grid paper, to calculating its bits and bringing it to life on the LCD screen.*\n\n\n✦︎\n This notebook was built with the assistance of Gemini AI.\n

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"{\n const img = await FileAttachment(\"IvQpf.jpg\").image();\n img.style.width = \"600px\";\n img.style.display = \"block\";\n img.style.marginBottom = \"8px\";\n\n return html`

\n ${img}\n

\n The Sharp PC-1500A (circa 1984).\n

\n `;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"---\n\n### 📟 Sharp PC-1500 Series (156 × 7 LCD display)\n\nLaunched in the early 1980s, the **Sharp PC-1500 series** was a pocket computer marvel. It displayed graphics on a **156 × 7 pixel** liquid crystal matrix. Here is a brief look at its software logic and hardware constraints:\n\n* **7-Pixel Constraint:** Because processors handle data in standard **8-bit bytes (octets)**, each vertical column of 7 pixels maps to exactly one byte. This means the hardware has a surplus bit.\n* **8^th Bit (MSB):** The most significant bit (the leftmost bit in the 8-bit binary array) is physically disconnected from the LCD screen. It is always set to `0`.\n* **Display Result:** The least significant bit (LSB) controls the top pixel, and Bit 6 controls the bottom pixel. Since the Sharp’s BASIC interpreter did not read raw binary data for screen rendering, it had to be fed with converted decimal numbers instead. Valid decimal values range strictly from **0** (all pixels off) to **127** (all 7 pixels on).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"
\n\n### 📐 Encoding a Single Column\n\nLet's analyze how one vertical column of 7 pixels works.\n
👆 Click on any square below to see how its binary bit acts as a multiplier against its power of 2, creating the dynamic decimal values used by the Sharp's graphing commands within the pixel matrix.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"
\n\n### 🐊 Draw the animated crocodile\nClick on the pixel grids below to customize the two frames of the animation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"viewof Frame1_binary_input = createPixelEditor(crocodile_Frame1_binary,n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"viewof Frame2_binary_input = createPixelEditor(crocodile_Frame2_binary,n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"tick = {\n let count = 0;\n while (true) {\n yield count++;\n await Promises.tick(150); // 200 ms\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"n = 40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"crocodile_Frame1_binary = [\n \"00000000\",\n \"00000001\",\n \"00000010\",\n \"00000110\",\n \"00000110\",\n \"00000110\",\n \"00000111\",\n \"00000110\",\n \"00001110\",\n \"00001110\",\n \"00011100\",\n \"00011100\",\n \"00011100\",\n \"00111110\",\n \"01111110\",\n \"01111110\",\n \"01011111\",\n \"01011110\",\n \"00011110\",\n \"00011110\",\n \"00011111\",\n \"00011110\",\n \"00111110\",\n \"01111110\",\n \"01111111\",\n \"01011110\",\n \"01001110\",\n \"00001110\",\n \"00011111\",\n \"00011101\",\n \"00011111\",\n \"00011011\",\n \"00010110\",\n \"00011010\",\n \"00010110\",\n \"00011010\",\n \"00010110\",\n \"00011010\",\n \"00010110\",\n \"00000010\"\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"crocodile_Frame2_binary = [\n \"00000010\",\n \"00000010\",\n \"00000010\",\n \"00000010\",\n \"00000011\",\n \"00000011\",\n \"00000111\",\n \"00000111\",\n \"00001110\",\n \"00001110\",\n \"00011100\",\n \"01011100\",\n \"01011100\",\n \"01111110\",\n \"01111110\",\n \"00111110\",\n \"00011111\",\n \"00011110\",\n \"00011110\",\n \"00011110\",\n \"01011111\",\n \"01011110\",\n \"01111110\",\n \"01111110\",\n \"00111111\",\n \"00011110\",\n \"00001110\",\n \"00001110\",\n \"00011111\",\n \"00011101\",\n \"00011111\",\n \"00011011\",\n \"00010110\",\n \"00011010\",\n \"00010110\",\n \"00011010\",\n \"00010110\",\n \"00011010\",\n \"00010110\",\n \"00000010\"\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"mutable Frame1_binary = Frame1_binary_input","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"mutable Frame2_binary = Frame2_binary_input","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"mutable Frame1_decimal = Frame1_binary.map(binStr => parseInt(binStr, 2))\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"mutable Frame2_decimal = Frame2_binary.map(binStr => parseInt(binStr, 2))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"2","titling":"auto"}} 2e:"$2d:body"