https://github.com/bigglesrocks/ion

A particle generator built with canvas
https://github.com/bigglesrocks/ion

animation canvas javascript particle-generator

Last synced: 28 days ago
JSON representation

A particle generator built with canvas

• Host: GitHub
• URL: https://github.com/bigglesrocks/ion
• Owner: bigglesrocks
• Created: 2016-03-29T19:50:20.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-07-21T20:01:00.000Z (over 8 years ago)
• Last Synced: 2024-11-15T20:59:45.576Z (3 months ago)
• Topics: animation, canvas, javascript, particle-generator
• Language: JavaScript
• Homepage:
• Size: 1.5 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
#Ion

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

[Demo](https://bigglesrocks.github.io/ion)

## Quickstart

Install ion (bower or manually):

```bash

    bower install ionjs

```

Add ion & a canvas element to your page:

```html

    

    

```

Create a new instance of Ion with desired options:

```javascript

    var ion = new Ion('ioncanvas', {

        shape: 'circle',

        density: 20,

        color: '#000000'

       }

    ); 

```

See [Getting Setup](https://github.com/bigglesrocks/ion/wiki/Getting-Setup) for a more detailed setup guide.

## Basic Usage

The Ion constructor takes 3 arguments:

`canvasId`: **string** _required_ ID of the `` element Ion should use

`particleSettings`: **object** or **array of objects** _optional_ [Particle Options](https://github.com/bigglesrocks/ion/wiki/Particle-Options)

`options`: **object** _optional_ Global options for Ion

```javascript

 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:

```javascript

// 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](https://github.com/bigglesrocks/ion/wiki/Variance-&-Randomization) 

- [Custom Particle Shapes](https://github.com/bigglesrocks/ion/wiki/Custom-Particle-Shapes)