The following uses a simple compass to explore how randomness and noise can make representations seem more natural.

The following examples will show you:

• How to make a simple compass.
• How to make it jitter with randomness.
• How to make it jitter with accumulated randomness.
• How to make it jitter with Perlin noise.

You'll not find much description below. I may add some later, but my intent here is just to do a structured code dump.

Throughout all the examples on this page, we will use the following function to implement a simple compass:

/**
 * Draw a compass.
 *
 * @param direction      degrees offset indicated from due north (float)
 * @param indicatorSize  size of the directional indicator in pixels (float)
 * @param faceSize       radius of the compass face in pixels (float)
 * @param x              x-coordinate of the compass (foat)
 * @param y              y-coordinate of the compass (foat)
 * @return void
 */
void drawCompass(float direction, float indicatorSize, float faceSize,
                 float x, float y)
{
  float needle_x, needle_y;
 
  // draw compass face
  fill(#eeeeee);
  stroke(#cccccc);
  strokeWeight(indicatorSize);
  ellipse(x, y, faceSize, faceSize);
 
  // calculate displacements
  direction %= 360.0;
  direction = radians(direction + 90.0);
  needle_x = faceSize/2*cos(direction);
  needle_y = faceSize/2*sin(direction);
 
  // draw the arm
  stroke(#cccccc);
  strokeWeight(1);
  line(x, y, x-needle_x, y-needle_y);
 
  // draw the needle
  fill(#ffffff);
  stroke(#333333);
  ellipse(x-needle_x, y-needle_y, indicatorSize, indicatorSize);
}

Here we use the drawCompass function defined above to sweep the indicator through 360 degrees:

/**
 * Compass example:
 * Sweep the indicator through 360 degrees.
 * 
 * Copyright (C) 2013 Mithat Konar
 */
 
float ang;
 
void setup() {
  frameRate(30);
  size(400, 300);
  smooth();
  ang = 0;
}
 
void draw() {
  background(#ffffff);
 
  // draw the compass
  drawCompass(ang, 20, 200, width/2, height/2);
 
  // and then advance the angle by 1 degree
  ang += 1;
 
  // and wrap around to 360 degrees
  ang %= 360;
}