Creative coding for learners: tools and resources for inspiring beginner coders

Introduction - Code can be (but isn't always) poetry

We’ve talked previously about some of the different tools out there for learning to code, but a lot of these exist to teach programming as part of a Computer Science curriculum.

But learning to code can also open up whole new worlds of creative opportunities.

And this aspect often gets lost in the wash. This creative potential of coding is particularly important to remember when we want to inspire young people and other new learners. Not everyone has the same interests and will engage with programming (and Computer Science) in the same way. Using one pathway for learners risks leaving people behind.

Creative coding tools often get overlooked as learning options, particularly if they're not designed solely as a beginner tool. But there are some really good options out there that go beyond the more linear or rote learning approaches while also demonstrating the creative side of coding.

Let’s look at some different examples that put this idea into action. And to demonstrate what we mean, we’ve included some workshop prompts at the end to help inspire your own learning or workshop activities.

Create visual art with code

There are a few different coding tools and languages that have been developed primarily for art and artists. Processing is perhaps the best known example. It’s a programming language and IDE for the visual arts.

Though initially developed as ‘a software sketchbook and to teach programming fundamentals within a visual context’, Processing has continued to evolve into a development tool suitable for professional visual and new media artists.

But Processing (and the community that sprung up around it) have also inspired the development of lots of other creative programming tools and communities, such as Arduino and p5.js.

P5.js creative coding tool screenshot
Using P5.js in Thimble

p5.js is a Javascript reimagining of Processing, designed to ‘make coding accessible for artists, designers, educators and beginners’. You can use it to create art, visualisations, music and plenty more.

When you visit the p5.js website, you can see a getting started guide, lots of examples and tutorials. But there are a number of ways you can use p5.js as part of a coding workshop too. you can use the online editor for p5.js or use it within other coding or text editors.

Here, for example, is our starter demo for using p5.js in Thimble, an online code editor developed by Mozilla for teaching and learning about creating websites.

More inspiration

You can’t really go wrong with "Coding Train" videos (available on YouTube and via http://thecodingtrain.com/). Daniel Shiffman has both a hilarious and very engaging approach to teaching about creative coding using tools like p5-js and Processing.

There's also the Khan Academy Hour of Code module on drawing with code (using Processing-js).

Tell interactive stories with code

You can also write code to create interactive stories and text-based games.

Twine is a tool that was developed for writing interactive fiction. You can use it to create non-linear, Choose Your Own Adventure-type stories.

It has a simple online editor that lets you create stories by adding ‘passages’ that link together.

But you can also set different pathways for the reader and add interactivity elements to the story. And this is where it starts to introduce some programming concepts like Variables and Objects and If Statements.

Twine uses its own standalone language which is easy to learn. It compiles into HTML files which means its easy to share and open up Twine stories and games in the browser. You also have the option to add CSS to style your story and Javascript for additional functionality.

There are also macros, bits of ready-made code, to add particular functionality available.

Twine screenshot
Twine 2.0 - using Javascript and CSS

To see what's possible with Twine, check out Candy Quest 3: Edge of Sweetness.

And, for a friendly welcome, you can get started here https://twinery.org/2/#!/welcome

You can even combine storytelling coding tools with other maker activities. For example, here's a guide to using the Micro:bit to generate Story prompts.

Compose music with code

Sonic Pi is a composition tool using code, a 'new kind of instrument'. It’s something we’ve written about before but that’s because we’re big fans of Sonic Pi and its potential as a creative learning tool.

For anyone who’s interested in music and looking to pick up some coding skills as well, Sonic Pi is a live synth tool that lets you write notes, use samples, add beats and compose music live using a ruby-based programming language.

It comes installed by default on the Raspberry Pi (hence the name) but is also now available for Mac, Windows and other Linux incarnations.

But Sonic Pi is certainly not the only music coding game in town. As well as creating visual art with P5.js, you can also use it to code music using the Sound Library.

Other creative coding resources for inspiration

Made with Code is a Google project that aims to get more girls interested in coding and is specifically designed for teen girls. They have an impressive array of projects that demonstrate some of the different and more creative applications of coding, including creating your own gifs and emojis, drumming, dance visualisation and music mixing.

The music mixer project, for example, prompts learners to create their own music track in 1 of 6 genres with code. Made with Code uses Blockly, Google’s drag and drop visual programming language that’s also used by code.org and MIT’s App Inventor so it’s easy to get started with.

Another great place to start with Made with Code is the PARTY KIT (available to download from https://www.madewithcode.com/community/). You can use it to host a Made with Code party or as a basis for your own education resources and events.

Creative coding prompts for learn-to-code workshops

If you’re running a learn-to-code workshop, here are some ideas for workshop activities that you can use to help inspire learners and introduce creative coding.

Coding workshop challenge #1

Create your first generative artwork with Processing or P5.js

Coding workshop challenge #2

Draw a monster using code in p5.js

Coding workshop challenge #3

Prototype a wearable device using the Micro:bit #####Coding workshop challenge #4 Write your own Choose Your Own Adventure-style Mystery in Twine

Coding workshop challenge #5

Learn to code the melody from your favourite song using Sonic Pi


These are just some of the possible tools and activities you can use to inspire learners and start coding creatively.

If you've got other suggestions, feel free to share them in the comments.

Next Post Previous Post

Find out more about our work

Visit the 'Our Work' page to find out more about our latest work, including web applications, installations and training.