# SmallHTML TG 2026 Plasma effekt
## Teknikker brukt
### 1. Fjernet unødvendig HTML-struktur
- `<head>`, `<meta>`, `<title>`, `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`.