Bernhard Häussner
Tags: Artikel mit dem Tag «CG» durchstöbern

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


21.01.2011, 18:45


Im Rahmen meiner Studien zu Pentagrammen, Fünfecken, und ähnlichem sind ein paar interessante Geometrische Figruen entstanden.

Pentagramm [5gon-no3-seq01-all]

Dodecaicosahedron (seq4)
Kommentare: keine

Physik-Inspirierte Processing-Sketches

20.04.2010, 15:03

Die interessantesten Momente aus dem in Drehmomente und Kräfte mit Processing beschriebenen Prozess finden sich hier.

Und diese zwei Pendants habe ich mir als Hintergrundbilder (engl. Wallpaper) eingerichtet:

Updates 2010-04-20

$ braindump -R -d 7 λι4σα
$ braindump -R -d 7 λι4σα

Zwei eher vermischte Werke.

Kommentare: 1 Einträge

Symmetrisch Zeichnen

17.12.2009, 10:43

Neben Symmetrie in der Natur bin ich auch begeistert von den Symmetrien, die der Computer erstellen kann. Und was wäre diese Symmetrie ohne die, für den Computer typische, Interaktivität? Also habe ich (zunächst mit Processing aber dann mit) HTML5-Canvas eine kleine Javascript-Sache gebastelt, mit der man direkt im Browser symmetrisch zeichnen kann.

Irgendwie macht das Spaß und, naja, es sieht auch oft erstaunlich gut aus.

[Updated 2011-09-29] Da mir das einfache herumzeichnen schnell zu langweilig wurde, habe ich das Script immmer weiter ausgebaut. Deswegen finden sich unter dem Link nun mehrere Variationen, die es sich auszuporbieren lohnt![/Updated]

Zum Zeichenbrett

Und hier noch ein Video:

Drawing Symmetry (6)

Viel Spaß beim Malen!

Kommentare: 2 Einträge

Fun with KAlgebra

28.10.2009, 19:04

One of the apps that was updated for KDE4 suite was the graphing calculator KAlgebra. It does not only have the nice live preview for all kinds of functions but also a neat 3D view. Of course this is where you can poke around best:

You can really produce impressive stuff and uncommon graphs, because you can use functions like ceiling() and abs():

Kommentare: keine
[ Seite 1 2 3 4 ] Nächste Seite »
© 2008-2018 by Bernhard Häussner - Impressum - Login
Kurz-Link zur Homepage: