css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <img id="logo" class="hidden" src="data:image/png;base64,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" alt="" />
<img class="hidden" id="particle1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABGCAYAAACJ4ts2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEJEQUYxMDMwRDMwMTFFOUE5RDhDNjdBOTJGRUNGNTAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEJEQUYxMDQwRDMwMTFFOUE5RDhDNjdBOTJGRUNGNTAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowQkRBRjEwMTBEMzAxMUU5QTlEOEM2N0E5MkZFQ0Y1MCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowQkRBRjEwMjBEMzAxMUU5QTlEOEM2N0E5MkZFQ0Y1MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pofchr0AAA50SURBVHja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" alt="" />
<div class="link">
<a href="https://twitter.com/cjgammon">@cjgammon</a>
</div>
            
          
!
            
              body{
  margin: 0;
  overflow: hidden;
}

.hidden{
  display: none;
}

.link{
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  margin: 10px;
  font-family: sans-serif;
  font-weight: 100;
  
  a{
    color: black;
    text-decoration: none;
    
    &:hover{
      text-decoration: underline;
    }
  }
}
            
          
!
            
              
class PixiWorld {
  constructor() {
    this.particles=[];
    this.gravity = 0;
    this.destroy = false;
    
    this.maxX = window.innerWidth;
    this.minX = 0;
    this.maxY = window.innerHeight;
    this.minY = 0;
    
    this.renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
    this.renderer.backgroundColor = 0x272B34;
    this.renderer.autoResize = true;
    this.stage = new PIXI.Container();
    //this.stage.filterArea = new PIXI.math.Rectangle(0, 0, window.innerWidth ,window.innerHeight);
    //this.stage.alpha = 0;

    //this.blur = new PIXI.filters.BlurFilter(10);
    //this.stage.filters = [this.blur];
    
    this.blur2 = new PIXI.filters.BlurFilter(10);
    this.particleContainer = new PIXI.Container();
    this.particleContainer.alpha = 0;
    this.particleContainer.filters = [this.blur2];
    this.particleContainer.filterArea = new PIXI.math.Rectangle(0, 0, window.innerWidth ,window.innerHeight);

    this.stage.addChildAt(this.particleContainer);
    
    window.addEventListener('resize', () => this.resize());

    PIXI.loader
      .add(logo.src)
      .add(particle1.src)
      .load(() => this.setup());
  }
  
  setup() {
    this.logo = new PIXI.Sprite(PIXI.loader.resources[logo.src].texture);
    
    this.logo.anchor.set(0.5);
    
    this.logo.x = (window.innerWidth / 2);
    this.logo.y = (window.innerHeight / 2);

    this.logo.alpha = 0;
    this.stage.addChild(this.logo);
    
    //this.addParticles();
    
    this.tl = new TimelineMax();
    
    this.tl.add(() => this.addParticles(), 0.5);
    this.tl.add(TweenMax.fromTo(this.logo.scale, 0.5, {x: 2, y: 2}, { x: 1, y: 1, ease: Quint.easeOut}), 1);
    this.tl.add(TweenMax.to(this.logo, 0.5, {alpha: 1, ease: Quint.easeOut}), 1);
    
    this.tl.add(TweenMax.to(this.particleContainer, 1, {alpha: 1, ease: Quad.easeIn}), 1.5);
    this.tl.add(TweenMax.to(this.blur2, 0.7, {blur: 0, ease: Quad.easeIn}), 2);

    //this.tl.add(TweenMax.to(this.particleContainer, 0.5, {alpha: 0, ease: Quint.easeOut, delay: 0.5}));
    this.tl.call(() => {
      this.destroy = true;
    })

    document.body.addEventListener('click', () => {
      this.tl.time(0);
      this.tl.play();
    })
  }
  
  addParticles() {
    console.log('add particles')
    this.particles = [];
    
    for (var j = this.particleContainer.children.length; j > -1; j--) {
      this.particleContainer.removeChild(this.particleContainer.children[j]);
    }
    
    for (var i = 0; i < 2000; i++) 
    {
      var particle = new PIXI.Sprite(PIXI.loader.resources[particle1.src].texture);
      //particle.speedX = (Math.random() * 10) - 5;
      //particle.speedY = (Math.random() * 10) - 5;
      particle.speedX = 0.5 + Math.random() * 10;
      particle.speedY = 0.5 + Math.random() * 10;
      particle.speedX *= Math.random() > 0.5 ? -1 : 1;
      particle.speedY *= Math.random() > 0.5 ? -1 : 1;

      particle.scale.x = particle.scale.y = 0.2 + Math.random() * 0.5;
      //particle.x = window.innerWidth / 2 - (particle.width / 2);
      //particle.y = window.innerHeight / 2;
      particle.x = Math.random() * window.innerWidth;
      particle.y = Math.random() * window.innerHeight;
      particle.alpha = 0.5;

      particle.anchor.x = 0.5;
      particle.anchor.y = 1;
      particle.tint = Math.random() * 0xFFFFFF;

      this.particles.push(particle);
      this.particleContainer.addChildAt(particle, 0);
    }
  }
  
  update() {
    console.log(this.particles.length);
    
    for (var i = 0; i < this.particles.length; i++) 
    {
      var particle = this.particles[i];
      //bunny.rotation += 0.1

      particle.position.x += particle.speedX;
      particle.position.y += particle.speedY;
      particle.speedY += this.gravity;

      if (particle.position.x > this.maxX + particle.width || 
          particle.position.x < this.minX - particle.width || 
          particle.position.y > this.maxY + particle.height || 
          particle.position.y < this.minY - particle.height)
      {
        if (this.destroy) {
          this.particles.splice(i, 1);
          this.particleContainer.removeChild(particle);
        } else {
          particle.x = window.innerWidth / 2 - (particle.width / 2);
          particle.y = window.innerHeight / 2;
         // particle.speedX = (Math.random() * 10) - 5;
          //particle.speedY = (Math.random() * 10) - 5;
          particle.speedX = 0.5 + Math.random() * 10;
          particle.speedY = 0.5 + Math.random() * 10;
          particle.speedX *= Math.random() > 0.5 ? -1 : 1;
          particle.speedY *= Math.random() > 0.5 ? -1 : 1;
        }

      } 
    }
  }
    
  resize() {
    this.renderer.resize(window.innerWidth, window.innerHeight);
    this.logo.x = window.innerWidth / 2;
    this.logo.y = window.innerHeight / 2;
    this.stage.filterArea = new PIXI.math.Rectangle(0, 0, window.innerWidth ,window.innerHeight);
    this.particleContainer.filterArea = new PIXI.math.Rectangle(0, 0, window.innerWidth ,window.innerHeight);
    this.maxX = window.innerWidth;
    this.minX = 0;
    this.maxY = window.innerHeight;
    this.minY = 0;
  }
  
  render() {
    this.renderer.render(this.stage);
  }
}

var _w = new PixiWorld();
document.body.appendChild(_w.renderer.view);

function animate() {
  _w.update();
  _w.render();
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console