// Processing.js example by Jim Bumgardnersize(200,200); smooth(); background(255); noStroke(); float diam = width*.9; float cx = width/2; float cy = height/2; float sm_diam = diam/2.0; float sm_rad = sm_diam/2; float cx1 = cx; float cy1 = cy + sm_rad; float cx2 = cx; float cy2 = cy - sm_rad; fill(0); ellipse(cx,cy,diam,diam); fill(255); // we use a white rectangle to blank out half the circle rect(0,0,width/2,height); fill(0); ellipse(cx1,cy1,sm_diam,sm_diam); fill(255); ellipse(cx2,cy2,sm_diam,sm_diam); ellipse(cx1,cy1,sm_diam/3,sm_diam/3); fill(0); ellipse(cx2,cy2,sm_diam/3,sm_diam/3); stroke(0); noFill(); strokeWeight(2); ellipse(cx,cy,diam,diam);

Let's examine the program in detail. First there is some basic set-up stuff. I set the size of the drawing to 200 x 200, turn on smoothing, and paint the background white. I turn off stroking so that the white shapes I draw won't have black outlines around them.

size(200, 200); smooth(); background(255); noStroke();Then I compute the diameter of the outer circle, and its center cordinates, based on the overall width of the drawing. I make it proportional to the width so that if the size() is changed, the figure will resize along with the drawing.

float diam = width*.9; float cx = width/2; float cy = height/2;The final figure contains curves which are based on a circle exactly half the size of the larger circle. Here, I work out the diameter and radius of this smaller circle.

float sm_diam = diam/2.0; float sm_rad = sm_diam/2;Then I work out coordinates for the center of the black and white dots in the figure.

float cx1 = cx; float cy1 = cy + sm_rad; float cx2 = cx; float cy2 = cy - sm_rad;Now I am ready to start drawing. First I draw a large black circle.

fill(0); ellipse(cx,cy,diam,diam);It looks like this:

Then, I paint half the canvas with a white rectangle, to blank out half of the circle.

fill(255); // we use a white rectangle to blank out half the circle rect(0,0,width/2,height);

Then I draw a small black half-sized circle.

fill(0); ellipse(cx1,cy1,sm_diam,sm_diam);

And a small white circle above it.

fill(255); ellipse(cx2,cy2,sm_diam,sm_diam);

Then the small white eye. The fill color is still white, so I don't need to re-specify it. The diameter of the small white eye is 1/3rd that of the half-sized circle (I find a size I liked through experimentation, the figures I've found online vary depending on the artist).

ellipse(cx1,cy1,sm_diam/3,sm_diam/3);

Then the small black eye.

fill(0); ellipse(cx2,cy2,sm_diam/3,sm_diam/3);

Finally, I am ready to draw the circular frame. I use a slightly thicker line thickness of 2 here, because I think it looks nice.

stroke(0); noFill(); strokeWeight(2); ellipse(cx,cy,diam,diam);