11

I want to make a demo using javascript and <canvas>, I was thinking of doing a little moving creature, seen from the top and swimming in a water environment.

Concept "art" : enter image description here

Is there something I can use to start this project, or do I need to create everything from scratch ?

Manu
  • 4,078
  • 4
  • 37
  • 74

5 Answers5

2

Here's one demo http://code.almeros.com/code-examples/water-effect-canvas/

mrBorna
  • 1,638
  • 16
  • 16
  • And there's a blog post too about it with some explenation about the effect: http://code.almeros.com/water-ripple-canvas-and-javascript – Almer Sep 10 '12 at 08:47
  • @manu You can download and use this water effect on top of your own canvas with animations! – Almer Sep 10 '12 at 08:50
1

http://rumpetroll.com/ is open source and has the kind of movement you could probably modify to do as you wanted

Alex
  • 7,134
  • 1
  • 16
  • 31
  • It depends how water-like you want it. On that demo you can see tadpoles swimming. By the looks of those concepts that is what you're looking to do – Alex Jun 20 '11 at 13:59
1

I'm not sure what exactly do you intend to simulate (or whether I got the conceptual art :) ), but this might be a direction: processing.js is not a physics engine, but rather a graphics library port to javascript (utilizing canvas) - http://processingjs.org/ . However, you might find something in their demos that is similiar to what you are trying to create.

One of the original processing library examples has a nice fluid simulation using a particle system, and it runssuccessfully on processing.js - http://processing.org/learning/topics/fluid.html , however the framerate is very poor. You can try it yourself at http://processingjs.org/learning/ide - just copy&paste the code from the example (and prepare for your computer to crawl to a halt).

You can try to adjust the particle numbers (pnum), to improve speed, and play around with other variables.

Amitay Dobo
  • 1,362
  • 9
  • 11
  • the little critter moves its arms, and it moves forward as if the arms were pushing on water – Manu Jun 24 '11 at 09:04
0

Sorry I don't know of a library, but I did see a water physics in canvas demo recently:

http://hakim.se/experiments/html5/wave/03/

Maybe you can get some inspiration there...you might be able to accomplish it with a normal JS physics library like Box2DJS.

Jon Raasch
  • 3,133
  • 5
  • 28
  • 32
  • The physics she's interested in are quite different from what you're doing. Your animation is from the side, while hers would be a top view. In addition, your physics in the demo are quite primitive and unrealistic, which makes them unlikely to be helpful. – dionyziz Mar 13 '13 at 09:42
-2

Just an idea, but you could search for a Java engine and then use GWT to compile it to Javascript.

Karoly Horvath
  • 88,860
  • 11
  • 107
  • 169