Teaching a One-Week Workshop
If you only have an hour or even a day, you can walk through the basics of programming, and you can even give students time to work on projects of their own. But they’re going to need a ton of hand-holding, and they aren’t really going to get the process of programming.
I recommend reading that link, but basically: programming isn’t really about the code. It’s more about the process of breaking a problem down into smaller steps, then taking on those sub-problems one at a time. It’s the process beginning with “I have no idea how to start” then asking “what’s the absolute smallest next thing I know I need to do?” and iterating on smaller steps to work towards the larger goal.
The ability to break problems down into smaller steps is the single most important skill in programming, and it’s the hardest skill to teach. The only way to learn it is by doing it, just like the only way to learn how to paint is by painting.
With all of that in mind, a week (which I’m assuming is really five days) gives you just enough time to teach the basics and give students time to work through that process a few times. I’d organize the week into 4 mini-versions of the day-long workshop, where each day you spend some time on a topic and then give the students time to work through some assignments that explore each topic, and then I’d do a full lab on the last day.
(Note: All of the programs and examples mentioned below are available in the links to the respective tutorials. If you want help coming up with other examples and projects, please contact me!)
What is programming? - This doesn’t have to be too involved, just define some terms (like “code” and “program”) and talk about how code tells computers what to do. Point out some cool projects, and try to include diverse examples. Ask students for examples of stuff created with code.
Calling Functions - Show how functions and arguments work. Draw a circle, move the circle around, resize it, etc. Then talk about the Processing reference and show them how to find new functions. Find the
fill()function and make your circle red. Then have students draw their own circles. And then have them change the color to green!
Then work through an example together by drawing a smiley face. Ask the students for input: how big should the face be? Where should the eyes be located? Try out a bunch of different options and show them that making mistakes is okay! If students have computers in front of them, have them create their own smiley faces.
Then have the students work on their own projects. Here are a few ideas:
Take the smiley face example and make it look more realistic, or like one of your favorite characters.
Draw a scene. This can be a garden scene full of flowers and birds, or a space scene full of aliens and planets, or an underwater scene full of mermaids- be creative! Or draw a scene from one of your favorite books, movies, or video games.
Draw something seasonal. If it’s winter, draw a snowman. If it’s summer, draw a beach scene. If it’s near Halloween, draw a pumpkin. Be creative!
Using Variables - Take the example smiley face program you created on Monday, and show the students what happens when you resize the window (by passing in different arguments to the
size()function). The drawing won’t resize with the window. To fix this, introduce the
heightvariables, and then modify your example program so it automatically resizes based on the window size. Have students modify their programs as well.
Creating Variables - Now that you’ve covered using variables, introduce the idea of creating your own variables. Introduce the
random()function and use variables to draw a random circle. Then apply that to the example by drawing a random smiley face. Have students create their own randomly generated smiley faces. Start out simple by only randomizing one part of the smiley face, like its outer size or its color.
During lab time, students can take their projects from Monday and make them scale with the window size, or they can add randomness to show a different drawing every time. Help students break down their goal into smaller sub-problems. For example, if they want one of the circles in their drawing to be randomly sized, encourage them to test out a simpler sketch that just draws the random circle without anything else. When they get that working, they can add it to their main project.
Creating Functions - This is where things start getting more complicated. I’d stick with just using the
draw()functions for now. This is a bit of a paradigm shift, from giving the computer a list of commands to follow to having the computer run those commands multiple times. So spend some time on this one, and give a bunch of examples. You can take the code you’ve already been working on with the students (such as the randomly generated smiley faces), and move that to be inside the
draw()function- now you’ve got a program that draws 60 smiley faces per second! Show them what happens when you call the
background()function (old frames are cleared) or leave it out (the drawing adds up over time).
Animation - Now that students know how to store variables and write functions, they can create animations by changing variables from the
draw()function. Make a program that shows a ball that falls of the screen. What if we wanted the ball to come back after it falls off the screen? That leads us to…
If Statements- The animation example leads pretty naturally to
ifstatements. Make your ball reappear after it falls off the screen, or make it bounce off the edges. Create a random walker program, or make your smiley face bounce around the screen.
During lab time, have students add animation to their sketches by putting their code inside the
User Input - Now you can combine everything and talk about user input. I’d focus on the
mousePressedvariables. Create a simple drawing program, or make it so the smiley face chases the mouse cursor.
Have the face make different faces depending on where the mouse is or when the user clicks.
Now that students know some basics about coding, the best thing they can do to actually learn how to program is by, well, programming. So I would give them the entire day on Friday to create their final projects.
Let students come up with their own goals, but help them keep it to a manageable scope. Think “I want to draw a scene from Mario Brothers” instead of “I want to make Mario Brothers.” Have a list of starter ideas to help them brainstorm. (See the examples section.)
Have students define a goal at the beggining of the lab, and then spend the lab time working towards that goal. Many of them will have trouble just getting started, and that’s okay! A big part of programming is the process of breaking a problem down into smaller steps and then tackling those smaller steps one at a time, so ask them this: What’s the smallest thing you know you need to do next?
If they don’t have anything yet, then the first thing to do is decide how big the window should be. Then the next thing is to decide what color the background should be. Then draw a very very simple part of what you want to draw. I usually start with a circle. Keep adding pieces, and look stuff up in the reference if you forget exactly how something works.
You might also want to give students access to a library of examples. Processing comes with a bunch of examples, or you could use Happy Coding’s Processing examples.
At the end of the week, have students demonstrate what they’ve developed so far. You might also want to provide a way for them to continue working from home, and point them to the exporting applications or Processing.js tutorials so they can share what they’ve done so far.