0

I would like to visualise the data I am getting via API output as particles using three.js / particles.js .

I am receiving Integers between 2 and 42.

So, if my data equals 2 I would like to have two particles, if it equals 32, I would like to have 32 particles floating about without refreshing the page. I'm trying to figure how I can "dynamically" add or delete particles based on the data I am receiving from the API call.

I've searched for all kinds of things but I think I am missing the right terminology for this to get valuable results.

I basically want to able to update "maxParticles" (line 29) every 5 seconds with the API data and have particles appear and disappear without refreshing the page. From tutorials my demo code currently looks like this (far from it):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
      }

      .background {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: 0;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <canvas class="background"></canvas>
    <script src="https://unpkg.com/@codegewerk/particle-cloud@1.x/dist/particles.min.js"></script>
    <script>
      const instance = new ParticleCloud({
        selector: ".background",
  maxParticles: 32,
  color: "#ff0000",
  connectParticles: true,
  sizeVariations: 5,
});
      instance.start();
    </script>
  </body>
</html>

As always, any ideas or input very much appreciated.

UGN
  • 41
  • 7

0 Answers0