Make (2023)

In 2023, I created Make, a web app designed for children as young as eight to learn creative coding. Make is used in workshops I run where participants make and print two artworks in two hours using code.

Make Web App Make web app

Participants type in JavaScript code and click the ‘Play’ button to see the results on the canvas to the right.

Make uses the p5.js library which allows (among other things) shapes to be drawn in a single line of code. The standard setup() and draw() functions required by p5.js are handled internally by the tool, minimising the code required to make something appear on the screen. This immediacy enhances the participant’s ability to see the connection between the code they enter and the outcome it produces.

The user interface has been designed to be uncomplicated, with large contrasting buttons. The purpose of each button is made clear through a combination of text, an icon and an identifying colour. Buttons are never hidden inside a menu or setting screen.

Errors made when a participant enters code are automatically detected, and tips about how to resolve the error are presented in an approachable way using a code linter and the p5.js Friendly Error System. The buttons on the left provide a way to reduce some of the typing by entering code snippets when clicked. The ‘Show Grid’ button displays a grid overlay to make it easier to position shapes.

Make Web App - Grid Overlay Grid overlay showing coordinates

When participants are ready to print their artwork, they click the ‘Share’ button. A QR Code appears containing all of the code they entered. The code can then be transferred to a separate computer without the need for network access or Internet connectivity.

Make Web App - QR Code for Sharing QR Code used for sharing code and printing the artwork

Make2 is a more advanced version of Make designed for use by older kids and teens.

Make2 Web App Make2 web app

Like Make, Make2 generates a QR Code for sharing code. However, if the code cannot fit in a single QR Code, the Make2 web app will display an animated sequence of QR Codes. The accompanying Scan web app has been designed to read this sequence. The app runs on a mobile device and uses the phone’s rear-facing camera to capture the QR Codes in any order. It then reconstructs the original code and any data so it can be copied to the clipboard.

Make2 and Scan QR Code scanner web apps working together

Make and Make2 have been used in over 20 workshops to teach creative coding to over 200 kids and teens, who have used it to create more than 400 artworks. For more information, see Creative Coding Studio.