Wustis Blog

Der Blog über Tobias Wust und seine Reise

Kleine PWA: Palermo Generator

| Keine Kommentare

Palermo - Straight (generated)Gestern war ich mal wieder im Museum. Ich habe die Pinakothek in München besucht und dort ein wenig moderne Kunst ansehen können. Es gab natürliches einiges an Blödsinn aber auch schöne Bilder. Ein paar Bilder von Blinky Palermo haben mich angesprochen und eins hat mich zum grübeln gebracht, dass ich daraus auch etwas programmieren könnte.

Ich mag ja grundsätzlich eher bunte Bilder als traurige und eins das mich angesprochen hat ist das Bild „Straight“ von Blinky Palermo. Es besteht aus einem Gitter aus den Farben Gelb, Blau und Rot, bei dem die Spalten durchgängig eine Farbe haben und die Zeilen zufällige dazwischen sind, wobei man immer mal wieder denkt, dass irgendwo doch ein Muster ist, aber es jedes mal wieder aufhört.

Also ich wieder zuhause war, habe ich gedacht, dass ich das mal programmatisch umsetzen könnte, um zu sehen wie das Bild mit anderen Farben wirkt oder wenn es eine andere Größe hat und recht schnell hatte ich einen Prototypen, den ihr auf Codepen finden könnt.

See the Pen
Palermo Generator
by Tobias Wust (@tobiaswust)
on CodePen.

Palermo App ScreenshotIn der Nacht habe ich aber natürlich weiter darüber gegrübelt, was man damit noch alles anstellen könnte. In meiner Fantasie habe ich daraus eine komplette App gemacht mit Export und Import, Speichern, Community Ratings und und und. Also habe ich mich heute rangesetzt und eine kleine App gebaut. Das ganze basiert auf Vue.js und ich habe nuxt und vuetify benutzt, um schnell eine schöne App zu haben. Man kann auch speichern, aber auch Export und Import hatte ich dann doch keine Lust mehr. Vielleicht hole ich das noch mal nach.

Du findest die App unter http://palermo.wust.io.

Den ganzen Quelltext gibt es natürlich auf Github: https://github.com/TobiasWust/palermo-generator

 

Überkommt euch manchmal spontan eine Idee und ihr müsst sie schnell entwickeln? Was war es das letzte mal?

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.