Paisley
Ich male gern Paisleys. Und wollte schon immer mal verstehen wie ich ein gemaltes Paisley digital nachmale und animiere.
Hier habe ich ein gemaltes Paisley genommen, in base64 übersetzt und als Vorlage für den Pixelhaufen genommen.
Animiert wird das ganze durch die Maus/Touch Interaktion, diese lässt Pixel in Reichweite auf die Maus hinzu bewegen und wieder abstoßen. Sie bewegen sich, bis die Pixel wieder am Ausgangsort angekommen und keine Geschwdindigkeit mehr haben.
Ein langes Wochenende habe ich mich erst mit Bezier Kurven und dann mit getImageData auseinander gesetzt. Die Image Data habe ich dann benutzt um die schwarzen und weißen Pixel in verschiedene Arrays zu sortieren. So speicher ich in einem Array nur die Form und nicht jedes Pixel des Bildes. Für mobile Endgeräte habe ich ein kleineres Bild hinterlegt. Die Farben der Pixel werden während der Animation bestimmt. Sie stehen in Beziehung wieviel und schnell der Pixel schon bewegt wurde.
Controls
Was machen Sachen?
| Auflösung | Wieviel des ursprüngliches Bildes nachgezeichnet wird |
| Linienstärke | Wie dick die Pixel gezeichnet werden |
| Ruhelosigkeit | Wie sehr die Pixel sich von selbst bewegen |
| Reichweite | Distanz wie weit entfernt Pixel reagieren |
| Beeinflussung | Wie stark Pixel ihre Nachbarn beeinflussen |
| Trägheit | Wie schnell die Animation wieder in den Ausgangszustand geht |