Pencil Code

What is Pencil Code?

Pencil Code (pencilcode.net) is a web-based coding platform that lets the end-user code in professional programming languages using either blocks or text. Pencil Code describes itself as "a collaborative programming site for drawing art, playing music, and creating games. It is also a place to experiment with mathematical functions, geometry, graphing, webpages, simulations, and algorithms. Programs are open for all to see and copy."

Pencil Code itself is written in Javascript. However, the student-facing interface in this course employs CoffeeScript. CoffeeScript is an adaptation of Javascript with a vastly simplified syntax. For example, CoffeeScript allows students to omit semicolons at the end of statements and omit parentheses from most function calls.

Like so many Javascript APIs, Pencil Code relies heavily on jQuery. jQuery is a fast, small, and feature-rich JavaScript library. That is, jQuery is a collection of pre-written Javascript which allows for easier development of JavaScript-based applications. jQuery makes things like HTML document traversal and manipulation, event handling, and animation much simpler . Because of Pencil Code's reliance on jQuery, students will encounter and explore many features of jQuery along the way, and thereby develop a foundation in this widely-used coding resource as well.

Why Pencil Code?

Pencil Code's simple front end, including its flexible editor which allows for both block-based and text-based programming, is one of its main attractive features. Pencil Code's web-based graphics focus is also hugely valuable, making it nearly universally engaging to students. Of course, other tools of similar nature do exist. However, good as those resources are, they have some relative drawbacks for the intended audience of this book. For starters, many have a look and feel that seems aimed at younger kids. Pencil Code has a sleek interface that looks a lot more grown up, and hence more appealing to older (i.e., secondary-school-level) students. Additionally, many students have already have an interaction with the alternatives, Scratch in particular.

However, the main benefit of Pencil Code is its use of CoffeeScript. In the first place, this means that students get to enjoy a simplified syntax, rather than struggle with seeking missing semicolons and such. Yet at the same time, students are learning a professional programming language, from the get-go, not a watered down kids version. As students progress, they can delve deeper and deeper into jQuery and CSS and HTML, which are there just under the surface as well, so students can make direct connections to web programming resources as they advance through the PencilCoder curriculum.

The flexibility provided by Pencil Code is capitalized on as students progress through the curriculum. As a result, students are not only learning concepts universal to all programming languages, but directly transferable skills in the triumvirate of languages that comprise the bulk of the pages on the world wide web.

Additional Pencil Code Resources

Pencil Code is an open-source community. As such, students and teachers can find many related resources online. These include:

• Pencil Code Reference, providing online documentation of individual functions and as well as the programming environment.
• Pencil Code: A Programming Primer by David Bau, the creator of Pencil Code, provides scores of coding examples.

Links to a number of additional resources (including lessons and other teacher resources) can be found on the Pencil Code Homepage.