Pencil Code is a very fun way to teach and learn coding with direct results. The idea is to make coding super visual so that students can immediately see the effects of their code – keeping even younger kids engaged in real-world coding.
The website uses Coffeescript, a professional software language favored by engineers. It straddles the line between being simple to use and complex enough to make real-world creations. Crucially, it’s teaching students a skill they can directly use right away, or later in their studies and career.
Exploration of the website can be done using Javascript, HTML, and CSS, so it’s widely available and should work across most devices.
This is a collaborative programming site, so it’s free to use and open to all to create and share.
What is Pencil Code?
Pencil Code is a collaborative programming website designed to help teach coders how to work with real code to create drawings, music, and games.
Since Pencil Code uses Coffeescript it is relatively easy to get started. Everything is open source and uses turtle graphics functions to create visuals that can help to make the otherwise complex world of code feel a bit more accessible and real for students.
As mentioned, there is an option to switch between codes, allowing students to also work with HTML, Javascript, and CSS. That makes this a very rich resource for learning multiple coding languages.
This isn’t for younger students as it is quite complex. But, of course, it depends on the individual. Some teachers may want to use this as part of a coding class, while others may benefit from setting work on this platform as tasks to be carried out on student time at home.
How does Pencil Code work?
Pencil Code is open source and readily available without any need to sign up or register. That said, it can be helpful to sign up with an account, providing your email address, as a way to save projects and return to at a later date by signing in.
Select from Draw, Jam, or Imagine to start coding images, music, and games right away. In each case you are taken to a screen that is split with helpful blocks along the left that allow you to work on specifics. You are then shown a selection of code blocks that can be lined up with simple drag-and-drops.
On the right is an output screen in which you can hit the play icon and see your coding selection results. Usefully, the code blocks are arranged with sections too, so you can select what you need and then only have the code blocks for that action listed — helping aid learning without being too overwhelming.
The helpful References section at the bottom allows you to select an area, such as Colors, and a pop-up will give you all the color options to select in order to see the right coding letters and numbers for what you want to use.
What are the best Pencil Code features?
Pencil Code is a perfectly placed balance of complexity and simplicity. While this is ‘proper’ coding, it lays that out with sub-sections and guidance on code so you can build even without knowing anything before starting. It’s a bit like learning any language, only with a helpful dictionary to hand and translations easily accessible as you write.
Teacher resources, such as worksheets, can be printed, listing code for use by students. This also offers coding examples so students can glance at printed sheets to reference what they need before entering those code blocks into their creations on the website.
The instant output nature of this setup, which allows you to test the code by hitting play at any point, is a great way to progress. You can immediately see if something doesn’t work so that fixing it becomes a simple part of the creative process.
There is also a sharing platform that allows you to access the shared projects of others, but also for students to share theirs. This is great for ideas but also as a way to give students an opportunity to collaborate and a community feeling, in which they can actively contribute their own creative outputs.
How much does Pencil Code cost?
Pencil Code is an open source project so it is freely available to use right away. If you do want to create more complex projects you will need to sign up for an account that requires an email address. This allows you to save projects as you go and then sign in later for instant access to continue from where you left off.
Usefully, since this is all cloud-based, it can mean working across varying devices — letting students code in class but also on their own devices when they want.
Pencil Code best tips and tricks
Teach math
Teach mathematical concepts such as angles and degrees as students learn to move around the plane to create images digitally.
Get musical
Have students write music and then digitize that song using code so they know how to make audio and well as visual creations with code.
Adventure language
Teach words and language by creating word-based adventure games and interactive stories that others in the class can play.
To share your feedback and ideas on this article, consider joining our Tech & Learning online community here
