Friday, 13 June 2008

Working Overtime

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.



8 comments:

  1. Joshua Cranmer14 June 2008 02:49

    As far as dreams go, that sounds rather normal to me. I recently had two on consecutive nights that I can remember quite well--a rarity for me.
    Anyways, I'd be interested in knowing what the syntax looked like.
    Also, why was it called SIGGRAPH? That implies some kind of strange interrupt routine (stop what you're doing and graph your CPU usage, now!). Or was it one of those things where it's natural in the dream-world and inexplicable in the real-world?
    (drifts off in recollection of the stranger dreams)

    ReplyDelete
  2. What about the performance of the filter applying to chinese text? :-)
    I've seen some topics about the implement of compositor will be shipped in Moz2, would it landed in 1.9.1 or 1.9.X?

    ReplyDelete
  3. Robert O'Callahan14 June 2008 03:32

    SIGGRAPH is the big ACM graphics conference.
    Question: filter performance isn't great right now. Compositor won't help that.

    ReplyDelete
  4. I mean do you have a plan about when the compositor will land?I really can't wait to see the transparent iframes and the frame rate control etc.
    It will be a great improvement.

    ReplyDelete
  5. I'm sure I suggested something very like drawElement back when we were talking about the text API. The idea was that you could have text inside the canvas which was rendered as fallback, but could use that same text in the canvas itself (and get its metrics in the normal way from the original element).
    So, great idea :-)

    ReplyDelete
  6. Michael R. Bernstein22 June 2008 04:30

    "I don't think we have any way to tessellate non-rectangular shapes over the plane."
    Sure there is:
    http://intertwingly.net/stories/2006/07/06/penroseTiling.svg

    ReplyDelete
  7. Before you get to that pile of papers we at least need the ability to post code for something as simple as a circle into a basic HTML web page, blog, Myspace profile, and have it work in Firefox without installing a plugin/patch. Otherwise what's the point of this mythical SVG?
    PS: Did you ever consider you're not an author of dreams? LOL.

    ReplyDelete
  8. Robert O'Callahan24 June 2008 22:35

    Michael: of course you can using a scripted loop. I mean our drawing toolkits don't provide that as first-class functionality. (Whereas they *do* provide tiling of rectangular shapes as first-class functionality.)
    PJ: The solution there is to be able to write SVG content in basic HTML. There is a proposed extension to the HTML5 parser to allow this but it's being resisted by the SVG WG. Read public-html for more details.

    ReplyDelete