# p5.js

**URL:** https://discourse.processing.org/c/p5js/10.md?page=34

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

**Page:** 35

---

## [Ping-pong buffer in p5js shader](https://discourse.processing.org/t/ping-pong-buffer-in-p5js-shader/33367)

<div class="topic-metadata">

**Author:** [@altitudinem](https://discourse.processing.org/u/altitudinem)\
**Replies:** 0\
**Last updated:** [November 6, 2021, 8:41pm UTC](https://discourse.processing.org/t/ping-pong-buffer-in-p5js-shader/33367 "2021-11-06T20:41:24Z")

</div>

Hello everyone, I need help to figure out how to use multiple buffers in shader. (within p5js) First, this is the code that I’ve wrote so far. https://editor.p5js.org/exusquam/sketches/ELEBXQ174 Below is the same cod…

---

## [New rotated ellipse function help and suggestions](https://discourse.processing.org/t/new-rotated-ellipse-function-help-and-suggestions/33281)

<div class="topic-metadata">

**Author:** [@maggie](https://discourse.processing.org/u/maggie)\
**Replies:** 4\
**Last updated:** [November 6, 2021, 2:31pm UTC](https://discourse.processing.org/t/new-rotated-ellipse-function-help-and-suggestions/33281 "2021-11-06T14:31:45Z")

</div>

Hello! I finally figured out how to make an ellipse that will rotate without having to use the rotate function on it. I had had no luck getting solutions using rotate() and push()/pop() to generalize to making multiple …

---

## [Error 400 Invalid Request](https://discourse.processing.org/t/error-400-invalid-request/33288)

<div class="topic-metadata">

**Author:** [@eharkins](https://discourse.processing.org/u/eharkins)\
**Replies:** 6\
**Last updated:** [November 4, 2021, 8:39pm UTC](https://discourse.processing.org/t/error-400-invalid-request/33288 "2021-11-04T20:39:50Z")

</div>

\<For at least two weeks my students and I have been receiving this error in both Chrome and Safari. Eventually we can log on, but it seems to be getting worse. I have googled "P5.js Authentication Error 400 to no avail. …

---

## [Save png function keyPressed not working!](https://discourse.processing.org/t/save-png-function-keypressed-not-working/32834)

<div class="topic-metadata">

**Author:** [@u\_ro](https://discourse.processing.org/u/u_ro)\
**Replies:** 3\
**Last updated:** [November 4, 2021, 1:33am UTC](https://discourse.processing.org/t/save-png-function-keypressed-not-working/32834 "2021-11-04T01:33:16Z")

</div>

hey guys, silly question: I am not able to save a png in this sketch, I cannot understand why… saveCount = 0; var mic, fft, spectrum = \[\]; var X,Y; var spectrumBuffer = \[\]; var depth = 20; var length = 40; var spacing …

---

## [Creating perlin noise spheres/ blobs that reacts to mic on p5.js](https://discourse.processing.org/t/creating-perlin-noise-spheres-blobs-that-reacts-to-mic-on-p5-js/33243)

<div class="topic-metadata">

**Author:** [@timtam198](https://discourse.processing.org/u/timtam198)\
**Replies:** 1\
**Last updated:** [November 3, 2021, 6:40am UTC](https://discourse.processing.org/t/creating-perlin-noise-spheres-blobs-that-reacts-to-mic-on-p5-js/33243 "2021-11-03T06:40:12Z")

</div>

Hello, I am trying to create spheres that moves/distorts with mic inputs. I am trying to create a “blob” effect and found out that perlin noise creates an effect similar to what I envision. Does anyone knows how to apply…

---

## [How do I setUniform for an array of a custom struct?](https://discourse.processing.org/t/how-do-i-setuniform-for-an-array-of-a-custom-struct/33267)

<div class="topic-metadata">

**Author:** [@modusponens](https://discourse.processing.org/u/modusponens)\
**Replies:** 2\
**Last updated:** [November 2, 2021, 7:51pm UTC](https://discourse.processing.org/t/how-do-i-setuniform-for-an-array-of-a-custom-struct/33267 "2021-11-02T19:51:54Z")

</div>

I have a shader with this struct defined in it: struct LightInputData { vec3 worldPos; vec3 color; vec3 falloff; }; and it has this uniform variable: uniform LightInputData uPointLights\[8\]; How can I set this u…

---

## [Change button name programmatically](https://discourse.processing.org/t/change-button-name-programmatically/33257)

<div class="topic-metadata">

**Author:** [@Clark](https://discourse.processing.org/u/Clark)\
**Replies:** 2\
**Last updated:** [November 2, 2021, 5:04pm UTC](https://discourse.processing.org/t/change-button-name-programmatically/33257 "2021-11-02T17:04:08Z")

</div>

Hi. Is it possible to change the name of a button programmatically? Something like: button = createButton("one"); button.position(0, 0); button.mousePressed(changeName); function changeName() { button.value = "two"…

---

## [How do I reverse the animation of a drawing in P5JS (more details in post)](https://discourse.processing.org/t/how-do-i-reverse-the-animation-of-a-drawing-in-p5js-more-details-in-post/33245)

<div class="topic-metadata">

**Author:** [@mrloosid](https://discourse.processing.org/u/mrloosid)\
**Replies:** 1\
**Last updated:** [November 2, 2021, 9:24am UTC](https://discourse.processing.org/t/how-do-i-reverse-the-animation-of-a-drawing-in-p5js-more-details-in-post/33245 "2021-11-02T09:24:31Z")

</div>

Source Code: p5.js Web Editor Basically I’m trying to do a pseudo generative poster that swaps between 3 artworks that I have predesigned. The idea is to make load one artpiece, wait a few seconds then reverse (essentia…

---

## [Creating perlin noise spheres/ blobs that reacts to mic](https://discourse.processing.org/t/creating-perlin-noise-spheres-blobs-that-reacts-to-mic/33241)

<div class="topic-metadata">

**Author:** [@timtam198](https://discourse.processing.org/u/timtam198)\
**Replies:** 0\
**Last updated:** [November 2, 2021, 4:23am UTC](https://discourse.processing.org/t/creating-perlin-noise-spheres-blobs-that-reacts-to-mic/33241 "2021-11-02T04:23:38Z")

</div>

Hello, I am trying to create spheres that reacts and distorts with mic inputs. I did some research and thought that perlin noise can create the effect I visualise. I wonder if anyone knows how to add perlin noise to my s…

---

## [Scaling down & rotating a pattern causes rendering issues and flickering](https://discourse.processing.org/t/scaling-down-rotating-a-pattern-causes-rendering-issues-and-flickering/33227)

<div class="topic-metadata">

**Author:** [@miracle2k](https://discourse.processing.org/u/miracle2k)\
**Replies:** 1\
**Last updated:** [November 1, 2021, 8:49pm UTC](https://discourse.processing.org/t/scaling-down-rotating-a-pattern-causes-rendering-issues-and-flickering/33227 "2021-11-01T20:49:58Z")

</div>

Take this sketch as an example, which I created to reproduce the problem in isolation: https://editor.p5js.org/elsdoerfer/sketches/NrPcyu-mG It’s supposed to be a striped line pattern. I want it to be very fine, 1px li…

---

## [Color interpolation in HSB - how to go the "closest" direction?](https://discourse.processing.org/t/color-interpolation-in-hsb-how-to-go-the-closest-direction/33211)

<div class="topic-metadata">

**Author:** [@dtreybig](https://discourse.processing.org/u/dtreybig)\
**Replies:** 2\
**Last updated:** [November 1, 2021, 7:13am UTC](https://discourse.processing.org/t/color-interpolation-in-hsb-how-to-go-the-closest-direction/33211 "2021-11-01T07:13:48Z")

</div>

Hi! I am exploring doing some color gradients in something I am working on. I generally have the core structure working well, defining multiple colors and using lerpColor() to linearly interpolate between them. The chal…

---

## [When p5js slider value is released function?](https://discourse.processing.org/t/when-p5js-slider-value-is-released-function/30581)

<div class="topic-metadata">

**Author:** [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Replies:** 5\
**Last updated:** [October 30, 2021, 10:52pm UTC](https://discourse.processing.org/t/when-p5js-slider-value-is-released-function/30581 "2021-10-30T22:52:57Z")

</div>

I want to re-draw the canvas when the user is done changing the slider values, how could I do that?

---

## [SimplexNoise is not defined](https://discourse.processing.org/t/simplexnoise-is-not-defined/33163)

<div class="topic-metadata">

**Author:** [@momo](https://discourse.processing.org/u/momo)\
**Replies:** 5\
**Last updated:** [October 30, 2021, 10:39am UTC](https://discourse.processing.org/t/simplexnoise-is-not-defined/33163 "2021-10-30T10:39:54Z")

</div>

Hello, I’m a beginner of P5.JS. And I found openprocessing is really great place to start. I was learning this interesting sketch made by Takawo 210612a - OpenProcessing(a really nice sketch), when I want to run it local…

---

## [Can't open the P5 editor on my browser](https://discourse.processing.org/t/cant-open-the-p5-editor-on-my-browser/33108)

<div class="topic-metadata">

**Author:** [@momo](https://discourse.processing.org/u/momo)\
**Replies:** 3\
**Last updated:** [October 29, 2021, 4:25pm UTC](https://discourse.processing.org/t/cant-open-the-p5-editor-on-my-browser/33108 "2021-10-29T16:25:16Z")

</div>

Hi, does anyone have the same issue? I can’t use it for at least 2 days. I know some approaches to working locally, but since i have been use the editor for months, I have made several collections. How can I get them?

---

## [Sketch is stuck on loading](https://discourse.processing.org/t/sketch-is-stuck-on-loading/33126)

<div class="topic-metadata">

**Author:** [@gm314](https://discourse.processing.org/u/gm314)\
**Replies:** 3\
**Last updated:** [October 29, 2021, 9:43am UTC](https://discourse.processing.org/t/sketch-is-stuck-on-loading/33126 "2021-10-29T09:43:23Z")

</div>

I created a sketch that contains a pre-load function and uploaded it to my website’s ftp on dreamhost. The preload references a csv file via a url. The sketch runs fine in the p5js web editor. But it won’t run on my site…

---

## [Integrating P5js + MaxMSP](https://discourse.processing.org/t/integrating-p5js-maxmsp/6334)

<div class="topic-metadata">

**Author:** [@yaniki](https://discourse.processing.org/u/yaniki)\
**Replies:** 14\
**Last updated:** [October 28, 2021, 11:41am UTC](https://discourse.processing.org/t/integrating-p5js-maxmsp/6334 "2021-10-28T11:41:46Z")

</div>

Dear Friends If somebody is interested in integrating p5js sketches with MaxMSP patches here is a simple example and some handy infos: https://www.paweljanicki.jp/projects\_maxandp5js\_en.html

---

## [Radio buttons positioning](https://discourse.processing.org/t/radio-buttons-positioning/33123)

<div class="topic-metadata">

**Author:** [@Clark](https://discourse.processing.org/u/Clark)\
**Replies:** 2\
**Last updated:** [October 28, 2021, 12:36am UTC](https://discourse.processing.org/t/radio-buttons-positioning/33123 "2021-10-28T00:36:22Z")

</div>

Hi. I am trying to find a method to position radio buttons closer to each other vertically. When I write : radio = createRadio(); radio.option('option-1'); radio.option('option-2'); radio.option('option-3')…

---

## [WebGL Background Image](https://discourse.processing.org/t/webgl-background-image/33121)

<div class="topic-metadata">

**Author:** [@Rubin](https://discourse.processing.org/u/Rubin)\
**Replies:** 2\
**Last updated:** [October 27, 2021, 8:10pm UTC](https://discourse.processing.org/t/webgl-background-image/33121 "2021-10-27T20:10:16Z")

</div>

I want to make a background image for my WebGL project. Does someone know how to do it?

---

## [How transform a value into a html element in p5?](https://discourse.processing.org/t/how-transform-a-value-into-a-html-element-in-p5/33050)

<div class="topic-metadata">

**Author:** [@letlet](https://discourse.processing.org/u/letlet)\
**Replies:** 4\
**Last updated:** [October 25, 2021, 7:11pm UTC](https://discourse.processing.org/t/how-transform-a-value-into-a-html-element-in-p5/33050 "2021-10-25T19:11:45Z")

</div>

Hi! I’m trying to make a single web page with p5.js, but at some moment I create an input and the value of the input I want to transform into a html tag (more specifically ‘h3’). I already tried the “.html()” as this exa…

---

## [How to draw a shape based on time](https://discourse.processing.org/t/how-to-draw-a-shape-based-on-time/33023)

<div class="topic-metadata">

**Author:** [@Razoil](https://discourse.processing.org/u/Razoil)\
**Replies:** 2\
**Last updated:** [October 23, 2021, 11:21pm UTC](https://discourse.processing.org/t/how-to-draw-a-shape-based-on-time/33023 "2021-10-23T23:21:07Z")

</div>

Hi everyone. I was looking at this video on how to build a radial graph based on sound Is there any (easy) way to map the circle (1 full turn) to the duration of the audio file. In the video I see that the…

---

## [General question on p5.js](https://discourse.processing.org/t/general-question-on-p5-js/33020)

<div class="topic-metadata">

**Author:** [@user101](https://discourse.processing.org/u/user101)\
**Replies:** 4\
**Last updated:** [October 23, 2021, 10:09pm UTC](https://discourse.processing.org/t/general-question-on-p5-js/33020 "2021-10-23T22:09:22Z")

</div>

Hi! I wanna create my one website and therefore want to learn programming with p5.js. I have e question, however. The p5.js library files have together have a size of eight MB. Does this mean, these 8 MB have to downloa…

---

## [Would it be okay to the Three.Js lib as the 3d renderer and use p5 as the overlay](https://discourse.processing.org/t/would-it-be-okay-to-the-three-js-lib-as-the-3d-renderer-and-use-p5-as-the-overlay/32991)

<div class="topic-metadata">

**Author:** [@Errorbot1122](https://discourse.processing.org/u/Errorbot1122)\
**Replies:** 6\
**Last updated:** [October 22, 2021, 6:10pm UTC](https://discourse.processing.org/t/would-it-be-okay-to-the-three-js-lib-as-the-3d-renderer-and-use-p5-as-the-overlay/32991 "2021-10-22T18:10:50Z")

</div>

I want three.js to use the same canvas, as in p5 being the UI and three.js as the Renderer would that be allowed / okay or is it bad… the could look be like this… // Vars, functions and stuff... function setup() { c…

---

## [Is there a way stop the function "windowResized" to rerun the "draw"?](https://discourse.processing.org/t/is-there-a-way-stop-the-function-windowresized-to-rerun-the-draw/32995)

<div class="topic-metadata">

**Author:** [@animanoir](https://discourse.processing.org/u/animanoir)\
**Replies:** 2\
**Last updated:** [October 22, 2021, 4:23pm UTC](https://discourse.processing.org/t/is-there-a-way-stop-the-function-windowresized-to-rerun-the-draw/32995 "2021-10-22T16:23:18Z")

</div>

Each time the windows is resized, the responsive function works as intended, but redrawing the canvas so all the sketch and its variables are recalculated. I simply want to position words in a random way through out the…

---

## [Typererror message | cannot figure it out](https://discourse.processing.org/t/typererror-message-cannot-figure-it-out/33000)

<div class="topic-metadata">

**Author:** [@cartopher](https://discourse.processing.org/u/cartopher)\
**Replies:** 2\
**Last updated:** [October 22, 2021, 12:33pm UTC](https://discourse.processing.org/t/typererror-message-cannot-figure-it-out/33000 "2021-10-22T12:33:52Z")

</div>

In the HTML file, I am attempting to set up Esri Leaflet. The base map displays, however, there is a ‘typerror’ message displayed in the console. I researched for too long and still can’t figure out the error. Any sugge…

---

## [Help i m beginner and i don't understand whats happend](https://discourse.processing.org/t/help-i-m-beginner-and-i-dont-understand-whats-happend/32982)

<div class="topic-metadata">

**Author:** [@Hiram-Belgium](https://discourse.processing.org/u/Hiram-Belgium)\
**Replies:** 10\
**Last updated:** [October 21, 2021, 7:38pm UTC](https://discourse.processing.org/t/help-i-m-beginner-and-i-dont-understand-whats-happend/32982 "2021-10-21T19:38:47Z")

</div>

Hello, my English is bad, I am French! I uploaded a file to openprocessing to study the mechanism of an automatic write that I need. I am under visualcode … Cannot run the program because I have an error (view in the co…

---

## [Canvas & Save Image output sizes](https://discourse.processing.org/t/canvas-save-image-output-sizes/32934)

<div class="topic-metadata">

**Author:** [@newreality](https://discourse.processing.org/u/newreality)\
**Replies:** 2\
**Last updated:** [October 21, 2021, 11:53am UTC](https://discourse.processing.org/t/canvas-save-image-output-sizes/32934 "2021-10-21T11:53:27Z")

</div>

Hi All, please be easy on me as this is my first post and I’m quite new to coding, in general. However I have made some amazing progress these past few weeks. I do have a question and I may be using the wrong terminolog…

---

## [Canvas with semi-transparent backgrounds gets tranprenty removed in draw](https://discourse.processing.org/t/canvas-with-semi-transparent-backgrounds-gets-tranprenty-removed-in-draw/32974)

<div class="topic-metadata">

**Author:** [@Errorbot1122](https://discourse.processing.org/u/Errorbot1122)\
**Replies:** 3\
**Last updated:** [October 21, 2021, 10:14am UTC](https://discourse.processing.org/t/canvas-with-semi-transparent-backgrounds-gets-tranprenty-removed-in-draw/32974 "2021-10-21T10:14:46Z")

</div>

When I put my semi-transparent background, into the draw loop the transparency disappears after a few frames function draw() { background(100, 100); } Minimal Reproducible Result

---

## [Resizing the canvas using canvas.size freezes my code](https://discourse.processing.org/t/resizing-the-canvas-using-canvas-size-freezes-my-code/32942)

<div class="topic-metadata">

**Author:** [@Errorbot1122](https://discourse.processing.org/u/Errorbot1122)\
**Replies:** 3\
**Last updated:** [October 20, 2021, 6:23pm UTC](https://discourse.processing.org/t/resizing-the-canvas-using-canvas-size-freezes-my-code/32942 "2021-10-20T18:23:52Z")

</div>

I want to resize a canvas using canvas.size(w, h) but it keeps freezing my code!!! What I’ve tried Converting the canvas (I think is p5.Renderer) into an element by doing this: new p5.Element(canvas.elt, p5), but it st…

---

## [Orthographic camera not working](https://discourse.processing.org/t/orthographic-camera-not-working/32950)

<div class="topic-metadata">

**Author:** [@clankill3r](https://discourse.processing.org/u/clankill3r)\
**Replies:** 1\
**Last updated:** [October 20, 2021, 2:53pm UTC](https://discourse.processing.org/t/orthographic-camera-not-working/32950 "2021-10-20T14:53:00Z")

</div>

I’m wondering if the orthographic camera is broken. I used the settings found here: I just don’t see anything appearing. Could someone confirm?

---

## [3D canvas clipping/Rotated Y lines not making it to or beyond the edge of z -axis?](https://discourse.processing.org/t/3d-canvas-clipping-rotated-y-lines-not-making-it-to-or-beyond-the-edge-of-z-axis/32954)

<div class="topic-metadata">

**Author:** [@hifilorau](https://discourse.processing.org/u/hifilorau)\
**Replies:** 1\
**Last updated:** [October 20, 2021, 2:46pm UTC](https://discourse.processing.org/t/3d-canvas-clipping-rotated-y-lines-not-making-it-to-or-beyond-the-edge-of-z-axis/32954 "2021-10-20T14:46:41Z")

</div>

Long time lurker, first time poster. I am working on a generative sketch with WEBGL This is an example. I’m having a huge issue getting my grid lines to extend to the edge of the canvas. And I suspect it’s because i e…

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

[Next page](https://discourse.processing.org/c/p5js/10.md?page=35)