Teaching with CodeCosmos
This is the continuation to Why I made CodeCosmos and How I built CodeCosmos. If you’re interested in why I bothered to do this, or the technical details of the app, start there. This post is about my experience using CodeCosmos to teach an intro coding class.
Prologue
It does not suffice to hone your own intellect (that will join you in your grave), you must teach others how to hone theirs.
E.W. Dijkstra (@DijkstraQuotes)
I’ve been doing some research on CS education since I left Facebook last year. I took some Coursera courses, read some books1, started curating @DijkstraQuotes (after discovering the EWD Archive), and started chatting about education with friends and new people I’d meet. I had no real experience teaching anyone other than myself, and no expertise in any other facet of education.
I attended EG 7 back in April and met Cat Crumpler2. She’s the COO of The College Initiative, a non-profit after school program that prepares disadvantaged students for life after high school and ensures that they have the opportunity to attend and graduate from college. A few weeks later she asked me to come teach their students how to code. I was certainly not prepared to actually teach at this point and was very much hesitant at first, but she was persistent and eventually succeeded in convincing me to do it. The rationale was that it would be a good opportunity for the students even if I wasn’t great at teaching. I really just didn’t have a good enough excuse not to do it.
So… I had less than two months to come up with some kind of lesson plan to teach a computer lab full of students. I had no prior experience teaching and the students had no prior experience with coding. I settled on the premise that I would just try and inspire the students to want to learn more about programming. I hypothesized that the best way to do that was to leave the formal Computer Science out of it. I wanted to give them a fun project-based learning environment where they would essentially be teaching themselves. I’d also spend a bit of the time we had on videos to give the students some background on why coding is awesome with some historical context. A bit more about that process is in the previous two posts: Why I made CodeCosmos and How I built CodeCosmos.
Monday
I arrived at Lee Senior High School about two hours before class,
tired3, but
thinking that I had plenty of time to prepare the day’s lesson. I did not.
The school did not have working internet that day, and I wasn’t well
prepared for that scenario. When doing local development I used
python -mSimpleHTTPServer to serve the files, but I was horrified
when I discovered that it only works when the internet is
up4!
I didn’t have the luxury of cellular
coverage5,
so solving these problems had to be done with my jet-lagged brain and
whatever I could find on my laptop. Fortunately I had Erlang
installed and mochiweb available to get a static file webserver up really
quickly. This doesn’t actually involve writing any code or configuring
anything, since the template does this out of the box. CouchDB and the
other code I needed to make it work was also on my laptop. The biggest
snag was that I needed to fiddle with some CouchDB configuration to
enable CORS and permit the Authorization header. Unfortunately I didn’t
take good notes on how I did that with IrisCouch, but fortunately I
remembered where to look in couch_httpd_cors.erl to deduce it.
I was well prepared with the videos. I had “cached” the m4v files I planned to play because I wanted to have high quality versions regardless of the school’s bandwidth. This turned out to be especially important because the school’s connectivity was sub-par even when the internet was working. They also blocked all of the sites that the videos were hosted from, so I would’ve had a bad time if I did not have a local copy of the videos.
I showed code.org’s “What most schools don’t teach” first. I think this
video really resonated with the students, especially what Chris Bosh had
to say. Since that video shared a lot of stories about how other coders
got their start, I shared one of me circa 1992 “showing the kids what a
computer with OS/2 can do”. Mind you, I was about 11 at the time. There was
a bit of Q&A afterwards with the sort of questions that you might expect:
“how much do programmers make”,
“how do you get a job at one of these companies”, and my favorite was something
along the lines of “how does programming actually benefit society”. I can
certainly see why they would ask that kind of
question6 after
watching that video.
The challenge for the first day was simple, use Processing to draw your name or initials using lines. I showed them how to get on CodeCosmos by having them point their browser to my laptop’s IP address, stepped them through how the UI works, and pointed them at some built-in example code that draws “LINE” using the line method of Processing.js. The goal was to get them familiar with a bit of JavaScript syntax, the coordinate system, and accustomed to playing around rather than following step by step instructions. Some students finished quickly went ahead and played with some of the other examples that I had prepared, others decided to go further with the challenge. One student spelled out her entire name. That was a lot of lines!
Note that I did not take the time to explain anything at all about programming or CS. I wanted to show them that they could discover it for themselves. Remixing code that I typed in from the back of magazines, books, or downloaded from BBS’s was how I started.
After most of them were well on their way, I showed them a trick that would make it easier to compose drawings: they could apply an affine transform to each group of drawing commands, so that they could easily copy and paste a letter and change one point rather than N. I didn’t explain the linear algebra or even call it an affine transform, I just hand-waved a bit and said that the pushMatrix() and popMatrix() business was like managing a stack of playing cards7, and calling translate() was rougly equivalent to moving the paper that you’re drawing to before you start drawing.
Post-class festivities included dinner & drinks at Alchemy in Memphis. Highly recommend it if you ever find yourself in the neighborhood! Everything there was great, especially the shrimp & grits and the bread pudding. I spent some time thinking about what to prepare for Tuesday, but didn’t do a very good job sleeping or preparing a coherent lesson plan.
Tuesday
On Tuesday I started off class with The Art of Creative Coding.
I wanted to show them the amazing stuff that’s at the intersection of art,
design and software development using similar software and techniques to what
we’re doing in class.
The challenge for the day was to draw the Olympic Rings with code. In my sleep-deprived stupor I made the rookie mistake of not doing the challenge first myself to ensure that I showed the students everything they needed to know in order to be successful. I thought I had covered all of the bases by showing them a little bit about how the RGB colorspace works with stroke() and fill(), and how to use arc() (including a refresher on radians and the unit circle).
The goals were to familiarize them with drawing order, colors, and how to solve a tricky problem, since the rings overlap in a way that requires a non-obvious solution. Since I hadn’t solved this myself, I failed to realize that the functions I had showed them were necessary but not sufficient to put together a simple solution to this challenge.
After a while struggling with that problem, I moved on to something I thought would be easier and a little more exciting. I had them play with the time-based animation example and the new challenge was to get it to ping-pong back and forth instead of just moving from left to right. I showed them how the sin() function can be used to do this, since it is periodic. Before I had showed them the trick, one student put together a clever solution that used a divide somewhere that had a similar effect (with a much more erratic speed). A few of the students had a lot of fun trying other functions to control the movement, and others decided to change what was being drawn.
After class we went to Jim Neely’s Interstate Barbecue in Memphis, which was awesome. I’m not normally a big fan of the sweet Memphis-style BBQ, but this was delicious. I highly recommend it8! That night I worked out the Olympic Rings challenge myself and discovered what was missed and got some much needed rest.
Wednesday
On Wednesday I showed videos on Ada Lovelace, Alan Turing, and The Electronic Coach to give the students some more background on the the early history of programming and computer science. I also showed Challenges of Getting to Mars: Curiosity’s Seven Minutes of Terror to show them that coding is used to do some truly awesome things. I was lucky enough to have toured JPL recently9 so I was well prepared to answer the questions that they had about Curiosity’s mission.
I started off by showing the class how strokeWeight() makes it much easier to solve Olympic rings challenge, and had them go ahead and take a second shot at it. The students really seemed to enjoy being able to solve a problem they struggled with the day before.
After most of the students had solved the Olympic Rings challenge we moved on to a simple Physics simulation. I walked them through making a ball bounce at the bottom of the screen (using Euler integration) and their challenge was to make the ball also bounce off the sides of the screen. None of them had any exposure to Physics or Calculus before, so we didn’t have any deep discussions about the formulas, but most of them were very successful in implementing it even though the equations and the use of conditionals were new to them.
After class we went to Clarksdale, MS for pizza and the Ground Zero Blues Club. We didn’t run into Morgan Freeman10.
Thursday
On Thursday we watched A Day in the Life of a Computer Programmer to see what programming propaganda looked like in the early 90s, Coding with Notch to watch a game developer work, Graffiti Meets the Digital Age to throw in a bit of counterculture via the Graffiti Research Lab, and a short clip of Donald Knuth’s My Advice to Young People mostly just to see if anyone recognized him from The Electronic Coach.
The first half of class was spent playing with fractals and recursion. I gave them a Sierpinski Triangle example to play with, and their challenge was to figure out how to make it colorful. The tricky part here is that there’s no obvious index variable that they could use to choose a color.
Most of the students discovered that they could change the colors at each point of recursion, which generally ended up with a nice tri-color pattern. A few also discovered that the coordinates of the triangle could be used to make a gradient. Several of them went a little nuts with it and made some very cool looking designs!
One of the most common questions I was asked during this assignment, after they changed the fill color, was “how do I change the color of the white triangles?” It wasn’t obvious to all of them that the “white triangles” were the negative space, where no drawing took place.
After the fractal challenge, I gave them a final assignment: use CodeCosmos to make a design to be printed on custom a t-shirt or poster, and I’d get it shipped out to them if they finish. This is open-ended, I wanted them to be able to continue to work on this at home, so I’ll be following up with them over the next couple weeks.
After class we went to Fat Baby’s Catfish House in Cleveland, MS. I have never eaten so much catfish in my life. It was fantastic, even the bread had catfish in it11!
Friday
The last videos we watched were Apple’s Making a difference. One app at a time. and MAYA Design’s Trillions. I think Apple’s video does a great job at showing how the work that programmers do can very directly improve quality of life for others. I think Trillions does a good job presenting some of today’s computing challenges at a very high level.
I spent the last day trying to have short one-on-one conversations with all of the students while they worked on their final assignments. I gave each of them my card, made it clear to them that I’d be happy to help them out if they contact me, and chatted briefly about what they liked and what I could improve on in the next course. Nearly all of the students suggested that there ought to be some built-in reference material in the app, so that’s high on my list for next time.
I brought several books12 with me each day for the class (and myself) to use for reference and inspiration. Some of the students seemed to enjoy them, so I decided to raffle them off to anyone in the class who was interested. Six of the students signed up, so I put together a little program at the end to use the PRNG in JavaScript to do random selection without replacement from the list of students. One lucky student chose my copy of The Nature of Code, and she was very excited to learn that it was a signed by the author, Daniel Shiffman, who we had seen in The Art of Creative Coding. I didn’t want the two students who “lost” the raffle to go home disappointed, so I told them that they could choose from any of the books and I’d have it shipped to them. Both of the students took me up on that offer and received their books last week.
I received a really fantastic thank you card from the students, and many of them included me in their shout-outs13, which made it all totally worthwhile. We also did a group photo outside the school.
That night the staff celebrated in Memphis. We had some drinks on a rooftop bar at sunset, enjoyed a nice dinner, and then checked out some of the Beale street festivities. Not really my scene, but it was worth checking out.
Epilogue
I sent the TCI 2013 scholars a follow-up email with some information about how to submit their t-shirt project, what they learned, and where they can learn more. After finishing this post I’ll be figuring out how to get high quality output out of their code, and where to get them printed. My tentative plan is to use Spreadshirt or Custom Ink but I’d be interested to hear about other options.
After all that business I’ll get back to hacking! There’s some housekeeping to do, such as migrating to Rackspace Cloud, and after that there’s just a ton of refactoring, testing, writing docs, submitting patches upstream, fixing bugs, making it work cross-browser and on tablets, etc.
If you’re interested in using CodeCosmos, having me speak about it somewhere, or even having me teach a class, I’m definitely open to that sort of thing. I’m based in San Francisco, but willing to travel just about anywhere for the right reasons (especially if it’s not out-of-pocket). Just get in touch!