request_url_withoutHTTP=,canonical_url_withHTTP=,canonical_url_withoutHTTP=,request_url_withoutHTTP_realspaces=. SVG (Seite 1 von 2) « Tags « Blog « Bernhard Häussner
Bernhard Häussner
Tags: Artikel mit dem Tag «SVG» durchstöbern

Ein schönes Online-Spiel names adinfinitvm

29.06.2016, 12:44

Ich habe ein Online-Spiel programmiert: adinfinitvm. Es ist ein minimalistisches Puzzle-Spiel, mit unendlich vielen Levels. Es basiert auf dem Spiel ∞ loop, das als App für iOS und Android umgesetzt ist, welches wiederum auf dem Flash-Spiel „Loops of Zen“ von Dr. Arend Hintze basiert.

Ich bin anscheinend reichlich uninformiert, was die neuesten Spiele-Apps angeht: Das Loopgame wirbt mit „das beliebteste Game des Jahres 2016“ (obwohl das Jahr gerade mal zur Hälfte vorbei ist) und ich habe davon nur erfahren, da ich ein selbst-designtes T-Shirt trug mit meinem Ravello Switch Knot, welches eine Freundin an das Spiel erinnert hat.

Das T-Shirt vom Ravello Switch Knot mit dem alles begonnen hat

Das T-Shirt vom Ravello Switch Knot mit dem alles begonnen hat

Es ist schwierig aus der großen Menge der kleinen Smartphone-Spielchen herauszustechen. Bei den meisten Spielen muss man seine Geschicklichkeit unter Beweis stellen, und z.B. im Wesentlichen besonders schnell und zum richtigen Zeitpunkt klicken (Hardest Game Ever, Stack). Andere nutzen den Touchscreen (Follow the Line) oder die Neigungssensoren (Temple Run, Teeter) für neuartige Herausforderungen. Solche Spiele werden mir jedoch schnell langweilig, ab einem gewissen Zeitpunkt verbessert man sich kaum noch und alles wird sehr eintönig.

Schon etwas nachhaltig fordernder sind einige Puzzle-Spiele (Two Dots, Candy Crush Saga, Lazors). Diese werden jedoch mit der Zeit so schwer, dass man keine Level mehr schafft oder sich via In-App-Käufen Leben kaufen muss, um weiter zu kommen. Da hört der Spielspaß dann auch sehr schnell auf.

Hier ist das Loopgame eine gelungene Alternative: Die Level werden langsam schwieriger, sind aber nie unschaffbar. Die Aufmachung ist sehr minimalistisch, sodass das Spielen sehr entspannend ist. Es eignet sich perfekt um die Motorik ein bisschen auf Trab zu halten, während man Podcasts, Hörbücher oder Vlogs konsumiert.

Meine Aufmerksamkeit hat aber dies geweckt: Das Modell hinter dem Spiel ist dem des MacMahonMosaik Online Games ziemlich ähnlich, welches ich vor einiger Zeit programmiert habe. Während man beim MacMahonMosaik dreifarbige Quadrate verschieben und drehen kann, kann man im Loopgame Quadrate mit zwei „Farben“ (Pfad-Ende/freier Raum) drehen, aber nicht verschieben. Das MacMahonMosaik hat nur ein Level, welches ziemlich schwer ist. Trotzdem dachte ich, das Spiel ist schnell programmiert, wenn ich meinen alten Code vom MacMahonMosaik leicht abändere.

Als ich meinen sieben Jahre alten Code dann angesehen habe, viel mir auf, dass ich mich damals intensiv mit dem Thema OOP in Javascript beschäftigt habe. Inzwischen gibt es mit ES2015 Klassen in JavaScript. Aber ich fand mich schnell im großen Wirrwar von Javascript Transpilern, source maps, Babel und gulp, sodass ich schnell beschlossen habe, für ein so kleines Projekt lieber nicht den ganzen Konfigurationsaufwand zu betreiben. Als ich nach wachsender Codemenge dann mehrere Dateien zu einer zusammenzufügen musste (hallo cat), bin ich auf coffebar gestoßen, was ohne viel Konfiguration läuft. Und CoffeeScript hat auch Klassen, somit war die Entscheidung gefallen.

Eine weitere Besonderheit ist vielleicht der Verzicht auf jQuery und andere JS-Bibliotheken. Im Jahr 2009 war jQuery noch eine sehr nötige Bibliothek: Nach jeder neuen Version eines Browsers hat man gleich die Acid-Tests durchgeführt, die die Kompatibilität mit grundlegenden DOM-Funktionen testen. Damals war jQuery die Rettung von vielen kleinen Inkompatibilitäten und Bugs. Das war die Zeit, in der jeder Webentwickler durch das Aussprechen von „Internet Explorer 6“ einen enormen Bluthochdruck bekommen konnte. Hier war es für mich eine kleine Herausforderung all die Funktionalitäten des Mosaiks ohne jQuery zu realisieren.

Heute hat sich das Bild geändert: Die API von jQuery wird noch immer mit jeder Version eleganter, aber dank Fortschritt der Browser und Standards entstehen neue Trends weg von jQuery: Für einfache Effekte kann man heute direkt die nativen APIs ansprechen (man denke nur an document.querySelector) und für komplexe Webapplikationen gibt es umfassendere Frameworks wie Angular 2 und React, die es einfach machen, komplexe UIs aus Komponenten mit eigenem State zusammenzustellen. Das Gemüt der Webentwickler erhitzt sich heute eher an „Mobile Safari“.

Auch meine Implementierung des Loopgames, ich nenne sie „adinfinitvm“, profitierte von „neuen“ Webtechnologien: Die Graphiken für Pfade und Dreiecke lassen sich mit SVG erstellen und die Animationen werden mit CSS' transition gemacht. So begnügt sich das Spiel mit einer index.html, den Webfonts und rund einem duzend CoffeeScript-Dateien. Der interessiere Leser kann sich den Code auf GitHub ansehen.

Kommentare: keine

Nazareth Knot: Generate SVG drawings using ERB

11.05.2016, 11:05

The Nazareth Knot is an ancient drawing in found in a church in Bethlehem (duh!). It is really a nice byzantine knot that reminds us of the very similar keltic knots. Of course I wanted to recreate it. First of all, I took a photo of the original mosaic. Then I made a pen-and-paper sketch of it to get a better intuition of the workings of this knot. And finally I created an SVG image, which is what this blog post is all about.

I did some calculations in Ruby and generated the SVG using ERB code. I really enjoyed playing with Ruby's array methods like map, zip, flatten, each_cons, each_slice and repeated_permutation. If you don't know what those method do, I would reccomment to look at the documentation of the Enumerable mixin, they are really useful. For developing I wrote a tiny script that renders the ERB into proper HTML, whenever the code changes using fswatch. It also displays errors on the page when something goes wrong. Happens to the best. Also I monkey-patched Ruby's Matrix class with some 2D affine transformation-foo for all the calculations. Also, I used copies of the paths and the stroke-dasharray CSS property to create the interweaved strings, as you can see on the web page.

The Ravello Knots are based on a mosaic found in a church in Ravello, Italy. The city is one of the most beautiful towns along the Amalfi Coast, mostly for its wonderful gardens. I found the knot a long time ago while travelling to Italy, I already „harvested“ this knot then, since I created a computer graphic of the original knot and later did a drawing of a slight modification to my sketchbook.

Since I wanted to continue exploring the SVG creations more I was looking for old sketches to refresh and the knot from Ravello came to my mind. I not only did a nice SVG drawing of the old sketch but took it further to create a totally new variation showing off the stroke-dasharray technique in a most spectacular way.

You can find all the code in the Git-Hub-Repository bxt/Nazareth-Knot.

Kommentare: keine

Vektor-Wallpaper

12.04.2009, 21:01

Heute habe ich mal wieder ein bisschen mit Inkscape herum gespielt, wobei diese Interessanten Fraktal-artigen, (dreh)symmetrischen Figuren entstanden sind. Ich habe dann Details ausgewählt (und mit selektierten Farben versehen) aus diesem gesamten Set:

Da alles als SVG-Datei angelegt wurde ist es auch beliebig skalierbar. Irgendwie ruft der leicht kubistische Style nach einem Kantenfindungs-Algorithmus, der das Ganze mehr oder weniger automatisch mit Fotos macht... muss ich aber wohl vertagen.

order (custom-made) prints

Kommentare: keine

Film ohne Frames

30.03.2009, 15:55

Ich hatte die Idee eine Animation zu kreieren, die nicht auf Frames basiert, sondern bei der ein Filmstreifen mit einer langen Graphik über einen Projektor läuft.

Eigentlich hat mich schon immer der Effekt interessiert wenn man im fahrenden Zug das Auf und Ab der Oberleitung bzw. früher der Telegraphenleitung beobachtet. Als Zugfenster habe ich jetzt einfach eine Projektionsfläche eingesetzt und als Telegraphendraht ein paar eher abstrakte Formen.

Da ich nicht Projektoren und Film zum Basteln da habe, und ich das auch gerne mit dem Computer ausgleiche, ist die Idee jetzt (vielleicht zunächst) am Computer entstanden.

Technische Umsetzung

Zunächst muss man dem Computer natürlich beibringen, welche Formen am Bildschirm vorbei ziehen sollen. Da die im Endeffekt vorbei laufende Bitmap eine Größe von 1280x191250=244M Pixel hat, was im RAM auf 2,1 GB hinaus läuft, habe ich in der Planungsphase das SVG-Format benutzt. Ich konnte also mit Inkscape schön die Formen konstruieren, während meine zurzeit 6 GB RAM nicht zu sehr belastet werden.

Als nächstes habe ich dann gleich die Einzelframes gerendert. Dazu habe ich mein altbewährtes SVG-Rendering-Script vom Bilder-Züchten in stark vereinfachter Form benutzt: Es hat nur die Aufgabe 6375 Mal den SVG-Viewport etwas nach unten zu rücken und den Frame von Inkscape rastern zu lassen.

Die Musik ist, wie man vielleicht hört, ziemlich experimentell. Sie ist komplett mit dieser Webseite gemacht. Das ganze habe ich dann noch mit MPlayer zusammengefügt:

mencoder "mf://frames/*.png" -mf fps=25 -o output.avi -ovc xvid -xvidencopts bitrate=5000 -oac mp3lame -audiofile musik.wav

Und so ist dann die oben zu sehende Animation entstanden.

Tags:
Kommentare: keine

Bilder züchten

12.02.2009, 17:32

Mit freeSq gezüchtetes Bild

Der neueste Trend ist es ja anscheinend genetisch zu Programmieren (bzw. programmieren zu lassen). Der Webcomic xkcd greift das Thema auf und Roger Alsing zeigt wie es geht. Mir geht es natürlich nicht darum Algorithmen genetisch zu basteln, oder Bilder nach zu stellen, sondern ich wollte einfach mal den Computer etwas herumprobieren lassen. Da wir in Kunst zurzeit kubistische Bilder malen müssen, habe ich mir gedacht, so etwas könnte doch auch ein Computer hin bekommen. Der Computer malt also Rechtecke, und versucht sie so hin zu bekommen, dass es ungefähr aussieht, wie das Originalbild.

Da das Vorgehen ja ein bisschen an die Biologie angelehnt sein sollte, benutzte ich so etwas, wie einen genetischen Algorithmus. (Es ist also nicht der Algorithmus, der „genetisch“ erzeugt wurde). Im ersten Versuch habe ich dem Computer fünfhundert, zunächst gleiche, weiße Rechtecke auf schwarzem Hintergrund vorgesetzt. Der Computer hat dann immer ein zufälliges Rechteck genommen und zufällig platziert. Die neuen Bilder waren also so etwas wie Kinder. Dann hat eine Fitting-Funktion überprüft, ob sich die Ähnlichkeit zur Vorlage verbessert hat. Wenn ja, hat er dieses neue zufällige Rechteck gespeichert (also in die „DNA“) aufgenommen und dieses Kind als neues Mutterelement verwendet. Hat sich nichts verbessert, hat er einfach ein weiteres Kind erzeugt.

Die Fitting-Funktion

Ich habe ein kleines Python-Script gebastelt, dass die Übereinstimmung zweier Bilder ausrechnen kann. Da alles in schwarz-weiß passiert, geht es jeden Pixel durch und addiert jeweils die Differenz der Rotwerte. Je größer die Zahl ist, desto schlechter passt das Bild. Der Computer favorisiert also Kinder mit kleineren Werten.

Zweiter Algorithmus

Da der erste Algorithmus zwar mit nur 500 Rechtecken immer bessere Näherungen erreicht hat, aber zum Ende hin sehr viele Versuche brauchte um wieder ein besser angepasstes Kind zu finden habe ich einen zweiten Algorithmus gebastelt, der diese Probleme vermeiden soll:

Er züchtet aus einem Elternelement zunächst 500 Kinder. Die Zucht-Funktion fügt allerdings jetzt jeweils ein schwarzes oder weißes Rechteck hinzu, wodurch Fehler schneller korrigiert werden können. Beim alten Algorithmus konnte ein fehlerhaftes Rechteck ja nur verschoben werden, wenn es zufällig gewählt und zufällig richtiger platziert wurde. Die Zahl der Rechtecke entspricht also der der Generation.

Die 500 Kinder sind zunächst noch klein und es werden nur 25% der Pixel gerastert. Die Kinder werden dann mit einer kleineren Version der Vorlage verglichen, und nur die besten 10 werden erwachsen und dann in voller Größe vergleichen. Damit werden nicht mehr so viel Ressourcen (Rechenzeit) für grobe Fehlplatzierungen verschwendet. Aus den letzten 10 Kindern wird dann das, welches in groß am Besten passt, als neues Elternelement gewählt, aus dem wiederum 500 neue Kinder-Bilder gezüchtet werden. Die 499 anderen Kinder werden für immer gelöscht, sodass nun nur noch die Elternelemente (die mit Verbesserungen) konserviert werden um meine Felsplatte zu schonen. So werden immer weiter bessere Merkmale vererbt, bzw. alte Fehler in den Merkmalen korrigiert.

Die DNA

Genau wie bei der echten DNA auch, werden die Informationen so gespeichert, dass die Kinder „wachsen“ können, nämlich als SVG. PHP kann durch seine DOM-Funktionen die DNA leicht verändern und die Rechtecke sind in einem angemessenen Format gespeichert. Mit dem Programm rsvg lassen sich die Rechtecke auch schnell rastern in allen beliebigen Größen.

Das Ergebnis

Der erste Algorithmus „500“ hat nach 21 Stunden 50830 Generationen erzeugt und einen dabei Das Original recht nett angenähert. Ursprünglich habe ich geplant ein kleines Video daraus zu erstellen, doch selbst bei 30 fps wäre es etwa eine halbe Stunde lang, und man würde hauptsächlich die Fehlschläge sehen. Deshalb nur einige Auszüge aus dem Werdegang:

Der zweite Algorithmus „freeSq“ ist so gebaut, dass er ohne Probleme unterbrochen werden kann und deswegen werde ich ihn wohl noch deutlich länger laufen lassen. Aber nach den ersten rund 2 Stunden und 255 Generationen (127500 Versuchen) ist das Entsanden (links Vorlage):

Seltsamerweise ist es etwas zu klobig, es wirkt bisher nicht so fein, dafür ein bisschen komplexer, doch es wird sich zeigen, wie es nach einigen weiteren Generationen aussieht. Da das Ganze sehr viel Zufall beinhaltet, könnte bei einem weiteren Durchlauf auch ein völlig anderes Bild entstehen. Ich bin gespannt.

Übrigens: So sieht Evolution bei den Simpsons aus.

Kommentare: keine
[ Seite 1 2 ] Nächste Seite »
 
Χρόνογραφ
© 2008-2017 by Bernhard Häussner - Impressum - Login
Kurz-Link zur Homepage: http://1.co.de/