It’s just data

Penrose Tiling

The Wikipedia entry on Penrose_tiling describes an L-system for generating an aperiodic tiling of a plane.  Just for grins, I converted it to SVG and ECMAScript; the results appear to work with either Firefox 1.5 or the Adobe SVG viewer.


Seems to work fine in Opera 9 as well, for what it’s worth. Also, is ECMAScript really an acronym for JavaScript?!

Posted by Anne van Kesteren at

is ECMAScript really an acronym for JavaScript

I was the editor on the tail end of the 3rd (and current) edition of ECMAScript, and to make a long story short: pretty much. ;-)

Question: does Opera 9 show the inline SVG that is present on this post?

Posted by Sam Ruby at

License?

Posted by Mark at

Very cool! The L-system doesn’t do filling, what are your rules for that?

Posted by Sjoerd Visscher at

Question: does Opera 9 show the inline SVG that is present on this post?

Yes, the page (including the SVG) looks just like in Firefox.

Posted by Björn Graf at

License?

I can’t begin to imagine what use anybody could have for this code, but how does MIT sound?

The L-system doesn’t do filling, what are your rules for that?

There actually is an interesting story behind that.  This started out as a Ruby application that generated a static SVG with a single path element with fill='none'.  With n=6 (or was it 7? I don’t remember), FireFox simply trapped.

Taking a look at the output, I saw that it was a series of moves, each followed by a small number of lines.  There was some redundant moves (i.e., moves followed by other moves) that could simply be eliminated.  By splitting the path into separate elements, each starting with a move, Firefox could handle the output.  The inline SVG you see on this post was generated by a derivative of that program.

Once I had separate paths, two things occurred to me: some of the paths were closed and could therefore be filled.  The second was that with a little JavaScript, I could render the image incrementally.  Seeing the walk fold back on itself was a surprise, and I simply colored each closed path with the primary colors: red, green, blue, in that order.  Later I varied this effect by making the color less than fully opaque.

Finally, I realized that I could port my Ruby code to JavaScript and make it completely self contained.  However, I wasn’t pleased with the startup time necessary to compute the whole graph.  Some day, I hear that JavaScript will have true generators, but for now, I could emulate that behavior with objects.

Björn: this weblog is fully Unicode enabled, feel free to enter your name as it was intended to be.  I’ve gone ahead and edited your comment to reflect this.

Posted by Sam Ruby at

Wow!

Reminds me how much I miss QuasiTiler.app.

But that was two generations of “golem” ago.

Posted by Jacques Distler at

All inline and “standalone” SVG I’ve seen on your blog has worked in Opera 9, Sam. The only thing that seems a bit quirky about the Penroles Tiling SVG in Opera 9 is its positioning, which is a bit off compared to how it is in Firefox.

Posted by Asbjørn Ulsberg at

I’ve been trying to get the coloring regular. I thought adding 2 more colors would do the trick, but it doesn’t work. I can’t even get n = 1 regular.

What does look good is using just a single color: gray. This gives the effect of shaded cubes.

Posted by Sjoerd Visscher at

Sam Ruby: Penrose Tiling

self-contained Penrose tiling in SVG and ECMAScript...

Excerpt from del.icio.us/micampe at

Very cool, Sam!

Just a question:  Since you’re testing in Firefox and Adobe SVG Viewer, is there any reason you can’t also download and install Opera 9 to test it there also?  Opera 9’s SVG implementation is much more mature (maturer?) than Firefox.

Also, why not update your spellchecking to include SVG?

Posted by Jeff Schiller at

is there any reason you can’t also download and install Opera 9 to test it there also?

I’ve now downloaded and installed Opera 9.0 for Linux i386 for Ubuntu 6.06 Dapper Drake.  Each time I launch, I see the following:

ERROR: ld.so: object 'libjvm.so' from LD_PRELOAD cannot be preloaded: ignored.
ERROR: ld.so: object 'libawt.so' from LD_PRELOAD cannot be preloaded: ignored.
X Error: BadDevice, invalid or uninitialized input device 168
  Major opcode:  145
  Minor opcode:  3
  Resource id:  0x0
Failed to open device
X Error: BadDevice, invalid or uninitialized input device 168
  Major opcode:  145
  Minor opcode:  3
  Resource id:  0x0
Failed to open device

The first thing I notice is that Opera doesn’t support the CSS border-radius property.

Yes, I can launch penroseTiling.svg, but before it gets to the lower right corner, the CPU is pegged, and progress slows to a crawl.

I’ll keep with Firefox for now.

Also, why not update your spellchecking to include SVG?

Done.

Posted by Sam Ruby at

Sam: The errors you see are X errors that seem common on Ubuntu. It seems to be caused by the X configuration having definined /dev/wacom that doesn’t exist. Before that is an error about not being able to preload the Java object files.

The penrosetiling svg makes both Opera and Firefox use about 70% CPU here, using kanotix. The progress seems fine in both though.

Posted by Tommy A. Olsen at

GentleCMS Development Log: Part 3

The extract method is basically done. I’m sure it could be improved a bit more, but it seems to be fairly effective. I added a few extra features beyond the original URI class’s capabilities, such as supplying a base uri to resolve...

Excerpt from Sporkmonger at

SVG vs Canvas

I ported my incremental Penrose Tiling from SVG to Canvas, and am at a loss to explain the difference in performance.  If you have an SVG and Canvas aware browser, give this a whirl and tell me what you see. The issue seems to have something to do with... [more]

Trackback from Sam Ruby

at

Links for 2006-07-07 [del.icio.us]

Sam Ruby: Penrose Tiling self-contained Penrose tiling in SVG and ECMAScript...

Excerpt from micampe.it at

GentleCMS Development Log: Part 3

The extract method is basically done. I’m sure it could be improved a bit more, but it seems to be fairly effective. I added a few extra features beyond the original URI class’s capabilities, such as supplying a base uri to resolve...

Excerpt from uri on SWiK.net at

Apologies for the “thread necro”.

Just letting you know the Penrose Tiling application works just fine in Safari 3.0.4 (523.12.2), Firefox 2.0.0.12, iCab 4.0.1, OmniWeb-5.6-v613 on Mac OS X 10.4.11.

It’s about twice as fast in the WebKit-based browsers as it is in Firefox, though OmniWeb does draw parts of it off the bottom and right side of the page.

Posted by Alex Satrapa at

Add your comment