# Libraries

**URL:** https://discourse.processing.org/c/p5js/p5js-libraries/20.md

[Latest](https://discourse.processing.org/latest.md) · [Categories](https://discourse.processing.org/categories.md) · [Tags](https://discourse.processing.org/tags.md)

---

## [About the p5.js / Libraries category](https://discourse.processing.org/t/about-the-p5-js-libraries-category/32)

<div class="topic-metadata">

**Author:** [@ProcessingOrg](https://discourse.processing.org/u/ProcessingOrg)\
**Replies:** 0

</div>

Questions and discussions about p5.js Libraries

---

## [Help Test the SVG Import & Export Addon for p5.js (GSoC 2026)](https://discourse.processing.org/t/help-test-the-svg-import-export-addon-for-p5-js-gsoc-2026/49019)

<div class="topic-metadata">

**Author:** [@VANSH3104](https://discourse.processing.org/u/VANSH3104)\
**Replies:** 3\
**Last updated:** [July 24, 2026, 1:41pm UTC](https://discourse.processing.org/t/help-test-the-svg-import-export-addon-for-p5-js-gsoc-2026/49019 "2026-07-24T13:41:30Z")

</div>

Hi everyone, As part of Google Summer of Code 2026 with p5.js, I’ve been working on an addon that adds SVG import and export support using the Shape system. Since my last update, the SVG import addon is now ready for t…

---

## [canvasGUI 3.1.0 (new release)](https://discourse.processing.org/t/canvasgui-3-1-0-new-release/48969)

<div class="topic-metadata">

**Author:** [@quark](https://discourse.processing.org/u/quark)\
**Replies:** 0\
**Last updated:** [July 7, 2026, 9:39am UTC](https://discourse.processing.org/t/canvasgui-3-1-0-new-release/48969 "2026-07-07T09:39:28Z")

</div>

Version 3.1.0 of canvasGUI is now available. Users will find that the new library is backwardly compatible so will work with any sketches using V3.0.0. The biggest change is in the viewer control which allows the user t…

---

## [Help Test SVG Export for p5.js (GSoC 2026)](https://discourse.processing.org/t/help-test-svg-export-for-p5-js-gsoc-2026/48850)

<div class="topic-metadata">

**Author:** [@VANSH3104](https://discourse.processing.org/u/VANSH3104)\
**Replies:** 6\
**Last updated:** [June 26, 2026, 1:29pm UTC](https://discourse.processing.org/t/help-test-svg-export-for-p5-js-gsoc-2026/48850 "2026-06-26T13:29:56Z")

</div>

Looking for Feedback on SVG Export for p5.js Hi everyone, As part of Google Summer of Code 2026 with p5.js, I’ve been working on an addon that adds SVG export and import support using the Shape system. Version 1 of the…

---

## [canvasGUI 3 : user-defined controls (2)](https://discourse.processing.org/t/canvasgui-3-user-defined-controls-2/48768)

<div class="topic-metadata">

**Author:** [@quark](https://discourse.processing.org/u/quark)\
**Replies:** 0\
**Last updated:** [June 7, 2026, 2:01pm UTC](https://discourse.processing.org/t/canvasgui-3-user-defined-controls-2/48768 "2026-06-07T14:01:44Z")

</div>

In a previous discussion I described how to create a new control which was a simple aggregate of existing canvasGUI controls. In this discussion I describe how to extend one of the existing classes to create a control t…

---

## [canvasGUI 3 : user-defined controls (1)](https://discourse.processing.org/t/canvasgui-3-user-defined-controls-1/48529)

<div class="topic-metadata">

**Author:** [@quark](https://discourse.processing.org/u/quark)\
**Replies:** 0\
**Last updated:** [May 10, 2026, 2:32pm UTC](https://discourse.processing.org/t/canvasgui-3-user-defined-controls-1/48529 "2026-05-10T14:32:40Z")

</div>

In this discussion I will describe one strategy for creating user-defined controls that extend the canvasGUI 3 library. To do this I am going to create a Bridge Bidding Box control. For the uninitiated, Bridge is a very…

---

## [canvasGUI V3 is now available](https://discourse.processing.org/t/canvasgui-v3-is-now-available/48461)

<div class="topic-metadata">

**Author:** [@quark](https://discourse.processing.org/u/quark)\
**Replies:** 0\
**Last updated:** [April 23, 2026, 2:06pm UTC](https://discourse.processing.org/t/canvasgui-v3-is-now-available/48461 "2026-04-23T14:06:19Z")

</div>

This is a major release involving a complete overhaul of the library’s core code base. Changes include: new controls (image button and poster) in text-icon controls (label, button, checkbox and option) it is now possi…

---

## [Best way to export an animation from a p5.js sketch in 2026](https://discourse.processing.org/t/best-way-to-export-an-animation-from-a-p5-js-sketch-in-2026/48274)

<div class="topic-metadata">

**Author:** [@slacle](https://discourse.processing.org/u/slacle)\
**Replies:** 1\
**Last updated:** [March 24, 2026, 12:53pm UTC](https://discourse.processing.org/t/best-way-to-export-an-animation-from-a-p5-js-sketch-in-2026/48274 "2026-03-24T12:53:39Z")

</div>

I have used a couple of methods which are good for sharing video renders on social media without worrying about high quality. But now I want the best quality possible. 4K, 30/60fps, and high bitrate mp4 to specific. I h…

---

## [canvasGUI V2 released](https://discourse.processing.org/t/canvasgui-v2-released/47586)

<div class="topic-metadata">

**Author:** [@quark](https://discourse.processing.org/u/quark)\
**Replies:** 0\
**Last updated:** [December 3, 2025, 4:31pm UTC](https://discourse.processing.org/t/canvasgui-v2-released/47586 "2025-12-03T16:31:40Z")

</div>

I created canvasGUI in 2022 so I could learn JavaScript and p5js. Now 3 years later and with the advent of p5js V2 I thought it was time to apply my new found knowledge and improve canvasGUI, hence V2. :smiley: Changes …

---

## [Q: Can't make screenshot thumbnail on OpenProcessing.org when showing Cindy.js colorplot](https://discourse.processing.org/t/q-cant-make-screenshot-thumbnail-on-openprocessing-org-when-showing-cindy-js-colorplot/47059)

<div class="topic-metadata">

**Author:** [@Raj](https://discourse.processing.org/u/Raj)\
**Replies:** 4\
**Last updated:** [September 10, 2025, 11:43am UTC](https://discourse.processing.org/t/q-cant-make-screenshot-thumbnail-on-openprocessing-org-when-showing-cindy-js-colorplot/47059 "2025-09-10T11:43:01Z")

</div>

I’ve been experimenting with incorporating the geometry and math library Cindy.js into OpenProcessing sketches. That works ok, but I don’t seem to be able to make preview-thumbnail screenshots when I show a 2D colorplot.…

---

## [canvasGUI 1.1.0 released](https://discourse.processing.org/t/canvasgui-1-1-0-released/46720)

<div class="topic-metadata">

**Author:** [@quark](https://discourse.processing.org/u/quark)\
**Replies:** 0\
**Last updated:** [July 13, 2025, 10:40am UTC](https://discourse.processing.org/t/canvasgui-1-1-0-released/46720 "2025-07-13T10:40:54Z")

</div>

For those who don’t know canvasGUI it is a p5.js library used to create on-canvas GUIs. It works seamlessly on P2D and WEBGL canvases and the controls respond to both mouse and touch events. This makes it ideal for shari…

---

## [Why doesn't p5.js support .otf colorfonts?](https://discourse.processing.org/t/why-doesnt-p5-js-support-otf-colorfonts/46623)

<div class="topic-metadata">

**Author:** [@rbytes](https://discourse.processing.org/u/rbytes)\
**Replies:** 14\
**Last updated:** [July 6, 2025, 8:54am UTC](https://discourse.processing.org/t/why-doesnt-p5-js-support-otf-colorfonts/46623 "2025-07-06T08:54:36Z")

</div>

I discovered .otf colorfonts about 8 years ago, and am pleased to say that almost all browsers now support them. Yet p5.js is not configured to recognize them, nor is JavaScript, as far as i can discover. This should be…

---

## [canvasGUI v1.0.0](https://discourse.processing.org/t/canvasgui-v1-0-0/46236)

<div class="topic-metadata">

**Author:** [@quark](https://discourse.processing.org/u/quark)\
**Replies:** 0\
**Last updated:** [April 17, 2025, 5:47pm UTC](https://discourse.processing.org/t/canvasgui-v1-0-0/46236 "2025-04-17T17:47:13Z")

</div>

Thanks to @rbytes for prodding me to include touch events and to @GoToLoop for introducing me to the joy of CDN (Content Delivery Network) both of these features have been included in v1.0.0 In particular the CDN means …

---

## [CanvasGUI problems](https://discourse.processing.org/t/canvasgui-problems/46089)

<div class="topic-metadata">

**Author:** [@rbytes](https://discourse.processing.org/u/rbytes)\
**Replies:** 28\
**Last updated:** [April 9, 2025, 9:51am UTC](https://discourse.processing.org/t/canvasgui-problems/46089 "2025-04-09T09:51:07Z")

</div>

The sliders do not work with touch in p5js. I am using Safari on an iPad Pro. I have no problem using sliders in other guis, and the built in p5js sliders work fine as well.

---

## [P5.js sound map sketch not working on safari, working perfectly on chrome!](https://discourse.processing.org/t/p5-js-sound-map-sketch-not-working-on-safari-working-perfectly-on-chrome/46178)

<div class="topic-metadata">

**Author:** [@calfish](https://discourse.processing.org/u/calfish)\
**Replies:** 1\
**Last updated:** [April 8, 2025, 7:01pm UTC](https://discourse.processing.org/t/p5-js-sound-map-sketch-not-working-on-safari-working-perfectly-on-chrome/46178 "2025-04-08T19:01:11Z")

</div>

Hi, I am hosting a p5 sketch at https://calfish.land/radiomap.html It’s working fine on chrome, i can’t find any missing assets and everything is locally hosted. On safari the sketch won’t load and the console shows a …

---

## [canvasGUI new version (0.9.5)](https://discourse.processing.org/t/canvasgui-new-version-0-9-5/46116)

<div class="topic-metadata">

**Author:** [@quark](https://discourse.processing.org/u/quark)\
**Replies:** 2\
**Last updated:** [March 30, 2025, 7:48pm UTC](https://discourse.processing.org/t/canvasgui-new-version-0-9-5/46116 "2025-03-30T19:48:28Z")

</div>

USE VERSION 0.9.6 canvasGUI (0.9.5) now supports touch screen events so Slider and Ranger controls can be now used on mobile devices. You can try it out here. canvasGUI - website and github

---

## [Turtle Graphics library (official release)](https://discourse.processing.org/t/turtle-graphics-library-official-release/45768)

<div class="topic-metadata">

**Author:** [@quark](https://discourse.processing.org/u/quark)\
**Replies:** 0\
**Last updated:** [February 15, 2025, 4:50pm UTC](https://discourse.processing.org/t/turtle-graphics-library-official-release/45768 "2025-02-15T16:50:15Z")

</div>

Turtle Graphics 0.9.1 is now officially released and has been submitted to Processing for inclusion on their website. Where to find out more github This is the primary source for information about using the library…

---

## [p5.AudioIn() not working in fullscreen](https://discourse.processing.org/t/p5-audioin-not-working-in-fullscreen/45474)

<div class="topic-metadata">

**Author:** [@lizzy](https://discourse.processing.org/u/lizzy)\
**Replies:** 1\
**Last updated:** [December 18, 2024, 6:13am UTC](https://discourse.processing.org/t/p5-audioin-not-working-in-fullscreen/45474 "2024-12-18T06:13:37Z")

</div>

Hi Forum, I am stuck debugging a project that my high school students created. They made a game where the player movement is voice activated-- your avatar jumps if you shout at the screen. It works great in the p5 edito…

---

## [Problems with capturing webm using CCapture.js library](https://discourse.processing.org/t/problems-with-capturing-webm-using-ccapture-js-library/44965)

<div class="topic-metadata">

**Author:** [@J\_Silva](https://discourse.processing.org/u/J_Silva)\
**Replies:** 1\
**Last updated:** [August 20, 2024, 4:19pm UTC](https://discourse.processing.org/t/problems-with-capturing-webm-using-ccapture-js-library/44965 "2024-08-20T16:19:34Z")

</div>

Hi. I have a small code that rotates a textured sphere. My goal is to record this sketch. I tried the saveGif() function but it did not give a smooth result; so, I am trying the CCapture.js library because it’s said to b…

---

## [Export SVG file from p5.js?](https://discourse.processing.org/t/export-svg-file-from-p5-js/38400)

<div class="topic-metadata">

**Author:** [@dirka](https://discourse.processing.org/u/dirka)\
**Replies:** 14\
**Last updated:** [August 11, 2024, 7:48pm UTC](https://discourse.processing.org/t/export-svg-file-from-p5-js/38400 "2024-08-11T19:48:39Z")

</div>

Hello, I am brand new to p5.js having only reached video #13 from the Coding Train. I’m already having fun creating things and now I would like to save what the canvas looks like into a .svg file. Is there an “easy way…

---

## [Having trouble getting p5.SoundRecorder to work](https://discourse.processing.org/t/having-trouble-getting-p5-soundrecorder-to-work/44626)

<div class="topic-metadata">

**Author:** [@ASKproduKtion](https://discourse.processing.org/u/ASKproduKtion)\
**Replies:** 3\
**Last updated:** [June 26, 2024, 6:06am UTC](https://discourse.processing.org/t/having-trouble-getting-p5-soundrecorder-to-work/44626 "2024-06-26T06:06:00Z")

</div>

I have a p5.js sketch that integrates some Tone.js music functions adapted from @mattdesl I have added a p5.SoundRecorder from reference | p5.js following is the p5.js project \>\> p5.js Web Editor my intention is to ma…

---

## [amplitude.getLevel() always returns 0](https://discourse.processing.org/t/amplitude-getlevel-always-returns-0/44521)

<div class="topic-metadata">

**Author:** [@RomainGr](https://discourse.processing.org/u/RomainGr)\
**Replies:** 0\
**Last updated:** [June 1, 2024, 9:05am UTC](https://discourse.processing.org/t/amplitude-getlevel-always-returns-0/44521 "2024-06-01T09:05:59Z")

</div>

I’m building a little sound visualiser, but I’m strictly unable to get the amplitude level, it always return 0, and I have no idea why. I have no problem accessing fft, so it seems that there is no issue accessing the mi…

---

## [Which library do you recommend to add OSC communication to p5js?](https://discourse.processing.org/t/which-library-do-you-recommend-to-add-osc-communication-to-p5js/44420)

<div class="topic-metadata">

**Author:** [@amundsen](https://discourse.processing.org/u/amundsen)\
**Replies:** 19\
**Last updated:** [May 20, 2024, 8:22pm UTC](https://discourse.processing.org/t/which-library-do-you-recommend-to-add-osc-communication-to-p5js/44420 "2024-05-20T20:22:29Z")

</div>

Hello, I want to add Open Sound Control (OSC) communication to my p5js sketches. Which library do you recommend for this purpose? Thank you.

---

## [P5 for Spatial Computing / Mixed Reality / p5xr](https://discourse.processing.org/t/p5-for-spatial-computing-mixed-reality-p5xr/44043)

<div class="topic-metadata">

**Author:** [@TiborUdvari](https://discourse.processing.org/u/TiborUdvari)\
**Replies:** 19\
**Last updated:** [May 14, 2024, 3:12pm UTC](https://discourse.processing.org/t/p5-for-spatial-computing-mixed-reality-p5xr/44043 "2024-05-14T15:12:16Z")

</div>

I’m exploring p5 and p5xr to do Spatial Computing or Mixed Reality. Do you know any people who are working with p5 in 3D? Most examples use game engines like Unity or maybe Zach Lieberman’s work with ARKit and OpenFrame…

---

## [My Pacman Game issues](https://discourse.processing.org/t/my-pacman-game-issues/6806)

<div class="topic-metadata">

**Author:** [@CodeOscar](https://discourse.processing.org/u/CodeOscar)\
**Replies:** 7\
**Last updated:** [May 14, 2024, 2:56pm UTC](https://discourse.processing.org/t/my-pacman-game-issues/6806 "2024-05-14T14:56:23Z")

</div>

I have a problem about when I want to press a key, up, down, right and left, change the image of my Pacman, depending on its position, with different animated sprites, which are in different images, according to their po…

---

## [SVG blend in p5](https://discourse.processing.org/t/svg-blend-in-p5/44143)

<div class="topic-metadata">

**Author:** [@vjjv](https://discourse.processing.org/u/vjjv)\
**Replies:** 1\
**Last updated:** [March 23, 2024, 8:00pm UTC](https://discourse.processing.org/t/svg-blend-in-p5/44143 "2024-03-23T20:00:13Z")

</div>

function setup() { const DIM = Math.min(window.innerWidth, window.innerHeight); const svg = createSVGCanvas(DIM, DIM); const filter = document.createElementNS("http://www.w3.org/2000/svg", "filter"); filter.set…

---

## [Tensorflow js processing](https://discourse.processing.org/t/tensorflow-js-processing/44038)

<div class="topic-metadata">

**Author:** [@ctremblay](https://discourse.processing.org/u/ctremblay)\
**Replies:** 0\
**Last updated:** [March 6, 2024, 4:05am UTC](https://discourse.processing.org/t/tensorflow-js-processing/44038 "2024-03-06T04:05:14Z")

</div>

I was following this example https://www.youtube.com/watch?v=cdUNkwXx-I4 & then when i went to test i keep getting this error, but in the code he used he didn’t add shape; Right now I’m just trying to get 1 bird to thin…

---

## [How to visualise the "timeline" of a song](https://discourse.processing.org/t/how-to-visualise-the-timeline-of-a-song/43999)

<div class="topic-metadata">

**Author:** [@Irrlicht](https://discourse.processing.org/u/Irrlicht)\
**Replies:** 1\
**Last updated:** [February 27, 2024, 7:51pm UTC](https://discourse.processing.org/t/how-to-visualise-the-timeline-of-a-song/43999 "2024-02-27T19:51:30Z")

</div>

Hi, first post here, so I hop I won’t do anything wrong and if I do, please just tell me… (and english as a second language, so i try to explain what I have in mind…) So, I’m trying to visualise sound in a grid, by chan…

---

## [Using OSC messages in Processing in p5.js mode](https://discourse.processing.org/t/using-osc-messages-in-processing-in-p5-js-mode/43871)

<div class="topic-metadata">

**Author:** [@mormegil](https://discourse.processing.org/u/mormegil)\
**Replies:** 1\
**Last updated:** [February 19, 2024, 12:39am UTC](https://discourse.processing.org/t/using-osc-messages-in-processing-in-p5-js-mode/43871 "2024-02-19T00:39:01Z")

</div>

Hello there, I have started discovering Processing only yesterday, but I am already trying out connecting a few things with OSC. Right now I am stuck at figuring out connecting OSC to p5.js scripts run from Processing 4…

---

## [Pixelate, repeat, subdivide: Hydra to Processing](https://discourse.processing.org/t/pixelate-repeat-subdivide-hydra-to-processing/43731)

<div class="topic-metadata">

**Author:** [@funnyrectangles](https://discourse.processing.org/u/funnyrectangles)\
**Replies:** 0\
**Last updated:** [January 22, 2024, 5:05pm UTC](https://discourse.processing.org/t/pixelate-repeat-subdivide-hydra-to-processing/43731 "2024-01-22T17:05:24Z")

</div>

Hi! I am trying to replicate this code in processing, but I don’t even know where to start… Should I use a shadder for this pixelate/subdivision effect or something else? Here is the part of the could tha…

[Next page](https://discourse.processing.org/c/p5js/p5js-libraries/20.md?page=1)