Site Banner

I thought I’d do a quick explanation on how the small banner on this site works, I think it’s a nice effect and it is built on one extremely simple principal.

The banner has five trails, one of them is randomly selected as red and each has an increasing alpha from 0.1 -> 0.5. They are all positioned randomly in squares that are equally positioned across the banner.

The random movement is quite simple, each trail does not have a position, they have a pivot point. The trail draws itself based on a rotation direction and radius.

Each trail has a random time that it will draw for. After that time it will select a new pivot and radius that will continue the line in a smooth arc. This new pivot point can never be outside of the view area, this way the line will never wander off the screeen.

The trail then sets it’s pivot point and reverses its drawing direction and starts all over again!

That is all there is to it really, the lines also choose a random time to ‘splat’ a small circle around themselves and I draw everything to bitmapData for speed. I could have implemented the trails as points that turn instead of the pivot/radius method, but it would not have been as trivial to keep them inside the view area.

This entry was posted in Effects. Bookmark the permalink.

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>