Eyes Above The Waves

In the 18 months since I became a contractor for Mozilla Corporation, I've started dreaming about work --- I never did before. This is probably significant.

Last night I dreamed I was in a meeting with people who were showing me stacks of SIGGRAPH papers and trying to convince me to implement an absurdly complex specification that would let them do all graphical effects known to man. I was pushing back, trying to explain that it was too complex and most of the effects could be done in other simpler ways. No surprise that I'm dreaming about that.

The cool part is that they showed me some awesome demos --- and I remember the demos! I remember three:

• Chinese wall: Chinese text was rendered as if it was carved into a stone wall and aged for a thousand years, eroded and dusty. Actually in the dream there was an animation with multiple layers of text being carved in and eroded away --- a palimpsest.
  
• Persian carpet: This was taking an image and rendering it as if it was a pattern woven into a carpet --- a really old, worn, tattered carpet with loose threads hanging out in a few places.
  
• Kaleidoscope: Generic kaleidoscope effect, random-ish patterns with sixfold symmetry.
  

The Chinese wall can probably be done with clever use of SVG filters. Possibly the Persian carpet could be done with SVG filters but it would be tricky and might require auxiliary images. I don't think we have any way to tessellate non-rectangular shapes over the plane.

I never knew I was that creative.

Just around the time I woke up from this dream I also figured out how we can use SVG filters with <canvas>. We just need to a drawElement method that lets you use any element as a source to draw into the canvas. Then you can set up an offscreen canvas with 'filter' set on it, draw the stuff you want filtered into the offscreen canvas, then call drawElement to draw the filtered offscreen canvas into a target canvas. Note that 'drawImage' (or an extension thereof) isn't exactly what you want here since that renders the content of a canvas ignoring CSS effects applied to the canvas itself.