cancel
Showing results for 
Search instead for 
Did you mean: 

General Discussions

martin77
Journeyman III

SVG or canvas for physics simulations/animations?

I'm new to js and kind of baffled by the amount of graphics libraries out there. My goal is to make simple physics simulations (mechanics, electrodynamics, fluid flows) but I'm not really sure which approach is best suited for the task. Paper.js looks great with plenty of documentation, and anime.js seems nice because it's lightweight and uses SVG. I can imagine that performance could be a priority if I end up simulating many particles - though WebGL seems a bit daunting to jump into without first knowing more basic js.

Any recommendations?

0 Likes
1 Reply
qwixt
Forerunner

My first question is does it have to be browser based? Javascript is powerful and impressive in its flexibility, but its untyped nature is maddening. Also, kep in mind that javascript is single threaded.

WebGL appears to be the most versatile. It's like standard game programming (DirectX/OpenGL) in that you have a canvas, and you render to it, then swap buffers in and out as your render each frame.  So if you can imagine an X-Y plane, or 3D space, you would draw your particles in time.

Anime.js appears to be somewhat limited and more geared heavy css usage. Not really sure how you would use this. It appears to be mostly for web animation, not so much for particle modeling. It appears you would need the whole thing planned out ahead (like every particle path), and put into CSS for playback. Keep in mind, this is a very cursory look into it.

I would start with 2D modeling to learn the ropes, and for picking the best animation library for you. For one, you can use simple X and Y coordinates, and simple DrawPoint(x, y) calls to display a particle. For instance, you can make the canvas small, like 300x300, but that to 900x900, then one point or pixel will be quite large. This should allow you to come up with a fairly simple model, and how difficult the various libraries are to use.

0 Likes