JSFiddle - React, Tailwind, and code Playground

by Evan Raskob

HTML

<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<!-- from http://blog.safaribooksonline.com/2012/06/19/creating-a-particle-system-with-easeljs/ -->

<canvas id="canvas"></canvas>

JavaScript

var stage;
var time = Date.now();
var emitter = {
    x: window.innerWidth / 2,
    y: window.innerHeight / 2,
    size: 5
}

function setup() {
  console.log("setup");
    var canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    stage = new createjs.Stage(canvas);

    createjs.Ticker.setFPS(30)
    createjs.Ticker.addListener(window);
}

function createCircle() {
    var graphics = new createjs.Graphics();
    graphics.beginFill(createjs.Graphics.getRGB(0, 0, 0));
    graphics.drawCircle(0, 0, emitter.size);

    var circle = new createjs.Shape(graphics)
    circle.x = emitter.x;
    circle.y = emitter.y;
    circle.speedX = -2 + Math.random() * 4;
    circle.speedY = -200;
    circle.time = 0;

    stage.addChild(circle);
}



function tick() {

    var now = Date.now();
    var elapsed = now - time;
    time = now;

    createCircle();

    for (var i = 0; i < stage.getNumChildren(); i++) {
        var circle = stage.getChildAt(i);

        circle.time += elapsed / 1000;
        circle.x += circle.speedX * 1 / (circle.time + 1);
        circle.y = emitter.y + circle.speedY * circle.time +
                   90 * (circle.time * circle.time)

        if (circle.y > window.innerHeight + emitter.size) {
            stage.removeChildAt(i);
            i--;
        }
    }

    stage.update();
}


$(window).load(setup);