4

Essentially, I had this idea in my head for a sort of evolution simulator, not exactly like Conways Game of Life, but the one part where they do match is that they will both be based on a square grid.

Now, personally, I like working in HTML+Javascript+ for simple apps, since it allows fast UI creation, and if you're not doing something computationally heavy, then JS in a browser is a decent platform.

The problem I'm trying to solve right now involves drawing and updating the grid. I might be missing something, but it seems like there is no easy AND computationally light way of doing this for an 80x40 grid. The easy way would be to generate a div with absolute position and a specific background color for any square that is NOT empty. However that can become very slow with anything more than 60-70 colored squares.

I'm definitely willing to switch to a different language if the situation calls for it, but first I just want to know I'm not stupidly missing out on an easy way to do this with HTML+JS.

Answer should include either one of the following:

a) A reasonable way to draw and update a 80x40 grid ( where the squares change color and "move" ) in HTML+JS

b) Another language that can do this reasonably fast. I would prefer to avoid having to spend a few days learning DirectDraw or something of the sort.

HostileFork says dont trust SE
  • 32,904
  • 11
  • 98
  • 167
Rohit Nair
  • 153
  • 1
  • 3

3 Answers3

2

Why not build the grid as an HTML Table? After all this is what you want?

Give each cell a computed id and create some javascript functions to update them. Shoudlnt be a problem at all.

You could look at the new canvas tag in HTML 5 but from what you've said I dont think you need it.

Lewis
  • 5,769
  • 6
  • 30
  • 40
  • I haven't tried the computed table yet, but I figured that having to process 80x40 would be more work than processing the divs for only the colored squares. My browser slowed down on generating my test grid of only half the squares being colored, so I don't know whether it can handle that many table cells. – Rohit Nair Dec 10 '09 at 14:00
  • Never mind. Tried using a table and for some reason, even though there's more HTML being generated, it worked faster. Weird. – Rohit Nair Dec 10 '09 at 14:10
1

<canvas> seems to be the right way to do this. A library like Raphael will help you avoid cross-platform issues. Another options is Processing.js, but it does not work in IE.

Jordan Running
  • 102,619
  • 17
  • 182
  • 182
0

For a small grid (< 100x100), use a table and give each cell an ID for fast access.

For bigger grids, you should consider using a canvas object or embedding an Java or Flash applet.

Aaron Digulla
  • 321,842
  • 108
  • 597
  • 820