Basic Shapes

In this Unit, you'll be creating interactive artwork using Python and the Processing graphics library. Just like Python makes lots of computational things easier, Processing makes creating graphics easy. You just need to know what it can do.

Key Processing Metaphors

Here's a simple template for a Processing program. Just like turtle or any other module, the first thing you do is import processing at the top, using the from <module> import * syntax.

Draw and Setup: Two Special Functions

In addition to this normal import statement, Processing uses two special functions to organize programs.

These two functions are required , not optional. They are called setup and draw. The setup function executes code only once, when the program first runs. So it's where you define the size of the display window and any settings you want to start off with. It's a common place to put the initial values of any of your other variables, too.

However, the draw function is an infinite loop, which executes code repeatedly until the user stops the program. Whatever statements are inside, they will get run again and again with each frame of your program. It's where all the movement and interactivity takes place, and this metaphor allows for some cool tricks.

The first thing is usually to set the background color. The line

creates a black background:

Finally, execute the run() function at the very end of the program:

Without this, nothing will happen when you press Run.

Here's the entire code so far.

Copy all the code from the above example into the editor below and run it. If you get a black square display window, then it's working.

Shapes

Now that you understand the basics, let's draw some shapes. Shapes might seem boring, but realize that computer games and animations, when it comes down to it, are really just putting shapes on a screen: lines, circles, rectangles and so on.

Circle

Let's start small, with a circle.

The developers of Processing wanted to make a graphics library that was intuitive, so what do you need in order to draw a circle? A center and a radius., right? So you'll call the circle function and tell Processing three parameters: the x- and y-coordinates of the center of the circle and its diameter (not its radius!).

In the editor below, add the Processing code to create a 500x500 window in setup, and draw a circle with diameter 55 at the point (56,46) in the draw function.

Rectangle

In order to make a rectangle you pass Processing's rect function four parameters: the x- and y-coordinates of its top left corner and its width and height.

Challenge: Custom Rectangle

Draw a rectangle with width 50 and height 30 at the location (40,60).

Triangle

The triangle function requires six parameters: the x- and y-coordinates of the three vertices.

Line

The line function requires four parameters: the x- and y-coordinates of the endpoints. Drawing a line is different from a 2D shape, because Processing defaults to a black outline. Run the code block below and you'll see a black line drawn on the white screen. Change the endpoints to move the line around.

DIY: Triangle Practice

Draw four triangles (any shape or size) on the screen, like in this example: