Building with Code

(Written for my pledge for CSEd week Dec 9-15, 2012 )

Building with code

From blocks to Legos to Minecraft - children like to build things. The sixth graders at Los Altos School District (LASD) are now building using code. Yes, they are programming. They are creating art by writing programs in Processing.js, (a JavaScript implementation of the Processing language). They are doing this through the Khan Academy Computer Science platform. Approximately 500 sixth graders at LASD learn computer programming in a weekly program called CSTEM. This required class uses creative and collaborative projects to teach the basics of computer hardware and programming.

The introduction to programming starts with a 'human computer' activity. They execute a small program by hand to draw on graph paper. Working with partners, some students are able to make the drawing. "It is a house!" they shout out, excited about turning these strange lines of code into art. It is not an easy exercise for a sixth grader - understanding the parameters of the functions and then finding co-ordinates on an inverted graph paper (the origin in this graph paper is on the top left) . The struggle of this unfamiliar exercise helps them understand and appreciate program execution.

As you may imagine, the sixth graders are proud when they discover that they executed real programming code. The Processing language in the example they are given is widely used by designers and artists to produce finished work (in fact, programs are called sketches in Processing). It is also used to teach programming at UCLA, RISD, CMU and many universities in the world (see list here). After working through the code by hand, the students are excited to try it on the computer. These initial 3 lines of code and the house they create is below

rect(150,150,200,200);

rect(200,250,50,100);

triangle(150,150,250,50,350,150);

The students then start adding to the program, writing code to create windows, grass, a chimney, and much more. Without further instructions or videos, they use what they have learned about the rectangle function and try it out. Some hesitate, afraid to write their first line of code. Some plan it out carefully, drawing on the graph paper and converting co-ordinates. Others jump in, entering random numbers for the function parameters. They are exploring programming. Will they really be able to write in a line of their own code now? Will it work?

The first successful house structure in the class is celebrated with a shout, followed by a lot of sharing. “What numbers did you use for x and y co-ordinates? I want to draw a chimney on my house, but it is on the wrong side, and now it is in front of the house. Can you tell me what you did?” Experimenting, collaborating and learning together.

After some experimentation, they start asking for more functions - the ellipse function so they can add a moon or a pumpkin (this is done during October and they wanted to decorate their houses), and then of course the lovely 'fill' function to splash on color using RGB values. The house gets painted in brilliant colors, and the excitement grows. The 'fall in love with programming' moment that every computer science teacher hopes for happening right there as houses come up all over the classroom on the computer screens.

Here is an example of the house they make in the first 15 minutes of building with code. (The Khan Academy computer science platform has sliders on the number parameters, and a color picker on the RGB values which makes this much easier)

As the students go out after this first programming class, there is animated discussion on what they will add to the house. And they do. Some sixth grade teachers let them play with code after they have done their other work, and these classes have the most complex houses. Some students spend hours at home; this is their new kind of Minecraft game. From fences to lawns to complete complex structures that look like their real home, they build it carefully with code - one rectangle at a time, one ellipse at a time. They are playing with blocks - blocks of code. They must pick the correct blocks (the functions and parameters) to build what they want. They have to make sure the program statements are placed in the right order to create the structures in the right color or space. (The reader who is a programmer may wonder - do they use variables and loops to make this easier? No, they have not yet learned this, so it is a lot of individual function calls. They are going to really appreciate iteration when they see it later).

Some students go home and code some more, their projects now have 30-50 lines of code. Here is one from Ryan, done during Halloween week. He has used 2 overlapping ellipses to create the crescent and added other details.

Here is one from Jerilyn, note her careful detail on the bricks of the chimney, a lot of rectangle function calls.

Here is a short ( < 1 minute) screencast of Jessica showing her house to the class.This will give you a chance to see the code they wrote.

And then, there are some students who go even further and spend hours. They turn up with projects with many more lines of code and even more complex houses.This one from Richa, looks like her actual house. Each line on the house siding is a rectangle function, it took her a long time!

Here is one from Steven, note his use of multiple ellipse function calls for the clouds, and lines for the sun rays.

(Here is part of the code from Steve's example above)

Of course, it does not have to be a house. They are encouraged to start new programs and they create amazing non-house things, showcasing their creativity with code. Here are some examples of artwork made with rectangle, ellipse, line, triangle, text, and the fill function.

AnneMarie made this witch after her first class.

Ryan made this one, adding in a lot more to the initial house

Jessica spend time making this, each app and text drawn carefully in place.

(Here is part of the code from Jessica's example above)

When you build, you want to share. You want others to appreciate your work. Some students post their projects as soon as they are finished at home on the online classroom on Edmodo. New program posts come in late in the evening, on weekends and holidays as the sixth grade programmers finish their work. Other students wait for the next week's class to showcase their work.

After this project, they learn the best part of programming in Processing - the draw loop. Now, they can create interactive art, and they love it. They start with something very simple in class - drawing circles in a draw loop. Here is the link to the class demo

Some students experiment and go further. In the screencast of a class demo below, this student watched videos or looked at documentation after class so that he could use the 'if' statement. The use of if statements was introduced in the class after his demo. Students like him go beyond what is done in the class. They learn using the videos on the Khan Academy Computer Science site or looking at the examples on the site. Students who have taken summer programming camps or have parents who help at home, create even more complex projects.