Light Writing Effect

A while back I was given the task of trying to animate a banner that was to go on a site we were building at Visual Jazz. All in a usual days work I thought until I saw the design mockup and realised it had been photo-shopped to the bejeezus.

The idea behind it was that it was meant to look like when you take a sparkler and move it around really fast in the air – the glow leaves a line of light behind it for a few seconds.

After a fair bit of messing around I finally came up with something I think looked pretty cool, which you can check out here…

So, the original version of this effect was created in flash – but i recently rewrote it in JavaScript to see if I could get a similar effect. They both work in similar ways, but there are some slight differences due to the fact that the APIs are very different.

Using JavaScript

The javascript approach is very similar to the actionscript version (which you can read about below). The idea was to create a canvas and draw a ‘brush’ bitmap to it as the mouse moved. This wasn’t as easy as it was in flash because the canvas object does not have the same sort of bitmap manipulation abilities that flash has.

Int he end, I created a LightWriter canvas object which basically created two canvas transparent objects. It has some api’s that allows you to draw a brush shape to the canvas – it does this by calculating two points and then using vector math to paint the bursh at a minimum distance along the delta.

To get the fading off effect we make use of a ‘buffer’ canvas object that is never shown on the screen. We draw the main canvas to the buffer canvas, apply a blur filter, then draw it back to the original. This results in the existing image fading more and more until there is nothing left. The new brush stroke is then added on top in the canvas to keep the most recent art sharp.

In this example, I actually have 2 of these canvases laid on top of eachother, with one being set to a higher blur amount than the other – this was to try and achieve a more ‘glowing’ effect that was close to the original.

The code for the example above can be found in my lightwriting_js repo on GitHub.

Using ActionScript

With the actionscript version I created a round BitmapData that would act as a ‘brush’. It was a simple circles with blurred edges. I then had a second transparent BitmapData that would act a canvas for the brush to draw into.

Every frame of the animation I would check for a change in the brush position, and if it had moved I would draw a line between the two points with the brush. Unfortunately, there isn’t a built in way to draw lines using a BitmapData so I used some basic math to divide up the line I wanted to draw into equal steps, then drew the brush BitmapData at each step along the line.

That gave me a basic soft edged brush effect, but it didn’t fade out over time. That is where the BlurFilter comes in.

On every frame I would apply a BlurFilter to the canvas BitmapData – I can’t remember the exact amount, but it wasn’t too big. By itself it didn’t do too much to the canvas, but by applying it every frame, the blur would accumulate and slowly fade the drawing out to transparent.

That’s the basic gist of it.

To make it look a bit cooler, I actually ran two versions of this effect over the top of each other – one for a soft glow, and the other for a hard edged central colour – I thought it gave it a nicer effect. I also started adding in some basic scale changes depending on how fast the mouse was moving, so the lines would thin out on fast motions

I think it looks pretty cool and it worked with the designs really well. Just to make things tricky though, they made be rebuild the whole effect using AS2 so that it could be used in some banner campaigns. I had forgotten how much better AS3 is 🙂

A copy of the source code used to create this demo can be found in my LightWritingAS3 repo on GitHub

Leave a Reply

Your email address will not be published. Required fields are marked *

Name *

This site uses Akismet to reduce spam. Learn how your comment data is processed.