Kit Kuksenok on p5.js 2.0

Published by Tim on Thursday May 15, 2025

Last modified on June 20th, 2025 at 9:40

Vimeo

By loading the video, you agree to Vimeos’s privacy policy.
Learn more

Load video

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

1Load a variable font with loadFont() and smoothly change its weight with textWeight()
2Measure text shown on screen more precisely with fontWidth() and textWidth()
3Use 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
4You 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
6Create per-letter shapes with textToContours() – uses the p5.woff2 add-on library to be able to use the same loadFont() URL as above
7textToContours() with new shapes API bezierVertex() and bezierOrder() – for variable fonts, can also use the URL through the Google Fonts Developer API browser tool
8Make a 3D model by extruding the text with textToModel() – for variable fonts, needs the URL through the Google Fonts Developer API browser tool
9Add a pixelating filter shader with p5.strands – a new way to author shaders in p5.js with JavaScript
10Load a variable font in <style> controlling its other axes – besides weight – in the p5.js sketch with textProperty() and CSS
11Check out & contribute to ongoing 2.x work and review many other updates in 2.x in the release notes!
12Daniel 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
13Lastly, 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

Enjoying the content?

Since 2018, I have published 239 interviews, case studies, and tutorials, along with over 345 lessons in 22 online courses – and there's more to come! If you want to get full access or simply support my work and help keep this platform thriving, please consider supporting me on Patreon. Thank you very much!

Speaking Image

Monthly Newsletter

Fresh perspectives circling around Creative Coding, Design and Technology, every first Friday of the month, directly to your inbox.

Related

Nico Landrieux on the Intersection of Ballet and Code

I am totally thrilled to introduce Nicolas Landrieux to you today. We met a few years ago at one of […]

Raquel Meyers – The Tool is the Message

Let’s begin here: A myriad of new technologies is accelerating our world at a breathtaking pace. I’m not interested in […]

Omid Nemalhabib on Design within Limitations

I met Omid Nemaldhabib quite coincidentally in Rotterdam in 2022. He comes from Tehran and ran a design studio there […]

Back to the Future of the Internet

About a year ago, in February 2024, I was a invited speaker at an event at the Akasha Hub in […]

Luna Maurer on Designing Friction

In December 2024, I was at the Iterations conference in s’Hertogenbosch (Netherlands) and there she was: Luna Maurer! I’ve known […]

Computer Cursive by Tay Papon Punyahotra

One of the first exercises I assign to my students in my seminars is called “Random Compositions”. Basically, it’s quite […]

Studio visit: Julian Hespenheide

Two thousand and twenty-four. At the “Barceloneta” metro station, a few hundred meters from the beach, stands an old dot-matrix […]

Michelle Duong and her Adventures in Interactive Typography

Sometimes it is so difficult to display the potencial of Creative Coding, since it mostly happens in the digital realm, […]