Mathematik trifft Stricken trifft Webentwicklung
Wunderschöne endlose Linienmuster mittels Truchet Kacheln und React-Hooks
Wenn man nicht immer die gleichen Muster stricken will, dann hilft nur ein Zufallsgenerator. Natürlich muss es aber heutzutage React mit functional Programming sein.
Einleitung
Will man abwechslungsreiche Sachen stricken kommt die Inspiration dazu meist aus unerwarteter Richtung. Muster aller Art lassen sich mittels Mathematik erzeugen und besonders schön und doch einfach sind Truchet Kacheln. Diese lassen sich ganz simpel durch 1 und 0 Werte einer Matrix darstellen. Man benötigt also nur die normale und inverse Truchet Kachel und legt diese über eine generierte Zufallsmatrix mit 0 und 1 Werten.
Basierend auf der Zufallsmatrix und dem entsprechenden Truchet Kachelmuster lassen sich schöne Muster in Baybdecken oder Schals einfügen. Heutzutage sollte man aber darauf achten faire Wolle zu verwenden, bei der kein Leid für das Schaf entsteht.
Doch nun zum eigentlichen Thema — wir sind ja eine IT-Firma :D — Wie erzeugt man eine Zufallsmatrix? Generell ist es in den meisten Programmiersprachen so, dass es keinen Datentyp “Matrix” gibt (zumindest nicht ohne entsprechendes Framework). Die einfachste Variante ist es einen mehrdimensionalen Array zu verwenden der mittels Zufallsgenerator den Wert 0 oder 1 in den Eintrag schreibt. Hierbei entspricht bspw. Matrix[1][2] dem x=2 und y=3 Eintrag der Matrix. Wir speichern die Dimensionen der Matrix mittels useState Hook in der x und y Variable mit Initialwert 3 ab.
Die ganze Logik findet man in der Matrix.js Datei. Den mehrdimensionalen Array der die Matrix aufspannt in der Variable matrix mit dem Initialwert ‘leerer Array’. In der Variable random speichern wir ‘ping’ oder ‘pong’, das dient dazu die Neuberechnung beim Klick auf den reroll-Button manuell anzustoßen. Beim Klick setzt sich der state der Variable random abwechselnd auf ping oder pong.
Mittels eines useEffect Hooks berechnen wir die Matrix bei Änderung der State-Variablen x, y und random neu.
Sprich: Die Neuberechnung der Matrix ist entkoppelt von den eigentlichen onClick oder onChange Handlern der Buttons und Input-Felder. Das führt zu schön strukturiertem Code.
Das Ganze lässt sich unter der folgenden URL ausprobieren
Ein bisschen print CSS führt noch dazu, dass sich das ganze schön Ausdrucken lässt und man in Ruhe seine Muster stricken kann.
Fazit
Mich fasziniert die Einfachheit der Truchet Kacheln, die dadurch generierten Muster und dass ein Mönch so etwas ohne Computer vor Urzeiten erdacht hat. Wie schön einfach React einem das Leben durch Hooks macht ist genial. Ich will auf jeden Fall nichts mehr von non-functional React Klassen sehen oder hören :D — Auch ist es immer wieder schön zu sehen was meine begabte Schwester so mit Wolle zaubert. Sie hat mich überhaupt erst auf die Truchet Kacheln gebracht und ich konnte es erst nicht glauben, dass dadurch ein Muster ohne “Lücken” entsteht (die Ränder ausgenommen).
Hier noch Links für weitere lustige Strick-Projekte:
- https://selekkt.com/rudiger-schlomer-pixel-patch-und-pattern-typeknitting.html
- http://www.woollythoughts.com/
- http://mentalblocks.co.uk/blog/
Wir erarbeiten anspruchsvolle und innovative Softwarelösungen mit großer Leidenschaft. Projekte betreuen wir ganzheitlich und mit voller Transparenz: Sie bekommen von uns alles aus einer Hand. Bei der Entwicklung von Lösungen orientieren wir uns an zwei Phasen…
This blogpost is published by Comsysto Reply GmbH
