Design eines Partikelfeld-Visualisierers

Ein Partikelfeld mit Laufzeitkontext

Dieses offizielle OpenDesign-Beispiel zeigt einen Canvas-2D-Partikelfeld-Visualisierer als einzelne, kontrastreiche Grafik. Die Komposition platziert die große weiße Überschrift „Compute off the main thread.“ oben links, während eine breite grüne Partikelformation Mitte und rechte Seite einnimmt. Ein Web Worker initialisiert die Punkte, der Hauptthread zeichnet sie; die Vorlage enthält keine Steuerelemente zur Nutzerinteraktion.

Das Partikelfeld ist keine beliebige Wolke. Seine Punkte sammeln sich zu einer abgerundeten, ringartigen Masse mit dunkler Öffnung nahe der Mitte. Diese Leerstelle schafft einen lesbaren Blickpunkt in einer sehr dichten Fläche, sodass man die Struktur untersuchen kann, statt nur gleichmäßiges Rauschen zu sehen. Die neongrünen Punkte auf dem nahezu schwarzen Hintergrund erhalten zudem den Kontrast im Maßstab der gesamten Komposition.

Anwendungsfälle für technische Visuals

Das Design eignet sich, wenn eine technische Demonstration wie ein fertiges Visual wirken soll und nicht wie ein Debugging-Panel. Die zurückhaltende Informationsebene unterstützt eine Präsentation, ein Zwischenelement auf einer Landingpage oder eine Creative-Coding-Studie, bei der das Feld das Hauptmotiv bleibt und das Implementierungsvokabular sichtbar, aber kompakt ist.

Die untere Zeile enthält drei verschiedene Informationsarten: „12,000“ nennt die Partikelanzahl, „postMessage“ den Transport, und „121“ steht im erfassten Laufzeitzustand über „RENDER FPS“. Werden diese Werte nebeneinander, aber getrennt geführt, lassen sich Szenengröße, Kommunikationsmodus und eine lokale Rendering-Beobachtung unterscheiden. Der Kompromiss: Die Labels erklären das Konzept, nicht aber, wie die Werte berechnet werden.

Komposition und Leserichtung

Die Überschrift oben links ist übergroß und umbricht über zwei Zeilen, sodass „Compute off the“ und „main thread.“ den ersten stabilen Leseanker bilden. Das kleine, gesperrte Label „WORKER VISUALIZER“ benennt darüber das Thema. Diese typografische Größe schafft einen starken redaktionellen Einstieg, nimmt neben dem Feld aber auch viel horizontalen und vertikalen Raum ein.

Die Vorlage initialisiert 12000 Punkte mit gleichmäßig verteilten Winkeln und zufälligen Radien von 0.15 bis 1.0. Dieser Innenradius erklärt die sichtbare dunkle Mitte, während die radiale Verteilung viele Punkte in ihrer Nähe konzentriert. Canvas 2D zeichnet kleine grüne Quadrate über einer halbtransparenten dunklen Übermalung. Die festen unteren Labels stehen außerhalb jedes Panels und bewahren die plakatartige Komposition, ohne einen WebGL-Renderer oder einen GPU-Benchmark zu suggerieren.

Beobachtbare Zusammenhänge

Die drei Statistiken folgen einem einheitlichen Muster: Ein größerer Wert oder ein Wort steht über einem kleineren Label in Großbuchstaben. „12,000“ und „121“ sind numerische Beobachtungen, „postMessage“ dagegen ein textueller Transportwert. Die gemeinsame Gestaltung lässt sie als eine Gruppe erscheinen, doch die unterschiedlichen Werttypen verlangen, dass die Labels ihre Bedeutung erklären.

Zwei Transportpfade, unterschiedliche Bewegung

Die Vorlage unterstützt zwei Worker-Transportpfade. In der mitgelieferten nicht isolierten Vorschau liefert postMessage die Anfangspositionen, startet aber nie die step-Funktion, weshalb wiederholtes Canvas-Zeichnen keine fortlaufende Partikelsimulation belegt. Der erfasste Wert von 121 RENDER FPS schätzt die lokale Redraw-Frequenz, nicht die Update-Frequenz der Partikel und keine vergleichende Leistung. Es ist weder ein angebundener Dienst noch gespeicherte Daten, ein Produktiveinsatz oder wissenschaftlich validierte Partikeldynamik belegt.