CanvasSwirl v0.8

Choose an effect:

Configure your effect

Change a value then hit enter to apply it.

Canvas width/height Canvas width:

A pixel value to use for the canvas width. Large dimensions may cause the framerate to drop.

Note that a thin border is drawn around the canvas to show its dimensions while the width or height boxes are focussed.

(Positive integer) Canvas height Canvas height:

A pixel value to use for the canvas height. Large dimensions may cause the framerate to drop.

Note that a thin border is drawn around the canvas to show its dimensions while the width or height boxes are focussed.

(Positive integer) Number of points Count:

The number of points to create. Large numbers may tax your computer and lower the framerate.

(Integer over 0) Shape Shape:

How points are drawn. Lines result in smooth, connected drawings while other shapes draw separately. Choosing 'random' results in a mix of shapes. Radius inner min/max Minimum inner radius:

A point can travel inwards and outwards. Each point is given a random inner radius that determines how close the point can get to the center before turning around, generated from a minimum and maximum. This is the minimum inner radius.

(Pixels or percentage of canvas width/height, whichever is larger) Radius inner max Maximum inner radius:

A point can travel inwards and outwards. Each point is given a random inner radius that determines how close the point can get to the center before turning around, generated from a minimum and maximum. This is the maximum inner radius.

(Pixels or percentage of canvas width/height, whichever is larger) Radius outer min/max Minimum outer radius:

A point can travel inwards and outwards. Each point is given a random outer radius that determines how far out the point can get before turning around, generated from a minimum and maximum. This is the minimum outer radius.

(Pixels or percentage of canvas width/height, whichever is larger) Radius outer max Maximum outer radius:

A point can travel inwards and outwards. Each point is given a random outer radius that determines how far out the point can get before turning around, generated from a minimum and maximum. This is the maximum outer radius.

(Pixels or percentage of canvas width/height, whichever is larger) Thickness min/max Minimum thickness:

The maximum thickness used when drawing lines, or the width & height when drawing boxes and circles.

(Positive decimal number) Thickness max Maximum thickness:

The maximum thickness used when drawing lines, or the width & height when drawing boxes and circles.

(Positive decimal number) Fade time Fade time:

The number of seconds over which to fade the effect. Using 0 results in clearing the canvas between each frame, whereas larger numbers give a "blur" effect. Fade times over 4 seconds cause visual artifacts due to limitations of the method used.

(Positive decimal number) Rotation velocity min/max Minimum rotation velocity:

How fast points revolve around the center of the circle. Each points is given a random value between the minimum and maximum. Negative values cause points to revolve counter-clockwise.

(Any decimal number, representing full revolutions per second divided by the framerate (60 fps by default)) Rotation velocity max Maximum rotation velocity:

How fast points revolve around the center of the circle. Each points is given a random value between the minimum and maximum. Negative values cause points to revolve counter-clockwise.

(Any decimal number, representing full revolutions per second divided by the framerate (60 fps by default)) Origin X/Y Origin X:

The horizontal position of the circle that each point revolves around.

(Pixels, percentage of the canvas from the left-edge, or one of the special values "center", "left" or "right") Origin Y Origin Y:

The vertical position of the circle that each point revolves around.

(Pixels, percentage of the canvas from the top-edge, or one of the special values "center", "top" or "bottom") Origin X offset min/max Minimum origin X offset:

A random horizontal offset can be applied to the circle that each point revolves around. This is the minimum.

(Pixels or percentage of canvas width. Can be positive or negative) Origin X offset max Maximum origin X offset:

A random horizontal offset can be applied to the circle that each point revolves around. This is the maximum.

(Pixels or percentage of canvas width. Can be positive or negative) Origin Y offset min/max Minimum origin Y offset:

A random vertical offset can be applied to the circle that each point revolves around. This is the minimum.

(Pixels or percentage of canvas height. Can be positive or negative) Origin Y offset max Maximum origin Y offset:

A random vertical offset can be applied to the circle that each point revolves around. This is the maximum.

(Pixels or percentage of canvas height. Can be positive or negative) Distance Velocity min/max Minimum distance velocity:

How fast a point travels from the center of the circle to the edge (and vice-versa). This is the minimum.

(Decimal, representing how many movements between the center and the edge per second, divided by the framerate (60 fps by default) Distance Velocity max Maximum distance velocity:

How fast a point travels from the center of the circle to the edge (and vice-versa). This is the maximum.

(Decimal, representing how many movements between the center and the edge per second, divided by the framerate (60 fps by default) Distance Jitter min/max Minimum distance jitter:

The minimum amount to randomly add or substract from the point's distance each frame before drawing. This value is applied to the drawn result and will not change the point's true distance in any way.

(Decimal number) Distance Jitter max Maximum distance jitter:

The maximum amount to randomly add or substract from the point's distance each frame before drawing. This value is applied to the drawn result and will not change the point's true distance in any way.

(Decimal number) Rotation Jitter min/max Minimum rotation jitter:

The minimum amount to randomly add or substract from the point's rotation each frame before drawing. This value is applied to the drawn result and will not change the point's true rotation in any way.

(Decimal number) Rotation Jitter max Maximum rotation jitter:

The maximum amount to randomly add or substract from the point's rotation each frame before drawing. This value is applied to the drawn result and will not change the point's true rotation in any way.

(Decimal number) Hue min/max Minimum hue:

Points have a hue range to limit the colours used when drawing. This is the minimum hue to use for that range. Typically between 0 and 360; values over that will loop back around.

(Decimal number, rounded down to integer when used) Hue max Maximum hue:

Points have a hue range to limit the colours used when drawing. This is the maximum hue to use for that range. Typically between 0 and 360; values over that will loop back around. You could specify a min of 340 and a max of 380 to get a range of purples to yellows.

(Decimal number, rounded down to integer when used) Hue increment per frame Hue increment per frame:

The amount to increase the point's hue by each time it's drawn. Small numbers (eg. 0.1 to 1) will create smooth gradients whereas large numbers result in visible steps. Negative values cause the hue to shift backwards.

(Decimal) Saturation min/max Minimum saturation:

Points have a saturation range to limit the colours used when drawing. This is the minimum to use for that range.

(Decimal percentage (% sign is optional) Saturation max Maximum saturation:

Points have a saturation range to limit the colours used when drawing. This is the maximum to use for that range.

(Decimal percentage (% sign is optional) Lightness min/max Minimum lightness:

Points have a lightness range to limit the colours used when drawing. This is the minimum to use for that range.

(Decimal percentage (% sign is optional) Lightness max Maximum lightness:

Points have a lightness range to limit the colours used when drawing. This is the maximum to use for that range.

(Decimal percentage (% sign is optional) Opacity min/max Minimum opacity:

Points have an opacity range to limit the colours used when drawing. This is the minimum to use for that range.

(Decimal between 0 and 1) Opacity max Maximum opacity:

Points have an opacity range to limit the colours used when drawing. This is the maximum to use for that range.

(Decimal between 0 and 1) Saturation scale at center/edge Saturation scale at center:

A point's saturation can be scaled up or down depending on how close it is to the center of the circle. While the scale is typically between 0 and 1, it can be higher than 1 to force a steeper gradient scale.

(Decimal between 0 and 1) Saturation scale at edge Saturation scale at edge:

A point's saturation can be scaled up or down depending on how close it is to the edge of the circle. While the scale is typically between 0 and 1, it can be higher than 1 to force a steeper gradient scale.

(Decimal between 0 and 1) Lightness scale at center/edge Lightness scale at center:

A point's lightness can be scaled up or down depending on how close it is to the center of the circle. While the scale is typically between 0 and 1, it can be higher than 1 to force a steeper gradient scale.

(Decimal between 0 and 1) Lightness scale at edge Lightness scale at edge:

A point's lightness can be scaled up or down depending on how close it is to the edge of the circle. While the scale is typically between 0 and 1, it can be higher than 1 to force a steeper gradient scale.

(Decimal between 0 and 1) Opacity scale at center/edge Opacity scale at center:

A point's opacity can be scaled up or down depending on how close it is to the center of the circle. While the scale is typically between 0 and 1, it can be higher than 1 to force a steeper gradient scale.

(Decimal between 0 and 1) Opacity scale at edge Opacity scale at edge:

A point's opacity can be scaled up or down depending on how close it is to the edge of the circle. While the scale is typically between 0 and 1, it can be higher than 1 to force a steeper gradient scale.

(Decimal between 0 and 1)

Notes

Questions? Comments? Email Andy!

Looks/runs best in Chrome or Opera as at 2011 09 07. Firefox currently leaves a pale outline as effects fade, resulting in colours looking slightly washed out.

Thanks to Nasos at Flickr CC for the great background texture!

Three steps to embedding your effect on a web page

Save this file to the same folder as your HTML file:

swirl_0.8_min.js (8.4KB)
Paste this code into the <head> section of your HTML file:
Paste this tag into your HTML file where you'd like the effect to appear:

A performance tip: Your effect will perform best and consume less battery power on mobiles if you adjust the canvas' width and height to fit the effect before embedding.

JS Rage

JS Swirl

CanvasSwirl v0.8

Choose an effect:

Configure your effect

Notes

Three steps to embedding your effect on a web page