Get Started

The particles-3d library was developed with several targets:

  • very simple usage without need to write single line of code.
  • open and modular architecture to be able to extend the functions.

The particle animation is configured by a JSON configuration data which can be downloaded
from the gallery or created manually.

Quick Start

  1. Download the library bundle, unpack it and reference it in your html document.

  2. Choose particle animation from gallery particles3d.com/gallery, adjust parameters and download a configuration file.

  3. Create html element to hold the particle animation and set data-particles attribute to configuration file url.

By default the library search for the elements with data-particles attribute. If there is one or more elements
then the configuration files are loaded, the canvas elements are created and animation is started.

Example of the html document:

<head>
  <!-- particles-3d library -->
  <script src="/js/particles-3d.bundle.min.js"></script>
</head>
<body>
  <!-- element to hold the animation -->
  <div data-particles="/config/particles.json"></div>
</body>

Alternative Configuration

The animation can be configured by three ways:

  • providing url of configuration file in the data-particles attribute (see quick start)
  • providing JSON object in the data-particles attribute
  • programatically

JSON Object

You can also configure the animation directly in data-particles attribute of the element.
In this case you have to provide the configuration data as JSON string in the attribute value.

Example:

<div data-particles='{"template": "example"}'></div>

Programatically.

The animation can be configured also programatically.

Example:

// get element to hold the animation
var elem = document.getElementById('my-element');

// create a canvas element, this can be skipped if the elem is already a canvas
var canvas = particles.initializeCanvas(elem);

// create configuration, this one is using just a pre-defined template
var config = {
  "template": "example"
};

// create and start renderer
var renderer = particles.create(canvas, config);
renderer.start();

Canvas Element

A canvas element is required to display animation. The library creates the canvas if necessary
and scales it appropriately.

However the canvas element can be created directly in the html document. In this case the dimensions
of the canvas can be ajusted by width and height attributes.

Example - you can use one of these forms:

<div data-particles="/config/particles.json"></div>

or

<canvas data-particles="/config/particles.json" width=800 height=400></canvas>