I'm trying to write a fluid dynamic simulator on the HTML5 canvas. I've found some real damn cool stuff on the internets that always look like a promising starting point, but they are all cell-based and use some crazy math.
I'd like to be able to add arbitrary obstacles (lines of any orientation, circles, etc) to make things more interesting, but I've no idea where do begin.
Does anyone know of some fairly simple equations for fluid simulation that include obstacles of any orientation? Alternatively, could anybody point me towards the math required to take one of the above examples and add obstacles?
I know that this question borders on something I should ask mathoverflow, but they seem more into the theory stuff. Apologies if I'm in the wrong area. I don't really know where to begin - if anyone's worked on fluid simulation with arbitrary obstacles before, I could use some pointers.
Accuracy takes a back seat to simplicity here.
Thanks!
Fluid dynamics isn't a simple topic. All that "theory" they like over at the other site is just the way this field works.
The simplest example of fluid flow is 2D, incompressible, irrotational, laminar flow. I'd start by looking into that.
But it's not an easy field. There's no "Teach Yourself Computational Fluid Dynamics In Ten Days" books out there.
The best book to read for introduction to graphics-oriented fluid simulation is "Fluid Simulation for Computer Graphics" by Robert Bridson (disclaimer: he was my PhD advisor).
http://www.cs.ubc.ca/~rbridson/fluidbook/
Ultimately, there is plenty of math involved, but there's also plenty of code examples to clarify things for the less math-inclined.
It covers mainly the cell-based approach you mentioned. The other main alternative is "Smoothed Particle Hydrodynamics" or SPH. Matthias Muller has some papers about this if you're looking to get started.
If you don't care about real accuracy but just want something swooshy and cool, I developed a very simple pressure-based simulation that delivers a very fast interactive interface in Javascript. You can see it here.
Here is a pretty decent list of everything You need to know about fluid dynamics and simulation:
http://www.dgp.toronto.edu/~stam/reality/Research/pub.html
Also you should check this site, where you can find the concrete source code written in Java and transported to Actionscript3. It's pretty documented, so shouldn't be a problem to transport to Javascript.
I have tried that and just to let you know there is an important part of Fluid simulation of any kind called Projection which is computationally extensive even on CPU it takes much and you might well know that Javascript is quite slow for many reasons.
Related
I would like to build a webpage with a flock of birds flying around on it. White background, black, "bird-shapes" to begin with - I'm thinking folding triangles. Eventually I would be interested to generate random flying patterns but for now I would be happy to make regular, repeating patterns, with one "bird" to begin.
I'm wondering how might this best be achieved or where to begin? I have plenty of programming experience with Java, and some in HTML/JavaScript. But I'm interested to learn. I'm just looking for a few pointers. WebGL? Or just use JavaScript?
You're best bet is html 5's canvas tag. Canvas also supports WebGL, so using that would be easy too.
http://www.html5canvastutorials.com/advanced/html5-canvas-animation-stage/
Here is an example:
http://cssdeck.com/labs/flying-bird-animation
&
http://cssdeck.com/labs/o1jukgxc
You can use this idea to replicate your needs.
It depends on the effect you're looking for. If you want a 3d effect you should look into THREE.js. This tutorial is a pretty decent introduction. Personally I think you could do what you need using the 2d canvas. Daniel Shiffman's Nature of Code is a great tutorial on vehicles, all with the standard canvas context. Most of the examples have been translated into JavaScript (using p5.js), but it's originally in Java so it could be a great way to get your feet wet.
I hope this is the right place this time, but I am trying to figure out how to use three.js to create a star the way the chrome experiments 100,000 stars was done. I tried looking into the source code but it is extremely difficult to decipher, it seems to be many parts, I have tried using textures, and I don't know how to get the glow or the halo around the sun, I would appreciate any assistance from someone with knowledge on how this was done.
Did you see this article?
The section on the sun gives a high-level overview of how to achieve the effects.
You'll probably want to look into GLSL shaders, which is an entire field in itself.
For now it might be best to find the shaders in the source and tweak them to see what effect your changes have.
Also consider checking out this tutorial for an example of glow and bloom shaders.
For learning more about OpenGL in general, the latest edition of The Red Book supposedly does a good job of explaining OpenGL while avoiding the failings of the previous edition.
Here is an example of a halo-style glow effect using shaders:
http://stemkoski.github.io/Three.js/Shader-Halo.html
It is still a work in progress -- panning or zooming will change the appearance of the glow, but perhaps it will be enough to be of assistance.
Hope it helps!
I'm looking for an optical flow implementation to run on my web app in html5 canvas, but didn't found something immediately usable. If I choose to implement it by myself, is it be possible to achieve (near) real-time performance?
Or, since in the current setting, I actually just want to know the main optical flow is moving to the left or right, are there some easier algorithms I can use?
I made this little library which does (I hope) exactly what you are asking for.
A demo
Which utilizes this library to control the ball by moving your hands.
I made a real time feature tracking that can generate sparse optical flow and point trajectories. It uses asm.js, so it runs faster on firefox (50ms per 320x240 frame - 1500 points)
www.ensta-paristech.fr/~garrigues/js_tracking/javascript_video_tracking.html
Hi I'm working on learning 3d game development and I'm starting with JavaScript and the html5 canvas and I was wondering if I were to have a 3d model do I draw the entire model(front, back, etc) and let the web browser decide what to render or should I try to just draw the sides that are in view of the camera? I ask this because I can see how it would be faster to do the latter of the 2 but that can get very complex and I'll need to do quite a bit more research to find how to do that.
Thanks!!
It's up to you, but it depends at least in part whether it's more expensive to spend the time clipping the model or just to render the entire thing dumbly.
Modern GPUs are pretty fast at drawing tons of geometry, so you often won't optimize the geometry sent to the card. However, it sounds like you're using the 2D canvas and writing your own rasterizer, so it may well be faster for you to do some quick optimization. Profiling and experimenting will turn up the right answer for your particular project.
If you're just learning I wouldn't worry overly about performance at this point but instead making sure you get the fundamental ideas and math down.
I want to make a moving man in css/html/javascript, also detect collisions with other objects. Any idea how to do it? or any pointers to the same will do great.
The first try is look at rapahel js project it uses canvas, second it is a pretty hard thing to do as you want your own physics engine at 2 D level, but i guess with some math formulas you could do it, but everything that you need as an object should be scripted in js to be sure to get the collision effect.
Some design patterns should help you to make your code better.
Good luck.
Pretty much any basic game tutorial covers the topics you asked.
If you can't find a javascript version of that, just get anything in a language you are familiar and try to code the same thing in javascript.
to draw things somewhat in the same way these tutorials probably do, use a div with "position:relative" and its children with "position:absolute" and use "top" and "left" css style proprieties to position the boxes/sprites/whatever.
I am pretty sure you can figure out what to do if you follow these tips.