Art Mixer

Spiel

Bei diesem Spiel ist es möglich, über ein Feld (Canvas) mit der Maus zu interagieren, und so verschiedene Formen zu zeichnen, die von einer Ordnung (einem weissen Feld) bis zum kompletten Chaos (Unordnung) führen. Um die Erfahrung noch persönlicher zu machen, gibt es verschiedene Parameter, die nach Belieben eingestellt werden können, etwa die Form, Farbe und Grösse der Elemente. Per Mausklick kann der Canvas gelöscht werden.
Wenn man einmal die richtige Kombination bei den Anpassungen hat, lassen sich abstrakte Bilder innert Sekunden mit minimalem Aufwand gestalten.

Funktionen

Insgesamt lassen sich die Form einstellen, welche gezeichnet wird. Deren Grösse wird durch einen Slider gewählt. Die Füllfarbe kann mittels drei RGB-Slidern eingestellt werden, ohne RGB gibt es Schwarz/Weiss-Töne, was sich einfacher anhört als es ist. Die Framerate, also wie viele Bilder pro Sekunde und in diesem Fall wie viele Formen pro Sekunde gezeichnet werden können, ist nun ebenfalls mittels Slider einstellbar. Es kann der Rahmen angepasst werden, welche eine Linie um die Form mit variabler Breite erstellt. Ein weiteres kreatives Element ist die Deckkraft, welche von 0 bis 100 eingestellt werden kann. Besonders mit eher weniger Deckkraft lassen sich ansprechende Bilder gemalt werden. Eine kleine Option zum Schluss, der Cursor kann ausgeblendet werden, ansonsten steht ein Cursor im Seifenblasen-Look zur Seite.

Arbeitsprozess

Das kleine Spiel, das ich programmiert habe, ist basierend auf p5.js, einer JavaScript Library, die den Fokus auf Benutzerfreundlichkeit und Kreativität setzt. Mit Funktionen wie draw() oder setup() haben besonders Leute mit wenig Erfahrung mit JavaScript (wie ich) einen leichten Einstieg.
Ich startete mit einem blanken Canvas, in jenem ich verschiedene Funktionen ausprobierte, welche mir der YouTube–Kanal The Coding Train empfahl. Die Schreibfokus wurde immer wieder durch kurze und manchmal lange Google-Sessions unterbrochen, um Lösungen zu den auftretenden Problemen zu finden. Aber die Referenz-Materialien von p5js selbst lieferten den grössten Mehrwert.
Im Nachhinein gestaltete sich bloss der Anfang schwer, wenn man noch nicht das Verhalten des Codes kennt. Das kommt mit der Zeit, so wird man immer effizienter.
Das Implementieren von Parametern, um das Spiel selbst zu steuern, ist ein Grund, warum man mit Variablen arbeiten sollte. Glücklicherweise verhalten die sich ähnlich die bei der Programmiersprache C, deren Verhaltensweisen ich schon beherrsche.
Es gab trotzdem einige Herausforderungen, beispielsweise die Dreiecke. Diese waren besonders knifflig, weil man zu jedem der drei Punkte die Mausposition in Form von x und y verlinken muss und man alles dynamisch gestalten soll, sodass die Grösse anpassbar bleibt. Die jetzige Implementierung ist mehr ein Gebastel, als dass es eine vernünftige Lösung ist, aber ich bin auch ein Anfänger.

Dieses Projekt fand ich eine gelungene Sache, da das Thema selbst bestummen wurde und man eine komplette Freiheit über die Umsetzung hatte. Ich wollte JavaScript lernen, das habe ich mit diesem Projekt realisieren können. Wahrscheinlich werde ich auch weiterhin mit p5js arbeiten, wenn die Zeit dazu da ist. Und bis dann habe ich schon einen ersten Erfolg.