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

Bi-Weekly Update

Active patrons in a paid tier get regular updates on new content, lessons and courses. For learners. On Fridays, 4pm CET.

Sign Up

Monthly Newsletter

Personal Reflections on Creative Coding, Design and life with Technology, every first Friday of the month, directly to your inbox.

Subscribe

Related

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 […]

DJ_Dave – Raving with Code

Sarah, also known as DJ_Dave, writes code to produce rave music. You might say, “Oh, I know that stuff: Algorave! […]

The Future of Processing – with Raphaël and Stef

I have some really good news: Processing is currently undergoing rapid development! Processing community lead Raphaël de Courville and primary […]

Deconstruction / Reconstruction – Creative Coding with Prof. Stig Møller Hansen

I am more than excited to share this session with Prof. Stig Møller Hansen with you today, whom I would […]

Kris de Decker on Low Technology

In the two years I lived in Barcelona, one person in particular fascinated and inspired me. His name is Kris […]

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 […]