Willys Works
Hier findest du alle kleinen Spielereien und Mini-Projekte an einem Ort.
Patterntestarea Beta
Die Patterntestarea war das erste Projekt auf dieser Seite, welches sich fuer mich nicht mehr wie eine einzelne kleine Uebung angefuehlt hat, sondern eher wie das Zusammenfuehren mehrerer Ideen und Loesungsansaetze aus den vorherigen Aufgaben. Ausgangspunkt war im Grunde die recht simple Ueberlegung, dass zwischen einer eingefaerbten Tabelle und einer frei generierten Musterflaeche eigentlich kaum noch ein Unterschied besteht, sobald die einzelnen Zellen klein genug dargestellt werden.
Das Ziel war diesmal deshalb nicht mehr einfach nur das Generieren einer Tabelle oder eines einzelnen Musters, sondern eine flexible Experimentierflaeche zu erschaffen, auf der unterschiedliche Formeln, Farbpaletten und Rastergroessen innerhalb der gesetzten Eingabegrenzen miteinander kombiniert werden koennen. Der User kann dabei nicht nur die Aufloesung beziehungsweise Groesse der Flaeche selbst bestimmen, sondern auch verschiedene vorbereitete Musterformeln auswaehlen, Farben aktivieren oder deaktivieren oder alternativ neue Zufallspaletten generieren lassen.
Die gesammelten Formelideen und Hintergrundnotizen stehen ausserdem in einer README.txt zur Patterntestarea, falls du beim Experimentieren etwas nachschlagen oder in Ruhe weiterdenken willst.
Der wichtigste Teil der Idee war fuer mich allerdings der Formeleditor. Statt eine Formel jedes Mal direkt im Quellcode veraendern zu muessen, sollte es moeglich sein, diese unmittelbar im Frontend anzupassen und das Ergebnis der Aenderung sofort betrachten zu koennen. Genau dieser direkte Zusammenhang zwischen Formel und sichtbarer Auswirkung war der eigentliche Kerngedanke hinter dem gesamten Projekt.
Mein erster Loesungsansatz lief vollstaendig ueber PHP und serverseitig generierte Tabellenstrukturen. Das funktionierte grundsaetzlich auch erstaunlich gut, zumindest solange die erzeugten Flaechen noch ueberschaubar blieben. Spaetestens bei Groessen wie 1000x1000 Pixeln und mehreren Farben wurde allerdings schnell klar, dass das Rendern riesiger HTML-Strukturen inklusive kompletter Seitenreloads keine besonders elegante Loesung mehr war. Teilweise lagen die Ladezeiten bereits bei ein bis zwei Minuten, was das Experimentieren natuerlich komplett zerstoert hat.
Deshalb musste ich das gesamte Konzept nochmal ueberdenken und einen grossen Teil der Logik ins Frontend auslagern. Die aktuelle Version arbeitet deshalb zusaetzlich mit JavaScript und rendert die Muster direkt auf einem Canvas, wodurch die Generierung bei grossen Rasterflaechen deutlich fluessiger nutzbar wurde als mit den vorherigen HTML-Tabellen und kompletten Seitenreloads. Gleichzeitig wurde dadurch auch das direkte Bearbeiten und Beobachten der Formeln ueberhaupt erst sinnvoll moeglich.
Rueckblickend ist die Patterntestarea wahrscheinlich der erste Punkt auf dieser Seite gewesen, an dem aus mehreren kleinen Lernaufgaben ploetzlich ein eigenes groesseres Projekt geworden ist. Nicht mehr nur eine einzelne Uebung mit klarer Aufgabenstellung, sondern eher eine offene Spielwiese zum Ausprobieren, Betrachten und Weiterdenken.