JSFiddle - React, Tailwind, and code Playground

by brennan

HTML

<script src="http://sebleedelisle.com/demos/JSParticles/js/ImageParticle.js"></script>
<canvas width="500px" height="500px" id="rocketSmoke"></canvas>

JavaScript

// screen size variables
var canvasWidth = 500,
    canvasHeight = 500,
    particles = [],
    MAX_PARTICLES = 60,
    particleImage = new Image(),
    stats,
    canvas = document.getElementById( 'rocketSmoke' ),
    context = canvas.getContext( '2d' );

  particleImage.src='http://sebleedelisle.com/demos/JSParticles/img/ParticleSmoke.png';

setInterval(loop, 1000 / 30);


function loop() {
    // make some particles
        makeParticle(1);
    // clear the canvas
        context.fillStyle="rgba(0,0,0,1)";
        context.fillRect(0,0, canvasWidth, canvasHeight);
                  
    // iteratate through each particle
        for (i=0; i<particles.length; i++){
            var particle = particles[i]; 

            // render it
                particle.render(context); 
            // and then update. We always render first so particle
            // appears in the starting point.
                particle.update();
            
        }
                
    // Keep taking the oldest particles away until we have 
    // fewer than the maximum allowed. 
        while(particles.length>MAX_PARTICLES){
            particles.shift(); 
        }
}
            
function makeParticle(particleCount){

    for(var i=0; i<particleCount;i++){
        // create a new particle in the middle bottomof the stage
        //var particle = new ImageParticle(particleImage, HALF_WIDTH, HALF_HEIGHT*0.75); 
                    
        // or make one where the mouse is. 
            var particle = new ImageParticle(particleImage, 4, 4); 
                                        
            particle.velX = randomRange(-0.5,0.5);
            particle.velY = 0;
            particle.size = randomRange(0.1,0.2);
            particle.maxSize = 1.5; 
            particle.alpha = randomRange(0.2,0.3);
            particle.gravity = -0.2; 
            particle.drag = 0.96;
            particle.shrink = 1.04; 
            particle.fade = 0.005; 
                    
        // add it to the...