Spotlight #4 — Rendering i sztuka generatywna

Symulacji w kategorii

Symulacje z shaderami GLSL

Kluczowych algorytmów

Sztuka generatywna to miejsce, w którym matematyka staje się widoczna. W przeciwieństwie do symulacji fizycznych modelujących rzeczywiste układy, symulacje renderingu napędzane są czystym wzorcem — rekurencją, szumem, pętlami sprzężenia zwrotnego i równaniami falowymi. Są też najbardziej wymagające dla GPU spośród wszystkich symulacji na stronie, więc pokazują, na co naprawdę stać potok WebGL w przeglądarce.

Symulacje

Shadery GLSL i ray marching

☁️ Ray Marching Sphere tracing funkcji odległości ze znakiem — renderowanie niemożliwych kształtów bez jakiejkolwiek geometrii. Wykorzystuje klasyczną bibliotekę SDF: kule, sześciany, torusy, mieszanie smooth-min. Fragment Shader GLSL · SDF 🎵 Figury Chladniego Piasek samoorganizuje się w węzły fali stojącej na wibrującej płycie. Wzór jest rozwiązaniem dwuwymiarowego równania falowego — renderowanego jako mapa cieplna aktualizowana w czasie rzeczywistym. 2D równanie falowe · Canvas 2D 🌈 Kolory światła Rozkład spektralny białego światła — jak interferencja cienkiej warstwy tworzy barwy tęczowe. Funkcje dopasowania barw CIE XYZ przeliczane do sRGB na GPU. GLSL · Nauka o barwie CIE 〰️ Interferencja na dwóch szczelinach Eksperyment Younga z regulowaną długością fali, szerokością i rozstawem szczelin. Zasada Huygensa wyrenderowana jako nałożone pole falowe. Superpozycja fal · Canvas 2D

Reakcja-dyfuzja i systemy sprzężenia zwrotnego

🧫 Reakcja-dyfuzja Model morfogenezy Alana Turinga z 1952 roku — dwie substancje chemiczne (aktywator i inhibitor) generują plamy, paski i wzory labiryntowe. Bufory ping-pong na GPU. Gray-Scott · WebGL Ping-pong 🔲 Automaty komórkowe Gra w Życie Conwaya plus siedem alternatywnych zestawów reguł: HighLife, Day & Night, Maze, Move, Replicator, Seeds i 2×2. Siatka 1024×1024 obliczana na GPU. Obliczenia WebGL · Bufor tekstur 💨 Dyfuzja Dyfuzja ruchu Browna zwizualizowana jako pole gęstości — cząstki wykonujące błądzenie losowe, które wspólnie tworzą rozprzestrzeniający się front Gaussa. Ruch Browna · Canvas 2D ❄️ Wzrost kryształów Dyfuzyjnie ograniczona agregacja i rozgałęzienia Lichtenberga — jak płatki śniegu i dendryty mineralne tworzą swoje fraktalne kształty poprzez losowy wzrost. DLA · Fraktal

Geometria generatywna i szum

🌿 Paproć Barnsleya Fotorealistyczna paproć generowana przez zaledwie cztery przekształcenia afiniczne i liczbę losową. Kanoniczny przykład iterowanego systemu funkcyjnego Michaela Barnsleya. IFS · Iterowany system funkcyjny 🌀 Diagram bifurkacyjny Droga mapy logistycznej do chaosu — każdy punkt na osi x to wartość parametru, każdy punkt na osi y to stan ustalony populacji. Motyl teorii chaosu. Mapa logistyczna · Teoria chaosu 🌊 Fale w wannie Odbicia fal płytkiej wody w ograniczonej domenie — mody rezonansowe, fale stojące i dyfrakcja krawędziowa, wszystko sterowane interaktywnym dotykiem/przeciąganiem. Równanie płytkiej wody · WebGL 🫧 Bąbelki Fizyka błony mydlanej — barwy interferencji cienkiej warstwy, siły napięcia powierzchniowego, prawa Plateau dla upakowania baniek i dynamiczne łączenie się przy dotyku. Napięcie powierzchniowe · Optyka cienkiej warstwy

Efekty specjalne i wizualizatory

🎼 Akustyka sali koncertowej Śledzone promieniami odbicia akustyczne wewnątrz konfigurowalnej sali — wczesne odbicia, rozproszony ogon pogłosu i odczyt RT60 na żywo podczas zmiany rozmiaru pomieszczenia. Ray tracing akustyczny · Canvas 2D 📡 Efekt Dopplera Czoła fal ściskane przed poruszającym się źródłem, rozciągane za nim — animowane przy dowolnej prędkości, od poddźwiękowej po naddźwiękową (formowanie stożka Macha). Propagacja fal · Canvas 2D

Kluczowe algorytmy w akcji

Ray marching SDF Reakcja-dyfuzja Gray-Scott Dyfuzyjnie ograniczona agregacja Iterowane systemy funkcyjne Bufory ping-pong Superpozycja fal Huygensa Mapa logistyczna (chaos) Ruch Browna Optyka cienkiej warstwy Ray tracing akustyczny

Zalecana ścieżka nauki

Najpierw wizualnie: Zacznij od Paproci Barnsleya (czysta matematyka, natychmiastowa satysfakcja), potem Diagramu bifurkacyjnego (teoria chaosu w jednym obrazie). Przejdź do Reakcji-dyfuzji dla wzorów przyspieszanych przez GPU i zakończ na Ray Marching — najtrudniejszej, ale technicznie najbardziej satysfakcjonującej symulacji w tej kategorii.

Dla nauczycieli

Figury Chladniego to symulacja najlepiej nadająca się do sali lekcyjnej — bezpośrednio demonstruje węzły fali stojącej i związek między częstotliwością a złożonością wzoru. Symulacja Podwójnej Szczeliny obejmuje dualizm korpuskularno-falowy z programu fizyki szkolnej. Obie mają regulowane parametry, więc można dokładnie odtworzyć przykłady z podręcznika.

Reakcja-dyfuzja jest idealna do lekcji biologii lub chemii o formowaniu się wzorów w naturze — naprawdę zaskakujący wynik, że plamy na lampartcie czy paski na rybie mogą powstać zaledwie z dwóch reagujących ze sobą substancji chemicznych. Łączy się to z oryginalną pracą Alana Turinga z 1952 roku, dostępną nawet dla uczniów szkół średnich.