Package Exports

@ion-cloud/cloud

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ion-cloud/cloud) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

cloud

JavaScript animation coordination and scene management

Setup

Getting started with cloud is simple, merely npm i @ion-cloud/cloud --save and then import it into your application with import {IonCloud} from '@ion-cloud/cloud';.

Please see code example here.

Example

Setting up cloud in an app is pretty simple:

import {Easel} from '@ion-cloud/easel';
import {Ion} from '@ion-cloud/ion';
import {IonCloud} from '@ion-cloud/cloud';

const easel = new Easel(), //create our canvas instance
      scene = new IonCloud(easel,Ion); //pass the ion class and easel instance into instantiation

// we can set the camera if we want, these are the default so the following line isn't
// necessary
scene.camera = {
  x: 0,
  y: 0,
  dx: 0,
  dy: 0
};

// now we add the bubbles cloud to the scene with these settings
scene.animate('bubbles',{
  startX: easel.viewport.w/4,
  startY: easel.viewport.h/4,
  width: easel.viewport.w/2,
  height: easel.viewport.h/2,
  distance: 20, //this is how high each bubbles goes before reevaluating
  quantity: 500, //this is how many bubbles(particles) we want
  duration: 500 //this is the tweenDuration per bubble(particle)
});

scene.draw(); //this starts the animation loop for all clouds instanced