# p5.js

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

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

**Page:** 9

---

## [Advance property in bounding box returned by textBounds](https://discourse.processing.org/t/advance-property-in-bounding-box-returned-by-textbounds/43735)

<div class="topic-metadata">

**Author:** [@fabiopettinati](https://discourse.processing.org/u/fabiopettinati)\
**Replies:** 3\
**Last updated:** [January 23, 2024, 10:03am UTC](https://discourse.processing.org/t/advance-property-in-bounding-box-returned-by-textbounds/43735 "2024-01-23T10:03:16Z")

</div>

The bounding box returned by textBounds() has the expected properties (x, y, h, w) and one more that surprised me: “advance”. What does it do? When would I use it? There is no documentation on this item. Thanks!

---

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

---

## [P5.js file can't be opened](https://discourse.processing.org/t/p5-js-file-cant-be-opened/43724)

<div class="topic-metadata">

**Author:** [@Noodlybanan](https://discourse.processing.org/u/Noodlybanan)\
**Replies:** 1\
**Last updated:** [January 21, 2024, 1:15pm UTC](https://discourse.processing.org/t/p5-js-file-cant-be-opened/43724 "2024-01-21T13:15:02Z")

</div>

Hello, I only see this when trying to open my p5.js Project. The p5.js mode can be opened, but not my project. Why? It is just plain text javascript files! Thanks for any help!

---

## [keyTyped() not responding in p5.js editor](https://discourse.processing.org/t/keytyped-not-responding-in-p5-js-editor/43582)

<div class="topic-metadata">

**Author:** [@Ignotus](https://discourse.processing.org/u/Ignotus)\
**Replies:** 3\
**Last updated:** [January 19, 2024, 10:11pm UTC](https://discourse.processing.org/t/keytyped-not-responding-in-p5-js-editor/43582 "2024-01-19T22:11:37Z")

</div>

I have some code in the p5.js editor that is not responding to keyTyped() or keyPressed() events. A slider interface element is also not responding. Possibly it’s an issue with the browser, but other interface elements d…

---

## [Bug in my code\_ Circle Overlap](https://discourse.processing.org/t/bug-in-my-code-circle-overlap/43716)

<div class="topic-metadata">

**Author:** [@Jiji](https://discourse.processing.org/u/Jiji)\
**Replies:** 3\
**Last updated:** [January 19, 2024, 4:10pm UTC](https://discourse.processing.org/t/bug-in-my-code-circle-overlap/43716 "2024-01-19T16:10:25Z")

</div>

Hi y’all, I am trying to make a test when 2 circles overlapped, then it should change color background. But for some reason, the background always changes color when the circles are closed and not overlapped yet. Unless…

---

## [Npm deprecated problem while setting up the p5.js web-editor using the docker](https://discourse.processing.org/t/npm-deprecated-problem-while-setting-up-the-p5-js-web-editor-using-the-docker/43712)

<div class="topic-metadata">

**Author:** [@Abhi1](https://discourse.processing.org/u/Abhi1)\
**Replies:** 0\
**Last updated:** [January 18, 2024, 9:23am UTC](https://discourse.processing.org/t/npm-deprecated-problem-while-setting-up-the-p5-js-web-editor-using-the-docker/43712 "2024-01-18T09:23:23Z")

</div>

Hi there! my name is Abhishek and while setting up the project locally on my machine ,i had a problem of npm deprecated while doing so, here is the snippet of it. error = =\> \[app development 1/9\] COPY package.json pac…

---

## [Can't download zip from p5.js web editor](https://discourse.processing.org/t/cant-download-zip-from-p5-js-web-editor/43346)

<div class="topic-metadata">

**Author:** [@qashto](https://discourse.processing.org/u/qashto)\
**Replies:** 0\
**Last updated:** [November 29, 2023, 3:03pm UTC](https://discourse.processing.org/t/cant-download-zip-from-p5-js-web-editor/43346 "2023-11-29T15:03:09Z")

</div>

I tried pressing download from the file menu of this sketch: This link opens in a new tab but nothing downloads: https://editor.p5js.org/editor/projects/BgGgw6QZN/zip

---

## [RangeError: Array buffer allocation failed at \_generateGlobalPalette](https://discourse.processing.org/t/rangeerror-array-buffer-allocation-failed-at-generateglobalpalette/43691)

<div class="topic-metadata">

**Author:** [@laya](https://discourse.processing.org/u/laya)\
**Replies:** 4\
**Last updated:** [January 15, 2024, 7:14am UTC](https://discourse.processing.org/t/rangeerror-array-buffer-allocation-failed-at-generateglobalpalette/43691 "2024-01-15T07:14:23Z")

</div>

Keep getting RangeError when saving the gif. Frames would be saved, but will get stuck in generating color palette (pic 1). Here’s my code: Here’s the error:

---

## [PressDo or keyPressed Error](https://discourse.processing.org/t/pressdo-or-keypressed-error/43688)

<div class="topic-metadata">

**Author:** [@elifworks](https://discourse.processing.org/u/elifworks)\
**Replies:** 9\
**Last updated:** [January 13, 2024, 11:04pm UTC](https://discourse.processing.org/t/pressdo-or-keypressed-error/43688 "2024-01-13T23:04:46Z")

</div>

Hello everyone, I developed a sketch on interactive typography. I wanted to create a keyboard-sensitive interaction with PressDo in the work whose codes I share with you below. However, “ArrowUp” and “ArrowDown” do not …

---

## [Basic PPI Question](https://discourse.processing.org/t/basic-ppi-question/43677)

<div class="topic-metadata">

**Author:** [@looplider](https://discourse.processing.org/u/looplider)\
**Replies:** 2\
**Last updated:** [January 12, 2024, 11:22am UTC](https://discourse.processing.org/t/basic-ppi-question/43677 "2024-01-12T11:22:31Z")

</div>

Hi there - I know that I can set the pixel dimensions in createCanvas - but I have no idea how to convert that information to inches or metric. It seems like there’s a basic equation that involves taking the square roo…

---

## [I.4: Graphing 1D Perlin Noise - Perlin Noise and p5.js Tutorial](https://discourse.processing.org/t/i-4-graphing-1d-perlin-noise-perlin-noise-and-p5-js-tutorial/33383)

<div class="topic-metadata">

**Author:** [@ibra9](https://discourse.processing.org/u/ibra9)\
**Replies:** 2\
**Last updated:** [January 10, 2024, 6:56pm UTC](https://discourse.processing.org/t/i-4-graphing-1d-perlin-noise-perlin-noise-and-p5-js-tutorial/33383 "2024-01-10T18:56:17Z")

</div>

Hello, I am having a hard time understanding why does the sketch move when start += inc at 10:00. I know its related to start += inc but I just don’t understand the logic behind it. Thanks.

---

## [Help understanding the logic behind this code (center grid)](https://discourse.processing.org/t/help-understanding-the-logic-behind-this-code-center-grid/43643)

<div class="topic-metadata">

**Author:** [@Jiji](https://discourse.processing.org/u/Jiji)\
**Replies:** 2\
**Last updated:** [January 10, 2024, 4:36am UTC](https://discourse.processing.org/t/help-understanding-the-logic-behind-this-code-center-grid/43643 "2024-01-10T04:36:47Z")

</div>

Hi everybody, I have this code from a tutorial. So basically I want to draw a grid of boxes using WEBGL. I have a hard time to understand the logic of this translate( size/2+ i \* size - size \* cols/2, size/2+ j \* size -…

---

## [Need help with wifi mesh network simulation code bug](https://discourse.processing.org/t/need-help-with-wifi-mesh-network-simulation-code-bug/43662)

<div class="topic-metadata">

**Author:** [@michaelberge](https://discourse.processing.org/u/michaelberge)\
**Replies:** 0\
**Last updated:** [January 9, 2024, 6:33pm UTC](https://discourse.processing.org/t/need-help-with-wifi-mesh-network-simulation-code-bug/43662 "2024-01-09T18:33:16Z")

</div>

INTRODUCTION: Hey everyone, I am working on a simulation for a wifi mesh algorithm before implementing on a prototype for a client. The code below is the whole program, it’s a little long for a forum post, but I didn’t …

---

## [Quadtrees image compression](https://discourse.processing.org/t/quadtrees-image-compression/12481)

<div class="topic-metadata">

**Author:** [@TimoL](https://discourse.processing.org/u/TimoL)\
**Replies:** 5\
**Last updated:** [January 9, 2024, 7:01am UTC](https://discourse.processing.org/t/quadtrees-image-compression/12481 "2024-01-09T07:01:14Z")

</div>

Hi everybody, Long time/first time… Im trying to create a Quadtree image compression using processing. I’ve tried to follow Daniel Shiffmans coding challenge on quadtree data structure but I get lost. I understand th…

---

## [How to connect p5.js web editor database to my mongoDB GUI](https://discourse.processing.org/t/how-to-connect-p5-js-web-editor-database-to-my-mongodb-gui/43594)

<div class="topic-metadata">

**Author:** [@DNotNice](https://discourse.processing.org/u/DNotNice)\
**Replies:** 1\
**Last updated:** [January 1, 2024, 8:36am UTC](https://discourse.processing.org/t/how-to-connect-p5-js-web-editor-database-to-my-mongodb-gui/43594 "2024-01-01T08:36:34Z")

</div>

I wanted to see how the project stores data in mongodb database so I followed all the steps as provided in the contributer docs and built the project using Docker .Everything works fine , but can anyone tell me how can I…

---

## [Make canvas transparent (or how to include a background image)](https://discourse.processing.org/t/make-canvas-transparent-or-how-to-include-a-background-image/43572)

<div class="topic-metadata">

**Author:** [@Bastilling](https://discourse.processing.org/u/Bastilling)\
**Replies:** 2\
**Last updated:** [December 29, 2023, 9:17pm UTC](https://discourse.processing.org/t/make-canvas-transparent-or-how-to-include-a-background-image/43572 "2023-12-29T21:17:37Z")

</div>

Hey everyone! I am currently working on a webpage as a sort of late christmas present and I can not figure out the solution for a specific design problem. Since I am unexperienced with html/css stuff, I wanted to ask so…

---

## [Vertex Trail with fading alpha possible?](https://discourse.processing.org/t/vertex-trail-with-fading-alpha-possible/43522)

<div class="topic-metadata">

**Author:** [@Tilman](https://discourse.processing.org/u/Tilman)\
**Replies:** 2\
**Last updated:** [December 27, 2023, 9:16pm UTC](https://discourse.processing.org/t/vertex-trail-with-fading-alpha-possible/43522 "2023-12-27T21:16:24Z")

</div>

Hi I have a visual trail. A vertex from history vector positions. I want this trail to be transitioning from full alpha at the beginning and 0 alpha at its end. When I do this with individual ellipses for the history a…

---

## [Can I show the keyboard of a mobile device?](https://discourse.processing.org/t/can-i-show-the-keyboard-of-a-mobile-device/26093)

<div class="topic-metadata">

**Author:** [@Filatov](https://discourse.processing.org/u/Filatov)\
**Replies:** 4\
**Last updated:** [December 25, 2023, 1:40pm UTC](https://discourse.processing.org/t/can-i-show-the-keyboard-of-a-mobile-device/26093 "2023-12-25T13:40:57Z")

</div>

I am developing an interface for the program, made a component for entering text. The PC version works fine. Is it possible to force the keyboard to open in a browser on a mobile device and read the key pressed? Is ther…

---

## [Using the drawNobo function for generative typography](https://discourse.processing.org/t/using-the-drawnobo-function-for-generative-typography/43553)

<div class="topic-metadata">

**Author:** [@elifworks](https://discourse.processing.org/u/elifworks)\
**Replies:** 0\
**Last updated:** [December 23, 2023, 5:58pm UTC](https://discourse.processing.org/t/using-the-drawnobo-function-for-generative-typography/43553 "2023-12-23T17:58:01Z")

</div>

Hello everyone, I’m new to p5.js I want to design a series of generative typefaces, based on open source code and adapted to p5.js. But in this project, would it be possible to create, for example, a letter S instead o…

---

## [I am getting vulnerabilities while setting up the p5.js project](https://discourse.processing.org/t/i-am-getting-vulnerabilities-while-setting-up-the-p5-js-project/42893)

<div class="topic-metadata">

**Author:** [@Jamir](https://discourse.processing.org/u/Jamir)\
**Replies:** 1\
**Last updated:** [December 22, 2023, 11:15am UTC](https://discourse.processing.org/t/i-am-getting-vulnerabilities-while-setting-up-the-p5-js-project/42893 "2023-12-22T11:15:57Z")

</div>

When I tried to setup p5.js project locally. I followed the steps given in Contributor Guidelines. When I ran npm ci command, it showed me 17 vulnerabilities (5 moderate, 7 high, 5 critical) as given in the screenshot be…

---

## [Enquiry for maintainers](https://discourse.processing.org/t/enquiry-for-maintainers/43527)

<div class="topic-metadata">

**Author:** [@gunjjoshi](https://discourse.processing.org/u/gunjjoshi)\
**Replies:** 2\
**Last updated:** [December 21, 2023, 1:42pm UTC](https://discourse.processing.org/t/enquiry-for-maintainers/43527 "2023-12-21T13:42:16Z")

</div>

Can I know who is the maintainer of the p5.js we-editor project ? I was trying to explore the codebase, and I want someone whom I can reach out for any queries.

---

## [Mouse interactions stop working on published page](https://discourse.processing.org/t/mouse-interactions-stop-working-on-published-page/43506)

<div class="topic-metadata">

**Author:** [@holby](https://discourse.processing.org/u/holby)\
**Replies:** 1\
**Last updated:** [December 20, 2023, 4:04pm UTC](https://discourse.processing.org/t/mouse-interactions-stop-working-on-published-page/43506 "2023-12-20T16:04:06Z")

</div>

Hello When I publish my sketch to a folder on my webhost, the mouse interactions stop functioning (they work in the editor): https://north-berlin.com/p5/ Can anyone see anything wrong here with this code? Thanks! va…

---

## [Book recos for p5,js?](https://discourse.processing.org/t/book-recos-for-p5-js/19778)

<div class="topic-metadata">

**Author:** [@CrouchingPython](https://discourse.processing.org/u/CrouchingPython)\
**Replies:** 8\
**Last updated:** [December 15, 2023, 1:23pm UTC](https://discourse.processing.org/t/book-recos-for-p5-js/19778 "2023-12-15T13:23:02Z")

</div>

Hi all, looking for recos for good p5.js books for beginner/intermediate learners. I’ve got the Getting Started from Maker one and searching for the next one. Interested in p5 books, not Processing, thanks!

---

## [Aesthetic Programming Book](https://discourse.processing.org/t/aesthetic-programming-book/35697)

<div class="topic-metadata">

**Author:** [@Tupax](https://discourse.processing.org/u/Tupax)\
**Replies:** 2\
**Last updated:** [December 15, 2023, 1:21pm UTC](https://discourse.processing.org/t/aesthetic-programming-book/35697 "2023-12-15T13:21:28Z")

</div>

Hello world! I start to read Aesthetic programming . In a slow way, a chapter per saturday (Start chapt 4 today). But wow, it takes me about 4-5 hours, on my “focus mode”. :rofl: and its not the code part, because i wo…

---

## [How can convert my Processing code to JavaScript so it runs in a webpage?](https://discourse.processing.org/t/how-can-convert-my-processing-code-to-javascript-so-it-runs-in-a-webpage/43475)

<div class="topic-metadata">

**Author:** [@bouu28](https://discourse.processing.org/u/bouu28)\
**Replies:** 3\
**Last updated:** [December 14, 2023, 8:07pm UTC](https://discourse.processing.org/t/how-can-convert-my-processing-code-to-javascript-so-it-runs-in-a-webpage/43475 "2023-12-14T20:07:43Z")

</div>

So i have this new assignement and i need to make this animation but now i need too put this in a webpage, i already tried pass this to javascript and put in the webpage but it doesn´t work. Can someone please help me wi…

---

## [Question on buildGeometry() with p5.js](https://discourse.processing.org/t/question-on-buildgeometry-with-p5-js/43473)

<div class="topic-metadata">

**Author:** [@Pierre1](https://discourse.processing.org/u/Pierre1)\
**Replies:** 2\
**Last updated:** [December 14, 2023, 3:52pm UTC](https://discourse.processing.org/t/question-on-buildgeometry-with-p5-js/43473 "2023-12-14T15:52:47Z")

</div>

Using version 4.3 I am unable to have code with buildGeometry & model working on my PC. The example code in p5.js does npt work. When I save it on Openprocessing, it works. (happily…) All other 3D functions with WEBG…

---

## [How to check change code works](https://discourse.processing.org/t/how-to-check-change-code-works/43426)

<div class="topic-metadata">

**Author:** [@Ujjwal25](https://discourse.processing.org/u/Ujjwal25)\
**Replies:** 9\
**Last updated:** [December 12, 2023, 1:03pm UTC](https://discourse.processing.org/t/how-to-check-change-code-works/43426 "2023-12-12T13:03:11Z")

</div>

Hey, I have some good solutions of some issues , but I don’t know how to start the localserver for p5.js repository, like I ran all the scripts but can’t see editor on live server

---

## [A website that let user place an image and another user also see it? \[ONLINE WEBSITE\]](https://discourse.processing.org/t/a-website-that-let-user-place-an-image-and-another-user-also-see-it-online-website/43439)

<div class="topic-metadata">

**Author:** [@teemee](https://discourse.processing.org/u/teemee)\
**Replies:** 0\
**Last updated:** [December 11, 2023, 3:45am UTC](https://discourse.processing.org/t/a-website-that-let-user-place-an-image-and-another-user-also-see-it-online-website/43439 "2023-12-11T03:45:22Z")

</div>

I’m having a problem understanding how to work with actual online servers to make other user see what another selected item. Let’s say the image is selected and placed at location x and y the program will save the name a…

---

## [Cannot create multiple AudioIn instances](https://discourse.processing.org/t/cannot-create-multiple-audioin-instances/43411)

<div class="topic-metadata">

**Author:** [@Irigami](https://discourse.processing.org/u/Irigami)\
**Replies:** 3\
**Last updated:** [December 8, 2023, 4:38pm UTC](https://discourse.processing.org/t/cannot-create-multiple-audioin-instances/43411 "2023-12-08T16:38:53Z")

</div>

Hi all, I’m trying to use two audio inputs (2 microphones) in my p5 js project. It should be noted that I am using the p5 web editor for this. This simple program results in an error, and I was going to file an issue …

---

## [Camera not in sync with position and rotation](https://discourse.processing.org/t/camera-not-in-sync-with-position-and-rotation/43384)

<div class="topic-metadata">

**Author:** [@somartist](https://discourse.processing.org/u/somartist)\
**Replies:** 28\
**Last updated:** [December 7, 2023, 8:56am UTC](https://discourse.processing.org/t/camera-not-in-sync-with-position-and-rotation/43384 "2023-12-07T08:56:37Z")

</div>

I’m working on a prototype, mostly for fun. I have the camera following the player model, by its position and rotation. Everything works kinda, but there seems to be a problem with the camera being desynced with the po…

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

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