# p5.js

**URL:** https://discourse.processing.org/c/p5js/10.md?no_subcategories=false&page=1

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

**Page:** 2

---

## [Where are the Javascript classes before I use them?](https://discourse.processing.org/t/where-are-the-javascript-classes-before-i-use-them/48819)

<div class="topic-metadata">

**Author:** [@EricRogerGarcia](https://discourse.processing.org/u/EricRogerGarcia)\
**Replies:** 2\
**Last updated:** [June 15, 2026, 9:43pm UTC](https://discourse.processing.org/t/where-are-the-javascript-classes-before-i-use-them/48819 "2026-06-15T21:43:02Z")

</div>

Hello, Now that I’ve started using P5js and therefore Javascript, I’m curious about how it works internally.:slight\_smile: So, an object in javascript is likely to be permanently erased from memory when there is nothin…

---

## [Fade in and fade out a sketch, or fade between sketches](https://discourse.processing.org/t/fade-in-and-fade-out-a-sketch-or-fade-between-sketches/48770)

<div class="topic-metadata">

**Author:** [@grege2](https://discourse.processing.org/u/grege2)\
**Replies:** 6\
**Last updated:** [June 9, 2026, 11:09pm UTC](https://discourse.processing.org/t/fade-in-and-fade-out-a-sketch-or-fade-between-sketches/48770 "2026-06-09T23:09:31Z")

</div>

Hi all, I’m looking for a technique in p5.js, either p5 1.x.x or p5 2.x.x, to “fade in” a moving sketch from a black screen to normal display. The converse would “fade out” the sketch, and what I’m really after is fadin…

---

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

---

## [\[dev updates\] p5.js 2.0: You Are Here & How to Contribute!](https://discourse.processing.org/t/dev-updates-p5-js-2-0-you-are-here-how-to-contribute/46130)

<div class="topic-metadata">

**Author:** [@kit](https://discourse.processing.org/u/kit)\
**Replies:** 6\
**Last updated:** [June 3, 2026, 6:58pm UTC](https://discourse.processing.org/t/dev-updates-p5-js-2-0-you-are-here-how-to-contribute/46130 "2026-06-03T18:58:10Z")

</div>

Hi everyone! Below is a development update about p5.js. It’s cross-posted also on our Medium: blog post about p5.js 2.0 dev updates. Please feel welcome to share your thoughts in this thread! I’ll share updates every fe…

---

## [P5.js SVG Export / Import – Looking for Sketches, Use Cases, and Feedback](https://discourse.processing.org/t/p5-js-svg-export-import-looking-for-sketches-use-cases-and-feedback/48706)

<div class="topic-metadata">

**Author:** [@VANSH3104](https://discourse.processing.org/u/VANSH3104)\
**Replies:** 1\
**Last updated:** [June 3, 2026, 11:55am UTC](https://discourse.processing.org/t/p5-js-svg-export-import-looking-for-sketches-use-cases-and-feedback/48706 "2026-06-03T11:55:31Z")

</div>

Hi everyone! As part of GSoC 2026, I’m working on SVG Export / Import support for p5.js. I’ve started building the export side and am looking for sketches that would make good test cases. I’m especially interested in s…

---

## [How would you approach a procedural “Basquiatism” generator](https://discourse.processing.org/t/how-would-you-approach-a-procedural-basquiatism-generator/48725)

<div class="topic-metadata">

**Author:** [@Nigh-Knight](https://discourse.processing.org/u/Nigh-Knight)\
**Replies:** 0\
**Last updated:** [June 3, 2026, 1:28am UTC](https://discourse.processing.org/t/how-would-you-approach-a-procedural-basquiatism-generator/48725 "2026-06-03T01:28:30Z")

</div>

I’m trying to map out a project I’ve been calling Basquiatism. The idea is to build a procedural UI component library + background generator that captures the raw visual essence of Jean-Michel Basquiat’s paintings in a …

---

## [How to manually modify the P5js plugin (stable version) to use the 2.0 version?](https://discourse.processing.org/t/how-to-manually-modify-the-p5js-plugin-stable-version-to-use-the-2-0-version/48536)

<div class="topic-metadata">

**Author:** [@EricRogerGarcia](https://discourse.processing.org/u/EricRogerGarcia)\
**Replies:** 7\
**Last updated:** [June 1, 2026, 6:21am UTC](https://discourse.processing.org/t/how-to-manually-modify-the-p5js-plugin-stable-version-to-use-the-2-0-version/48536 "2026-06-01T06:21:01Z")

</div>

Hello, I mean, is it possible to replace the current stable version with the 2.0 version ? Is it possible ? :slight\_smile: P.S. As I am rewriting my project to integrate 3D, it would be a good time for me to work wit…

---

## [3D Wire Frame Surface Plots](https://discourse.processing.org/t/3d-wire-frame-surface-plots/48532)

<div class="topic-metadata">

**Author:** [@crm114](https://discourse.processing.org/u/crm114)\
**Replies:** 4\
**Last updated:** [May 18, 2026, 10:09pm UTC](https://discourse.processing.org/t/3d-wire-frame-surface-plots/48532 "2026-05-18T22:09:57Z")

</div>

I have fond memories of running programs to create images similar to this at some time in the past on some sort of home computer. Has anything like this been done in j5.ps? It would be even better if these were animate…

---

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

---

## [webglVersion variable is not defined](https://discourse.processing.org/t/webglversion-variable-is-not-defined/48485)

<div class="topic-metadata">

**Author:** [@EricRogerGarcia](https://discourse.processing.org/u/EricRogerGarcia)\
**Replies:** 2\
**Last updated:** [May 5, 2026, 9:18am UTC](https://discourse.processing.org/t/webglversion-variable-is-not-defined/48485 "2026-05-05T09:18:24Z")

</div>

Hello, I tried this function setup() { createCanvas(800, 600); } function draw() { print(webglVersion); } with or without WEBGL in the createCanvas() function and I have in both cases Uncaught ReferenceError: …

---

## [Is it possible to load obj files with mtl files (it seems not to work !)?](https://discourse.processing.org/t/is-it-possible-to-load-obj-files-with-mtl-files-it-seems-not-to-work/48423)

<div class="topic-metadata">

**Author:** [@EricRogerGarcia](https://discourse.processing.org/u/EricRogerGarcia)\
**Replies:** 10\
**Last updated:** [April 28, 2026, 8:26pm UTC](https://discourse.processing.org/t/is-it-possible-to-load-obj-files-with-mtl-files-it-seems-not-to-work/48423 "2026-04-28T20:26:52Z")

</div>

Hello, I read in the documentation that loadModel() can load a obj file and use the mtl file and read the textures but it seems not to work at all. model() draws the meshes but without any textures. I’ve seen a lot of …

---

## [A Game I Coded (WIP)](https://discourse.processing.org/t/a-game-i-coded-wip/48456)

<div class="topic-metadata">

**Author:** [@TheThingInParticular](https://discourse.processing.org/u/TheThingInParticular)\
**Replies:** 3\
**Last updated:** [April 24, 2026, 1:01am UTC](https://discourse.processing.org/t/a-game-i-coded-wip/48456 "2026-04-24T01:01:06Z")

</div>

A game I made just recently, please give it some love because I am new to the platform and this took 8 hours to code. let grid, w = 3.5, cols, rows, currentElement = 1, brushSize = 4; let menuHeight = 120, sideWidth = 6…

---

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

---

## [Processing to p5.js auto conversion?](https://discourse.processing.org/t/processing-to-p5-js-auto-conversion/48387)

<div class="topic-metadata">

**Author:** [@Yellowsam](https://discourse.processing.org/u/Yellowsam)\
**Replies:** 2\
**Last updated:** [April 11, 2026, 4:20pm UTC](https://discourse.processing.org/t/processing-to-p5-js-auto-conversion/48387 "2026-04-11T16:20:02Z")

</div>

Is there any tool to convert Processing Code to p5.js code? I know about processing-p5-convert, but it hasn’t been working for me. There was also another library, but it’s been archived. Is there some option in the softw…

---

## [Control variables and method created while a program is running](https://discourse.processing.org/t/control-variables-and-method-created-while-a-program-is-running/47995)

<div class="topic-metadata">

**Author:** [@EricRogerGarcia](https://discourse.processing.org/u/EricRogerGarcia)\
**Replies:** 28\
**Last updated:** [March 31, 2026, 6:19am UTC](https://discourse.processing.org/t/control-variables-and-method-created-while-a-program-is-running/47995 "2026-03-31T06:19:15Z")

</div>

Another weird question ! lol In java, it is impossible to create a variable or a method outside the class declaration. But in Javascript, it is quite possible. I just spent a lot of time looking for the origin of a ver…

---

## [Embedded sketches missing a space in title](https://discourse.processing.org/t/embedded-sketches-missing-a-space-in-title/48271)

<div class="topic-metadata">

**Author:** [@glv](https://discourse.processing.org/u/glv)\
**Replies:** 2\
**Last updated:** [March 26, 2026, 3:20pm UTC](https://discourse.processing.org/t/embedded-sketches-missing-a-space-in-title/48271 "2026-03-26T15:20:48Z")

</div>

Hello folks! I have been sharing some embedded sketches and there is no space between the name of sketch and the author: Sketch is embedded here: Pi + 5 Day (Monte Carlo method) Hello @kit, Should I submit an issu…

---

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

---

## [Video doesn't play on the canvas. I don't understand why!](https://discourse.processing.org/t/video-doesnt-play-on-the-canvas-i-dont-understand-why/48095)

<div class="topic-metadata">

**Author:** [@EricRogerGarcia](https://discourse.processing.org/u/EricRogerGarcia)\
**Replies:** 5\
**Last updated:** [March 13, 2026, 8:17am UTC](https://discourse.processing.org/t/video-doesnt-play-on-the-canvas-i-dont-understand-why/48095 "2026-03-13T08:17:16Z")

</div>

Hello, I tried this let video; function setup() { createCanvas(900, 600); video = createVideo("video.mp4"); video.hide(); video.loop(); } function draw() { background(200); image(video,10, 10); } video.m…

---

## [Convert touch events to mouse events for running sketches on iOS](https://discourse.processing.org/t/convert-touch-events-to-mouse-events-for-running-sketches-on-ios/48037)

<div class="topic-metadata">

**Author:** [@poppanona](https://discourse.processing.org/u/poppanona)\
**Replies:** 1\
**Last updated:** [March 6, 2026, 9:27am UTC](https://discourse.processing.org/t/convert-touch-events-to-mouse-events-for-running-sketches-on-ios/48037 "2026-03-06T09:27:39Z")

</div>

---

## [Looking for a p5 2.x.x tutorial](https://discourse.processing.org/t/looking-for-a-p5-2-x-x-tutorial/47999)

<div class="topic-metadata">

**Author:** [@grege2](https://discourse.processing.org/u/grege2)\
**Replies:** 4\
**Last updated:** [March 2, 2026, 10:10pm UTC](https://discourse.processing.org/t/looking-for-a-p5-2-x-x-tutorial/47999 "2026-03-02T22:10:55Z")

</div>

Hi all, I’m looking for a tutorial which illustrates the structural changes from p5 1.x.x to p5 2.x.x. I’m talking about font loading, image loading, how preload() has gone, async issues, the new improved async-ness of …

---

## [TypeError when accessing an Image?](https://discourse.processing.org/t/typeerror-when-accessing-an-image/47990)

<div class="topic-metadata">

**Author:** [@StormmInABottle](https://discourse.processing.org/u/StormmInABottle)\
**Replies:** 1\
**Last updated:** [February 27, 2026, 8:15pm UTC](https://discourse.processing.org/t/typeerror-when-accessing-an-image/47990 "2026-02-27T20:15:29Z")

</div>

I’m new to learning p5.js and I’m following a video right now. I’m trying to import an image but for some reason I keep getting TypeErrors: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘w…

---

## [How to know if a variable is a color?](https://discourse.processing.org/t/how-to-know-if-a-variable-is-a-color/47945)

<div class="topic-metadata">

**Author:** [@EricRogerGarcia](https://discourse.processing.org/u/EricRogerGarcia)\
**Replies:** 2\
**Last updated:** [February 23, 2026, 12:20pm UTC](https://discourse.processing.org/t/how-to-know-if-a-variable-is-a-color/47945 "2026-02-23T12:20:33Z")

</div>

(Another funny question) :upside\_down\_face: if let c=color(15,20,56) typeof c : object and c.constructor.name : nothing !!! Help! How can I check that it is indeed a color ??? This code doesn’t work obviously with…

---

## [mouseClicked(), mousePressed()... keyPressed(), keyReleased()... are they parallel?](https://discourse.processing.org/t/mouseclicked-mousepressed-keypressed-keyreleased-are-they-parallel/47898)

<div class="topic-metadata">

**Author:** [@EricRogerGarcia](https://discourse.processing.org/u/EricRogerGarcia)\
**Replies:** 9\
**Last updated:** [February 20, 2026, 8:14am UTC](https://discourse.processing.org/t/mouseclicked-mousepressed-keypressed-keyreleased-are-they-parallel/47898 "2026-02-20T08:14:00Z")

</div>

Hello, My question is When are theses functions processed / what is in draw() ? (is it the same thing in Processing ?) Is there some sort of parallelism (multiple threads) or not ? (I guess not) I wonder ! thank you …

---

## [About static methods in p5.js](https://discourse.processing.org/t/about-static-methods-in-p5-js/47909)

<div class="topic-metadata">

**Author:** [@EricRogerGarcia](https://discourse.processing.org/u/EricRogerGarcia)\
**Replies:** 2\
**Last updated:** [February 20, 2026, 7:55am UTC](https://discourse.processing.org/t/about-static-methods-in-p5-js/47909 "2026-02-20T07:55:55Z")

</div>

Hello, Is it possible to access P5js functions in a static functions ? I tried in this sketch but it doesnt work "use strict"; function setup() { createCanvas(800, 600); fill(255); } function draw() { backgro…

---

## [Is p5.1.11.11 coming to the Cloudflare repo?](https://discourse.processing.org/t/is-p5-1-11-11-coming-to-the-cloudflare-repo/47615)

<div class="topic-metadata">

**Author:** [@grege2](https://discourse.processing.org/u/grege2)\
**Replies:** 4\
**Last updated:** [February 1, 2026, 7:29am UTC](https://discourse.processing.org/t/is-p5-1-11-11-coming-to-the-cloudflare-repo/47615 "2026-02-01T07:29:07Z")

</div>

Hi all, I believe that p5 1.11.11 is released from Github, but I don’t see it on the repository at p5.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers Can anyone advise h…

---

## [The Permalinku experiment](https://discourse.processing.org/t/the-permalinku-experiment/47802)

<div class="topic-metadata">

**Author:** [@MartinGo](https://discourse.processing.org/u/MartinGo)\
**Replies:** 6\
**Last updated:** [January 27, 2026, 8:16pm UTC](https://discourse.processing.org/t/the-permalinku-experiment/47802 "2026-01-27T20:16:20Z")

</div>

I leave a small experiment that I’ve been doing https://x.com/permalinku . I experiment with chatgpt and p5js.

---

## [Overlay a 3D sketch with HUD using shaders](https://discourse.processing.org/t/overlay-a-3d-sketch-with-hud-using-shaders/47795)

<div class="topic-metadata">

**Author:** [@quark](https://discourse.processing.org/u/quark)\
**Replies:** 8\
**Last updated:** [January 27, 2026, 12:37pm UTC](https://discourse.processing.org/t/overlay-a-3d-sketch-with-hud-using-shaders/47795 "2026-01-27T12:37:40Z")

</div>

I am trying to display a 2D overlay (head-up-display) over a 3D sketch using a shader. Now I have never created a shader before but have spent the last couple of days researching and experimenting. I am very close in th…

---

## [MouseOver function](https://discourse.processing.org/t/mouseover-function/47762)

<div class="topic-metadata">

**Author:** [@Neo\_Wang](https://discourse.processing.org/u/Neo_Wang)\
**Replies:** 4\
**Last updated:** [January 21, 2026, 5:19pm UTC](https://discourse.processing.org/t/mouseover-function/47762 "2026-01-21T17:19:06Z")

</div>

Can mouseOver function detect if the mouse is on the shape drawn on the canvas. in the reference’s example, it seems it can only detect whether the mouse has entered the element, what about shapes. if it can, how to use …

---

## [Speed of set(x, y, color) in p5.js 2.1.2 vs 1.11.11](https://discourse.processing.org/t/speed-of-set-x-y-color-in-p5-js-2-1-2-vs-1-11-11/47769)

<div class="topic-metadata">

**Author:** [@norm\_krumpe](https://discourse.processing.org/u/norm_krumpe)\
**Replies:** 2\
**Last updated:** [January 19, 2026, 7:54pm UTC](https://discourse.processing.org/t/speed-of-set-x-y-color-in-p5-js-2-1-2-vs-1-11-11/47769 "2026-01-19T19:54:34Z")

</div>

Hello, I will be teaching a course starting next week (Mathematics and Computer Science). I typically use p5.js to teach it, and will do that again this year. I was thinking about moving up to version 2.1.2 (because it’s…

---

## [How to start development server](https://discourse.processing.org/t/how-to-start-development-server/47618)

<div class="topic-metadata">

**Author:** [@thejon\_07](https://discourse.processing.org/u/thejon_07)\
**Replies:** 6\
**Last updated:** [January 19, 2026, 6:08pm UTC](https://discourse.processing.org/t/how-to-start-development-server/47618 "2026-01-19T18:08:46Z")

</div>

Hi everyone, I am new to the Processing Foundation. I am facing issues while starting the development server for the p5.js repository. Can anyone help me with this? Thank you.

[Previous page](https://discourse.processing.org/c/p5js/10.md?no_subcategories=false)

[Next page](https://discourse.processing.org/c/p5js/10.md?no_subcategories=false&page=2)