EffectHub.com: your best source for gaming

Recommendation

More Effects...

JS

var app = new PIXI.Application(900, 500, { antialias: true });
document.body.appendChild(app.view);
app.renderer.backgroundColor = 0x1e0206;

var debug = false;

var sprites = new PIXI.particles.ParticleContainer(10000, {
    scale: true,
    position: true,
    rotation: true,
    alpha: true
});
app.stage.addChild(sprites);

var circleGraphic = new PIXI.Graphics();
circleGraphic.lineStyle(0);
circleGraphic.beginFill(0xffffff,1);
circleGraphic.drawCircle(0, 0,50);
circleGraphic.endFill();

var circleTexture = app.renderer.generateTexture( circleGraphic)

var fireBack1 = new PIXI.Graphics();
fireBack1.lineStyle(0);
fireBack1.beginFill(0xff5400,1);
fireBack1.drawCircle(570, 250,200);
fireBack1.drawCircle(300, 250,150);
fireBack1.drawCircle(100, 250,100);

fireBack1.endFill();

fireBack1.x = 0;
fireBack1.y = 0;
app.stage.addChild(fireBack1);

var fireBack2 = new PIXI.Graphics();
fireBack2.lineStyle(0);
fireBack2.beginFill(0xffffff,1);
fireBack2.drawCircle(570, 250,200);
fireBack2.drawCircle(300, 250,150);
fireBack2.drawCircle(100, 250,100);

fireBack2.endFill();
fireBack2.x = 0;
fireBack2.y = 0;

var particles1 = new PIXI.Container();

for (var i = 0; i < 120; i++) {
    var particle = new PIXI.Sprite(circleTexture);

if(debug == true)
    particle.tint = 0xffffff;
    else particle.tint = 0xff7e00;
    
   // particle.alpha = 0.06;
    // particle.blendMode = PIXI.BLEND_MODES.ADD;

// set the anchor point so the texture is centerd on the sprite
    particle.anchor.set(0.5);

// different maggots, different sizes
    particle.scale.set(0.8 + Math.random() * 0.3);
    // scatter them all
    particle.start = {x:750,y:240 + Math.random() * 100 - 50,scale:Math.random() * .5 + .7,speed:{y:.0,x:Math.random() * .5 + .5}}
    particle.alive = false;
    particles1.addChild(particle);

}

for (var i = 0; i < 500; i++) {
    var particle = new PIXI.Sprite(circleTexture);

if(debug == true)
    particle.tint = 0xffffff;
    else particle.tint = 0xffffff;
    
    particle.alpha = .05;
     particle.blendMode = PIXI.BLEND_MODES.ADD;

// set the anchor point so the texture is centerd on the sprite
    particle.anchor.set(0.5);

// different maggots, different sizes
    particle.scale.set(0.8 + Math.random() * 0.3);
    // scatter them all
    particle.start = {x:750,y:250 + Math.random() * 5 - 3,scale:Math.random() * .4 + .5,speed:{y:.0,x:Math.random() * .5 + .5}}
    particle.alive = false;
    particles1.addChild(particle);

}

for (var i = 0; i < 200; i++) {
    var particle = new PIXI.Sprite(circleTexture);

if(debug == true)
    particle.tint = 0xff00ff;
    else particle.tint = 0x1e0206;

// set the anchor point so the texture is centerd on the sprite
    particle.anchor.set(0.5);

// different maggots, different sizes
    particle.scale.set(0.8 + Math.random() * 0.3);
    // scatter them all
    particle.start = {x:600,y:70,scale:.85,speed:{y:.65,x:1}}
    particle.alive = false;
    particles1.addChild(particle);

}

for (var i = 0; i < 200; i++) {
    var particle = new PIXI.Sprite(circleTexture);

if(debug == true)
    particle.tint = 0x00ff00;
    else particle.tint = 0x1e0206;

// set the anchor point so the texture is centerd on the sprite
    particle.anchor.set(0.5);

// different maggots, different sizes
    particle.scale.set(0.8 + Math.random() * 0.3);
    // scatter them all
    particle.start = {x:630,y:430,scale:.7,speed:{y:-.65,x:1}}
    particle.alive = false;
    particles1.addChild(particle);

}

// MIDDLE
for (var i = 0; i < 40; i++) {
    var particle = new PIXI.Sprite(circleTexture);

if(debug == true)
    particle.tint = 0x00ff00;
    else particle.tint = 0x1e0206;

// set the anchor point so the texture is centerd on the sprite
    particle.anchor.set(0.5);

// different maggots, different sizes
    particle.scale.set(0.8 + Math.random() * 0.3);
    // scatter them all
    var ySpeed = -2;
  if(i%2 == 0) 
    ySpeed = ySpeed * -1;
  
    particle.start = {x:840,y:280,scale:1,speed:{y:ySpeed,x:.2}}
    particle.alive = false;
    particles1.addChild(particle);

}

for (var i = 0; i <60; i++) {
    var particle = new PIXI.Sprite(circleTexture);

if(debug == true)
    particle.tint = 0x0000000;
    else particle.tint = 0x1e0206;

// set the anchor point so the texture is centerd on the sprite
    particle.anchor.set(0.5);

// different maggots, different sizes
    
    // scatter them all
    particle.start = {x:800,y:225,scale:Math.random() * 1 + .2,speed:{y:Math.random() * 5 - 2.5,x:Math.random() * 1 + .5},growing:true}
    particle.alive = false;
  particle.scale.set(0);
    particles1.addChild(particle);

}

app.stage.addChild(particles1);

var tick = 0;
app.ticker.add(function() {
  
    drawCircle(fireBall1,tick,60,32,0xf64400);
    drawCircle(fireBall2,tick,40,32,0x5c1401);

for(var i=0; i < particles1.children.length; i++ )
      {  
        var p = particles1.children[i];
        if(p.alive == true){ 
           p.x -= p.speed.x;
          p.y += p.speed.y; 
           p.scale.x = (.9 + Math.sin((p.x-600)/30) *.3) * p.start.scale;
          
        
          p.scale.y = p.scale.x;// +Math.cos(p.scale.x)    
          
            if(p.start.growing)
            {
             p.scale.x =(.15 + (650 - p.x)/1000) * p.start.scale * .3;
               p.scale.y = p.scale.x / 3;
            }
          if(p.x < -30 || p.y<-30 || p.y > 500) 
          {
              p.alive = false;
              particle.scale.set(0);

} 
        }
        else{
           p.x = p.start.x + Math.random() * 100 - 50;
           p.y = p.start.y + Math.random() * 100 - 50;
           p.scale.x = p.start.scale
           p.scale.y = p.start.scale;
          p.speed = {x:(Math.random() * 6 + 6) * p.start.speed.x,y:(Math.random()*2 + 1) *p.start.speed.y};
           p.alive = true;

}
      }

tick++;
});

var fireBall1 = new PIXI.Graphics();
fireBall1.x = 650;
fireBall1.y = 240;
app.stage.addChild(fireBall1);

var fireBall2 = new PIXI.Graphics();
fireBall2.x = 650;
fireBall2.y = 240;
app.stage.addChild(fireBall2);

function drawCircle(graphics,time,radius,segments,color)
{
  
  if(!graphics.points || graphics.points.length < segments)
    {
      graphics.points = [];
      for(var i=0; i <= segments; i++)
        {
          graphics.points.push({x:Math.random()*5 - 2.5,y:Math.random()*5 -2.5,speed:Math.random()*0.3})
        }
    }
  graphics.clear();
graphics.beginFill(color,1);
//graphics.lineStyle(1); 
// draw a triangle using lines
 var pos  = {x:10,y:10};
  
graphics.moveTo(0,0);

var angle = 0;
  
  for(var i=0; i <= segments; i++)
{
  var modRadius = radius;
  graphics.points[i].x = Math.sin(time*graphics.points[i].speed) *3;
  graphics.points[i].x = Math.cos(time*graphics.points[i].speed) *3;

var x = pos.x + radius * Math.cos(angle) + graphics.points[i].x;//+ Math.sin(time/10) * (i%2*-10);
var y = pos.y + radius * Math.sin(angle);// + Math.cos(time/10)*(i%2*-10);

if(i==0) 
graphics.moveTo(x,y)
else
 graphics.lineTo(x,y)

angle += 6.28/segments;

}

graphics.endFill();
}

CSS

HTML

Join Effecthub.com

Working with Global Gaming Artists and Developers!

Login
Sign Up

Or Sign Up with Your Email Address: