So what's this?

What you are currently looking at is a simulation of an ecosystem written in Javascript (it's currently 'closed' source!) using the Canvas 2D API as its rendering engine.

The ecosystem does not contain many components yet, neither does it include any nonliving, physical components. The current living components being simulated are the growth of grass (the green rectangles) and optional herbivores (the blue circles) interacting with each other (grouping and reproduction).

In the future there will definitely be more components like carnivores hunting down the herbivores, the requirement of water for living beings et cetera. For now, its just a lot of grass with optional herbivores grazing around.

By who?

Me! (Elias Zerrouq) Comments, suggestions and/or questions can be addressed to . My inspiration came from this guy.

How does it work?

Grass starts at a very light color. The stronger the color, the more food the herbivores can obtain from it. As soon as a grass instance reaches its maximum food capacity it stops growing and starts to rot.

Herbivores don't do much more than walking around, consuming grass and looking around for other herbivores for the purpose of grouping together. As soon as a herbivore reaches a certain variable age and has another herbivore around, they will have hot steamy sex a child.

If a herbivore eats rotten grass it may become sick. A sick herbivore requires more grass at a faster pace to survive until it is cured (which happens over time).

What can I do?

The big rectangle is the zoomed view (1:22) of the global view found in the small rectangle. The zoomed view can be altered by moving the red bordered rectangle in the global view around with the mouse (left click) or the keyboard (left, right, up & down).

By pressing s the engine will try to add 20 herbivores to the simulation at the position of the zoomed view. r resets the simulation, p pauses it and c continues the simulation if it's paused.

Have fun!

Last update: 05/21/2011



  • [s]: Spawn 20 herbivores
  • [r]: Reset the simulation
  • [p]: Pause the simulation
  • [c]: Continue the simulation
  • [up]: Move zoomed view up
  • [down]: Move zoomed view down
  • [left]: Move zoomed view left
  • [right]: Move zoomed view right
  • [left click]: Move zoomed view


  • Herbivores alive: 0
    • Spawned: 0
    • Born: 0
    • Sick: 0
      • Cured: 0
      • Died: 0
  • Grass availiable: 40000
    • Rotten: 0 (0%)
  • C2A Draw Calls: ...
  • Frames: ...