{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "halbton-raster",
 "name": "Halbton-Raster",
 "name_en": "Halftone (dots / CMYK) shader",
 "kurz": "Programmseite eines Zürcher Kulturhauses: Jedes Bild erscheint als Raster in der Farbe seiner Sparte, beim Bildwechsel wächst das Raster kurz auf, beim Hover wird es feiner.",
 "kategorie": "Glas & Material",
 "kategorie_slug": "glas-material",
 "kategorie_nr": 10,
 "bau_chat": "C5",
 "prioritaet": "C",
 "trendstatus": "aufsteigend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "editorial",
  "laut",
  "experimentell"
 ],
 "stimmung_roh": [
  "editorial",
  "retro",
  "grafisch",
  "laut"
 ],
 "technik": [
  "webgl-shader",
  "canvas",
  "svg-filter"
 ],
 "technik_gruppen": [
  "webgl",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Das Bild wird in ein Raster aus Zellen geteilt, meist 6 bis 16 px groß und um 15 bis 45 Grad gedreht. Für jede Zelle zählt die Helligkeit am Mittelpunkt. Daraus entsteht ein Punkt, eine Linie oder ein Quadrat: je dunkler, desto größer. In der CMYK-Variante liegen vier Raster mit eigenen Winkeln übereinander (C 15°, M 75°, Y 0°, K 45°) und werden multipliziert. Interaktiv lässt sich die Zellgröße animieren, etwa beim Hover oder beim Bildwechsel.",
  "warum_es_wirkt": "Das Raster erinnert an Zeitung, Plakat und Comic. Es macht aus Fotos unterschiedlicher Herkunft eine einheitliche Bildsprache und gibt der Marke eine analoge, grafische Handschrift.",
  "wann_einsetzen": "Kultur, Musik, Mode, Editorial und Portfolios. Immer dann, wenn uneinheitliches Bildmaterial zu einer Bildsprache werden soll.",
  "wann_nicht": "Bei Produktfotos, deren Details zählen, und bei kleinen Bildern: Das Raster frisst Information. Auch nicht bei Essen, wo Farbe und Struktur das Bild tragen.",
  "varianten": [
   "Punkt-Halbton in einer Schmuckfarbe",
   "CMYK-Halbton mit vier Rasterwinkeln",
   "Linien-Halbton",
   "Interaktive Auflösung: Zelle wird beim Hover feiner oder löst sich in Cursornähe zum Foto auf",
   "Halbton als Übergang zwischen Bildern"
  ],
  "umsetzung": "Fragment-Shader auf der Bildtextur. Die Pixelkoordinate wird um den Rasterwinkel gedreht, auf die Zellmitte gerundet und zurückgedreht; dort wird die Textur gelesen. Der Radius ist Zelle · 0.707 · √Dunkelheit, so wächst die Punktfläche proportional zur Dunkelheit. Die Kante glättet smoothstep über etwa einen Gerätepixel oder fwidth(). Für viele kleine Bilder reicht ein zweiter WebGL-Kontext, der offscreen malt und per drawImage in einzelne Canvas kopiert. CSS-Näherung: Punktmuster aus radial-gradient als Maske mit Kontrastfilter, allerdings nur mit gleich großen Punkten. Award-Belege fehlen bisher; aufgenommen wegen der Verbreitung in Shader-Werkzeugen (Paper) und der Nähe zum Dither-Trend.",
  "mobil": "Unproblematisch. Zellgröße in CSS-Pixeln festlegen und mit devicePixelRatio multiplizieren. Auf kleinen Bildern kleinere Zellen wählen. Statt Hover schaltet Tippen die feinere Stufe.",
  "reduzierte_bewegung": "Animationen der Zellgröße und Bildwechsel entfallen, die Zustände springen. Das statische Raster bleibt.",
  "barrierefreiheit": "Das Raster ist nur Darstellung. Die Bildbeschreibung gehört an das Bild (img mit alt oder role=img mit aria-label), der Canvas bekommt aria-hidden. Kein Text ins Raster legen. Wird eine Farbe einer Sparte oder Kategorie zugeordnet, steht sie zusätzlich als Text daneben."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "Zellgröße 6–16px",
  "sonstiges": "Rasterwinkel C15/M75/Y0/K45",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.215,
   0.61,
   0.355,
   1.0
  ],
  "css": "cubic-bezier(0.215, 0.61, 0.355, 1)",
  "name": "eigene Kurve",
  "dauer_ms": null
 },
 "gesehen_bei": [],
 "tutorials": [
  {
   "titel": "Paper Shaders – Halftone dots / Halftone CMYK",
   "url": "https://shaders.paper.design/"
  }
 ],
 "kombinierbar_mit": [
  "graustufen-zu-farbe",
  "grain-noise-overlay",
  "ascii-dither-pixel-stil"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/glas-material/halbton-raster/",
  "meta": "https://cecodesign.de/lab/fundus/glas-material/halbton-raster/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/glas-material/halbton-raster/demo"
 },
 "herkunft": {
  "quelldateien": [
   "material3d.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: Kein Halbton-Shader oder CSS-Raster in Produktion verifiziert; gefunden nur statische Halbton-Bildassets (paper.design App-Icon, awge.com Logo-PNG). Herabstufung bis zum ersten echten Beleg."
  ],
  "prioritaet_hinweis": "31.10.2026: B → C laut patch-belege-2.json (Kein Halbton-Shader oder CSS-Raster in Produktion verifiziert; gefunden nur statische Halbton-Bildassets (paper.design App-Icon, awge.com Logo-PNG). Herabstufung bis zum ersten echten Beleg.)"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Programmseite eines Zürcher Kulturhauses: Jedes Bild erscheint als Raster in der Farbe seiner Sparte, beim Bildwechsel wächst das Raster kurz auf, beim Hover wird es feiner.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "aufbau": "Eigener WebGL-1-Shader ohne Bibliothek auf einem Vollbild-Dreieck. Ein sichtbarer Kontext für die Bühne, ein zweiter malt offscreen und kopiert per drawImage in die vier Programmkarten. Die Motive sind vier auf Canvas gemalte Bilder (1000 × 1000) mit Korn ±8, als Textur wie object-fit: cover gelesen.",
   "zelle_px": "Bühne 11 (unter 760 px Breite 7), Hover/Tippen 6; Karten 7, fein 4.5; jeweils × devicePixelRatio (max. 2)",
   "winkel": "Punkt und Linien 45°; CMYK C 15°, M 75°, Y 0°, K 45°",
   "punkt": "Pixel um den Winkel drehen, auf Zellmitte runden, zurückdrehen und dort lesen. Radius = Zelle · 0.7071 · √Dunkelheit (Fläche proportional zur Dunkelheit)",
   "dunkelheit": "(1 − Luminanz(0.299, 0.587, 0.114) − 0.03) · 1.08, auf 0…1 begrenzt",
   "linien": "Strichstärke = Zelle · Dunkelheit, gelesen an der Linienmitte entlang der Linie",
   "kante": "smoothstep über ±0.75 Gerätepixel",
   "cmyk": "k = 1 − max(r, g, b), CMY = (1 − rgb − k) / (1 − k); CMY × 0.9, K × 0.88 gegen Tonwertzunahme. Druck per Multiplikation auf Papier: Cyan (0, .63, .88) × 0.92, Magenta (.9, .05, .5) × 0.9, Gelb (1, .9, .05) × 0.95, Schwarz (.09, .08, .09)",
   "farben": "Papier #EFEDE9 (= Seitengrund), Tinte je Sparte: Kunst #2F7D4A, Musik #C4421A, Theater #3D5F9A, Film #B0186B; beim Wechsel wird die Tinte mitgeblendet",
   "bildwechsel": "480 ms; Motive und Tinte blenden mit der Kurve, die Zelle wächst dabei per Sinus bis × 1.9 und schließt sich wieder",
   "feinstufe": "350 ms, Zelle 11 → 6 px",
   "easing": "cubic-bezier(0.215, 0.61, 0.355, 1) für alles (Rezept), UI 200 ms",
   "vorfuehrung": "Takt 3600 ms: gedachter Zeiger klickt den nächsten Reiter, fährt übers Bild (Feinstufe an) und zurück; Raster wechselt alle zwei Motive Punkt → CMYK → Linien",
   "rezept": "kultur-programm-haltung: Schibsted Grotesk 900 (h1 clamp(2.5rem, 14.5cqi, 7rem), −0.02em, Zeilenhöhe 1.0), Atkinson Hyperlegible Next 1.125rem/1.6, IBM Plex Mono 0.8125rem mit Tabellenziffern; Grund #EFEDE9, Text #0B0B0B; Kopf 78 px mit 1 px Unterkante"
  },
  "ausloeser": "laden, hover, klick",
  "touch": "Kein Hover: Tippen auf das Bühnenbild oder eine Programmkarte schaltet die feinere Stufe ein und aus. Die Reiter wechseln das Motiv. Unter 760 px Breite ist die Zelle 7 statt 11 px, das Bild steht im Format 4:5 unter dem Titel.",
  "reduziert": "Bildwechsel und Feinstufe springen ohne Tween und ohne Zellpuls. Das Raster selbst bleibt sichtbar, es ist Gestaltung und keine Bewegung. Gemalt wird nur bei Änderungen.",
  "korrekturen": {
   "beschreibung": "Das Bild wird in ein Raster aus Zellen geteilt, meist 6 bis 16 px groß und um 15 bis 45 Grad gedreht. Für jede Zelle zählt die Helligkeit am Mittelpunkt. Daraus entsteht ein Punkt, eine Linie oder ein Quadrat: je dunkler, desto größer. In der CMYK-Variante liegen vier Raster mit eigenen Winkeln übereinander (C 15°, M 75°, Y 0°, K 45°) und werden multipliziert. Interaktiv lässt sich die Zellgröße animieren, etwa beim Hover oder beim Bildwechsel.",
   "warum_es_wirkt": "Das Raster erinnert an Zeitung, Plakat und Comic. Es macht aus Fotos unterschiedlicher Herkunft eine einheitliche Bildsprache und gibt der Marke eine analoge, grafische Handschrift.",
   "wann_einsetzen": "Kultur, Musik, Mode, Editorial und Portfolios. Immer dann, wenn uneinheitliches Bildmaterial zu einer Bildsprache werden soll.",
   "wann_nicht": "Bei Produktfotos, deren Details zählen, und bei kleinen Bildern: Das Raster frisst Information. Auch nicht bei Essen, wo Farbe und Struktur das Bild tragen.",
   "varianten": [
    "Punkt-Halbton in einer Schmuckfarbe",
    "CMYK-Halbton mit vier Rasterwinkeln",
    "Linien-Halbton",
    "Interaktive Auflösung: Zelle wird beim Hover feiner oder löst sich in Cursornähe zum Foto auf",
    "Halbton als Übergang zwischen Bildern"
   ],
   "umsetzung": "Fragment-Shader auf der Bildtextur. Die Pixelkoordinate wird um den Rasterwinkel gedreht, auf die Zellmitte gerundet und zurückgedreht; dort wird die Textur gelesen. Der Radius ist Zelle · 0.707 · √Dunkelheit, so wächst die Punktfläche proportional zur Dunkelheit. Die Kante glättet smoothstep über etwa einen Gerätepixel oder fwidth(). Für viele kleine Bilder reicht ein zweiter WebGL-Kontext, der offscreen malt und per drawImage in einzelne Canvas kopiert. CSS-Näherung: Punktmuster aus radial-gradient als Maske mit Kontrastfilter, allerdings nur mit gleich großen Punkten. Award-Belege fehlen bisher; aufgenommen wegen der Verbreitung in Shader-Werkzeugen (Paper) und der Nähe zum Dither-Trend.",
   "mobil": "Unproblematisch. Zellgröße in CSS-Pixeln festlegen und mit devicePixelRatio multiplizieren. Auf kleinen Bildern kleinere Zellen wählen. Statt Hover schaltet Tippen die feinere Stufe.",
   "reduzierte_bewegung": "Animationen der Zellgröße und Bildwechsel entfallen, die Zustände springen. Das statische Raster bleibt.",
   "barrierefreiheit": "Das Raster ist nur Darstellung. Die Bildbeschreibung gehört an das Bild (img mit alt oder role=img mit aria-label), der Canvas bekommt aria-hidden. Kein Text ins Raster legen. Wird eine Farbe einer Sparte oder Kategorie zugeordnet, steht sie zusätzlich als Text daneben."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept kultur-programm-haltung, erfundenes Kulturhaus Limmatbogen in Zürich-Escher-Wyss, eine ehemalige Zeitungsdruckerei; daraus begründet sich das Raster als Bildsprache des Hauses. Die Demo zeigt das Wochenprogramm mit vier Sparten: Bühnenbild per WebGL in Spartenfarbe, Raster-Umschalter Punkt / CMYK / Linien, Halbton-Übergang beim Reiterwechsel, Feinstufe bei Hover und Tippen, darunter vier Programmkarten aus einem zweiten Offscreen-Kontext. Eine Cursor-Lupe ist bewusst weggelassen, weil das Rezept Cursor-Effekte ausschließt; die Feinstufe wirkt auf das ganze Bild. Ohne WebGL: Graustufenbild mit CSS-Punktmaske und Hinweis. Referenzen (nur Prinzipien): comme-des-garcons.com, hkw.de, volksbuehne-berlin.de. AD-Review 01.11.2026: Note 5 Zugang 02.11.2026: 320 px: bis 360 px Kopf enger (Abstand 8 px, Marke 17 px, Tickets und Menü 14 px mit 9 px Innenabstand), damit nichts quer scrollt. Kontrastmodus: Knöpfe mit Rahmen ButtonText."
 }
}