Slow down on hover about tsparticles HOT 16 CLOSED

Hi, this sounds really interesting
My instinct says the best way to implement this is to add a conditional to the move method to the effect of
if (options.slowOnMouse && mouseWithinCursorRadius()) { moveSpeed *= options.slowOnMouseFactor; }
where slowOnMouseFactor is some number between 0 and 1 and mouseWithinCursorRadius() uses container.interactivity.mouse.position and something like an IOptionsInteractivityModeSlowNearCursor to determine whether or not the particle is within the cursor.
Does this sound like the right idea?

from tsparticles.

Ok great! Well I'm really keen to help, I'll get to work. What's a good way to test my results? (I'm probably being stupid but I'm having trouble working out how to "run" the project)

from tsparticles.

Just a tip, I don't know if you read the CONTRIBUTING.md file but I'll explain here just a few things. If you want to start from the production code start from master and create the PR to staging. If you want to start from the development code, at the moment in that branch there's an Options revolution, use dev branch and the release will be slower because the test process will be longer. Don't target directly master because there's a CI\CD automation and I'd like to test it too before releasing.

Thank you for your contribution and happy coding

from tsparticles.

Thanks Matteo, I'll let you know if I have any problems

from tsparticles.

Ok thanks. The idea it's exactly what I meant, I'll have a look in the morning to see if it's everything ok

from tsparticles.

Ok it's fixed now. The if (active) didn't have the ! and the performance are ok, probably the previous test with shadows broke everything.

I inverted the factor, instead of using a value 0...1 I found easier to use a 1...n options and use it 1/n.

Thanks for all

from tsparticles.

Brilliant! Good thinking,
Thanks for the support!

from tsparticles.

Yeah, I was thinking exactly something like this, a 0 to 1 number to multiply to speed calculated with the mouse distance in a specified radius.
I don’t know which effect should be better if an area slowed down entirely at the same speed or something based on the distance from the cursor position. In the second one if you place the cursor on a particle you should stop it or something like this.

from tsparticles.

Unfortunately the project is not runnable at the moment, the fastest way is using codepen pasting the content of the tsparticles.min.js in the dist folder or hosting the file somewhere to reference it. I have some demos on my codepen profile (https://codepen.io/collection/DPOage) if you need.

For building the dist folder you have to run the npm run build command after a npm install, obviously npm is required.

I'm thinking about some simple testing page because the actual demo hosted at https://particles.matteobruni.it is an ASP.NET Core project with a MongoDB and a Redis cache used also for other personal projects and it's not the simplest solution to share.

from tsparticles.

Oh good! That's what I thought, I just wanted to make sure. As I'm working on this I will try and brainstorm some ideas for automating the testing process.

Would you mind assigning this issue to me?

from tsparticles.

Yeah sure, if you need help I'm here

from tsparticles.

Ok, so I think I've implemented this. I have added a parameter for the 'slow factor' which is the number between 0 and 1 that determines the slow-down of the particle when in the radius of the mouse, but I have also implemented linear scaling of speed from the mouse.

So if a particle had a speed of 10, the factor was set to 0.8, the radius was set to 40 and the particle was 20 away, the particle at that instant would have a speed of 10 * 0.8 * (20 / 40) = 4.

I have been unable to test the code properly. I hosted the tsparticles.min.js on a dummy GitHub repo and used the link to the raw in codepen, but it did not work (console log suggested a problem with angular) so I'll make a PR for what I have so far so you can see it, and then I'll try again tomorrow

from tsparticles.

I've added a simple demo/test page in this commit bf7ec7c on the dev branch, just npm start and go to http://localhost:3000

from tsparticles.

Sorry @gabrielbarker, I've merged the PR in dev and checked it in the new test page but the performance now are really poor. Can you check it too?

from tsparticles.

Sorry I've double checked it but seems an issue with the shadow test done before, but It seems to not slow down near the mouse. I've pushed the commit 3e42fbe with a slow test

from tsparticles.

I believe that, firstly, in the getProximitySpeedFactor method, the first if statement should read
if(!active) return 1;
This should solve performance issues when the slow factor is disabled. The reason, I imagine, that performance drops is that checking the distance between the mouse and a particle is quite expensive. Maybe we could do something a bit cheaper, like checking that
mousePos.x < radius && mousePos.y < radius
I'll take a look later today as I'm currently just finishing my lunch break!
Another thing that may fix it is, instead of checking that
Math.sqrt(dx*dx + dy*dy) < radius
we could try
dx*dx+dy*dy < radius * radius
as they are mathematically equivalent but it removes the need to do the square root

from tsparticles.