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.
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.
I arrived at Lee Senior High School about two hours before class,
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
I didn’t have the luxury of cellular
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.
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.
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.
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.
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.
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.
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.
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!