drawcall / Proton

Javascript particle animation library
https://drawcall.github.io/Proton/
MIT License
2.42k stars 275 forks source link

Repulse zone / area #40

Closed polgiron closed 4 years ago

polgiron commented 8 years ago

Hello,

Thank you for this amazing library!

I wonder if it would be possible to set a Proton zone as a repulsive area. I would like to have all the canvas filled with particles and some shapes inside it which are repulsive.

I've tried to use the CrossZone property but for example if I set a CircleZone as a CrossZone "bound" the particles are only staying inside the CircleZone, and I would like to have them outside it. I've also tried CrossZone "collision" but I can't make it work.

Cheers, Paul

JPeer264 commented 8 years ago

If I am not wrong, you are initializing the Proton.Emitter() somewhere in the code. Might look like this:

emitter = new Proton.Emitter();

emitter.addInitialize(new Proton.Radius(1, 10);

After emitter.addInitialize you might want to configure the behavior of the emitter. If you want to add a behavior for your particle, e.g. a collision behavior:

emitter.addBehaviour(new Proton.Collision(emitter));

Perfect, the particles collide to each other. Now we are focusing on your area/zone where your particles are allowed to move. You can achieve that with Proton.CrossZone:

emitter.addBehaviour(new Proton.CrossZone(new Proton.RectZone(0, 0, canvas.width, canvas.height,) 'bound')

As you can see, that Proton.CrossZone needs internally a zone, where the particles are allowed to move. You can use here Proton.RectZone as well as Proton.CircleZone. Unfortunately the documentation for the zones are not ready. If you delete Proton.CrossZone from your code (or my gist, see below) then the particles are moving also outside. But they may never come back again ;)

I made a small documented gist for you.

Was this what you want to achieve? If not please provide a code snippet, how you want to achieve that.

polgiron commented 8 years ago

Hey, thank you for your answer.

I need to build a zone with an image or a font (it will be numbers). For that I can use getImageData and I already managed to get the particles in the shape of the zone, I tweaked one of the example:

http://static.phntms.com/sony/londongrammar/prototype2/

Now I need to have the negative effect: the particles are moving all around the zone, without entering in it. Please check this mockup:

sand1

In your example, the particles are still emitted and colliding inside the CrossZone rectangle. I wonder how I could make "no crossing zones" inside the viewport.

Thank you for your time. Paul

JPeer264 commented 7 years ago

@polgiron I was a bit busy the last months. I had now time play around a bit, but I also didn't found a way. Have you found a way to achieve what you want?