home / blog

Scrolling waterfalls in HTML5

A number of technical domains use scrolling data displays, like the COTS octopus-760 sonar system.

A typical implementation would involve a cyclic buffer (BufferedImage, pixmap etc) and two paint operations for efficiency. The means data can be inserted cheaply without the need to move the existing data.

For example, this is what a cyclic buffer of size 3 would look at each stage, as lines of data {A,B,C,D,E,F,G} are received.

. . C C C F F
. B B B E E E
A A A D D D G
Time ===>

So we can paint directly from the cyclic buffer into the main image. First we paint from {insert pos..buffer end}, and then the wrapped section {start pos .. insert pos}. The wrapped section will not occur until the buffer has “overflowed”.

So our painted image looks like this, giving the illusion of scrolling.

A B C D E F G
. A B C D E F
. . A B C D E
Time ===>

So all that boring background info over, can we implement using HTML canvas tag. Of course we can.

Here it is http://adamish.com/lab/html5waterfall working, and the code waterfall.js

This wasn’t entirely straightforward to implement. I could not find out how to create an anonymous image primitive to use as a back cyclic buffer. As a workaround I inserted a canvas element with matching dimensions as the “front” buffer, I then obtained the and used it as a source image in the drawImage() operation onto the front context.

So job done. This same technique could be used in HTML5 game programming, random effects etc.

This entry was posted in geek and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published.