Ghost Diagrams (tile pattern generator in Javascript/SVG)

http://www.logarithmic.net/ghost.xhtml

by ivank • 16 years ago

23 8 16 years ago

zkarcher3• 16 years ago

This is the best thing I've seen in months. I can imagine utilizing this in many projects: Generating creatures in a shooter, generating maps, aleatoric music composition... Incredible.

Natsu• 16 years ago

> aleatoric music composition

You made me look 'aleatoric' up just now ("a process is said to be aleatoric ... if its course is determined in general but depends on chance in detail" per Wikipedia), but all I found was stuff I had heard of a long time ago, in that you can generate various types of music randomly and a reference to a very old dice game attributed to Mozart.

So I'm left wondering how this generator would be more useful for generating random music than ordinary dice or a RNG?

zkarcher3• 16 years ago

Perhaps aleatoric is the wrong word... I imagine that you could overlay the ghost diagrams on grids, follow the tiles (as if traversing land on a map), and your paths would produce melodies. There are hex-based musical keyboards (search for "hex keys" on Google or YouTube), so every position would be assigned a specific pitch. You could expand this concept to generate note lengths, rests, key changes, timbral effects, etc.

That's one way to implement it. All of the generative music algorithms I've seen have been very limited, and have produced one specific flavor of music. Seeing all these amazing patterns in the ghost diagrams, I wonder if there's a clue to generating more diverse/expressive music lurking within this system. (Emergent behavior?)

Groxx• 16 years ago

Fascinating and awesome and how do they do that? Must. Read. Source. And. Paper.

zkarcher3• 16 years ago

dgreensp explained it nicely, in another comment ;)

dgreensp• 16 years ago

If you're having trouble making sense of it, as I did at first, here's what I've learned:

* You enter a list of "tiles" in the box, on either a square grid (four characters per tile) or hex grid (six characters).

* Upper case letters (like "A") represent pointy sides, and lowercase letters (like "a") are convex sides. You can use A through D.

* Numbers 1-4 are "flat" sides, which makes sense as they have no case.

* A hyphen seems to be a second kind of whitespace that has to match itself, unless it has some other special meaning.

* The program, while running, searches for a way to fill the entire view area with a consistent pattern, though not necessarily filling every grid cell with a tile. Sometimes it finds one quickly, and sometimes it struggles for a while.

The shapes of the "pieces" are strange-looking enough that I didn't realize at first they are simply a function of the input.

Very cool!

jaekwon• 16 years ago

avatar generator!

Dananjaya• 16 years ago

looking at the original version of it, which is written in Python helps to understand the whole scenario much better.. (Probably because I'm familiar with Python more than Javascript..) http://www.logarithmic.net/pfh-files/ghost-diagrams/ghost-di...

Ghost Diagrams (tile pattern generator in Javascript/SVG)

Related Stories