Kit Kuksenok on p5.js 2.0

Published by Tim on Thursday May 15, 2025

Last modified on June 8th, 2026 at 17:55

In 2025, both Processing and p5.js made major leaps forward in the development. I had the great opportunity to speak to Kit Kuksenok, the project lead of the p5.js project, about the incredible achievements of them and their team with the upcoming version 2.0 of p5.js. The Javascript-based Creative Coding ecosystem now supports variable fonts and has been generally optimized for the work with vector graphics and typography. That’s such a good signal to the whole Graphic Design community and will probably make p5.js much more attractive to designers in general. My opinion: p5.js is emerging into a fully featured SDK for complex design tools.

Please also note the footnotes, most of them shared by Kit, there’s also a lot of good stuff to explore.

Footnotes

1	Load a variable font with `loadFont()` and smoothly change its weight with `textWeight()`
2	Measure text shown on screen more precisely with `fontWidth()` and `textWidth()`
3	Use `textToPoints()` and `splineVertex()` to make text into a custom shape – uses the p5.woff2 add-on library to be able to use the same loadFont() URL as above
4	You can check out the updated custom shapes API reference
5	…or this guide on how to make your existing sketches work with 2.x by either updating your code or by using the shapes.js add-on compatibility library
6	Create per-letter shapes with `textToContours()` – uses the p5.woff2 add-on library to be able to use the same loadFont() URL as above
7	`textToContours()` with new shapes API `bezierVertex()` and `bezierOrder()` – for variable fonts, can also use the URL through the Google Fonts Developer API browser tool
8	Make a 3D model by extruding the text with `textToModel()` – for variable fonts, needs the URL through the Google Fonts Developer API browser tool
9	Add a pixelating filter shader with p5.strands – a new way to author shaders in p5.js with JavaScript
10	Load a variable font in `<style>` controlling its other axes – besides weight – in the p5.js sketch with `textProperty()` and CSS
11	Check out & contribute to ongoing 2.x work and review many other updates in 2.x in the release notes!
12	Daniel Howe and Dave Pagurek did a lot of development, performance improvement, and bugfixing on the 2.x typography features; Nikki Makagiansar worked together with Kit on the development of the examples used here
13	Lastly, I mentioned the historical (1952, actually! I might have said 60s or 70s) Love letter generator which has “been seen as the first work of electronic literature.” and is re-implemented here

→ send me your feedback → feedback@timrodenbroeker.de

Stig Møller Hansen on Learning Creative Coding

Have you ever felt one of these frustrations in your learning process? Good news: You are absolutely not alone! All […]

Field Note: Working with the Raspberry PI

I am experimenting with doing my daily work with a @raspberrypi 5 these days. It works surprisingly well, the Raspi […]

Digital Tools: An Interview with Slanted Magazine

An interview with Slanted Magazine for their issue about “Digital Tools”, Autumn 2025 Introduce yourself — in your own terms: […]

Creative Coding on a Raspberry Pi 5?

The downgrade mindset led me to another exciting experiment: The Raspberry Pi is a small and cheap computer (around 100 […]

I don’t use Apple and Adobe anymore

Edit: Sarah Schröerlücke This video about my transition from proprietary software and hardware to Open Source software is one of […]

Teaching through the Lens of the Tool – with Prof. John Caserta

On a hot day in the summer of 2024, my friend Cem Eskinazi brought a stack of books to our […]

Footnotes

downgrade diary

Related