The beauty of arcs


I’ve been toying with the arc() function. Arcs are drawn along the outer edge of an ellipse, so you can use them to create parts of a circle. Kind of like pie slices. For some reason arc() was the only 2D primitive I hadn’t used before. Which is a shame, because it can create some pretty nifty visuals.

My first attempt to create a full circle made out of arcs.

Some translate() malfunctions. Both images are still 100% made out of arcs though!😀

Moving to shapes were the rings are more pronounced and intermittent.

The next step,besides a controlled color palette, was a user interface with controlP5.

A better look at the GUI.

The GUI controls the following things:

  • The number of intermittent rings
  • Ring density (how many rings per cluster)
  • The amount of ring decrease (further away from the center means less rings per cluster)
  • A scaler for zooming in and out
  • A random color generator
  • A reset button for everything
  • A reset button only to center the position on the screen
  • A button that turns on/off mouse-position (center point of the shape follows the mouse)
  • A button that turns on/off round strokeCap
  • Two buttons for saving, either to TIF or PDF (by default the GUI is invisible on screenshots)

A final example of a bit of zooming in🙂

* UPDATE 17/01/2012 *
By request (see below), I’m sharing the basic source code for this project. Have fun!

color[] c = {
  color(244,225,211), color(66,66,104), color(204,178,29), color(222,47,44),
  color(146,40,86), color(84,166,66), color(240,117,49), color(110,32,46)
};

int rings = 7;
int ringDensity = 4;
int number = 24;

void setup() {
  size(screen.width,screen.height);
  strokeWeight(13);
  strokeCap(SQUARE);
  noFill();
  smooth();
}

void draw() {
  background(c[0]);
  translate(width/2, height/2);
  for (int h=1; h<(ringDensity*2); h=h+2) {
    for (int i=h; i<(rings*10); i=i+10) {
      for (int j=1; j<number+1; j++) {
        stroke(randomColor(i,j));
        arc(0, 0, i*26, i*26, radians(j*(360/number)), radians((j+1)*(360/number)));
      }
    }
    rotate(radians(7.5));
    for (int i=h+1; i<(rings*10); i=i+10) {
      for (int j=1; j<number+1; j++) {
        stroke(randomColor(i,j));
        arc(0, 0, i*26, i*26, radians(j*(360/number)), radians((j+1)*(360/number)));
      }
    }
  }
}

color randomColor(float i, float j) {
  int colorSelect = int(7.5*abs(sin(i*j*j*j)));
  return c[colorSelect];
}

Two Flickr sets are related to this post:

  1. Arcs
  2. Rings
Comments
2 Responses to “The beauty of arcs”
  1. I’m working on using the Arcs function to create a visualization of your day. Do you have the code for this?

%d bloggers like this: