Cell Simulation in Javascript: Red, Green, and Blue

A little simulation I've programmed in javascript which can be run in the browser.

Simulation preview.

Screenshot of the simulation after a few hours of runtime. The bright red green and blue dots are the different cells. The background shows the distribution of the red green and blue resource which is consumed by the cells.


Red cells eat the red resource and turn it into green and blue resource and waste. Likewise do green and blue cells to complete the circle. Waste turns back into red resource - so nothing is really wasted for long. Cells move toward higher resources preferring their own color to an extent. When they are full, they multiply. When they run empty, they die.

This forms an interesting dynamic. Cells move around alone consuming resources but they also stick together and form large groups. Since the waste diffuses over a larger area, these groups get unstable after some time and multiple levels of reorganization occur. The picture changes between complete calmness with small outbursts in activity and total chaos. This simulation takes some time until a semi-stable state is reached.

Watch for yourself

Lessons learned

  • Javascript

    • Programming in javascript is pretty easy and straightforward.
    • The web provides solutions to many problems with little searching needed.
    • Javascript in modern browsers is very fast.
    • The Web-Console in Firefox is a good help for debugging.
    • A very quick feedback loop is achieved thus allowing solving problems by trial and error.
  • Cell based simulations

    • They are easy to get going.
    • A few parameters can define complex behavior.
    • Fine tuning of parameters takes hours.

Overall this project was a fun lesson.