szTheory / ion

[mirror] A particle generator built with canvas

#Ion Ion is a particle generator written in javascript and powered by canvas. It has no dependecies and is pure javascript.

Demo

Quickstart

Install ion (bower or manually):

    bower install ionjs

Add ion & a canvas element to your page:

    <canvas id="ioncanvas"></canvas>
    <script type="text/javascript" src="ion-min.js"></script>

Create a new instance of Ion with desired options:

    var ion = new Ion('ioncanvas', {
        shape: 'circle',
        density: 20,
        color: '#000000'
       }
    ); 

See Getting Setup for a more detailed setup guide.

Basic Usage

The Ion constructor takes 3 arguments:

canvasId: string required ID of the <canvas> element Ion should use

particleSettings: object or array of objects optional Particle Options

options: object optional Global options for Ion

 new Ion(canvasId, particleSettings, options);

If you don't pass any particleSettings when constructing the Ion instance, you can set them later and start particle generation with:

// Create a new instance of Ion, but don't generate any particles
var ion = new Ion('canvas');

// Set the particle
ion.setParticles(particleSettings);

// Start particle generation
ion.start();

Advanced Usage

• Particle Randomization

• Custom Particle Shapes