search

drawcall / Proton

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

How to create a Force at a particular position? #58

Closed jliebrand closed 2 years ago

jliebrand commented 6 years ago

Hi there - first of all: amazing library! It's a little hard to spot all the potential (hence this issue for example) without more documentation, but it's clear that you've built some really powerful concepts that when put together should be able to achieve just about anything; so kudos!

On to my particular question: I'm trying to build a simple wind animation of particles. What I have is a grid of wind data, so for example imagine on a canvas of 1000x1000 that I would have points at every 100x and 100y. For each point, I have the U and V components of the wind; ie the fx and fy for particles.

So for Proton, I figured it should be easy if I could add a behaviour similar to a GravityWell, but then for a particular force (rather than just gravity). Eg Proton.ForcePosition(targetPos.x, targetPos.y, fx, fy).

But the Force behaviour only has fx and fy... no position? Is there a way to combine PointZones with the Force behaviour to achieve what I'm trying to do here?

(eg so that the particles flow through the canvas similar to windy.com for example)

jliebrand commented 6 years ago

Actually, come to think of it, this is probably just a case of creating my own custom GravityWell which will have an fx and an fy rather than one simple force...

jliebrand commented 6 years ago

Actually no, that wouldn't quite do it... Perhaps more a variant of the Attraction behaviour is what i'm after...

jliebrand commented 6 years ago

Ok, I managed to create a PointForce behaviour... but thinking more about this, I don't think that is ultimately what I need... Considering I have a grid of wind speeds (U and V components), what really needs to happen is a lerp between all those points so that the particles "flow" correctly across the canvas. Not sure that's quite achievable with the attraction/repulsion concept... I'll need to give this a little more thought, but if you have particular pointers as to how to achieve this with Proton, I'd be all ears

drawcall commented 6 years ago

Sorry, I have not fully understood your description. What kind of Force do you specifically want?

If the default behavior doesn't satisfy you, then Proton can customize any behavior you want, as long as you can think of it.

You can see an example: view-source:http://a-jie.github.io/Proton/example/behaviour/custom/circle.html

jliebrand commented 6 years ago

Sorry, yes my ramblings didn't make a lot of sense :-)

Basically I have gridded data, which indicates for each grid point how the wind is blowing (direction and strength). Here's a visualisation:

saildocscurrent

What I wanted to do, was add a Behaviour for each of those grid points, which will apply a force on the particles in the direction and strength of the wind. Which would then ultimately make the particles "flow" through the space like the wind ought to. Which should show up something like this:

image

(You can see a working example (not using proton) of it here: https://earth.nullschool.net/#current/wind/surface/level/orthographic=-34.48,51.60,1503)