Coordinating Everything

Educator notes

Educator Intro

Chapter Summary

Length of the chapter: 1,5 - 3h

  • Adjust the length of the chapter according to the time you have at hand.
  • There are more detailed lesson plans on the next page.

Learning objectives of this chapter

Student learns…

  • … to draw shapes and place them by using coordinates
  • … to change the size of the drawing canvas.
  • … to change the colors of the shapes
  • … to understand how the RGB color model works
  • … how to illustrate visual things with regular shapes (rectangle, triangle, ellipse etc.)
  • … to search for programming instructions on the Processing reference website.
  • … to search for inspiration on the web and to develop ideas based on the findings.
  • … to work actively and independently in the online environment

Slides and Lesson plans

You can use the slides below to introduce this module and especially the first chapter to the students. The slides include an introducing activity called The Blindfolded Artist where students work in groups and instruct each other to draw things blindfolded. The idea of the activity is to make the students think of what kind of instructions a computer needs to draw things.

There’s some Speaker notes in the slides to explain the content to you. To see the Speaker notes, click Settings > Open Speaker notes from the lower panel. There are similar slides in the Educator Intro of every chapter.

Plan 1 -Structured Lesson (90 min)

Time to completeActivity
15 minStart this module with the slides above. Instruct the Blindfolded Artist -exercise.
15-20 minStudents start the first chapter alone or in pairs and go through the topic Coordinating Everything. Ask students to speak out if they have any challenges!
5minA little discussion in the class: any challenges so far?
15-20 minStudents continue with the material and go through the topic Shaping things up.Ask students to speak out if they have challenges!
10 minReflection discussion: What haveyou learned until now?
Introduction to the Creature-exercise
- Show an example result
- Give a time-limit: 20 minutes!
20 minStudents develop the creature. You can end the lesson (or start the next lesson) by going through a couple of creatures the students have made, if they are willing to show them!

Plan 2 - Freely flowing lesson (90 min)

Time to completeActivity
10-15 minShow the learning material with a projector. Set a goal for the first lesson: Complete the first chapter! Show the creature-exercise of the chapter to the students with the projector.

Ask the students to start from the topic Introduction and inspiration and then continue forward to the first chapter. Ask students to speak out if they have any questions.
60 minGo around in the classroom and help students with their challenges.
10 min

Summary and the end of the lesson.
- What did you learn?
- How did you like it?
- What felt most difficult?
- Does someone want to show their work?

Introduction and Inspiration

Below, there’s a video that introduces the whole Art Programming Basics module. How to install Processing and start coding? Check the installation instructions below the videos.

How to Install Processing?

To make all kinds of visual creations, you first need the right software running on your computer. In this module you learn to program using the Processing language, and for that, you need to install a software called Processing IDE. Processing works with Windows, Mac OS X and Linux. 

Your First Visuals


Hi! I am Mikko from Mehackit and I will guide you through this first chapter. Now that you've installed all you need we can dive right in and look at the coding environment. This is the processing IDE. The IDE stands for "Integrated Development Environment" and basically it's an application where you will write all of your code. I'll show you how it works. At the top panel you see a menu with different options. For example the File-menu includes a lot of ready-made examples that you can try out, like this one. Wow, quite a lot of code! It appeared here in the main panel where you will also write all of your programs. You can always test the code by pressing the Run-button from the top left corner. Let's see what this example looks like. Okay there it is. So it opened drawing canvas and you see these 3D-cubes going around there. And the name of the sketch was space junk so that's what this illustrates. When I move my mouse it dives to the center of this so it's interactive. Okay, you'll maybe need a little bit of practice to make projects like this but now let's start with the very basics. So I can close this window now and start making my own first program into this empty coding window. You can already make a shape with a command called "ellipse" and just for numbers. Let's try that one. Okay, now the command is there and I'm going to press the Run-button. The drawing-canvas opened and you can see there's a little white circle. If I add another command below this first one and use a bit different numbers and press the Run-button, there's yet another circle. But it's in a different location and it's a little bit bigger than the first one. But what were all those numbers about? Well I'll explain soon but you before that you can already try things out yourself. Complete your first task which is given under this video and continue forward!

Do this

Change the numbers inside the ellipse-command and see what happens.

Find one cool example from the File menu and run the code. Examine the code a bit.

Educator notes

Your First Visuals

Students can try out whatever they find in the File > Examples menu. Even if they don’t understand how the code works, running the examples will show the possibilities of visual programming. The purpose of browsing the examples is to feed the students’ imagination.

There are usually at least a few understandable words in the code like “ellipse”, “line”, “triangle” or “mouse”. Encourage the students to think about the effects of these commands. E.g. if the program includes a triangle-command, then notice that there triangles in it, and likewise, if mouse is mentioned, then the program reacts to actions of the mouse.

Form Some Circles

Do this
Change the first two numbers in the ellipse-command and answer the questions below.

The bigger the first parameter is, the...
The bigger the second parameter is, the...
Where is the origo point (0, 0) in the drawing canvas? Try to use those numbers as a location for an ellipse and see where the shape appears!

Educator notes

Students get to practice using the ellipse-command. Programming commands include the name of the command and then set parameters inside the parenthesis. The line ends with a semicolon. Often, errors result from mistyping the command or forgetting a symbol (e.g. comma, parenthesis or semicolon).

ellipse(50, 50, 50, 50);

The Coordinate System

In order to draw things in Processing, you’ll first need to understand the coordinate system that determines the locations of everything on your canvas.

In the example below, the grid represents the canvas of your Processing program with a 500 x 500 coordinate system. There is one ellipse on the canvas.

Do this

Move your cursor across the canvas above and see how the numbers change. The numbers represent the x- and y-coordinates of the cursor in the Processing environment.

Answer the questions below!

What is the coordinate point in the upper-right corner?
What is the coordinate point in the upper-left corner?
What is the coordinate point in the lower-left corner?
What are the coordinates of the ellipse?

size(500, 500);
ellipse(500, 0, 30, 30);
Add the two lines of code to Processing and run the program. Where does the ellipse appear?

Educator notes

On this page, there's an interactive coordinate grid made with Open Processing (also linked below). By moving your mouse, you get to see the current x- and y-locations of the cursor. The origo (point 0, 0) is in the upper left corner of the canvas. That can cause some confusion if students are familiar with the coordinate system in math. 

It might be a good idea to save the link to your browser - students may have challenges with the coordinates in the future at which point you can refer to this.

Activity: Draw a canvas on a blackboard. Give a programming command to a student (e.g. ellipse(50, 50, 50, 50)). Then, ask the student to "play the part of a computer" and draw the ellipse on the canvas.

Extra: It's also possible to use negative coordinates as the location for shapes. This might be handy if you only want a certain part of the shape to be visible on the canvas. It's possible to change the location of the origo with the translate command later on.

You Don’t Have to Remember Everything!

What can you do on the Processing Reference website?
What does the command strokeWeight do? Check the documentation linked below to find out!

Educator notes

Besides the triangle-command, students can try e.g. line- and rect-commands. All the commands that draw 2D-shapes are listed on the Processing reference website under the category 2D-primitives.