123

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.

            
              <canvas id="scene"></canvas>
<img src="data:image/jpeg;base64,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" alt="">
            
          
!
            
              body {
  overflow: hidden;
  margin: 0;
}
img {
  display: none;
}
            
          
!
            
              console.clear();

var width = window.innerWidth;
var height = window.innerHeight;

var options = {
  bg: 0xffffff,
  color: 0xffffff,
  radius: 1,
  friction: 0.96,
  strength: 0.008,
  mouseRadius: 150,
  mouseForce: 0.01
};

var app = new PIXI.Application({
  width: width,
  height: height,
  view: document.querySelector('#scene'),
  backgroundColor: options.bg,
  antialias: true
});

var loader = PIXI.loader;
loader.add('dog', document.querySelector('img').src);
loader.load(init);

var dots = new PIXI.Container();
app.stage.addChild(dots);
function init () {
  // Create a sprite
  var sprite = new PIXI.Sprite(loader.resources.dog.texture);
  
  // Get the pixels data
  var data = app.renderer.extract.pixels(sprite);
  
  // Get the scale ratio
  var imgRatio = sprite.width / sprite.height;
  var screenRatio = width / height;
  var scale = 1;
  if (screenRatio > imgRatio) {
    scale = Math.floor(height / sprite.height);
  } else {
    scale = Math.floor(width / sprite.width);
  }
  
  // Create a texture
  var dotGraph = new PIXI.Graphics();
  dotGraph.beginFill(options.color, 1);
  dotGraph.drawRect (0, 0, scale * options.radius, scale * options.radius);
  dotGraph.endFill();
  var texture = app.renderer.generateTexture(dotGraph);
  
  for (var x = 0; x < sprite.width; x++) {
    for (var y = 0; y < sprite.height; y++) {
      var red = data[(y * sprite.width + x) * 4 + 0] / 255;
      var green = data[(y * sprite.width + x) * 4 + 1] / 255;
      var blue = data[(y * sprite.width + x) * 4 + 2] / 255;
      
      // Prevent white dots to be displayed
      if (red > 0.96 && green > 0.96 && blue > 0.96) {
        continue;
      }
      var gray = (red * 0.2126 + green * 0.7152 + blue * 0.0722);
      
      var dot = new PIXI.Sprite(texture);
      var highlight = [1.0, 0.24, 0.75];
      var shadow = [0.25, 0.0, 1.0];
      red = Math.min(highlight[0], Math.max(shadow[0], red));
      green = Math.min(highlight[1], Math.max(shadow[1], green));
      blue = Math.min(highlight[2], Math.max(shadow[2], blue));
      
      dot.tint = PIXI.utils.rgb2hex([red, green, blue]);
      // dot.scale.x = Math.max(1 - gray, 0.4);
      // dot.scale.y = Math.max(1 - gray, 0.4);
      dot.x = Math.random() * width;
      dot.y = Math.random() * height;
      dot.destination = {
        x: (x * scale) + (width - scale * sprite.width) / 2,
        y: (y * scale) + (height - scale * sprite.height) / 2
      };
      dot.vel = {
        x : 0,
        y : 0
      };
      dot.acc = {
        x : 0,
        y : 0
      };
      dot.mass = Math.random() + 0.2;
      dots.addChild(dot);
    }
  }
  
  app.ticker.add(updateDots);
}

function updateDots () {
  for (var i = 0; i < dots.children.length; i++) {
    var dot = dots.children[i];
    dot.acc.x = (dot.destination.x - dot.x) * options.strength * dot.mass;
    dot.acc.y = (dot.destination.y - dot.y) * options.strength * dot.mass;

    dot.vel.x += dot.acc.x;
    dot.vel.y += dot.acc.y;

    dot.vel.x += gravity.x;
    dot.vel.y += gravity.y;
    
    dot.vel.x *= options.friction;
    dot.vel.y *= options.friction;

    dot.x += dot.vel.x;
    dot.y += dot.vel.y;
    
    var dist =  Math.sqrt( (mouse.x-dot.x)*(mouse.x-dot.x) + (mouse.y-dot.y)*(mouse.y-dot.y));
    if(dist < options.mouseRadius){
      dot.vel.x += (dot.x - mouse.x) * options.mouseForce;
      dot.vel.y += (dot.y - mouse.y) * options.mouseForce;
    }
  }
}

var mouse = {
  x: 0,
  y: 0
};
window.addEventListener("mousemove", function(e){
  mouse.x = e.clientX;
  mouse.y = e.clientY;
});
window.addEventListener("touchmove", function(e){
  mouse.x = e.touches[0].clientX;
  mouse.y = e.touches[0].clientY;
});
var gravity = {
  x: 0,
  y: 0
};
window.addEventListener("deviceorientation", function(e){
  gravity.x = (e.gamma / 90) * 3;
  gravity.y = (e.beta / 90) * 3;
});

            
          
!
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.

Console