Drawing Shapes in Processing
Drawing your first shape
Go ahead and add these lines of code below to the bottom of your code, below the code from the Introduction that initializes the background.
fill(255, 165, 0) rect(200, 100, 200, 100)
Now, your code should now look something like this:
If you run your code now, you should see something like this:
Code Deep Dive
Let’s explore how these two lines of code work a bit more.
rect(200, 100, 200, 100)
What does this first line of code mean?
If you look at the documentation for this function here, you’ll notice that each of the numbers in the parentheses control a different aspect of the rectangle we made.
Specifically in this order:
rect(x, y, width, height)
Which means that:
- x = 200
- y = 100
- width = 200
- height = 100
All of these numbers are what we call in computer science, parameters. We’ll go more in depth on those later, but for now you have a fancy word you can use to impress people at the dinner table.
If you’re confused about the y coordinate, don’t worry – we’ll explain that in a bit.
Note that the x and y start from the upper left corner of the rectangle.
Now how about the first line?
fill(255, 165, 0)
If you didn’t guess already, this line of code controls the color of the rectangle. The fill function (follow the link to learn more about how it works) includes 3 numbers: the red, green and blue value. Each value is a number value between 0 and 255, which determines how much red, green, and blue go into the color.
The fill function fills any shape drawn after (in lines of code under the fill function) in the color specified by the 3 number parameters passed to the function. To use a new color/change color, add another call to the fill function and shapes drawn under it will be filled with the new color.
Processing Coordinate Systems
As you’re looking through all these numbers, if you’ve learned geometry before, the y coordinate might have been a bit confusing.
That’s because in computer coordinates, y increases from top to bottom, meaning that the top of the screen is where y = 0, then the bottom of the screen would be the largest y value.
You can read more about this here if you’re curious. This is a tricky concept, so feel free to talk this through a mentor more until it makes sense.
Practice!
Practice Drawing Shapes
To get more familiar with the coordinate system, go ahead and make some more shapes using rect.
Once you have the handle on that, you can try to add some ellipses and lines as well.
Practice Drawing More Complex Graphics
Here’s an example of a little stick figure you could make and the code that goes with it.
Drawing with Loops
How would you draw something like this?
Exploration
Okay, if you tried to make the example above using only what we learned so far, it might take you hundreds of lines of code.
What if I told you that I was able to make that drawing using only around 4 lines of code?
Do you remember using for loops in Reeborg?
Go ahead and try adding this to your code.
for i in range(10): print(i)
Then you should see the numbers 0-9 in increasing order print out on the bottom of your screen like this:
That’s because when we run the code with the for loop, the i in the for loop will actually be a variable that counts up as it repeats the loop. Go ahead and talk this over with a mentor.
Go ahead and talk through this with a mentor if it doesn’t make sense. Go ahead and try out the following examples in your own code – see if you can predict what will print out before it prints!
for i in range(3, 20): print(i)
for i in range(9): print(i * 5)
Alright, now let’s try something different. What happens if you add this to your code?
fill(0, 0, 255) for x in range(33): ellipse(x * 20, 100, 20, 20)
If you pop that into your code and run it, you should see something like this:
Go ahead and talk with a mentor and see if you can figure out how this is working.
Warm-up Exercises
- Now that you have the code for making a horizontal line of circles, can you make a vertical line of circles?
- Can you make the circles bigger without the circles overlapping?
- Can you draw the circles so there are spaces between them?
Exercises
Exercise 1
See if you can create this:
Exercise 2
See if you can create this:
Hint 1: A nested for loop might be helpful here.
Hint 2: Can you combine code you wrote earlier to draw a horizontal line of repeating shapes and a vertical line of repeating shapes?
Exercise 3
If you want to have some fun, see if you could figure out how to do this?
Hint 1: The random function will be helpful for generating random numbers to use in the fill function to make random colors.
Hint 2: The 3 number parameters in the fill function that control how much red, blue, and green are in a color can be between 0-255.