Coordinating Everything

Educator notes

Educator Intro

Chapter Summary

Transcript

Welcome! Remember that in the beginning of every chapter there is an Educator Intro like this which is not visible to the students. In this first chapter the students get familiar with Processing environment. They learn to draw geometric shapes to different locations on their drawing canvas and in the end they'll design their own creature with these shapes. Illustrating things with geometric objects has its limits but it's often a good first step in sketching. It's usually possible to reduce even a complex thing to some kind of regular pattern and model it with a computer. Later students learn to move their creations and duplicate them easily which really shows the advantages of programming visual art. It's also possible to create more abstract atmospheres with shapes like many famous artists have done. You don't need very complex programming tools to produce something like this - it's more about creating the right balance of shape and color. This chapter can also be thought as an introduction to the relation between programming and visual expression - like what is programming about and what are the most fundamental things that a computer needs to produce visual things? Before teaching, it's a good idea to browse through this chapter. See also the Educator Notes in the end of every topic. Those include some pedagogical tips and extra information about the content.

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.

Slides

Plan 1 -Structured Lesson (90 min)

Time to complete	Activity
15 min	Start this module with the slides above. Instruct the Blindfolded Artist -exercise.
15-20 min	Students 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!
5min	A little discussion in the class: any challenges so far?
15-20 min	Students continue with the material and go through the topic Shaping things up.Ask students to speak out if they have challenges!
10 min	Reflection discussion: What haveyou learned until now? Introduction to the Creature-exercise - Show an example result - Give a time-limit: 20 minutes!
20 min	Students 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 complete	Activity
10-15 min	Show 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 min	Go 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.

Transcript

Hi, I'm Mikko from Mehackit! Welcome to learn the basics of art programming. You don't need to know anything about visual arts or programming to start this module. You will learn along the way. But what is this art programming really about? Art and computers may not feel like the most intuitive match at first but think about animations... or games... or audio-visual performances... ...or visuals that interact with people around them. It would be impossible to make all these things without some computer programming. Computers are better than people in some things like following logical procedures or processing large amounts of data and all this is very useful in visual expression too. In this module you're going to use a software called Processing. Processing is a very popular and totally free tool for coding visual things. You just write a couple of lines of code and you can already see the result in front of you! Besides abstract expression it's possible to model physical laws and real-world phenomena with Processing. Don't worry about these command names or numbers just yet. You will get a hang of it. These were all quite advanced projects that I wanted to show you just so you get the idea of what's possible. But I'm sure you would like to start coding yourself. So let's start with the basics. You can click Next below and start making your first program!

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.

If you don’t have Processing installed, download it at https://processing.org/download
You can find detailed installation instructions for Windows, Mac OS X and Linux operating systems at https://processing.org/tutorials/gettingstarted/
In order to proceed, you should have Processing installed.

Your First Visuals

Transcript

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

Transcript

All right, let's see how the commands actually work. Ellipse is one of the most fundamental commands of the Processing language. The first word, ellipse, is the name of the command and the four numbers determine the place and the size of the ellipse. In programming these numbers are called parameters. After the whole command there's a semicolon and almost every line in Processing has to end with a semicolon. And trust me, you will forget quite a few of these from your code in the beginning. But don't stress! Don't be afraid of making mistakes because everyone makes them all the time including the professionals. By writing this line you have actually already made your first program with Processing. Congratulations! Now let's try to change the numbers a little bit. If we first run the code we see that an ellipse appears in the middle of the canvas. But now if we increase the third number the ellipse becomes wider. And if I increase the fourth number also, and run the program the ellipse becomes higher also. So, these two numbers determine the size of the ellipse. But what do the first two numbers actually do? You can test and find out.

Do this

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

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!

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?

In the upper left corner.

In the upper right corner.

In the lower left corner.

In the lower right corner.

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.

https://www.openprocessing.org/sketch/590195

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!

Transcript

It's very easy to make all kinds of shapes in Processing and even the very basic shapes and colors can look like this or this. But how is it possible to know what the right commands are and how to make a drawing canvas bigger? There is always a ton of different commands in programming languages but don't worry, you don't have to remember them by heart. All the basic commands are listed on the Processing website. This page here is called Processing reference and it's a very useful tool. If you search for example ellipse you'll find the documentation of the ellipse command. The first two numbers here determine the x and y coordinates of the ellipse as it's written here and the second two determine the width and height of the ellipse it's written here. Okay let's check out another command. The command triangle draws triangle of course and it has six parameters here. Let's copy the code and run it. Okay so the triangle appeared here. If I increase the last two numbers and run the code, the triangle doesn't even fit the canvas and the canvas looks way too small anyway so let's make it bigger with a new command called size. I run the code. So now the triangle fits here nicely the canvas is much bigger. The first number here is the width of the canvas and the second one is the height. Okay so remember the Processing reference page it's a very useful tool no matter what you're planning to do with Processing and now it's your time to play a bit.

Do this

Try the size-command and at least one other command that you can find on the Processing reference website. https://processing.org/reference/

https://processing.org/reference/

https://processing.org/reference/strokeWeight_.html

What can you do on the Processing Reference website?

Test your Processing code online.

Check what all the different Processing commands do.

Chat with Processing coders around the world

What does the command strokeWeight do? Check the documentation linked below to find out!

It sets the width of the stroke (drawing line).

It changes the color of the stroke (drawing line).

It draws a line.

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.

https://processing.org/reference/