Push particles based on variable change in a seperate function

[odonald]

Hi there, not expecting much help from here but I'll give it a shot anyway:

I'm using WebSockets to retrieve a number that changes every now and then in my project. I have added it to Particles.js and assigned a variable to the changing number.

Next, I can use that Variable to set how many particles are pushed on click. But this variable only updates once at the beginning and then doesn't register the changes coming from my WebSockets.

I was wondering if there is a way, to push new particles based on the number I am getting from my WebSockets instead of having to click.

So in Theory, my particles.js receives data via my WebSocket connection, I store this data as an int, and depending on the int new particles are added or reduced from the canvas. Everytime new data comes via WebSocket this process is repeated.

Any hints or Ideas how I could get something like this done ?

[matteobruni]

I've created this sample: https://codesandbox.io/s/loving-http-ld9nbv?file=/src/index.js

It adds a custom class handled when onClick mode is "ws-push", I cannot create a WebSocket using CodeSandbox (or at least I don't know how to create it there) so I've just put a random function. But it should be something useful to create your custom code.

[odonald]

Hi Matteo,
thanks for your reply, I've been at this for the last couple of days. I also just took note of tsparticles. I'm from a Python background and still fairly new to JS so I'm taking a while to figure out what you sent me, kind of understand the idea but not in full detail yet, the more I'm learning the more I'm starting to understand though.

I also came across this other method of updating things which works like this:
window.pJSDom[0].pJS.particles.number.value = 10; // to set a new value
window.pJSDom[0].pJS.fn.particlesRefresh(); // to reload the scene with the new value

Every time particleRefresh() is triggered, the whole view resets with the new values, I was wondering if there would be something like particlesUpdate() to take the existing view and add the new values.

There must be a way because if I don't use particleRefresh and a different part of my loop is called and I then click into the existing view, it changes the color of all existing particles and pushes new particles instead of refreshing the whole view (I hope this makes any sense)

I put it into a loop in my WebSocket, maybe this can give you a bit of an overview:

let ws = new WebSocket("ws://localhost:3000");
let delayTimeElement = document.getElementById('numberonwebsite')
let lastValue = null;


ws.onmessage = function(event)  {
  //getting my data from the websocket and turning it in to an int
  let delayTimes = parseInt(event.data); 
  //Checking if it worked
  console.log(delayTimes) 
  //Updating number on website to display the new number dynamically (works)
  delayTimeElement.innerText = delayTimes; 
  //Loop to make changes in the appearance of my particles
  if (delayTimes < lastValue ) {
    // compare last data coming from  websocket with the new set to figure which action to take
    lastValue = delayTimes; 
    // Checking if it worked
    console.log(lastValue)
    //for me to get feedback on which part of the loop was triggered
    console.log("different") 
    // change colors of the particles
    window.pJSDom[0].pJS.particles.color.value = "#000";
    // Refresh the particles with the new color (This is the part I would like to have as an update for the existing particle formation, instead of refreshing the whole view)
    window.pJSDom[0].pJS.fn.particlesRefresh();
  }
    // Repeat the same as above for different condition
    else if (delayTimes > lastValue ){
    lastValue = delayTimes;
    console.log(lastValue)
    console.log("but") 
    window.pJSDom[0].pJS.particles.color.value = "#5bfc53";
    window.pJSDom[0].pJS.fn.particlesRefresh();
  }
    // Repeat the same as above for different condition
    else (delayTimes === lastValue);{
    lastValue = delayTimes;
    console.log(lastValue) 
    console.log("samesame") 
    window.pJSDom[0].pJS.particles.color.value = "#dccaff"; 
    window.pJSDom[0].pJS.fn.particlesRefresh();
  }
};

Let me know ig you have any idea or maybe I should open a new thread with this?

[3in0]

It looks like you can add new particles to the existing view using this method (example below adding 20 particles at position 100, 100)..

pJSDom[ 0 ].pJS.fn.modes.pushParticles( 20, { pos_x: 100, pos_y: 100 } )

If you want to set a different colour for the new particles, make this call first (i.e. setting to green)..

pJSDom[ 0 ].pJS.particles.color={rgb: { r:0, g:255, b:0 }, value:'#00ff00'}