David Chandler's Journal of Java Web and Mobile Development

  • David M. Chandler

    Web app developer since 1994 and Google Cloud Platform Instructor now residing in Colorado. Besides tech, I enjoy landscape photography and share my work at ColoradoPhoto.gallery.

  • Subscribe

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 224 other followers
  • Sleepless Nights…

    April 2011
    S M T W T F S
  • Blog Stats

    • 1,036,245 hits

Archive for April, 2011

Fun with GWT Canvas

Posted by David Chandler on April 29, 2011

One of the things that drew me into programming as a kid was writing simple 2D graphics programs (if you wanted a graphing calculator in those days, you had to write your own). I still remember how excited I was when my junior high math teacher let me write a program on the department’s one and only Apple IIe to graph the rose equation r = cos (nθ). In those days, it took many seconds to draw the figure on screen, which left ample time to reflect on why the number of “petals” on the rose was 2n for even values of n but only n for odd values…

At any rate, one of the reasons I preferred the Apple IIe to my TI-99/4A at home was that the latter had only bitmapped graphics using 8×8 cells, whereas the Apple IIe screen was pixel addressable in a standard x,y grid, just like the 2D canvas in HTML5, which, along with the GWT Canvas wrapper, arrived just in time for the high school Java programming class I’m teaching this year.

My class and I set out to draw equations in polar form but I got carried away when a friend suggested I draw an epitrochoid (it’s the shape of a Wankel engine, thanks for asking). The end result, which uses GWT Canvas and Scheduler (was Timer) may remind you of another childhood toy, but this one doesn’t make any mistakes when the gears slip.


The animation technique used in this demo (as well as the GWT Canvas demo which inspired it) is to obtain a “back” canvas object which is never attached to the DOM. It’s simply never added to the widget hierarchy like the “front” canvas. The rose figure is drawn on the back canvas and accumulates its shape with each frame. The wheels and lines are drawn on the front canvas. To draw each frame, we

  1. Clear the attached (“front”) canvas
  2. Copy the image from the unattached (“back”) canvas forward using Canvas.drawImage()
  3. Draw the wheel / line on the attached (“front”) canvas

The rest is just high school math.

If it runs slowly for you, shrink your browser, as the canvas copy operation take noticeably longer for large canvases. It’s also noticeably faster in Chrome than Firefox, and won’t work in IE until GWT 2.3 (due any day now) adds IE9 support.

If you’re curious about the source, you can find it here:


Drawing a line with GWT Canvas seems a bit more complicated than it should be, but that’s not GWT’s fault, as it’s just a thin wrapper for the HTML5 Canvas API.

      back.moveTo(lastX, lastY);
      back.lineTo(tx, ty);

Drawing circles is actually slightly easier because you don’t have to moveTo() the origin first.

        front.arc(wx, wy, Math.abs(r), 0, PI2);

Oh! I created the GWT color picker using GWT Canvas, too. It’s very compact (no image download) and uses minimal memory because the RGB color values are cleverly (if I do say so myself) mapped to x,y coordinates using the modulus operator. I love math, I really do.


Posted in Google Web Toolkit | 8 Comments »


Posted by David Chandler on April 13, 2011

A long-time friend now working on his PhD in physics recently wrote me about some MATLAB coding he was doing and noted that

I’ve begun to get the right results and it’s making me pretty happy. It’s been too long since I coded…

I found this alarming, as it indicates he may be in the early stages of HTCD, Happiness Through Coding Disorder. Haven’t heard of it? I’m not surprised, as I just made it up, but perhaps you’ll recognize the symptoms:

Patient’s manipulation of computing apparatus results in the perception of progress and activation of pleasure centers in the brain. Even though no physical work has been accomplished nor the expenditure of energy moving a mass from one location to another, patient believes that he has been working, or in some cases that the computing apparatus has been working for him. The patient’s satisfaction with perceived work accomplishments may lead to increasing withdrawal from social contact as well as temporary failure to complete daily activities such as personal hygiene, sleeping, and even eating. Extended periods of computational exposure known as “coding” may lead to harmful changes in lifestyle and constant preoccupation with the behavior of the computing apparatus. Some patients have been known to sit fixated in front of the monitor for 7 to 14 hours moving only the muscles of their fingertips in order to produce imperceptible changes in machine behavior. These sessions are often punctuated by short periods of euphoria during which the patient appears otherwise normal, albeit socially awkward due to frequent references to the behavior of the machine.

I have lived with (note: NOT “suffered with”) HTCD since age 14 when I first taught myself BASIC programming on a friend’s TRS-80 Model I. By the time I wrote a word processor in assembly language in high school for the TI-99/4A (in order to correct the impedance mismatch between my 40-column screen and 80-column dot matrix printer so I could turn in a nicely-formatted essay for a contest), my HTCD was already quite advanced. Thankfully, I have experienced minimal physical deterioration thanks to the techniques and devices discussed in the Ergonomics category on this blog. The effect on my career has been very positive though rocky at times. Also very fortunately, my wife and children are quite understanding of my condition.

As time progresses, I hope we can learn more about HTCD so we can transmit it successfully to the next generation. I worry sometimes that the Facebook generation gets more joy out of using computers than programming them (or more pleasure from playing games than writing them), which is clearly a distortion of the human-computer relationship.

Happy Coding!

Posted in Art of Programming, Ergonomics | 1 Comment »

%d bloggers like this: