ping-pong buffering and general graphics performance
performance tool to get a sense of this combination's limitations,
and turned to familiar ground. I decided to create a bench-marking
application that would let me get a sense of the speeds I could attain
with an old-time screen-saver-type algorithm like the Unix
xlock(1) command's many modes.
A survey found that there were some good starting points available.
This derivative of
David Webster's <CANVAS> demo
Lode's Computer Graphics Tutorial
is the resulting application (A work-in-progress). Using the
controls you can explore some of the limits of your browser and
Here are some things I learned and questions I did not find an
answer to while making this example (As of the time of this
writing! Things currently are changing in this realm):
- Some browsers flicker a lot when you are redrawing (opera(1) a
lot; firefox(1) very little, for example). In an attempt to reduce
the flicker I am simulating "double buffering". I am alternating
between two adjacent canvases; with the one being drawn to hidden and
the one last completed visible. This has worked in every browser I
have tried so far. You may compare this to a straight repaint of a
canvas by turning off buffering.
Is there another way to remove flicker, shearing, and tearing in a
much time by CANVAS rendering by turning off the graphics
and buffering and monitoring the "Frames Per Second" (FPS).
- There are surprising performance plateaus on my machine when I reach certain array sizes
- firefox(1) starts putting up alerts about scripts not responding when the graph gets large
- Can I lock up my browser if I make the graphic large? Probably.
- You can make a decent control module pretty quickly with standard elements.
Put your mouse over the brackets and hover and values will
change. Click on the labels and you can input a specific value.
- firefox(1) looks for -- once a comment starts, not -->; try and put this comment in a document : <!-- --------- -->.
The comment stops as soon as the -- is encountered. Apparently, that is according to the standard.
- Using vector graphics how large of a CANVAS can I use as a pseudo-pixmap and still keep up a certain frame rate?
I was surprised how much it depended on the hardware platform on what I thought were very similar platforms.
- Is this drawing being anti-aliased? Is there a way to turn that off?
- Any direct access to the bitmap at the pixel level?
If I make little images and composite them instead of drawing rectangles
(as a hard way to avoid anti-aliasing and do pixel addressing) what happens?
- Several browsers do not return time accurately to more than a one second resolution.
Next time in:
- set a target frame-per-second and do a scaled resize starting at current size until you get the approximate fps. That is, find a "good" size.
- play with circles and lines with thickness instead of rectangles for pixels out of curiosity
- add color palette options and other visual options
- optimize the rendering algorithm. I did not attempt to optimize the rendering algorithm at all
- reinvent the wheel one more time! re-create more effects from the Unix xload(1) screen lock/screen saver or something similar.