JSFiddle - React, Tailwind, and code Playground

by Viktor

HTML

<script src="http://code.createjs.com/createjs-2013.12.12.min.js"></script>
<script src="http://frankyboy.se/smaspel/spel/poop/script/particleEmitterJs-0.5.0.min.js"></script>
<canvas id="testCanvas" width="600" height="150"></canvas><br/>
<input value="re-init"  type="button" id="poop"/>

CSS

#testCanvas{
    border: 1px solid black;
    background:black;
}

JavaScript

var canvas = document.getElementById("testCanvas");
var stage = new createjs.Stage(canvas);
$(function(){
    particleImage = new Image();
    particleImage.onload = init;
    particleImage.src = "http://purplemonkeystudios.org/particleemitterjs-editor/images/particle_base.png";
    $("#poop").click(function(){
      reInit();  
    })
})
function init(){
    var poopEmitter = new createjs.ParticleEmitter(particleImage);
    poopEmitter.position = new createjs.Point(20, 20);
    poopEmitter.fireEmitterType = createjs.ParticleEmitterType.Emit;
    poopEmitter.emissionRate = 100;
    poopEmitter.maxParticles = 200;
    poopEmitter.life = 300;
    poopEmitter.lifeVar = 0;
    poopEmitter.speed = 300;
    poopEmitter.speedVar = 0;
    poopEmitter.positionVarX = 0;
    poopEmitter.positionVarY = 0;
    poopEmitter.accelerationX = 0;
    poopEmitter.accelerationY = 0;
    poopEmitter.radialAcceleration = 0;
    poopEmitter.radialAccelerationVar = 0;
    poopEmitter.tangentalAcceleration = 0;
    poopEmitter.tangentalAccelerationVar = 0;
    poopEmitter.angle = 90;
    poopEmitter.angleVar = 7;
    poopEmitter.startSpin = 0;
    poopEmitter.startSpinVar = 0;
    poopEmitter.endSpin = null;
    poopEmitter.endSpinVar = null;
    poopEmitter.startColor = [255, 255, 50];
    poopEmitter.startColorVar = [0, 0, 0];
    poopEmitter.startOpacity = 1;
    poopEmitter.endColor = [255, 0, 0];
    poopEmitter.endColorVar = null;
    poopEmitter.endOpacity = 0;
    poopEmitter.startSize = 20;
    poopEmitter.startSizeVar = 0;
    poopEmitter.endSize = null;
    poopEmitter.endSizeVar = null;
    stage.addChild(poopEmitter);
    createjs.Ticker.addEventListener("tick", function(event){
        stage.update();
    })
}
function reInit(){
    createjs.Ticker.removeAllEventListeners()
    stage.autoClear = true; // This must be true to clear the stage.
	stage.removeAllChildren();
	stage.update();
    init();
}