Teaching a One-Day Workshop
If you only have an hour, you can do the hour of code, which covers the basics of coding. This can be an awesome way to introduce students to computer science, but it doesn’t leave them with a ton of workable knowledge that they can actually do anything with. That’s not the point of the hour of code.
But if you have a few more hours, then you can include more examples in the lessons. More importantly, you can give students more time to work on their own projects (with help from you and optional lab helpers). The best way to learn how to code is by sitting down and coding, just like the best way to learn how to throw a basketball is by throwing a basketball, and the best way to learn how to draw is by drawing. Practice makes perfect.
With that in mind, I’d split the day up into two parts:
Part One: Lecture
I’d spend the first half of the day going over these topics, in this order:
(Note: All of the programs and examples mentioned below are available in the links to the respective tutorials. I wouldn’t try to completely cover every tutorial. Instead, I’d shoot for an extended version of the Hour of Code tutorial.)
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.
Using Variables - Now that you have an example program, show them 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.
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 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!
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.
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.
With any remaining time in this half, I’d let students play around, ask questions, and show off any interesting twists they added to the example programs. If they haven’t had computers in front of them yet, get them to the lab portion as soon as possible- they’re probably itching to write some code!
Part Two: Lab
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 if at all possible, your one-day workshop should include some lab time where each student has their own computer.
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. Some examples could be:
Take the smiley face example and make it look more realistic, or like oen of your favorite characters. Have the face make different faces depending on where the mouse is or when the user clicks.
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.
Expand on the simple drawing example. Make it more creative! For example, maybe add grass wherever the mouse is, and add flowers whenever the user clicks.
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 lab, 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.