Mithat Konar (the wiki)

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Of Compasses and Randomness ======

{{:processing:processing_compass.png?nolink&100|}}

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.

<WRAP center round info 60%>
The examples here were developed with [[http://processing.org/|Processing 2.0.1]]. The live examples use [[https://s3.amazonaws.com/github/downloads/processing-js/processing-js/processing-1.4.1.min.js|Processing.js 1.4.1]].
</WRAP>

===== A simple compass function =====

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

<code java>
/**
 * 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);
}</code>

===== Sweeping the indicator =====

[[http://mithatkonar.com/processing/compass/compass_sweep/|{{:processing:processing_compass_sweep.png?300}}]]

Here we use the ''drawCompass'' function defined above to sweep the indicator through 360 degrees:
<code java>
/**
 * 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;
}</code>

===== Adding randomness =====

[[http://mithatkonar.com/processing/compass/compass_random/|{{:processing:processing_compass_random.png?300}}]]

A random offset added to a fixed direction can begin to suggest something like blowing wind, which will have small essentially random variations in direction in time over a finite range.

<code java>
/**
 * Compass example:
 * Show due north with random offsets.
 * 
 * Copyright (C) 2013 Mithat Konar
 */

float ang;

void setup() {
  frameRate(30);
  smooth();
  size(400, 300);
  ang = 0;
}

void draw() {
  background(#ffffff);
  
  // draw the compass at "ang" degrees plus or minus 0-4 random degrees
  drawCompass(ang + random(-4.0,4.0), 20, 200, width/2, height/2);
}</code>

===== Refining randomness =====

[[http://mithatkonar.com/processing/compass/compass_random_accumulated/|{{:processing:processing_compass_random_accumulated.png?300}}]]

The offsets in the "Adding randomness" example above appear noticeably more jittery than a true natural process. This is because the random offsets are allowed to jump directly over the entire range that the indicator bounces within.

A random offset process can be smoothed out by //accumulating small random offsets// rather than jumping completely randomly over some range. The small random offsets will average out to zero in the long run, but they will prevent the indicator from jumping too far between any two frames. The downsides are that it's possible for the total offset to temporarily exceed the desired bounds and that sometimes the accumulated offset can become so large that it never seems to return to zero.

<code java>
/**
 * Compass example:
 * Show due north with accumulated random offsets.
 * 
 * Copyright (C) 2013 Mithat Konar
 */

float ang;

void setup() {
  frameRate(30);
  smooth();
  size(400, 300);
  ang = 0;
}

void draw() {
  background(#ffffff);

  // draw the compass
  drawCompass(ang, 20, 200, width/2, height/2);

  // and then add some random offset to the angle for next time
  ang += random(-4.0, 4.0);

  // and wrap around to 360 degrees
  ang %= 360;
}</code>
===== Perlin noise =====

[[http://mithatkonar.com/processing/compass/compass_noise/|{{:processing:processing_compass_noise.png?300}}]]

[[https://en.wikipedia.org/wiki/Perlin_noise|Perlin noise]] is a **mapping function** that was designed to simulate natural random variations. It's called a mapping function because unlike Processing's ''[[http://processing.org/reference/random_.html|random]]'' function, which returns a new random value over a specified range each time you call it, Perlin noise has an input and an output. The input is some point in N-dimensional space, and the output is some value. Every time you invoke a Perlin noise function with the same input, you'll get the same output. If you shift the input slightly, the output value changes, and these changes are very similar to the kinds of changes found in nature.

Processing has a function called ''[[http://processing.org/reference/noise_.html|noise]]'' that implements Perlin noise. We use the one-dimensional version of the ''noise'' function here to determine the offset of the indicator.

<code java>
/**
 * Compass example:
 * Show due north with Perlin noise offset.
 *
 * Copyright (C) 2013 Mithat Konar
 */

float ang;
float noiseOffset;              // noise function's "x-value"
final float NOISESCALE = 0.03;  // amount to move along noise function's
                                // "x-axis" each frame
final float MAXOFFSET = 45;     // the maximum possible generated angle offset

void setup() {
  frameRate(30);
  smooth();
  size(400, 300);
  ang = 0;
  
  // start the noise's "x-value" at some random place 
  noiseOffset = random(0, 1000);
}

void draw() {
  float angleOffset;

  background(#ffffff);
  
  // increment the noise's "x-value" by a small amount
  noiseOffset += NOISESCALE;

  // calculate a noisy angle offset based on noise's "y-value"
  angleOffset = (2*MAXOFFSET) * (noise(noiseOffset)-0.5);
  
  // draw the compass
  drawCompass(ang+angleOffset, 20, 200, width/2, height/2);
}</code>