Posted by: pixelero | April 26, 2011

SplineAlignedImage – HTML5 Experiment

Hi there! O oh, long time, no blog entry: well, that happens but it doesn’t mean I haven’t done plenty of Flash and image processing stuff lately.
I also know I’ve been really lazy answering all the comments or questions you’re posted here.

Anyway, I have also done some HTML5 – graphics stuff with canvas-element mostly.
So here’s a demo with sources for SplineAlignedImage. That generates a spline, cubic or quadratic, and renders a bitmap image along it.
Or simply put: if this is the source:
Image of a link in chain
the result will be this:
Image of a curved chain

Clicking the image above opens the demo, try dragging the grips on canvas, changing the scaling and positioning and check out the results of using different bitmaps as sources.

I have done something very similar already earlier with actionscript.
The principle is simply to place a dense stripe of triangles along the curve, and draw the image with correct displacement on each triangle:

example of divisions

From the demo you’ll also find the sources.
A code example of using this class:

// check that canvas-element and its graphics context exists
elem = document.getElementById('splineImageCanvas'); 
if (!elem || !elem.getContext) return; 
context = elem.getContext('2d');
if (!context) return;	
// Define the SplineAlignedImage-object and set image source for it
var splineImage = new SplineAlignedImage(context);
splineImage.image = img; 
// And start drawing, methods are similar to javascript for canvas element
splineImage.moveTo(x0, y0);
splineImage.bezierCurveTo(x1,y1, x2,y2, x3,y3);
// if coordinates for the first control point are null, the curve will follow the tangent of previous sequence:
splineImage.bezierCurveTo(null,null, x4,y4, x5,y5);
// there's also the quadratic version of curve
splineImage.quadraticCurveTo(x6,y6, x7,y7);
splineImage.quadraticCurveTo(null,null, x8,y8);

Image of a curved rope
( tested in mac: Safari, Firefox, linux: Firefox )


  1. Cool stuff as usual! Good to see you back posting things on your blog… keep on!

  2. indeed good to see you back 🙂
    this is an excellent tool, especially used along with some gesture or tablets API 🙂

  3. Seems like JS becoming more widely accepted among ASripters 🙂 Good stuff, would be nice to join the end nodes perfectly

  4. Very nice. This should look very interesting on animated splines, perhaps also kinematic and or interactive.

  5. […] 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 […]

  6. […] principle this is the same effect I already did with html5/canvas. Now it’s time for Pixel Bender to try some serious image […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


%d bloggers like this: