Reputation: 1282

Place Pixijs Particles Around Object Inside Png Image

I've found this spark particle example on PixiJS particles editor: https://pixijs.io/pixi-particles-editor/#sparks

Now what I want to achieve is to Place these particles around the object inside the transparent png image. Check the image below to understand better.

Alternatively, If we skip the object detection part, How can we place these particles on a user-defined path? Something like this 👇

Upvotes: 1

Answers (1)

Aashif Ahamed

Reputation: 1132

I hope this answer solves your problem.

first, you draw the outline and save only the outline as an image

now convert the image to base64 this site will help you to convert to base64

now you can change the outline image to particles as a refernce

// Tamino Martinius - All rights reserved

// Copyright © 2013 Tamino Martinius (http://zaku.eu)
// Copyright © 2013 Particleslider.com (http://particleslider.com

// Terms of usage: http://particleslider.com/legal/license

var init = function(){
  var isMobile = navigator.userAgent &&
    navigator.userAgent.toLowerCase().indexOf('mobile') >= 0;
  var isSmall = window.innerWidth < 1000;
  
  var ps = new ParticleSlider({
    ptlGap: isMobile || isSmall ? 3 : 0,
    ptlSize: isMobile || isSmall ? 3 : 1,
    width: 1e9,
    height: 1e9
  });
    
  var gui = new dat.GUI();
  gui.add(ps, 'ptlGap').min(0).max(5).step(1).onChange(function(){
    ps.init(true);
  });
  gui.add(ps, 'ptlSize').min(1).max(5).step(1).onChange(function(){
    ps.init(true);
  });
  gui.add(ps, 'restless');
  gui.addColor(ps, 'color').onChange(function(value){
    ps.monochrome = true;
    ps.setColor(value);
      ps.init(true);
  });
  
  
  (window.addEventListener
   ? window.addEventListener('click', function(){ps.init(true)}, false)
   : window.onclick = function(){ps.init(true)});
}

var initParticleSlider = function(){
  var psScript = document.createElement('script');
  (psScript.addEventListener
    ? psScript.addEventListener('load', init, false)
    : psScript.onload = init);
  psScript.src = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/23500/ps-0.9.js';
    psScript.setAttribute('type', 'text/javascript');
  document.body.appendChild(psScript);
}
    
(window.addEventListener
  ? window.addEventListener('load', initParticleSlider, false)
  : window.onload = initParticleSlider);

html, body {
  background-color: black;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;

  .slides, & > .dg {
    display: none;
  }
}

@media (min-width: 1000px) {
  body {
    background-position:center;
    background-image: url('https://purepng.com/public/uploads/large/purepng.com-audiaudicarluxurious-carprofessional-carwhite-audired-audi-1701527409582ukddw.png');
    background-repeat: no-repeat;
    
    & > .dg {
      display: block;
    }
  }
}

<html>
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>ParticleSlider</title>
  </head>
  <body id="particle-slider">
      <div class="slides">
        <div id="first-slide" class="slide" data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4QAAAIcCAMAAACZ0pCTAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAq9QTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////J9QBRAAAAOV0Uk5TAB9IZm+Gk5+mqtjP0rjM07exr6Klq66j2Zl7PQ9c0eX08v/8/f7OlSsVVY7mQA6A40cmp95twKiNl5u+0Ojxijaarcj6xi5rvZG11fAIAxdNj/m/iefq+OnL++CBc2FUOzk4PzNZbHRyYjdYfHVTOlIpCkV3RifN1Jwj711D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">
        </div>
        </div>
        <canvas class="draw"></canvas>
  </body>
</html>

For more Codepen link for example

Final result

Upvotes: 1

Place Pixijs Particles Around Object Inside Png Image

Answers (1)

Related Questions