I'm Morgan McGuire ( |
| Safari Match open source game using codeheart.js |
We began with physical activities. We then moved to a pen and paper exercise and then to programming in TurtleScript. Finally, we talked about some of the big ideas in computer science and saw some examples of games in codeheart.js that my college students wrote in their first semester of programming.
Normally, I record video of my public talks and guest lectures to share online. Because this session was with small children, that would not have been appropriate. Instead, I'm sharing my classroom notes for the content through this article. The actual computer didn't come out until 45 minutes into the session.
Introduction
Does anybody know what kind of toys these are?
 |
| Skylanders is a trademark of Activision. Artwork copyright 2016 Activision. |
When I'm not playing with toys, I teach computer science at Williams College. I also make special effects for video games and movies. The most recent two games I worked on were Project Rocket Golfing for iPhone...and the Skylanders series (by Activision). Which is why I collect Skylanders, even though I'm a grownup.
Computers
A computer is a machine made out of wires that runs on electricity. But you can't see the wires because they are really small. Well, and they are inside of the box.Most machines do one thing well. A backhoe digs holes. A refrigerator keeps food cool. A pencil sharpener...sharpens pencils.
Computers are strange machines because they don't actually do anything. Left on its own, a computer just sits there. It needs an app to tell it what to do.
Computers are also strange because they can do everything. By running different apps, they can become different kinds of machines. This makes them very special. Imagine if you had a shape-changing vehicle that could be a truck or a race car or a boat. That's what computers do when you change apps.
You're thinking, "a computer can't do everything." It can't drive like a car, for example. But actually, there are computers inside of your car, your microwave, your phone, and pretty much every other complicated machine today. So, they really can do everything. They just need the right box, and sometimes that box is shaped like a car or an airplane.
Programming
You can build apps by programming (also called coding, app development, and software development). It is easy to get started with. We're going to do it today, starting in about two minutes.Programming is a new math that uses everything you already know from math: addition, subtraction, multiplication, division, and more. The neat thing is that you don’t have to do the arithmetic yourself. You just figure out the way to set up the problem and then the computer solves it for you.
Programming is also a kind of writing. In a regular story, you write words to make your imaginary characters do things. If you write in a story, "The princess went to the top of the castle," then you made an instruction for the reader to know that the princess is moving. When programming, you write words to make the computer do things. These can be drawing on the screen, making sounds, sending messages across the internet, and...you guessed it, a lot of the things you ask the computer to do are also math.
Math, writing, and programming have something else in common. They work best when you make a rough draft. Don't expect to get any of these perfect on the first try. Get your ideas out and then try to make them better later.
Teacher-Bot
A program is like a recipe. It is a series of precise instructions. If you follow the instructions exactly, then at the end, you'll get the cake or whatever you were supposed to be making. |
| An actual robot. Due to budget cuts, we only have me pretending to be a robot. |
I want to put my Skylanders away in my backpack over there. Now, if you're talking to a regular person, you can just say "put your toys away." But when you're programming, you have to spell out every step. Move forward. Turn right 90 degrees. Pick up the toy...and so on.
I'm going into robot mode now. When I'm in robot mode, I only understand the following commands:
- FORWARD 100 - I take a normal step
- RIGHT 90 - I turn to my right
- LEFT 90 - I turn to my left
- PICK UP - I pick up one toy in front of me
- DROP - I drop my one toy
You can shout these instructions at me and I'll follow them. You need to get me to move these toys into the backpack. If everybody shouted at once, I'd probably go crazy and short out. So, let's take turns by going around the room, starting with...you. Each person can say one command, and then it is the next person's turn. Let's go!
Dinosaur Drawing
I'm back in regular teacher mode now. You did a good job of programming me. Even for a simple task, it was challenging, but you figured it out. I was a little worried when you had me spinning in circles and when you drove me into the wall, but nobody said that life was easy for robots!Now we're going to do something more complicated. For a more complicated shape, it is easier if you can look down on me from above. Well, not me, because then you'd be on the ceiling. So we'll program toy dinosaurs instead.
Everybody take a sheet of paper and a dinosaur. There are some insects and other animals in there if you like those better than dinosaurs. You'll need a pencil, too.
The dinosaur-bots are like teacher-bots, but they have different instructions. They also tow the pencil around. Dino-bot can draw shapes by making movements and dragging the pencil.
You write the dino-bot instructions like this:
- fd(100) - Move one dinosaur-length forward
- bk(100) - Move one donosaur-length back
- rt(90) - Turn to the dinosaur's right
- lt(90) - Turn to the dinosaur's left
- pu() - "Pencil up" ... stop drawing
- pd() - "Pencil down" ... start drawing again
I know that I'm spelling "forward 100" in a funny way, but that is one of the fun parts of writing code. It is, well, code. As in, a secret code language.
You write symbols and numbers in a way that people who don't know programming can't understand. (For the TurtleScript code scheme, you use the first and last letter of each instruction word...except for the pencil commands, where you use the first letter of each of two words.)
Start with the dinosaur in the center of your paper, facing towards the top of the page. Hold your pencil right at its behind. The pencil is "down" for drawing at the start.
I'm going to read off some commands. You have to make the dinosaur follow the commands to draw a picture on your paper. Here we go:
fd(100) rt(90) pu() fd(100) pd() rt(90) fd(100) rt(90) fd(100)What letter did you draw? It should be a capital "U", done in kind of a boxy way.
Ok, now flip your paper over. Each table is going to be a team that works together.
 |
| An Hour of Code at another school. |
Here's your first challenge. I want you to make commands for drawing a capital "L".
...
One of the neat things about your solutions is that there is creativity. Everybody solved the puzzle in a different way. Here was one solution:
lt(90) fd(100) rt(90) fd(100) fd(100)
Raise your hand if this was your solution, too. See, I checked them all, and everyone got it right...but nobody else did it exactly this way.
Now, switch roles. Pick a new person to be the computer and a new person to be the app. Here's a harder program to write: draw a capital "E".
...
My name starts with "M". You can't draw "M" without diagonals. But when we turn, we always make a right angle. You probably guessed that the "90" in "rt(90)" was the number of degrees. If you turn "rt(45)", then you can make a smaller angle. And you can take a smaller step by saying "fd(50)" instead of "fd(100)".
This is going to get annoying to draw on paper if we have to measure the angles and keep track of the distances. I wish we had a machine that could do drawing for us if we gave it really good instructions...
Computer Drawing
Well, let's type in an app. Before we tackle "M", Can someone remind me how to draw an "L"?
fd(200) bk(200) rt(90) fd(100)
Let's run it on the computer...hey, that looks good. Notice that the animal on the computer isn't a dinosaur, it is a turtle.
Do you see the blue and red text at the top and bottom of my program? That's other special code that we haven't talked about. It tells the computer that we're going to be drawing. That line of code is always the same, so I didn't mention it earlier. I just copied it off the web page.
Ok, let me show you the code for one way of drawing an "E", which I already typed in:
fd(200) rt(90) fd(100) bk(100) lt(90) bk(100) rt(90) fd(100) bk(100) lt(90) bk(100) rt(90) fd(100)
That was really fast. I can slow the turtle down to make it easier to see what it is doing by putting setSpeed(0.1) in front of my program.
And now, I'm going to show you how to make an "M":
fd(200) rt(135) fd(100) lt(90) fd(100) rt(135) fd(200)
I told the turtle to turn 135 degrees. That's because 135 is 90 plus 45. So, I'm making the turtle turn one and a half times as far as a right angle in order to go down into the valley of the "M".
Star
Now let's really go crazy. We're going to draw a five-pointed star. That has a lot of angles. We're also going to make it a color. |
| Mixing colored lights in a science experiment |
For example, if you want to make the star yellow, then you mix a lot of red and a lot of green. With paint, that would make dark brown. Brown is the same color as yellow, it is just darker. So, both paint and light are giving us the same place on the rainbow. But with paint you get the dark version and with light you get the dark version. If we wanted brown on a computer then we'd still use red and green, just a lot less. Then the natural black of the screen will make the yellow turn dark...into brown.
That's the background. We'll just draw the star in black outlines first, and then color it later.
To draw the star, we need to know the sides and the angles. Let's make the sides 350 long, because that will about fill the page. That was easy.
To figure out the angles, we need to think about geometry...and turning.
When I turned 90 degrees, I went from forwards to sideways. That's like the corner of a square. How far do I turn to go all of the way around and come back where I started?
Right, if you turn 360 degrees, then you're back where you've started.
A square has four corners. If we walk around a square and come back to where we started, then all of the turns we made added up to 360 degrees. This works for any shape. In a square, there are four turns. 90 times 4 equals 360, so each corner of the square must be 90 degrees.
There are five points on the star. To go around five sides, you have to turn 360 degrees / 5 = 72 degrees each time. Let's write a program that does fd(350) rt(72) five times.
Hmm, that's actually a pentagon, not a star. This is a good start, though. The center of a star is a pentagon. Let's think about what makes the points work.
Each point of the star is a triangle with two sides that have the same length and then a shorter base.
Does anyone know the name for a triangle with two sides of the same length?
Correct! It is an isosceles triangle.
The interior angles of a triangle sum to 180 degrees. So, that last turn at the sharp corners of the star is 180 degrees - 72 degrees - 72 degrees = 36 degrees.
One more step. We now know that the triangle's interior angles are 72, 72, and 36 degrees. But the turtle only makes turns when it is moving. It doesn't directly spin around interior or exterior angles. A turn is 180 degrees minus the angle you want the lines at. So, the turn that the angle makes at the point of a star is actually 180 degrees - 36 degrees = 144 degrees.
Now, putting that all together, we can draw the star:
clear(VIOLET) fd(350) rt(144) fd(350) lt(72) // End of the first point //... and just repeat that five times.
Oh, the star is rotated a little bit relative to the page. Let's start rotated by half a turn to fix that: rt(36 / 2).
Somebody noticed that I put little notes in the program. That's so that I don't get confused by my own coded instructions. When I want to write a note, I just type two slashes and then write whatever I want. The computer knows that is a note to myself and not an instruction. It just ignores that. We call these notes "comments."
Loops
I'll show you one last trick. Instead of repeating the same code five times, we can just make the app automatically repeat. We make a variable to keep track of how many times we've repeated, and then tell the app to keep drawing star points until the variable has counted up to five.To make a variable, I write: var count
Then, I set the count to zero: count = 0
The code that I want to repeat gets stuck inside of curly braces, and I write the condition at the top. I also have to remember to change the counter every time that it processes these instructions:
while (count < 5) {
fd(350)
rt(144)
fd(350)
lt(72)
count = count + 1
}
That last line of code is really strange if you're used to regular non-computer math. How can count be equal to itself plus one? Well, that isn't an equal sign in programming. It is an assignment instruction. That instruction tells the computer to cross out whatever value it thought that "count" had and replace it with a new value that is one bigger. Then, we test to see if it is five yet...if not, we keep going.
This is pretty advanced. I don't expect anyone to follow it, I just wanted you to know that there are some tricky moves you can make to avoid having to cut and paste your code too much.Here's the really cool part: there are lots of other secret tricks, but you don't need me to tell you about them. You can look at any TurtleScript program and see the code for it. So, you can read my example programs on the website. You can also share programs with your friends by email and they can read the code to see how you did it.
In the Chrome web browser, just push the View menu at the top, and then Developer, and then View Source to see a TurtleScript program. There are related buttons in other web browsers.
More Examples
Here are some examples from the TurtleScript web site.Hey, you know how to make a star, so you could make the stars example already yourself. It just has a lot of stars. Did you notice that they're in a different place every time that I load the web page? That's because you can use a random number in a command. Instead of "forward 100", I used "forward random" for that. It is like rolling dice to figure out how far to move.
I used the same trick to draw the mountains in front of the sunset. I turned the turtle by a random amount to make different jagged mountains each time.Do you remember how I slowed down the turtle to make it easier to watch as it was drawing? You can also make it faster. For the spaceship example, I made the turtle infinitely fast. It draws the whole screen instantly. Then, I make it wait. I then have the turtle draw a slightly different picture. It does this 30 times every second. Like a flip book, when all of these images come on screen quickly, you see it as an animation.
This is pretty much how we make video games like Rocket Golfing and Skylanders. There are artists who draw the shapes. Programmers take the shapes as a bunch of triangles and figure out how to draw them with code. We make a lot of pictures every second, and then write more core to make the objects move. So, if you spent the summer working on TurtleScript, you could be ready to make video games pretty soon.Here are some examples of games that my students and I have been making using Javascript, which is just like TurtleScript but with extra instructions. Here are some more that are specifically designed for learning to program games. In fact, Project Rocket Golfing is written using Javascript. So, you could go from making letters all of the way to video games for your phone using the same tools we just learned. But we'll save that for another day!
You can take this handout home and have your parents help you get set up writing your own programs at home this summer if you want. Just send me email if you need help. Two good projects to start with are making more letters, so that you can spell your name, and making flags for different countries.You've been a terrific class, thank you for inviting me here and working so hard today. I'm impressed with how much you learned and with the programs that you've written. Give yourselves a hand!
Followup Handout: Learn to Code this Summer
I teach computer science at Williams College and develop special effects for video games and movies. Today I visited class to talk about computer programming and share some of the programming activities our family enjoys at home. These are the modern versions of how I first learned about programming by making art and video games in the 1980s.
In class we used TurtleScript (https://codeheart.williams.edu/turtle). This is a free tool that I made for learning programming through art. It introduces the popular Javascript language in an accessible and motivating way. The website provides some more information about how you can use it at home on any Mac, PC, or Chromebook.
TurtleScript is a special version of the codeheart.js (https://codeheart.williams.edu) tool that my Williams students use to create video games. After a summer of experimentation in TurtleScript, codeheart.js is a great next step.
TurtleScript is for self-guided exploration. Below are a list of some other great resources if you're ready for a more structured approach to learning programming.
—Morgan McGuire
Online Elementary School Courses
Code.org is a nonprofit that supports free programming education. It was created by large companies like Facebook, Google, and Disney and has drawn support from diverse celebrities including Angela Bassett, President Obama, JR Hildebrand, Bill Gates, and Nas.
Hour of Code (https://code.org/learn is their online tutorial for helping students get comfortable with computer programming. It uses friendly and familiar content such as Disney's Frozen, Minecraft, and Star Wars.
If you like that, you then can go through their three 20 hour courses online during the summer at https://studio.code.org/. Start with Course 2, and try to work in sessions of about an hour each day. There is also an accelerated version for students with very strong math and reading skills.
This is my #1 recommendation for elementary school students building programming literacy at home.
Other Online Courses
Khan Academy's Intro to JS: Drawing & Animation free online course (https://www.khanacademy.org/computing/computer-programming/programming) uses ideas similar to TurtleScript. Compared to the Code.org course, it has more formal structure and moves faster, but it is not tailored to elementary-school students.
Udacity's Programming Foundations with Python free online course (https://www.udacity.com/course/programming-foundations-with-python–ud036) is structured more like an advanced high school or college course on programming. It would be appropriate for an older sibling or parent.
Books
If you prefer to learn from a book instead of an online course, here are some that I recommend. These are ideal for a middle school or high school student, but a highly-motivated elementary school student might enjoy them as well.
A Byte of Python (http://python.swaroopch.com/ is free online. It is a friendly introduction to programming that eliminates some of the big ideas from a traditional computer science book to get you moving more quickly.
Introduction to Computer Science Using Python (http://amzn.to/1TZUmLa costs about $30 used. It covers everything that we teach in the first year of computer science courses at Williams College with a really great structure.
Morgan McGuire (@morgan3d) is a professor at Williams College, a researcher at NVIDIA, and a professional game developer. His most recent games are Project Rocket Golfing for iOS and the Skylanders series for consoles. He is the author of the Graphics Codex, an essential reference for computer graphics now available in iOS and Web Editions.