`, `lang`-attributt – nettleseren klarer seg uten. - `<!DOCTYPE html>` beholdt for å unngå quirks mode. ### 2. Inline CSS i stedet for `<style>`-blokk Originalen bruker en egen `<style>`-blokk med mange regler. Den optimaliserte versjonen bruker kun `style="margin:0;overflow:hidden;background:#000"` direkte på `<body>`. `display:block` og `scroll-behavior` er unødvendige og fjernet. ### 3. Utnytter implisitt ID-tilgang // Original: const screen = document.getElementById("screen"); const sctx = screen.getContext("2d"); // Optimalisert: var ctx = c.getContext("2d"); ``` Nettlesere eksponerer automatisk elementer med `id` som globale variabler. Canvas-elementet med `id="c"` kan refereres direkte som `c` – sparer `document.getElementById()` og bruker et 1-tegns navn. ### 4. Fjernet separat offscreen-canvas Originalen oppretter en ekstra `plasmaCanvas` og tegner til den, for så å bruke `drawImage()` til å skalere opp. Den optimaliserte versjonen tegner direkte til hovedcanvas og bruker CSS `width`/`height` + `image-rendering: pixelated` for oppskalering. Eliminerer ett helt canvas-objekt og `drawImage()`-kallet. ### 5. Forenklede sinus-beregninger // Original: forhåndsberegnede lookup-tabeller sinX = new Array(iw); sinY = new Array(ih); for (let x = 0; x < iw; x++) sinX[x] = x * 0.05; // Optimalisert: beregner inline Math.sin(x / 20 + t) // 1/20 = 0.05 Fjernet `sinX[]` og `sinY[]` lookup-arrayene. Divisjon inline (`x / 20`, `y / 17`) gir samme resultat med langt færre bytes. ### 6. Gråtone i stedet for fargepalett // Original: RGB-palett med cosinus function palette(i) { return [128+127*Math.cos(6.28318*(i+0.00)), 128+127*Math.cos(6.28318*(i+0.33)), 128+127*Math.cos(6.28318*(i+0.67))]; } // Optimalisert: én verdi for alle kanaler data[k] = v; data[k+1] = v; data[k+2] = v; Hele `palette()`-funksjonen og arraydestrukturering fjernet. Én beregnet verdi `v` settes lik for R, G og B – gir gråtone-plasma som fremdeles ser bra ut, og sparer ~200 bytes. ### 7. `Math.hypot()` i stedet for manuell avstandsberegning // Original: Math.sqrt(dx*dx + dy*dy) // Optimalisert: Math.hypot(i - w/2, j - h/2) Sparer variabeldeklarasjoner for `dx` og `dy`, og er kortere å skrive. ### 8. Bitwise OR for heltallskonvertering w = (innerWidth / 2) | 0; `| 0` er en kort måte å konvertere til heltall på, i stedet for `Math.floor()`. Sparer 8 bytes per bruk. ### 9. Fjernet resize-event Originalen lytter på `window.resize`. Den optimaliserte versjonen setter størrelsen én gang ved oppstart. Sparer `addEventListener`-kallet og duplikat-logikk. ### 10. Hevet sinus-ledd ut av indre løkke var b = Math.sin(y / 17 + t * 1.3); // beregnes én gang per rad Y-avhengig sinus beregnes i ytre løkke, ikke for hver piksel. Originalen hadde dette som `sinY[y]` lookup – optimalisert versjon gjør det med en enkel variabel. ### 11. `var` i stedet for `let`/`const` `var` er 1 byte kortere enn `let` og 3 bytes kortere enn `const`.

# SmallHTML TG 2026 Plasma effekt ## Teknikker brukt ### 1. Fjernet unødvendig HTML-struktur - ``, ``, ``, `lang`-attributt – nettleseren klarer seg uten. - `<!DOCTYPE html>` beholdt for å unngå quirks mode. ### 2. Inline CSS i stedet for `<style>`-blokk Originalen bruker en egen `<style>`-blokk med mange regler. Den optimaliserte versjonen bruker kun `style="margin:0;overflow:hidden;background:#000"` direkte på `<body>`. `display:block` og `scroll-behavior` er unødvendige og fjernet. ### 3. Utnytter implisitt ID-tilgang // Original: const screen = document.getElementById("screen"); const sctx = screen.getContext("2d"); // Optimalisert: var ctx = c.getContext("2d"); ``` Nettlesere eksponerer automatisk elementer med `id` som globale variabler. Canvas-elementet med `id="c"` kan refereres direkte som `c` – sparer `document.getElementById()` og bruker et 1-tegns navn. ### 4. Fjernet separat offscreen-canvas Originalen oppretter en ekstra `plasmaCanvas` og tegner til den, for så å bruke `drawImage()` til å skalere opp. Den optimaliserte versjonen tegner direkte til hovedcanvas og bruker CSS `width`/`height` + `image-rendering: pixelated` for oppskalering. Eliminerer ett helt canvas-objekt og `drawImage()`-kallet. ### 5. Forenklede sinus-beregninger // Original: forhåndsberegnede lookup-tabeller sinX = new Array(iw); sinY = new Array(ih); for (let x = 0; x < iw; x++) sinX[x] = x * 0.05; // Optimalisert: beregner inline Math.sin(x / 20 + t) // 1/20 = 0.05 Fjernet `sinX[]` og `sinY[]` lookup-arrayene. Divisjon inline (`x / 20`, `y / 17`) gir samme resultat med langt færre bytes. ### 6. Gråtone i stedet for fargepalett // Original: RGB-palett med cosinus function palette(i) { return [128+127*Math.cos(6.28318*(i+0.00)), 128+127*Math.cos(6.28318*(i+0.33)), 128+127*Math.cos(6.28318*(i+0.67))]; } // Optimalisert: én verdi for alle kanaler data[k] = v; data[k+1] = v; data[k+2] = v; Hele `palette()`-funksjonen og arraydestrukturering fjernet. Én beregnet verdi `v` settes lik for R, G og B – gir gråtone-plasma som fremdeles ser bra ut, og sparer ~200 bytes. ### 7. `Math.hypot()` i stedet for manuell avstandsberegning // Original: Math.sqrt(dx*dx + dy*dy) // Optimalisert: Math.hypot(i - w/2, j - h/2) Sparer variabeldeklarasjoner for `dx` og `dy`, og er kortere å skrive. ### 8. Bitwise OR for heltallskonvertering w = (innerWidth / 2) | 0; `| 0` er en kort måte å konvertere til heltall på, i stedet for `Math.floor()`. Sparer 8 bytes per bruk. ### 9. Fjernet resize-event Originalen lytter på `window.resize`. Den optimaliserte versjonen setter størrelsen én gang ved oppstart. Sparer `addEventListener`-kallet og duplikat-logikk. ### 10. Hevet sinus-ledd ut av indre løkke var b = Math.sin(y / 17 + t * 1.3); // beregnes én gang per rad Y-avhengig sinus beregnes i ytre løkke, ikke for hver piksel. Originalen hadde dette som `sinY[y]` lookup – optimalisert versjon gjør det med en enkel variabel. ### 11. `var` i stedet for `let`/`const` `var` er 1 byte kortere enn `let` og 3 bytes kortere enn `const`.