P5
P5 is the JavaScript evolution of the Processing project and is essential for learning the basics of creative coding.
You can write P5 “sketches” using the P5.vscode extension for VS Code (cf. above). Or you can code your sketches directly inside the online P5 editor, which is handy for quickly prototyping any idea from whatever machine you are on: just open a browser, sign in, and starting coding an interactive sketch:
Make sure you create an account in order to save your work and access your previous sketches.
Advanced users: if you are already experienced in creating web pages, you can download the latest “complete library” version of P5 to your computer. This will also allow you to code offline. In this approach, you would write your P5 sketches using VS Code (cf. above):
Paper.js
P5.js is very much a pixel-based solution for coding images; if instead you want a vector-first solution, Paper.js was designed first and formost as a designer-oriented vector-based tool for people who code in Javascript. Paper.js was designed and developed by our colleague Jürg Lehni, along with another brilliant designer, Jonathan Puckey.
Drawbot
If you are a graphic designer, another coding tool built directly for/by designers is Drawbot. Drawbot is similar to Processing/P5.js, in that it was designed as a simple environment to not only explore creative coding, but also to learn coding itself using the language Python. The list of instructions is simple but powerful, and can be used either with its simplified all-in-one integrated Drawbot App interface, or via VS Code.
Warning: this is a macOS-only solution.
- Download Drawbot for Mac OS X
- Roberto Arista’s excellent tutorial Python For Designers should give you all the basics you need to get started
- Instructions for integrating Drawbot into VSCode: drawbot-vscode
Robofont
If you also want to use the Python language to design your own fonts, the natural font designer’s complement to Drawbot is Robofont. Much like its competitors Glyphs or FontForge, Robofont has a graphical interface for designing your glyphs. But it was also designed with scripting window (the same as Drawbot, by the way) where you can code different parameters and shapes using Python instructions. Although you can use Robofont only through its graphical interface, in many senses, the tool was built around extensibility via code.
Glyphs
Glyphs is also an excellent font editor and has an excellent workflow for creating variable fonts, to give just one example. Like Robofont, you can code changes to your fonts, or even generate forms, using Python from within the app. You can also write your own plugins to Glyphs using Python. Cf. Add your own Python code for pretty much anything