Processing: Revival of the Java Applet?

The Java Applet caused a lot of hype in the mid 90s when some people believed it would become the standard for interactive content on the web. It never happened. Some will claim this is because M$ shipped a buggy implementation. The simple truth is that designers design the web, and Adobe Flash created a very designer-friendly interface. Java Applets are Java programs and you need to be a programmer to write one. It was a completely inaccessible technology from the design side.

Arguably, the race is still on for the next-generation rich-media platform: M$’s Silverlight and SUN’s JavaFX being two new entries. It seems that even SUN have laid Java Applets to death. But recently our team stumbled upon a fantastic project called Processing which is aimed at designers who aren’t scared of a little bit of programming. There is an integrated IDE and although you feel like you’re writing pseudocode, you’re actually writing a simple version of Java (which gets compiled to an applet). For some great examples, see Processing monsters.

At xmas, our team (ThinkTank Maths) wanted to create a mathematics-inspired holiday message. After much thought, we came up with the idea of a repeating wallpaper pattern based on the recipient’s name, perhaps using a Langton’s Ant. The next challenge was to create an implementation. One of our team whipped up a Processing implementation in a few hours. Read on to see our applet, and the clean code Processing encourages…

Click the applet to restart and try using your name. For the very observant among you, you’ll notice that our xmas card wasn’t a Java Applet. Unfortunately, although Processing seems to finally be what Applets should have been from the start, Internet Explorer does not have the Java plugin by default and we opted to go for a static image served up from a Servlet to ensure that all our readers could see it. Processing was able to convert to produce Java that enabled this without too much trouble. That says it all really… Java Applets are still dead.

Code is available below.

int w = 480, h = 320;
color bg = 255;
LangtonsAnt ant1, ant2, ant3;
 
void setup() {
  size(w, h);
  background(bg);
 
  String text = param("text");
  if (text == null || text.length() == 0)
    text = "ThinkTank Maths";
  Random r = new Random(text.hashCode());
  int x = r.nextInt(w);
  int y = r.nextInt(h);
  ant1 = new LangtonsAnt(LangtonsAnt.NORTH, 0xCC0065C6, x, y, w, h);
  x = r.nextInt(w);
  y = r.nextInt(h);  
  ant2 = new LangtonsAnt(LangtonsAnt.SOUTH, 0xCC46A4FF, x, y, w, h);
  x = r.nextInt(w);
  y = r.nextInt(h);
  ant3 = new LangtonsAnt(LangtonsAnt.WEST, 0xCCB6B8B9, x, y, w, h);
}
 
void draw(){
  for (int i = 0; i < 100; i++) {
      int x = ant1.x;
      int y = ant1.y;
      color existing = get(x, y);
      color updated = ant1.drawAndMove(existing, bg);
      set(x, y, updated);
      x = ant2.x;
      y = ant2.y;
      existing = get(x, y);
      updated = ant2.drawAndMove(existing, bg);
      set(x, y, updated);
      x = ant3.x;
      y = ant3.y;
      existing = get(x, y);
      updated = ant3.drawAndMove(existing, bg);
      set(x, y, updated);
  }
}
 
void mousePressed() {
 setup();
}

and the accompanying

class LangtonsAnt {
 
  /** Compass direction, uses JDK 1.4 so no enums */
  static final int NORTH = 1;
  static final int EAST = 2;
  static final int SOUTH = 3;
  static final int WEST = 4;
 
  int d, x, y, w, h;
  color c;
 
  LangtonsAnt(int d, color c, int x, int y, int w, int h) {
    this.d = d;
    this.c = c;
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
  }
 
  /**
   * Given the existing colour at this square, apply the movement rules and return the new colour to use.
   * @param existing rgb colour of square
   * @param bg colour of squares
   * @return the new colour
   */
  public color drawAndMove(color existing, color bg) {
    int updated;
    if (existing == bg) {
      turnR();
      updated = c;
    } 
    else {
      turnL();
      updated = bg;
    }
    // keep within the world
    if (x >= w || x < 0)
      x = (x + w) % w;
    if (y >= h || y < 0)
      y = (y + h) % h;
    return updated;
  }
 
  // turn the ant left and adjusts the position by moving the ant forward one pixel
  void turnL() {
    switch (d) {
    case NORTH:
      x--;
      d = WEST;
      break;
    case EAST:
      y--;
      d = NORTH;
      break;
    case SOUTH:
      x++;
      d = EAST;
      break;
    case WEST:
      y++;
      d = SOUTH;
    }
  }
 
  // turn the ant right and adjusts the position by moving the ant forward one pixel
  void turnR() {
    switch (d) {
    case NORTH:
      x++;
      d = EAST;
      break;
    case EAST:
      y++;
      d = SOUTH;
      break;
    case SOUTH:
      x--;
      d = WEST;
      break;
    case WEST:
      y--;
      d = NORTH;
    }
  }
}