Doodles » Threed

Below is a slowly rotating 3D cube with a fleur-de-lis on one side. You will need either Firefox, Safari, or Opera in order to see it; Internet Explorer does not (currently?) support the <canvas> tag. You must also have JavaScript enabled.

With this doodle, I wanted to answer two questions:

1. How does one draw into a <canvas> element?
2. Does a cubic Bézier curve stay visually coherent when all of its control points are transformed with a 4×4 matrix?

The answer to #2 is clearly “Yes”; the answer to #1 is more complicated. I wrote canvas.js in order to simplify the drawing process. I also used matrix.js and transform.js to handle the matricies and transformations, and bezier.js to handle the Bézier curves.

In Firefox 3.x, the animation halts from time to time; this is due to Spidermonkey's mark-and-sweep garbage collection. For every frame of this animation, several objects are created (a Date object, a transformation matrix, and other temporaries); these objects take up space and are eventually reclaimed, but at the expense of smooth animation. It is possible to eliminate the number of temporaries used, but smooth animation was not a requirement for this doodle.

The fleur-de-lis itself is taken from an SVG file hosted on the Wikimedia Commons.