processing:compass_example
This is an old revision of the document!
Table of Contents
Compass example
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.
The examples here were developed with Processing 2.0.1. The live examples use Processing.js 1.4.1
A simple compass function
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); }
Sweeping the indicator
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; }
processing/compass_example.1375499523.txt.gz · Last modified: 2013/08/03 03:12 by mithat