Playing with canvases

Playing with the HTML <canvas> tag:

Canvas!

This is a test of rendering a sim map inside AjaxLife using JavaScript. The green markers are people – it does the same same above/below/level thing as the client. The whole thing takes a split second to render on my MacBook. I imagine it’d take longer if I included the missing points (that’s being done at a 64×64 resolution).

Not exactly great, is it? Better than nothing though – still working on it. Anyone happen to know how the client puts the sim images together? ;)

On an unrelated note, I’ll be returning from abroad tomorrow.

2 Responses to “Playing with canvases”


  • Ooh, very tidy.
    Forgive me for not knowing, what are the missing points, would it improve the stepping on the island edge?

  • That’s only sampled the 256x256m area of my sim at a 64×64 resolution – one sample every four metres. If it used the extra points, it should theoretically be much neater. It’d also involve drawing sixteen times as many points and sending sixteen times as much data (unless I just interpolate the missing points client-side).

    I think that due to the nature of the canvas element, drawing sixteen times as many points would take almost exactly sixteen times longer (not counting time to interpolate them if necessary) without any extra memory usage (by the canvas object – if it needs to store sixteen times as many points it could have issues there).

    This image is also rotated 180 degrees – the image I was using to get orientation right turned out to have been rotated. I’ve removed my hack to rotate it 180 degrees and it works properly now.

Leave a Reply