Practice 2: Moiré pattern

Posted: Wednesday, September 9.

A moiré pattern is an optical effect where unusual patterns emerge out of overlaying one regular pattern atop another. Moiré patterns arise in many real-life scenarios. One prominent example is in image reduction. The images at right illustrate: First, you see a segment of a photograph, which pictures a shirt with a conservative pattern of narrow vertical stripes. Next, though, you see an attempt at reducing that photograph, in which the pattern on the man's shirt suddenly appears rather gaudy (and a bit psychadelic). The odd pattern in the reduced photograph arises from sampling every other pixel from the original image.

One of the simplest moiré patterns emerges from drawing several nested circles, each just slightly bigger than the last. To generate the below picture, I wrote a program to draw several circles around the same center, each having a radius of 3 pixels more than the last. As you can see, the diagonals appear to have a strange pattern of curves pointing toward the center.

The nested-circles moiré effect is even more striking when one nested-circle patterns floats over another: The two patterns interfere in varying ways. The resulting animation is fairly mesmerizing.

Your assignment is to produce such an animation. You should create one fixed group of nested circles, and then create a GCompound containing several other nested circles, which bounce around together over the fixed group. (Too many circles can stretch the capacity of the acm.graphics package beyond its breaking point. I found having 100 nested circles in my fixed group and 30 in my moving group was manageable.) We haven't seen how to get something to bounce something around the window yet, but you can just use the below code, which assumes the bouncing item is named ball.

int dx = 1;
int dy = 1;
while(true) {
    this.pause(50);
    ball.move(dx, dy);
    if(ball.getX() < 0 || ball.getX() + ball.getWidth() > getWidth()) {
        dx = -dx;
    }
    if(ball.getY() < 0 || ball.getY() + ball.getHeight() > getHeight()) {
        dy = -dy;
    }
}

Note that as you create your GCompound, you should make it so that the outer boundary of the GCompound has its upper left corner at (0, 0). Otherwise, the object will seem to bounce off invisible walls that don't match the window's walls.