Posted by: pixelero | April 27, 2011

This is very similar to my previous post. It’s also deals with putting some extra effect to a spline curve, and it even shares some of the source codes. I got the idea for this from some Mathematica demonstrations with catacaustics, or ‘a curve formed by light reflecting from a curved surface. The principle there is so simple, just draw tangents of some curve, yet I find the results so beautifully surprising.
I wanted to come up with something similar, but having a smoother shading, instead of consisting of seperate lines.

Click the images above to see the demo. You can drag the controls on canvas (they might seem a bit sticky I know), and try changing the parameters.

The principle here is to generate a mesh of triangles along the curve, and render a linear gradient on each triangle. The densier the mesh, the smoother the result looks. Ok, there are still some fan-like clearly visible lines – those seemed a bit too complex to remove. Changing the coordinate orientation by a triangle’s three vertices in javascript is quite simple. This is how context.setTransform(x0,y0, x1,y1, tx,ty) aligns the coordinate system: Point (tx,ty) becomes the new origin (0,0), x-axis sets in direction (x0,y0) and y in direction (x1,y1).

Some example of code using this class:

```// canvas = canvas element placed in html
context = canvas.getContext('2d');
if (!context) return;

// Set the angle and offsets from center axis

// And start drawing, methods are similar to javascript for canvas element
splineImage.moveTo(x0, y0);
splineImage.bezierCurveTo(x1,y1, x2,y2, x3,y3);```

… I’ll be back, probably next time with some flash/pixel bender stuff.