Push particles based on variable change in a seperate function about particles.js

[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'}