2c:null 2d:["$","title",null,{"children":"LED… | Johannes Mainusch | Observable"}] 32:T316b,{ // ===== Einstellungen ===== const COLS = 77; // Spalten im normalen Modus const S = 12; // Pixelgröße pro LED (interne Auflösung) const GAP = 2; // Lücke zwischen den LEDs (bezogen auf S) const RADIUS = 2; // Eckenradius der LEDs (bezogen auf S) const TOP = 4; // freie Zeilen oben und unten const ZOOM = 1; // 2 = jede Font-Zeile wird 2×2 LEDs groß const ON = "#86fd8a", OFF = "#181a25", BG = "#000"; // ===== Bitmap-Font 5×7 (+2 Zeilen Unterlänge) – jedes "#" ist genau eine LED ===== const G = { " ":"...|...|...|...|...|...|...", "A":".###.|#...#|#...#|#####|#...#|#...#|#...#", "B":"####.|#...#|#...#|####.|#...#|#...#|####.", "C":".###.|#...#|#....|#....|#....|#...#|.###.", "D":"####.|#...#|#...#|#...#|#...#|#...#|####.", "E":"#####|#....|#....|####.|#....|#....|#####", "F":"#####|#....|#....|####.|#....|#....|#....", "G":".###.|#...#|#....|#.###|#...#|#...#|.####", "H":"#...#|#...#|#...#|#####|#...#|#...#|#...#", "I":"###|.#.|.#.|.#.|.#.|.#.|###", "J":"..###|...#.|...#.|...#.|#..#.|#..#.|.##..", "K":"#...#|#..#.|#.#..|##...|#.#..|#..#.|#...#", "L":"#....|#....|#....|#....|#....|#....|#####", "M":"#...#|##.##|#.#.#|#.#.#|#...#|#...#|#...#", "N":"#...#|##..#|#.#.#|#.#.#|#..##|#...#|#...#", "O":".###.|#...#|#...#|#...#|#...#|#...#|.###.", "P":"####.|#...#|#...#|####.|#....|#....|#....", "Q":".###.|#...#|#...#|#...#|#.#.#|#..#.|.##.#", "R":"####.|#...#|#...#|####.|#.#..|#..#.|#...#", "S":".###.|#...#|#....|.###.|....#|#...#|.###.", "T":"#####|..#..|..#..|..#..|..#..|..#..|..#..", "U":"#...#|#...#|#...#|#...#|#...#|#...#|.###.", "V":"#...#|#...#|#...#|#...#|#...#|.#.#.|..#..", "W":"#...#|#...#|#...#|#.#.#|#.#.#|#.#.#|.#.#.", "X":"#...#|#...#|.#.#.|..#..|.#.#.|#...#|#...#", "Y":"#...#|#...#|.#.#.|..#..|..#..|..#..|..#..", "Z":"#####|....#|...#.|..#..|.#...|#....|#####", "Ä":"#...#|.....|.###.|#...#|#####|#...#|#...#", "Ö":"#...#|.....|.###.|#...#|#...#|#...#|.###.", "Ü":"#...#|.....|#...#|#...#|#...#|#...#|.###.", "a":".....|.....|.###.|....#|.####|#...#|.####", "b":"#....|#....|####.|#...#|#...#|#...#|####.", "c":".....|.....|.###.|#....|#....|#...#|.###.", "d":"....#|....#|.####|#...#|#...#|#...#|.####", "e":".....|.....|.###.|#...#|#####|#....|.###.", "f":"..##|.#..|###.|.#..|.#..|.#..|.#..", "g":".....|.....|.####|#...#|#...#|#...#|.####|....#|.###.", "h":"#....|#....|####.|#...#|#...#|#...#|#...#", "i":"#|.|#|#|#|#|#", "j":"..#|...|..#|..#|..#|..#|..#|#.#|.#.", "k":"#...|#...|#..#|#.#.|##..|#.#.|#..#", "l":"##.|.#.|.#.|.#.|.#.|.#.|###", "m":".....|.....|##.#.|#.#.#|#.#.#|#.#.#|#.#.#", "n":".....|.....|####.|#...#|#...#|#...#|#...#", "o":".....|.....|.###.|#...#|#...#|#...#|.###.", "p":".....|.....|####.|#...#|#...#|#...#|####.|#....|#....", "q":".....|.....|.####|#...#|#...#|#...#|.####|....#|....#", "r":"....|....|#.##|##..|#...|#...|#...", "s":".....|.....|.####|#....|.###.|....#|####.", "t":".#..|.#..|###.|.#..|.#..|.#..|..##", "u":".....|.....|#...#|#...#|#...#|#...#|.####", "v":".....|.....|#...#|#...#|#...#|.#.#.|..#..", "w":".....|.....|#...#|#...#|#.#.#|#.#.#|.#.#.", "x":".....|.....|#...#|.#.#.|..#..|.#.#.|#...#", "y":".....|.....|#...#|#...#|#...#|#...#|.####|....#|.###.", "z":".....|.....|#####|...#.|..#..|.#...|#####", "ä":".#.#.|.....|.###.|....#|.####|#...#|.####", "ö":".#.#.|.....|.###.|#...#|#...#|#...#|.###.", "ü":".#.#.|.....|#...#|#...#|#...#|#...#|.####", "ß":".##..|#..#.|#..#.|#.##.|#...#|#...#|#.##.", "0":".###.|#...#|#..##|#.#.#|##..#|#...#|.###.", "1":".#.|##.|.#.|.#.|.#.|.#.|###", "2":".###.|#...#|....#|...#.|..#..|.#...|#####", "3":"#####|...#.|..#..|...#.|....#|#...#|.###.", "4":"...#.|..##.|.#.#.|#..#.|#####|...#.|...#.", "5":"#####|#....|####.|....#|....#|#...#|.###.", "6":"..##.|.#...|#....|####.|#...#|#...#|.###.", "7":"#####|....#|...#.|..#..|.#...|.#...|.#...", "8":".###.|#...#|#...#|.###.|#...#|#...#|.###.", "9":".###.|#...#|#...#|.####|....#|...#.|.##..", "!":"#|#|#|#|#|.|#", "?":".###.|#...#|....#|...#.|..#..|.....|..#..", ".":".|.|.|.|.|.|#", ",":"..|..|..|..|..|.#|.#|#.", ":":".|.|#|.|.|.|#", ";":"..|..|.#|..|..|.#|.#|#.", "-":"....|....|....|####|....|....|....", "_":".....|.....|.....|.....|.....|.....|#####", "+":".....|..#..|..#..|#####|..#..|..#..|.....", "=":".....|.....|#####|.....|#####|.....|.....", "'":"#|#", "\"":"#.#|#.#", "/":"....#|...#.|...#.|..#..|.#...|.#...|#....", "(":"..#|.#.|#..|#..|#..|.#.|..#", ")":"#..|.#.|..#|..#|..#|.#.|#..", "*":".....|..#..|#.#.#|.###.|#.#.#|..#..|.....", "#":".#.#.|.#.#.|#####|.#.#.|#####|.#.#.|.#.#.", "&":".##..|#..#.|#.#..|.#...|#.#.#|#..#.|.##.#", "%":"##...|##..#|...#.|..#..|.#...|#..##|...##", "@":".###.|#...#|#.###|#.#.#|#.###|#....|.###.", "€":".###.|#...#|####.|#....|####.|#...#|.###.", "♥":".#.#.|#####|#####|#####|.###.|..#.." }; const FH = 9; // Font-Höhe inkl. Unterlänge const R = FH * ZOOM + 2 * TOP; // LED-Zeilen gesamt // Text -> Spaltenliste; jede Spalte ist ein Uint8Array mit R Einträgen const cols = []; for (const ch of [...(text || " ")]) { const g = (G[ch] ?? G["?"]).split("|"); for (let x = 0; x < g[0].length; x++) { const c = new Uint8Array(R); for (let y = 0; y < FH; y++) if (g[y]?.[x] === "#") for (let z = 0; z < ZOOM; z++) c[TOP + y * ZOOM + z] = 1; for (let z = 0; z < ZOOM; z++) cols.push(c); } for (let z = 0; z < ZOOM; z++) cols.push(new Uint8Array(R)); // Buchstabenabstand } const w = cols.length; // LED-Kacheln vorrendern (abgerundet), passend zur LED-Größe s const tiles = (s) => [ON, OFF].map((color) => { const t = document.createElement("canvas"); t.width = t.height = s; const g = t.getContext("2d"); const gap = Math.max(1, Math.round(GAP * s / S)), rad = RADIUS * s / S; g.fillStyle = color; g.beginPath(); if (g.roundRect) g.roundRect(0, 0, s - gap, s - gap, rad); else g.rect(0, 0, s - gap, s - gap); g.fill(); return t; }); const [tOn, tOff] = tiles(S); // Gemeinsamer Scroll-Zähler; jede Ansicht zeichnet mit ihrer eigenen Spaltenzahl const empty = new Uint8Array(R); let pos = 0, acc = 0, prev = performance.now(); const paint = (g, Cn, s, on, off) => { const p = pos % (w + Cn); g.fillStyle = BG; g.fillRect(0, 0, Cn * s, R * s); for (let cx = 0; cx < Cn; cx++) { const tx = cx + p - Cn; const col = tx >= 0 && tx < w ? cols[tx] : empty; for (let y = 0; y < R; y++) g.drawImage(col[y] ? on : off, cx * s, y * s); } }; // Canvas + Wrapper const canvas = html`