circular shapes

(Co)sine functions are also used to draw circular shapes. This is done using the following function:

In the case where radius = 1, we get something that looks like this:

//----------------------------
// variables
int centerX;
int centerY;
int radius = 50;

//----------------------------
void setup() {
  // set up the applet
  size(300, 300);
  smooth();
  frameRate(30);
  noCursor();
  stroke(0); 
}

//----------------------------
void draw() {
  background(255);

  // draw a circle manually
  fill(#176C21);
  centerX = width/4;
  centerY = height/2;
  beginShape();
  for (int i=0; i < 360; i += 1) {
    float offsetX = radius * cos(radians(i));
    float offsetY = radius * sin(radians(i));
    vertex(centerX + offsetX, centerY + offsetY);
  }
  endShape();

  // draw a circle using the built-in function
  fill(#1E2995);
  centerX = width*3/4;
  centerY = height/2;
  ellipse(centerX, centerY, radius*2, radius*2);
}

The circles sketch shows how to draw a circle manually in code, but this is sort of pointless because the ellipse() function does a much better job. However, it helps us understand how to draw a circular shape, and we can modify this code to get more interesting results, like the following fuzz balls.

//----------------------------
// variables
int radius = 40;

//----------------------------
void setup() {
  // set up the applet
  size(300, 300);
  smooth();
  frameRate(30);
  noCursor();
  stroke(0); 
}

//----------------------------
void draw() {
  background(255);

  // draw the fuzz ball on the left
  fuzzBall(width/4, height/2);

  // draw the line ball on the right
  lineBall(width*3/4, height/2);
}

//----------------------------
void lineBall(int centerX, int centerY) {
  // draw lines in a circle from the center
  stroke(#1E2995);
  noFill();
  for (int i=0; i < 360; i += 1) {
    float offsetX = random(radius-5, radius+5) * cos(radians(i));
    float offsetY = random(radius-5, radius+5) * sin(radians(i));
    line(centerX, centerY, centerX + offsetX, centerY + offsetY);
  }

  // draw some eyes
  stroke(0);
  fill(255);
  ellipse(centerX - radius/3, centerY - radius/2, radius/2, radius/2);
  ellipse(centerX + radius/3, centerY - radius/2, radius/2, radius/2);
  fill(0);
  ellipse(centerX - radius*5/12, centerY - radius/2, radius/4, radius/4);
  ellipse(centerX + radius/4, centerY - radius/2, radius/4, radius/4);
}

//----------------------------
void fuzzBall(int centerX, int centerY) {
  // draw lines in a circle around the center
  fill(#176C21);
  stroke(0);
  beginShape();
  for (int i=0; i < 360; i += 5) {
    float offsetX = random(radius-5, radius+5) * cos(radians(i));
    float offsetY = random(radius-5, radius+5) * sin(radians(i));
    vertex(centerX + offsetX, centerY + offsetY);
  }
  endShape();

  // draw some eyes
  fill(255);
  ellipse(centerX - radius/3, centerY - radius/2, radius/2, radius/2);
  ellipse(centerX + radius/3, centerY - radius/2, radius/2, radius/2);
  fill(0);
  ellipse(centerX - radius/4, centerY - radius/2, radius/4, radius/4);
  ellipse(centerX + radius*5/12, centerY - radius/2, radius/4, radius/4);
}				

Math For Artists Who Now Need to Program

Elie Zananiri
ITP DriveBy
1 Oct 2008