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.

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,
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.

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.

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.

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!

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.

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!

Of course, she was not the only awesome person that I met at EG! Also, Cat is terrible at Twitter. Her LinkedIn profile is more interesting. How sad is that?
↩

I really had a heck of a time actually getting to Memphis. There are no direct
flights from any airport in the SF bay area. And well, there was a plane crash
at SFO the day before I needed to depart from that same airport. My departing
flight was canceled. I barely managed to get there on time, but only because I
have a fantastic travel agent and I was willing to sacrifice sleep to, and throw
money at, this problem.
↩

Python's SimpleHTTPServer is a minimal wrapper over BaseHTTPServer, which logs
every request to the console. The stupid part is that it does a synchronous
reverse DNS lookup so that it looks prettier. This is even dumber than you
might think, since reverse DNS is often out of sync with reality. Logging the
IP address as-is (or nothing at all) would make a heck of a lot more sense for
such a low-level library! Remember kids: friends don't let friends use network
servers from the Python standard library. If you're using Python, the best
of breed solution is Twisted. If you
have Twisted installed, you can run a much better web server with
`twistd -n web --path . --port 8000`. I didn't even think of this solution
at the time.
↩

Neither AT&T nor Clear (Sprint) have any sort of coverage in that building.
I could've gone to the parking lot to get a bar or two. That would not have
been very efficient!
↩

Some of these companies and people are doing good, but that's not
really their primary focus… except for Bill Gates, who is a hell of a
philantropist these days. Sadly, that's not really the first thing that comes
to mind when most people think of Bill Gates.
↩

The students were all very familiar with playing cards, because a large number
of them would play Camps every day at lunch. From what I understand, Camps is
a regional variation of Kent.
↩

I also tried the one at Memphis International Airport because it was near
my gate and my flight was delayed. It's better than most airport food, but
as you might expect, it pales in comparison to the real thing.
↩

The tour of JPL was thanks to Dan Goods,
who I also met at EG7. It was really amazing, and I highly recommend
visiting JPL if you ever get the chance!
↩