procedurally draw beautiful flowers
JavaScript
Switch branches/tags
Nothing to show
Latest commit 8979212 Jan 5, 2013 @Platane Update README.md
Permalink
Failed to load latest commit information.
build
examples
libs
src
LICENSE
README.md

README.md

Procedural-Flower

Animate the growth and bloom of a flower procedurally generated.

Flowers are drawn with HTML5 native canvas drawing API. These are easy to set up. Specify a HTML container and the script will do the rest! These are also hightly customisable.

The library allows you to set up three kind of flower:

Flw.LimitedFlower

A basic flower, it grows by itself and stop when it reaches its final form.

LimitedFlower example

Use the following syntax to set up the flower:

var container = document.getElementById('container');
var flower = Flw.LimitedFlower.create( container , option , runByMySelf );

option is a set of key/value. See examples for futher informations. runByMySelf, if true the flower will use requestAnimationFrame to update itself. If false, consider to call the method flower.cycle( delta_ms ).

Flw.RampantFlower

A flower that never stops growing. The window scrolls to keep view on the top of the stem.

RampantFlower example

Use the following syntax to set up the flower:

var container = document.getElementById('container');
var flower = Flw.RampantFlower.create( container , option , runByMySelf );

Flw.ControledFlower

This flower have been writed to serve as a loading indication. It receive ponctual notifications of the loadin process. It is able to interpolate the progress curve between two notifications.

ControledFlower example

Use the following syntax to set up the flower:

var container = document.getElementById('container');
var flower = Flw.ControledFlower.create( container , option  );

And notify the progression:

var deltaProgress = 1;
var maxProgress = 100;
flower.tick( deltaProgress / maxProgress );