Shaping Things Up

What Shapes Are There?

Do this

Draw the head of a creature by using at least two ellipses and at least one triangle. You can use the rect-command too if you like.

Save your creation and give it a describing name (File > Save As)

Try the code below and answer the multiple-choice question.

size(500, 500); 
ellipse(250, 250, 200, 200); 
rect(130, 200, 300, 80); 
triangle(300, 300, 200, 50, 100, 200);

Try the code above. Which shape appears on the top of the others?

Educator notes

Students should draw the head (or some other part) of a creature. They will continue developing the creature in the exercise included in this chapter. See that they save their work for further use!

Besides creatures, it’s possible to create many other things, like buildings, landscapes, flags, symbols or abstract art.

Activity: Designing your own flag can be a fun challenge for the students. First, you can advise the students to try to draw the flag of your country. Then, they can continue developing their own flag.

Colorful Creations

Source: Wikimedia Commons (link to image)

Source: Wikimedia Commons (link to image)

The picture above illustrates the RGB color model. Red, green, and blue light are added together to produce different colors.

  • If red and green light overlap, the result is yellow. 
    fill(255, 255, 0) // Set the filling color to yellow
  • If blue and red light overlap, the result is magenta.
    fill(255, 0, 255) // Set the filling color to magenta
  • If green and blue light overlap, the result is cyan.
    fill(0, 255, 255) // Set the filling color to cyan
  • If all the colored lights overlap, the result is white. 
    fill(255, 255, 255) // Set the filling color to white. You can do the same with the command "fill(255)"
  • If there's no light, the color is black.
    fill(0, 0, 0) // Set the filling color to black. You can do the same with the command "fill(0)"

Do this

See the code below and answer the multiple-choice questions! 

What is the filling color of the ellipse?
What is the filling color of the triangle?
What is the outline color of the triangle?

Educator notes

RGB is an additive color-model that mixes red, green and blue lights together. Mixing paints of these colors would result in something totally different.

  • fill(255, 255, 255) mixes bright red, bright green and bright blue light together which creates white light.
  • fill(0, 0, 0) is black because if there’s no light, everything is black. There’s a nice tool for choosing colors in Processing. You can find it in Tools > Color Selector. This is explained more in the second chapter of this module.

More information about the RGB color model here:

Activity: Experiment with colored lights in the classroom to have a better understanding of how the RGB color model works.

The Creature


Okay, let's make a creature out of these shapes we've used. I start drawing this funny-looking owl that I have in mind. Maybe the owl will be the main creature of my game later. First I'll add a big ellipse that forms the body of the owl. Like this. Then I'll add two ellipses as the eyes like this. I also need black pupils, so I need to change the color with the fill command. Okay. Okay like this. Then I need a couple of triangles to make the beak and wing for the owl. The beak should be yellow and wing maybe purple. Let's add them. first Okay like this. Then I think sunglasses would suit this space owl perfectly. So I remove the eyeballs and make the eyes totally black At last I want to add toes to the bird and the stripe from down to the beak here. And the temple of the sunglasses is still missing. All of these could be easily done with short black lines so let's see what command could do that. Maybe processing reference could help us with this? Let's have a look. Okay, so here we can find this line command which draws a line. So let's add three of those to the program right here. Okay let's see. Okay some problem over there let's see. Now it should look better maybe. Now it's good. With the command strokeWeight I can also change the weight of the line which serves as toes of the owl. So let's add this. Okay let's see Okay so now the three lines appeared there and we also see that the toes of the owl are now more thick. Now my creature is ready and I'll save the owl project so I can later continue developing it and maybe make it fly for example. So I can save the project from here and let's give it a name space_owl like this. Okay so now it's your turn to make a small creation with ellipses triangles and other shapes of course. Remember to change the colors too.

Do this

Continue with the creature you started developing earlier.

Don’t copy the owl, make something else!

Add at least two colors to the face of the creature!

Educator notes

A common challenge for students is that they are often unable to draw the shapes exactly where they would like to. It takes a lot of time experimenting to be able to localize things with the coordinates. It can cause a feeling of frustration: “Hand drawing would be so much easier!".

It’s true that computers aren’t always the most convenient tool for this kind of drawing. But you can remind the students that they will soon start to make animations in the next chapter - something that computers do really well. And that in order to make animations, you must first learn how to draw static things!

Try to encourage the students to design their own creatures and not just copy the one from the video.

Activity: Before programming any creatures, design the creatures on a paper with a pencil! Advise the students to use common shapes that are easy to replicate with programming commands later on.