2c:null 2d:["$","title",null,{"children":"Demystifying the QR Code: An Interactive Guide | Mario Delgado | Observable"}] 32:T437,The **QR Code** (Quick Response Code) was created in 1994 by Masahiro Hara and his team at Denso Wave. Originally designed to track automotive parts during manufacturing, its high-speed reading capabilities led to global adoption. At its core, a QR Code is not just a random grid of black and white squares. It is a carefully engineered two-dimensional matrix divided into two primary categories: 1. **Functional Patterns** (which enable cameras to locate and orient the code) and 2. **Encoding Regions** (which hold the actual data payload, error correction, and format metadata). The specification allows for 40 QR Code Versions. This notebook will visualize the generation and simulated camera reading of a Version 1 QR Code; limited to 17 characters.33:Ta8cb,dashboard = { // 1. Core Generator & Visual Engine function generateQRSVG(options) { const rawText = options.text || "Hello, world!"; const text = rawText.slice(0, 17); // Hard cap at 17 bytes for Version 1-L Byte Mode const maskId = options.maskId !== undefined ? options.maskId : 0; const step = options.step !== undefined ? options.step : 999; const mode = options.mode || "build"; const readStep = options.readStep !== undefined ? options.readStep : 1; let qr; try { qr = QRCode.create(text, { version: 1, errorCorrectionLevel: "L", maskPattern: maskId }); } catch (e) { qr = QRCode.create("Hello, world!", { version: 1, errorCorrectionLevel: "L", maskPattern: maskId }); } const size = qr.modules.size; // 21 for Version 1 const rawData = qr.modules.data; const maxMatrixWidth = 320; const cellSize = maxMatrixWidth / size; const margin = 16; const svgSize = maxMatrixWidth + margin * 2; const grid = Array.from({ length: size }, () => Array(size).fill(0)); const types = Array.from({ length: size }, () => Array(size).fill("data")); const dataBitSequence = Array.from({ length: size }, () => Array(size).fill(-1) ); const headerBitSequence = Array.from({ length: size }, () => Array(size).fill(-1) ); // Mask 0 evaluation: (r + c) % 2 === 0 const isMaskedCell = (r, c) => (r + c) % 2 === 0; for (let r = 0; r < size; r++) { for (let c = 0; c < size; c++) { grid[r][c] = rawData[r * size + c] ? 1 : 0; } } // Identify Finder Modules const finders = [ [0, 0], [0, size - 7], [size - 7, 0] ]; finders.forEach(([r, c]) => { for (let dr = -1; dr <= 7; dr++) { for (let dc = -1; dc <= 7; dc++) { const row = r + dr; const col = c + dc; if (row >= 0 && row < size && col >= 0 && col < size) { types[row][col] = dr >= 0 && dr < 7 && dc >= 0 && dc < 7 ? "finder" : "separator"; } } } }); // Timing Tracks for (let i = 8; i < size - 8; i++) { if (types[6][i] === "data") types[6][i] = "timing"; if (types[i][6] === "data") types[i][6] = "timing"; } if (size === 21) types[13][8] = "darkModule"; // Format Modules const primaryFormatCoords = [ [8, 0], [8, 1], [8, 2], [8, 3], [8, 4], [8, 5], [8, 7], [8, 8], [7, 8], [5, 8], [4, 8], [3, 8], [2, 8], [1, 8], [0, 8] ]; primaryFormatCoords.forEach(([r, c]) => { if (r < size && c < size && types[r][c] === "data") types[r][c] = "format"; }); const secondaryFormatCoords = [ [8, size - 1], [8, size - 2], [8, size - 3], [8, size - 4], [8, size - 5], [8, size - 6], [8, size - 7], [8, size - 8], [size - 7, 8], [size - 6, 8], [size - 5, 8], [size - 4, 8], [size - 3, 8], [size - 2, 8], [size - 1, 8] ]; secondaryFormatCoords.forEach(([r, c]) => { if (r < size && c < size && types[r][c] === "data") types[r][c] = "formatBackup"; }); // Track ordered sequence of data & header bits along the zigzag path const globalBitOrder = []; let dataBitIndex = 0; let bitCount = 0; for (let col = size - 1; col > 0; col -= 2) { if (col === 6) col--; // Skip vertical timing track column 6 const upwards = Math.floor((size - 1 - col) / 2) % 2 === 0; const rows = Array.from({ length: size }, (_, i) => upwards ? size - 1 - i : i ); for (let row of rows) { for (let cOffset = 0; cOffset < 2; cOffset++) { const curC = col - cOffset; if (types[row][curC] === "data") { if (bitCount < 12) { types[row][curC] = "headerMetadata"; headerBitSequence[row][curC] = bitCount; const headerBadge = bitCount < 4 ? `${bitCount + 1}` : `${bitCount - 3}`; globalBitOrder.push({ row, col: curC, type: "headerMetadata", globalIdx: bitCount, badgeLabel: headerBadge }); } else { dataBitSequence[row][curC] = dataBitIndex; globalBitOrder.push({ row, col: curC, type: "data", globalIdx: bitCount, payloadIdx: dataBitIndex, badgeLabel: `${(dataBitIndex % 8) + 1}` }); dataBitIndex++; } bitCount++; } } } } const charLen = text.length; const totalSteps = 9 + charLen; const isStepVisible = (r, c) => { if (mode === "reference" || mode === "read") return true; const t = types[r][c]; if (step === 1) return false; if (step >= 2 && (t === "finder" || t === "separator")) return true; if (step >= 3 && (t === "timing" || t === "darkModule")) return true; if (step >= 4 && (t === "format" || t === "formatBackup")) return true; if (t === "headerMetadata") { const hIdx = headerBitSequence[r][c]; if (hIdx < 4) return step >= 5; return step >= 6; } if (t === "data") { if (step >= totalSteps - 1) return true; const seqIdx = dataBitSequence[r][c]; if (seqIdx === -1) return false; if (step === totalSteps - 2) { return seqIdx < charLen * 8 + 56; } if (step >= 7) { const charProgress = step - 6; return seqIdx < charProgress * 8; } } return false; }; const getSubtype = (r, c) => { const t = types[r][c]; if (t === "format" || t === "formatBackup") return "format"; if (t !== "data") return t; const seqIdx = dataBitSequence[r][c]; if (seqIdx === -1) return "payload"; if (seqIdx < charLen * 8) return "payload"; if (seqIdx < charLen * 8 + 56) return "parity"; return "pad"; }; // Color Palette with Distinct Functional Lanes const colorMap = { finder: "#2563eb", // Blue separator: "#cbd5e1", // Light Gray timing: "#ea580c", // Orange darkModule: "#dc2626", // Red Anchor format: "#9333ea", // Purple headerMetadata: "#0284c7", // Cyan Blue payload: "#0f172a", // Black / Dark Slate parity: "#d97706", // Amber pad: "#6366f1" // Indigo }; const svg = d3 .select(document.createElementNS("http://www.w3.org/2000/svg", "svg")) .attr("width", svgSize) .attr("height", svgSize) .attr("viewBox", `0 0 ${svgSize} ${svgSize}`) .style("background", "#ffffff") .style("border-radius", "8px") .style("box-shadow", "0 2px 8px rgba(0,0,0,0.06)"); const defs = svg.append("defs"); defs .append("marker") .attr("id", "arrowhead") .attr("viewBox", "0 0 10 10") .attr("refX", 6) .attr("refY", 5) .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("orient", "auto-start-reverse") .append("path") .attr("d", "M 0 0 L 10 5 L 0 10 z") .attr("fill", "#2563eb"); const g = svg .append("g") .attr("transform", `translate(${margin}, ${margin})`); // Highlighting logic for Camera Reading & Inspection const getReadHighlight = (r, c) => { if (mode !== "read") return null; const type = types[r][c]; if (readStep === 1) return null; if (readStep === 2 && type === "finder") { return { overlayColor: "rgba(37, 99, 235, 0.25)", stroke: "#2563eb", strokeWidth: "1.2px" }; } if (readStep === 3) { if (type === "timing") { return { overlayColor: "rgba(234, 88, 12, 0.25)", stroke: "#ea580c", strokeWidth: "1.2px" }; } if (type === "darkModule") { return { overlayColor: "rgba(220, 38, 38, 0.35)", stroke: "#dc2626", strokeWidth: "1.5px" }; } } if (readStep === 4 && (type === "format" || type === "formatBackup")) { return { overlayColor: "rgba(147, 51, 234, 0.25)", stroke: "#9333ea", strokeWidth: "1.2px" }; } if (readStep === 5 && type === "headerMetadata") { const hIdx = headerBitSequence[r][c]; if (hIdx >= 0 && hIdx < 4) { return { overlayColor: "rgba(2, 132, 199, 0.3)", stroke: "#0284c7", strokeWidth: "1.2px" }; } } if (readStep === 6 && type === "headerMetadata") { const hIdx = headerBitSequence[r][c]; if (hIdx >= 4 && hIdx < 12) { return { overlayColor: "rgba(2, 132, 199, 0.3)", stroke: "#0284c7", strokeWidth: "1.2px" }; } } if (readStep >= 7 && readStep <= 6 + charLen) { if (type === "data") { const charIdx = readStep - 7; const seqIdx = dataBitSequence[r][c]; if (seqIdx !== -1) { const currentByteMin = charIdx * 8; const currentByteMax = currentByteMin + 7; if (seqIdx >= currentByteMin && seqIdx <= currentByteMax) { return { overlayColor: "rgba(37, 99, 235, 0.28)", stroke: "#2563eb", strokeWidth: "1.2px" }; } else if (seqIdx < currentByteMin) { return { overlayColor: "rgba(34, 197, 94, 0.2)", stroke: "#22c55e", strokeWidth: "0.75px" }; } } } } if (readStep === totalSteps - 2) { const sub = getSubtype(r, c); if (sub === "parity") { return { overlayColor: "rgba(217, 119, 6, 0.28)", stroke: "#d97706", strokeWidth: "1.2px" }; } } if (readStep === totalSteps - 1) { const sub = getSubtype(r, c); if (sub === "pad") { return { overlayColor: "rgba(99, 102, 241, 0.35)", stroke: "#6366f1", strokeWidth: "1.2px" }; } } if (readStep === totalSteps) { const sub = getSubtype(r, c); if (sub === "payload") { return { overlayColor: "rgba(34, 197, 94, 0.2)", stroke: "#22c55e", strokeWidth: "0.75px" }; } } return null; }; // Render Grid Modules for (let r = 0; r < size; r++) { for (let c = 0; c < size; c++) { const visible = isStepVisible(r, c); let isFilled = grid[r][c] === 1; if ( mode === "build" && step < totalSteps && (types[r][c] === "data" || types[r][c] === "headerMetadata") ) { if (isMaskedCell(r, c)) { isFilled = !isFilled; } } const subType = getSubtype(r, c); const baseColor = colorMap[subType] || "#000000"; let fillColor = "#ffffff"; let strokeColor = "none"; let strokeWidth = "0px"; if (visible) { if (options.showLabels && mode === "build") { if (isFilled) { fillColor = baseColor; } else { if (subType === "payload") { fillColor = "rgba(15, 23, 42, 0.04)"; strokeColor = "#94a3b8"; strokeWidth = "0.75px"; } else { fillColor = d3 .color(baseColor) .copy({ opacity: 0.15 }) .toString(); strokeColor = baseColor; strokeWidth = "0.75px"; } } } else { fillColor = isFilled ? "#000000" : "#ffffff"; if (!isFilled) { strokeColor = "#e2e8f0"; strokeWidth = "0.5px"; } } } const rect = g .append("rect") .attr("x", c * cellSize) .attr("y", r * cellSize) .attr("width", Math.max(0.1, cellSize - 0.4)) .attr("height", Math.max(0.1, cellSize - 0.4)) .attr("fill", fillColor) .attr("stroke", strokeColor) .attr("stroke-width", strokeWidth) .attr("rx", 0.5); if (mode === "build" && step === totalSteps) { const isDataOrHeader = types[r][c] === "data" || types[r][c] === "headerMetadata"; if (isDataOrHeader && isMaskedCell(r, c)) { g.append("rect") .attr("x", c * cellSize) .attr("y", r * cellSize) .attr("width", Math.max(0.1, cellSize - 0.4)) .attr("height", Math.max(0.1, cellSize - 0.4)) .attr("fill", "rgba(219, 39, 119, 0.28)") .attr("stroke", "#db2777") .attr("stroke-width", "1.2px") .attr("rx", 0.5) .style("pointer-events", "none"); } } const readHighlight = getReadHighlight(r, c); if (readHighlight) { g.append("rect") .attr("x", c * cellSize) .attr("y", r * cellSize) .attr("width", Math.max(0.1, cellSize - 0.4)) .attr("height", Math.max(0.1, cellSize - 0.4)) .attr("fill", readHighlight.overlayColor) .attr("stroke", readHighlight.stroke) .attr("stroke-width", readHighlight.strokeWidth) .attr("rx", 0.5) .style("pointer-events", "none"); } rect .append("title") .text( `[Row ${r + 1}, Col ${ c + 1 }] | Region: ${subType.toUpperCase()} | Bit State: ${ isFilled ? "1 (Dark)" : "0 (Light)" }` ); } } // Dynamic Viewfinder & Corner Finder Bounding Boxes if (mode === "read") { const overlay = g.append("g").style("pointer-events", "none"); if (readStep === 1) { overlay .append("rect") .attr("x", -6) .attr("y", -6) .attr("width", maxMatrixWidth + 12) .attr("height", maxMatrixWidth + 12) .attr("fill", "none") .attr("stroke", "#ef4444") .attr("stroke-width", "2.5px") .attr("stroke-dasharray", "8, 4") .attr("rx", "8"); } if (readStep === 2) { finders.forEach(([r, c]) => { overlay .append("rect") .attr("x", c * cellSize - 2) .attr("y", r * cellSize - 2) .attr("width", 7 * cellSize + 4) .attr("height", 7 * cellSize + 4) .attr("fill", "none") .attr("stroke", "#2563eb") .attr("stroke-width", "2px") .attr("rx", "4"); }); } } // Active Bit Trail & Badges Overlay const activeStep = mode === "build" ? step : readStep; if (activeStep >= 5 && activeStep <= 6 + charLen) { let activeBitItems = []; let strokeColor = "#2563eb"; let drawPath = true; if (activeStep === 5) { activeBitItems = globalBitOrder.slice(0, 4); strokeColor = "#0284c7"; drawPath = false; } else if (activeStep === 6) { activeBitItems = globalBitOrder.slice(4, 12); strokeColor = "#0284c7"; drawPath = false; } else { const charIdx = activeStep - 7; const startBit = 12 + charIdx * 8; activeBitItems = globalBitOrder.slice(startBit, startBit + 8); strokeColor = "#2563eb"; drawPath = true; } if (activeBitItems.length > 0) { const centers = activeBitItems.map((item) => ({ x: item.col * cellSize + cellSize / 2, y: item.row * cellSize + cellSize / 2, label: item.badgeLabel, globalIdx: item.globalIdx })); if (drawPath) { const lineGenerator = d3 .line() .x((d) => d.x) .y((d) => d.y); g.append("path") .datum(centers) .attr("d", lineGenerator) .attr("fill", "none") .attr("stroke", strokeColor) .attr("stroke-width", "2.2px") .attr("stroke-dasharray", "4, 2") .attr("marker-end", `url(#arrowhead)`) .style("pointer-events", "none"); } centers.forEach((pt) => { if (!pt.label) return; const badgeG = g .append("g") .attr("transform", `translate(${pt.x}, ${pt.y})`) .style("pointer-events", "none"); badgeG .append("circle") .attr("r", cellSize * 0.38) .attr("fill", "#ffffff") .attr("stroke", strokeColor) .attr("stroke-width", "1.2px"); badgeG .append("text") .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("fill", strokeColor) .attr("font-size", "8px") .attr("font-weight", "800") .text(pt.label); }); } } return svg.node(); } function renderLegend(items) { const rows = items .map((item) => { let badgeHtml = ""; if (item.dual) { badgeHtml = `

`; } else { badgeHtml = ``; } return `

${badgeHtml} ${item.label}: ${item.desc}

`; }) .join(""); return `

${rows}

`; } // 2. Dynamic Commentary Builders (Using User-Facing Panel Titles) function getBuildCommentary(step, text) { const charLen = text.length; const totalSteps = 9 + charLen; const lengthBinary = charLen.toString(2).padStart(8, "0"); const legFinder = { color: "#2563eb", label: "Blue", desc: "Finder Pattern Modules" }; const legSep = { color: "#cbd5e1", label: "Gray", desc: "Separators (White Buffer Zone)" }; const legTiming = { color: "#ea580c", label: "Orange", desc: "Timing Pattern Tracks" }; const legDarkMod = { color: "#dc2626", label: "Red", desc: "Dark Module Anchor ([Row 14, Col 9])" }; const legFormat = { color: "#9333ea", label: "Purple", desc: "Reserved Format Information" }; const legHeaderMode = { color: "#0284c7", label: "Cyan", desc: "4-Bit Mode Indicator Sequence" }; const legHeaderLen = { color: "#0284c7", label: "Cyan", desc: "8-Bit Character Length Sequence" }; const legPayload = { color: "#0f172a", dual: true, label: "Black / White", desc: "Character Payload Data Bits (1s = Dark, 0s = Light)" }; const legParity = { color: "#d97706", label: "Amber", desc: "Reed–Solomon Error Correction Parity Bits" }; const legPad = { color: "#6366f1", label: "Indigo", desc: "Standardized Pad Bytes (11101100 / 00010001)" }; const legMask = { color: "rgba(219, 39, 119, 0.28)", border: "#db2777", label: "Magenta", desc: "Mask Pattern 0 Inversion Overlay" }; if (step === 1) { return { title: `Step 1 / ${totalSteps}: Canvas Setup & Version Selection`, body: "The Canvas: We begin with Version 1—a grid of Rows 1 to 21 and Columns 1 to 21 (441 total binary squares).

" + "Color Legend:" + renderLegend([ { color: "#ffffff", border: "#cbd5e1", label: "White Canvas", desc: "21×21 Unassigned Grid Canvas" } ]) }; } if (step === 2) { return { title: `Step 2 / ${totalSteps}: The Three Corner Finders`, body: "The Bullseye Ratio: Placed at top-left ([1,1] to [7,7]), top-right ([1,15] to [7,21]), and bottom-left ([15,1] to [21,7]).

" + "Color Legend:" + renderLegend([legFinder, legSep]) }; } if (step === 3) { return { title: `Step 3 / ${totalSteps}: Alignment Rulers & Dark Square`, body: "Grid Rulers & Anchor: Alternating dark and light modules run along Row 7 and Column 7. A single dark square sits at fixed position [Row 14, Col 9].

" + "Color Legend:" + renderLegend([legFinder, legSep, legTiming, legDarkMod]) }; } if (step === 4) { return { title: `Step 4 / ${totalSteps}: Reserving Format Spaces`, body: "Reserves 15 modules surrounding finders for Error Correction Level and Mask ID.

" + "Color Legend:" + renderLegend([legFinder, legSep, legTiming, legDarkMod, legFormat]) }; } if (step === 5) { return { title: `Step 5 / ${totalSteps}: Header — Mode Indicator`, body: "Mode Indicator (4 Bits): Badges 1–4 display raw unmasked mode bits (0100 = 8-bit Byte Mode).

" + "Reference QR Code Alignment Note: The raw bits shown here will undergo " + 'Data Masking ' + "in the final step to produce the inverted 1101 modules seen in the Reference QR Code.

" + "Color Legend:" + renderLegend([ legFinder, legSep, legTiming, legDarkMod, legFormat, legHeaderMode ]) }; } if (step === 6) { return { title: `Step 6 / ${totalSteps}: Header — Character Length Indicator`, body: `Character Length Indicator (8 Bits): Badges 1–8 display raw unmasked length bits (${lengthBinary} = ${charLen} characters).

` + "Reference QR Code Alignment Note: These raw length bits will undergo an XOR " + 'Data Masking ' + "transformation before appearing in the final Reference QR Code.

" + "Color Legend:" + renderLegend([ legFinder, legSep, legTiming, legDarkMod, legFormat, legHeaderMode, legHeaderLen ]) }; } if (step >= 7 && step <= 6 + charLen) { const charIdx = step - 7; const char = text[charIdx] || ""; const ascii = char.charCodeAt(0) || 0; const binary = ascii.toString(2).padStart(8, "0"); return { title: `Step ${step} / ${totalSteps}: Encoding Character '${char}'`, body: `Character Transformation: '${char}' ➔ ASCII ${ascii} ➔ Raw Binary ${binary}.

` + "Reference QR Code Alignment Note: Badges 1–8 trace raw payload bits along the zigzag path. " + 'These will undergo a Data Masking ' + "XOR transformation to yield the physical modules on the Reference QR Code.

" + "Color Legend:" + renderLegend([ legFinder, legSep, legTiming, legDarkMod, legFormat, legHeaderMode, legHeaderLen, legPayload ]) }; } if (step === totalSteps - 2) { return { title: `Step ${step} / ${totalSteps}: Resiliency Part 1 — Error Correction`, body: "Parity Codewords: Appends raw Reed–Solomon error correction bits (amber).

" + "Reference QR Code Alignment Note: Parity modules on the Reference QR Code reflect their state after " + 'Data Masking ' + "XOR inversion.

" + "Color Legend:" + renderLegend([ legFinder, legSep, legTiming, legDarkMod, legFormat, legHeaderMode, legHeaderLen, legPayload, legParity ]) }; } if (step === totalSteps - 1) { return { title: `Step ${step} / ${totalSteps}: Resiliency Part 2 — Standardized Padding`, body: "Pad Codewords: Fills remaining capacity with standard raw pad bytes (11101100 / 00010001).

" + "Reference QR Code Alignment Note: Pad modules undergo " + 'Data Masking ' + "to yield the final physical grid on the Reference QR Code.

" + "Color Legend:" + renderLegend([ legFinder, legSep, legTiming, legDarkMod, legFormat, legHeaderMode, legHeaderLen, legPayload, legParity, legPad ]) }; } return { title: `Step ${totalSteps} / ${totalSteps}: Resiliency Part 3 — Optical XOR Masking`, body: "Final Mask Application: Applies Mask Pattern 0 via XOR optical masking (Raw Bit XOR Mask Bit = Final Grid Color) to eliminate clusters of dark or light modules. " + "This view now visually matches the Reference QR Code 1-to-1.

" + "Color Legend:" + renderLegend([ legFinder, legSep, legTiming, legDarkMod, legFormat, legHeaderMode, legHeaderLen, legPayload, legParity, legPad, legMask ]) }; } function getReadCommentary(step, text) { const charLen = text.length; const totalSteps = 9 + charLen; const lengthBinary = charLen.toString(2).padStart(8, "0"); const legViewfinder = { color: "#ffffff", border: "#ef4444", label: "Target Box", desc: "Camera Target Area Frame" }; const legFindersBlue = { color: "rgba(37, 99, 235, 0.25)", border: "#2563eb", label: "Blue Highlight", desc: "3 Corner Finder Bullseyes Identified" }; const legTimingOrange = { color: "rgba(234, 88, 12, 0.25)", border: "#ea580c", label: "Orange Tint", desc: "Timing Tracks (Grid Scale Calibration)" }; const legDarkModRed = { color: "rgba(220, 38, 38, 0.35)", border: "#dc2626", label: "Red Tint", desc: "Dark Module Anchor ([Row 14, Col 9])" }; const legFormatPurple = { color: "rgba(147, 51, 234, 0.25)", border: "#9333ea", label: "Purple Tint", desc: "Format & Mask Information" }; const legModeCyan = { color: "rgba(2, 132, 199, 0.3)", border: "#0284c7", label: "Cyan", desc: "4-Bit Mode Indicator Sequence" }; const legLenSky = { color: "rgba(2, 132, 199, 0.3)", border: "#0284c7", label: "Cyan", desc: "8-Bit Character Count Sequence" }; const legActiveByte = { color: "rgba(37, 99, 235, 0.28)", border: "#2563eb", label: "Active Byte", desc: "Active Byte Sequence Being Extracted" }; const legReadPast = { color: "#dcfce7", border: "#22c55e", label: "Light Green Tint", desc: "Decoded Payload Bytes" }; const legPadIndigo = { color: "rgba(99, 102, 241, 0.35)", border: "#6366f1", label: "Indigo Tint", desc: "Standardized Pad Bytes Validated (11101100 / 00010001)" }; if (step === 1) { return { title: `Camera Step 1 / ${totalSteps}: Viewfinder Targeting`, body: "Focus Lock: Camera centers the grid inside active viewfinder area.

" + "Inspection Highlight:" + renderLegend([legViewfinder]) }; } if (step === 2) { return { title: `Camera Step 2 / ${totalSteps}: Finder Pattern Detection`, body: "Orientation Correction: Detects top-left, top-right, and bottom-left finders (blue) to establish scaling, rotation, and skew.

" + "Inspection Highlight:" + renderLegend([legFindersBlue]) }; } if (step === 3) { return { title: `Camera Step 3 / ${totalSteps}: Timing Rulers & Grid Calibration`, body: "Ruler Scan: Samples Row 7 and Col 7 timing tracks (orange) and dark module anchor (dark red) to establish exact cell pixel pitch.

" + "Inspection Highlight:" + renderLegend([legTimingOrange, legDarkModRed]) }; } if (step === 4) { return { title: `Camera Step 4 / ${totalSteps}: Decoding Format & Identifying Mask`, body: "Format Extraction: Reads 15 format modules (purple) to identify Error Correction Level L and Mask Pattern 0.

" + "XOR Demasking Rule: All subsequent payload modules read from the Reference QR Code will be demasked using " + "Physical Grid Module XOR Mask Bit = Original Data Bit.

" + "Inspection Highlight:" + renderLegend([legFormatPurple]) }; } if (step === 5) { return { title: `Camera Step 5 / ${totalSteps}: Demasking Header Mode Indicator`, body: "Mode Extraction: Samples physical modules from the Reference QR Code (cyan badges 1–4) and applies " + 'Data Masking XOR demasking.
' + "Extracted stream: 1 XOR 1 = 0, 0 XOR 1 = 1, 0 XOR 0 = 0, 0 XOR 0 = 0 ➔ Reconstructed Mode 0100 (Byte Mode Indicator).

" + "Inspection Highlight:" + renderLegend([legModeCyan]) }; } if (step === 6) { return { title: `Camera Step 6 / ${totalSteps}: Demasking Character Length Indicator`, body: `Count Extraction: Demasks 8 physical length modules from the Reference QR Code (cyan badges 1–8) using XOR demasking: ${lengthBinary} ➔ ${charLen} Characters Total.

` + "Inspection Highlight:" + renderLegend([legLenSky]) }; } if (step >= 7 && step <= 6 + charLen) { const charIdx = step - 7; const char = text[charIdx] || ""; const ascii = char.charCodeAt(0) || 0; const binary = ascii.toString(2).padStart(8, "0"); const currentDecodedText = text.slice(0, charIdx + 1); return { title: `Camera Step ${step} / ${totalSteps}: Reading Byte ${ charIdx + 1 } ('${char}')`, body: `Optical Demasking: Reads physical modules on the Reference QR Code along the zigzag path (badges 1–8) and applies Mask 0 XOR demasking to recover raw binary ${binary} ➔ ASCII ${ascii} ➔ '${char}'
` + `Decoded Stream: "${currentDecodedText}"

` + "Inspection Highlight:" + renderLegend([legActiveByte, legReadPast]) }; } if (step === totalSteps - 2) { return { title: `Camera Step ${step} / ${totalSteps}: Reed–Solomon Parity Check`, body: "Demasks and evaluates Reed–Solomon parity codewords (amber) to confirm zero bit corruption occurred.

" + "Inspection Highlight:" + renderLegend([ { color: "rgba(217, 119, 6, 0.28)", border: "#d97706", label: "Amber", desc: "Reed–Solomon Parity Verified" } ]) }; } if (step === totalSteps - 1) { return { title: `Camera Step ${step} / ${totalSteps}: Validating Pad Byte Integrity`, body: "Demasks and verifies standard alternating pad bytes to confirm clean message bounds.

" + "Inspection Highlight:" + renderLegend([legPadIndigo]) }; } return { title: `Camera Step ${totalSteps} / ${totalSteps}: Decoded Payload Output!`, body: `Checksum Passed! Successfully decoded string: ${text}

` + "Inspection Highlight:" + renderLegend([ { color: "#dcfce7", border: "#22c55e", label: "Light Green Tint", desc: "Decoded Payload Bytes" } ]) }; } // 3. DOM Container & Event Pipeline const container = document.createElement("div"); container.style.display = "flex"; container.style.flexDirection = "column"; container.style.gap = "20px"; container.style.padding = "20px"; container.style.background = "#f8fafc"; container.style.borderRadius = "12px"; container.style.border = "1px solid #e2e8f0"; container.style.fontFamily = "system-ui, -apple-system, sans-serif"; const controlsBar = document.createElement("div"); controlsBar.style.display = "flex"; controlsBar.style.alignItems = "center"; controlsBar.style.padding = "14px 18px"; controlsBar.style.background = "#ffffff"; controlsBar.style.borderRadius = "8px"; controlsBar.style.border = "1px solid #cbd5e1"; controlsBar.innerHTML = `

Type Your Message Here: 13 / 17 chars (Version 1-L Byte Maximum)

`; const cardsGrid = document.createElement("div"); cardsGrid.style.display = "grid"; cardsGrid.style.gridTemplateColumns = "repeat(auto-fit, minmax(290px, 1fr))"; cardsGrid.style.gap = "20px"; const cardStyle = "background:#ffffff; padding:16px; border-radius:8px; border:1px solid #e2e8f0; display:flex; flex-direction:column;"; const card1 = document.createElement("div"); card1.style.cssText = cardStyle; card1.innerHTML = `

Reference QR Code

ALIGNMENT SPACER

`; const card2 = document.createElement("div"); card2.style.cssText = cardStyle; card2.innerHTML = `

Generation & Construction

BUILD PROGRESSION

`; const card3 = document.createElement("div"); card3.style.cssText = cardStyle; card3.innerHTML = `

Camera Reading & Inspection

READ PROGRESSION

`; cardsGrid.appendChild(card1); cardsGrid.appendChild(card2); cardsGrid.appendChild(card3); container.appendChild(controlsBar); container.appendChild(cardsGrid); function syncAll() { const textInput = controlsBar.querySelector("#globalText"); const currentText = textInput.value || "Hello, world!"; const charLen = currentText.length; const totalSteps = 9 + charLen; const charCounter = controlsBar.querySelector("#charCounter"); if (charCounter) { charCounter.innerHTML = `${charLen} / 17 chars (Version 1-L Byte Maximum)`; } const slider1 = card2.querySelector("#slider1"); const slider2 = card3.querySelector("#slider2"); slider1.max = totalSteps; slider2.max = totalSteps; let step1 = parseInt(slider1.value, 10); if (step1 > totalSteps) { step1 = totalSteps; slider1.value = step1; } let step2 = parseInt(slider2.value, 10); if (step2 > totalSteps) { step2 = totalSteps; slider2.value = step2; } card2.querySelector( "#slider1Val" ).textContent = `BUILD STEP ${step1} / ${totalSteps}`; card3.querySelector( "#slider2Val" ).textContent = `READ STEP ${step2} / ${totalSteps}`; // Render Canvas 1 const c1 = card1.querySelector("#canvas1"); c1.innerHTML = ""; c1.appendChild( generateQRSVG({ text: currentText, maskId: 0, mode: "reference", showLabels: false }) ); // Render Canvas 2 const c2 = card2.querySelector("#canvas2"); c2.innerHTML = ""; c2.appendChild( generateQRSVG({ text: currentText, maskId: 0, mode: "build", step: step1, showLabels: true }) ); const comm1 = getBuildCommentary(step1, currentText); card2.querySelector( "#commentary1" ).innerHTML = `${comm1.title}
${comm1.body}`; // Render Canvas 3 const c3 = card3.querySelector("#canvas3"); c3.innerHTML = ""; c3.appendChild( generateQRSVG({ text: currentText, maskId: 0, mode: "read", readStep: step2, showLabels: false }) ); const comm2 = getReadCommentary(step2, currentText); card3.querySelector( "#commentary2" ).innerHTML = `${comm2.title}
${comm2.body}`; } // Event Listeners controlsBar.querySelector("#globalText").addEventListener("input", syncAll); card2.querySelector("#slider1").addEventListener("input", syncAll); card3.querySelector("#slider2").addEventListener("input", syncAll); // Initial Sync syncAll(); return container; }34:T4a3,### Acknowledgments & AI Collaboration Note **Collaborative AI Development & Technical Assistance** *In partnership with Gemini (Google AI)* This interactive ObservableHQ notebook was developed through an intensive, iterative co-creation process with Gemini. Key contributions included: * **Engine & Logic Design:** Co-architecting the modular D3/SVG QR code generation and matrix rendering engine, including custom module classification algorithms (finders, timing, format, data, parity, and pad bits). * **Interactive Visualization:** Implementing dynamic build and read step-by-step state engines, complete with adaptive color legends, active bit-trail indicators, and responsive UI controls. * **Format & Standards Compliance:** Aligning encoding, masking logic (XOR pattern evaluation), and Reed–Solomon parity placement strictly with Version 1-L ISO/IEC QR code specifications. * **Debugging & Refinement:** Rapidly diagnosing matrix coordinate offsets, visual overlays, hyperlinking references, and DOM updates to reduce overall implementation time from a projected multi-week build to a single day of focused effort.35:[] 30:{"id":"91ba54db5ff83e10","slug":"qrcode_demystified","title":"Demystifying the QR Code: An Interactive Guide","thumbnail":"a0be8d3678cbf25d372e5968c9e23e4850ea47e46131d1e5150e5218d932ac2d","access_level":"public","create_time":"$D2026-08-04T12:51:43.328Z","update_time":"$D2026-09-11T19:43:00.187Z","view_time":null,"first_public_time":"$D2026-08-05T08:31:17.624Z","has_unpublished_edits":null,"fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"f57b9f8a19d28778","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":"starter_2024"},"version":161,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d3988d482a8ec0f","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":null}],"members":[{"type":"individual","id":"1d3988d482a8ec0f","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":null,"role":"editor"},{"type":"team","id":"f57b9f8a19d28778","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Demystifying the QR Code: An Interactive Guide","cells":[{"id":140,"value":"# Demystifying the QR Code: An Interactive Guide","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"## References\n* [@J-F1](https://observablehq.com/@j-f1)'s [QR Code Generator](https://observablehq.com/@j-f1/qr-code-generator)\n* [History of the QR Code](https://www.qrcode.com/en/history/)\n* [Thonky QR Code Tutorial](https://www.thonky.com/qr-code-tutorial/)\n* Co-developed with [Google Gemini](https://gemini.google.com).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":113,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"// QRCode = require(\"qrcode@1.4.4/build/qrcode.min.js\") // Observable 1.0 Syntax\nimport QRCode from \"https://cdn.jsdelivr.net/npm/qrcode@1.4.4/build/qrcode.min.js/+esm\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"2"}} 31:"$30:body"