Shaping Things Up

What Shapes Are There?

Transcript

Later you'll be able to add movement to your projects and also to interact it processing with your keyboard and mouse. But before that it's possible to make artistic compositions even with the basic shapes you've learned to use. Let's start drawing a creature with the basic shapes. I continue with the shapes we've used. So let's put a triangle-command here after the ellipse command and see what happens. But why did the triangle appear on top of the ellipse? That's because the computer executes the code from top down and also draws things in that order. So first I set the size of the canvas here, then I draw an ellipse and only after that I finally draw the triangle. A couple of ellipses more and you may see a creature shaping up. Okay now it's your turn!
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

Transcript

So, how can we add color to the project? There are two basic commands to make things colorful in Processing: fill and stroke. You can use fill to fill shapes with a certain color. If you write fill and three zeros here all the shapes after that turn black. If you write fill 255 plus two zeros all the shapes after that turn red. Fun fact: the three parameters inside the fill command are red green and blue components of the color so it's the famous RGB color model. You can use numbers between 0 and 255 in the fill command. When everything is 0 the color is black and when everything is 255 the color is white. Okay, so let's add a new fill command the program. A triangle is now drawn with a different color. Let's try 0, 255 and 0. Now, remember that the computer reads the program top-down. That is why the ellipse now appears red and the triangle appears green. So we change the color in the middle of the program. The command stroke changes the outlines of the shapes. Add stroke here and the outlines of the shapes turn blue. The outline is now very thin in both of these shapes but we can make it thicker with a command called stroke weight. Now the width of the outlines is 10 pixels. Okay, now it's your turn to make things colorful!
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: https://en.wikipedia.org/wiki/RGB_color_model

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

The Creature

Transcript

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.