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);
}