Codekids Lesson 3

Circles

In the last lesson, you learned how to open a window, color it, and make dots. Now, it's time to learn how to make a circle. In processing, the word for circle is ellipse.

Your Fifth Program

Start up Processing and copy this code into the program:

size(400, 400);
background(0,0,0);
noStroke();
smooth();
fill(80,60,180);
ellipse(200,200,150,150);

You should see something like the purple circle above.

The ellipse(); command has 4 numbers:

1. How far over (x) you want the middle of the circle
2. How far down (y) you want the middle of the circle
3. How wide you want it
4. How tall you want it

Hack your program

Go into the code and change the numbers in the ellipse(); command. Make circles that are big, small, wide, and tall. Change the numbers in the fill(); command to change the color. Add more ellipse(); commands (before the fill command) to make more circles.

Bullseye

Now save your fifth program with a new name ("bullseye" might be good), and try to make a picture like this:

If you create something cool, copy it out of Processing and email it to me!

Here are some of the pictures we made from dots and circles last year:

Dot Picture, by Tessa

Water Bullseye, by Tessa

Rainbow Bullseye, by Meghan

Line of Dots, by Georgia

Go back to the home page.