Computer Science Education Week is December 7-13. To mark the occasion, we are launching a new series of Hello World videos covering the basics of computer science. The 10 episodes follow Unique ID, the highly intelligent robot host of The Hello World Program, on adventures exploring a range of topics, from binary to artificial intelligence. The new videos incorporate a wide range of media, from traditional hand-drawn animation and stop-motion to Arduino-powered robots and 3D CG.

Many of our most memorable educational experiences involved hands-on activities. As we developed The Hello World Program, we sought to integrate the crafts we learned as youth, stitching together analog and digital media. Papercraft and programming may seem worlds apart, but the underlying principles of procedural problem-solving, conceptual realization, and critical thinking are the same. Not everyone needs to be a computer scientist, but in this day and age, we think everyone should understand the basics. Our goal is to make the fundamentals of computer science accessible and entertaining to kids of all ages.

We initially set out to produce The Hello World Program entirely with free and open source software, which presented us with a variety of challenges. Not all professional media production software has a FOSS equivalent, requiring a bit of flexibility and ingenuity on our part. We advocate FOSS because it enables anyone of any age, background, or budget to create professional media with minimal equipment and a handful of craft supplies.

From RMS to Aramis

Whether it’s prototyping a puppet or programming a platform, both are iterative processes requiring incremental testing during development. We always start every project with pencil and paper sketches. Here you can see our first design attempts for developing Aramis, one of the stars of Superusers: The Legendary GNU/Linux Show.

After a lot of trial and error, we scan our sketch patterns and import them into Inkscape, where we create a final design. Inkscape provides a user-friendly vector graphics editor for a variety of design situations from print media to websites and animations. It is similar to Adobe Illustrator, only free and open source.

Art + Math = 3D CGI

We consider drawing to be the most important skill a maker needs to know. You don’t have to be good, you just have to do it (but the secret is, the more you do it, the better you get). Even when modeling in 3D, we begin with a sketch. This is BIOS, a new character inspired by the Cheshire Cat and appearing in the forthcoming episode, What’s Inside My Computer?, designed and rendered in Blender. Blender is a remarkably powerful, free and open source 3D modeling and animation program. It can also be used as a video editor and compositor, and even comes equipped with its own game engine. It rivals proprietary 3D animation applications in terms of capabilities, but has a notoriously steep learning curve.

We don’t do all of our sketching with pencil and paper, though. We recently fell in love with Krita. The drawings in our Mighty Boosh-inspired animation are an even split of Krita .pngs and hand-drawn illustrations in marker on vellum, photographed and white-balanced in GIMP. GIMP is easily the most popular FOSS image manipulation program. It is every bit as powerful as Photoshop, but generally requires a few extra steps to achieve the same results Photoshop users can with the click of a button. It can be used as a digital painting canvas, but the excellent Krita is better suited for that.

Puppets: The original robot

For the soon-to-be-released episode, Powers of 2, we designed and built robot puppets (rather than puppet robots), using Arduinos, servos, LEDs, and cardboard. We modeled these robots on Daft Punk and refer to them as “Craft Punk.” We mocked up the heads in Blender and unwrapped, exported, and printed the 3D meshes to trace and cut in cardboard, which we then assembled with a lot of wire and hot glue.

The electronics of each robot are an Arduino, 30 or so LEDS, and two servos, one for the head and one for the hand. The script is relatively simple, consisting of a half-dozen functions combining Arduino basics such as sweeps for the LEDs and servos.

Material design

Our HTML series, Daisy’s Web Development Diary, is a video diary hosted by Daisy the fiery fox, featuring stop-motion papercraft animations. Because building a web page with blocky HTML elements and adjusting the style with CSS is like highly technical digital scrapbooking, the papercraft aesthetic was a natural fit for the series.

Our upcoming programming episode celebrates the amazing Grace Hopper in the form of a stop-motion animated origami grasshopper. After schooling hosts Unique ID and Guido on the human condition, Grace hops through a series of surreal, construction paper landscapes.

These scenes were shot with multiple origami grasshoppers suspended on wire structures that were later masked in Lightworks.

Stop-motion animation mimics the illusion of motion created in videos by staging each and every frame. Because this process is so simple, it is a very accessible medium. You only need a camera and some objects to animate, however your camera must have manual controls for every setting to maintain a consistent exposure. Additionally, lights and a tripod are almost a necessity. Even the slightest change in position, lighting, or exposure will cause a dramatic change in the finished video.

These potential pitfalls of stop-motion animation make traditional hand-drawn animation even more accessible. The only equipment necessary to produce pencil test animations is a scanner and a stack of printer paper. This process is extremely labor intensive, as each frame must be painstakingly drawn by hand.

Digital 2D animation software eliminates the need to create animations frame-by-frame with keyframes that automatically modify elements over time. We use Synfig, a cross-platform FOSS animation studio, to create cutout style animations. Our Synfig animations are a hybrid of digital and analog mediums, incorporating vector graphics created in Inkscape and scanned puppets and textures.

Building your own FOSS toolkit

Everything we have demonstrated is easily accessible to a creative individual. All you really need to make digital animations is access to a computer. If you intend on doing any video production or stop-motion animation, you will need a few more pieces of equipment. We recommend a DSLR camera for the versatility it affords. DSLRs can be used for video, stop-motion animation, and still photography. You can get by without a tripod and lights, but everything will look 200% better with them–even if your “light kit” consists of cheap, hardware store shop lights.

There’s a good chance you already have a decent flatbed scanner built into your printer, so don’t worry about seeking out something better. Scanners are great for capturing textures and drawings for use in digital animations, and can even be repurposed for stop-motion animation.

You may have noticed that we didn’t discuss video editing above. We quickly encountered difficulty finding a professional-grade FOSS NLE and settled on Lightworks, the Academy and Emmy-award-winning video editor, which, while a great package, has yet to live up to its promise of open source. The free version of Lightworks is nearly the same as the pro version, but with considerable limitations on export options. There are a number of free and open source video editors on Linux, but none of them offer the necessary features to make them viable competition.

Engaging education

Visit our site, dototot.com, for tutorials on the topics covered here. Follow us on Twitter @dotototdotcom, like us on Facebook, and sign up for our monthly newsletter. While you’re at it, subscribe to The Hello World Program on YouTube for educational and entertaining adventures exploring the inner workings of computers.