# p5.js

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

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

**Page:** 12

---

## [MQTT and P5 Example Code](https://discourse.processing.org/t/mqtt-and-p5-example-code/32503)

<div class="topic-metadata">

**Author:** [@Jhdgkss](https://discourse.processing.org/u/Jhdgkss)\
**Replies:** 5\
**Last updated:** [August 3, 2023, 8:40am UTC](https://discourse.processing.org/t/mqtt-and-p5-example-code/32503 "2023-08-03T08:40:37Z")

</div>

Hi, all is it possible to receive MQTT data with P5.js? I found this code but it does not seem to connect with my broker. var mqtt; var reconnectTimeout = 2000; var host = "127.0.0.1"; var port = 1883; function setu…

---

## [\[p5 WEB\] The website IP address is exposed. help me](https://discourse.processing.org/t/p5-web-the-website-ip-address-is-exposed-help-me/42539)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 2\
**Last updated:** [August 2, 2023, 6:22pm UTC](https://discourse.processing.org/t/p5-web-the-website-ip-address-is-exposed-help-me/42539 "2023-08-02T18:22:13Z")

</div>

source code alert('Check your ID and password.'); A pop-up window operates. However, the website IP address is exposed. Is it possible to open a ‘pop-up’ window so that the IP address is not exposed?

---

## [\[p5 grafica library\] I would like to know how to change the graph scale fontsize](https://discourse.processing.org/t/p5-grafica-library-i-would-like-to-know-how-to-change-the-graph-scale-fontsize/42529)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 2\
**Last updated:** [August 1, 2023, 5:59am UTC](https://discourse.processing.org/t/p5-grafica-library-i-would-like-to-know-how-to-change-the-graph-scale-fontsize/42529 "2023-08-01T05:59:12Z")

</div>

\[p5 grafica library\] I would like to know how to change the graph scale fontsize. var plots1; function setup() { createCanvas(1920, 1200); var x,y,w,h,w2,h2; var points = \[\]; var s\_k = 0; for (var …

---

## [Firebase 10.1.0 and p5](https://discourse.processing.org/t/firebase-10-1-0-and-p5/42514)

<div class="topic-metadata">

**Author:** [@lizzy](https://discourse.processing.org/u/lizzy)\
**Replies:** 3\
**Last updated:** [July 28, 2023, 10:37pm UTC](https://discourse.processing.org/t/firebase-10-1-0-and-p5/42514 "2023-07-28T22:37:36Z")

</div>

Hello forum, In the past I have been successful integrating a p5 sketch with a firebase realtime database. When I went to start a new project, it’s not working the way that it used to and I am stuck. With firebase vers…

---

## [Collision detection with rotated objects](https://discourse.processing.org/t/collision-detection-with-rotated-objects/11810)

<div class="topic-metadata">

**Author:** [@lizzy](https://discourse.processing.org/u/lizzy)\
**Replies:** 4\
**Last updated:** [July 28, 2023, 1:29pm UTC](https://discourse.processing.org/t/collision-detection-with-rotated-objects/11810 "2023-07-28T13:29:34Z")

</div>

I am trying to detect collision between a rotated and non-rotated object. I’m using the p5 rotate function, and the objects are not in the same coordinate space. Thanks for your help! translate(width/2,height/2); …

---

## [Error attempting to open the P5.js downloaded program](https://discourse.processing.org/t/error-attempting-to-open-the-p5-js-downloaded-program/42486)

<div class="topic-metadata">

**Author:** [@Do\_Not\_Give\_Up](https://discourse.processing.org/u/Do_Not_Give_Up)\
**Replies:** 21\
**Last updated:** [July 27, 2023, 2:54pm UTC](https://discourse.processing.org/t/error-attempting-to-open-the-p5-js-downloaded-program/42486 "2023-07-27T14:54:59Z")

</div>

---

## [Is multi-canvas production possible? (In Processing p5 Mode)](https://discourse.processing.org/t/is-multi-canvas-production-possible-in-processing-p5-mode/41642)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 10\
**Last updated:** [July 27, 2023, 1:58am UTC](https://discourse.processing.org/t/is-multi-canvas-production-possible-in-processing-p5-mode/41642 "2023-07-27T01:58:40Z")

</div>

hello. nice to meet you. Is multi-canvas production possible? (In Processing p5 Mode) As you can see from the picture, the position of the canvas is also determined, and the size (size) is determined and placed. Is…

---

## [Can I do IP BAN on WEB (P5)?](https://discourse.processing.org/t/can-i-do-ip-ban-on-web-p5/42481)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 2\
**Last updated:** [July 23, 2023, 7:56pm UTC](https://discourse.processing.org/t/can-i-do-ip-ban-on-web-p5/42481 "2023-07-23T19:56:55Z")

</div>

Can I do IP BAN on WEB (P5)? hello. Thank you for your interest in my article. We confirmed that there is an ‘IP BAN’ function in ‘WEB’ that we use. Is there any way to do ‘IP BAN’ in ‘P5’? Or do you have a ‘solution’…

---

## [Keep It Simple: From Ambitious Project to Simple Prototype as a p5js Newbie](https://discourse.processing.org/t/keep-it-simple-from-ambitious-project-to-simple-prototype-as-a-p5js-newbie/42469)

<div class="topic-metadata">

**Author:** [@Enkerli](https://discourse.processing.org/u/Enkerli)\
**Replies:** 0\
**Last updated:** [July 21, 2023, 7:46pm UTC](https://discourse.processing.org/t/keep-it-simple-from-ambitious-project-to-simple-prototype-as-a-p5js-newbie/42469 "2023-07-21T19:46:49Z")

</div>

I’m not a coder. I’m more of an ethnomusicologist, a technopedagogue, an ethnographer, and a Learning Experience Designer. Really, not a coder. Although I have dabbled in code for quite a while (from BASIC on a ViC-20 …

---

## [Start with Processing or p5.js](https://discourse.processing.org/t/start-with-processing-or-p5-js/42446)

<div class="topic-metadata">

**Author:** [@creacomp](https://discourse.processing.org/u/creacomp)\
**Replies:** 2\
**Last updated:** [July 19, 2023, 7:34pm UTC](https://discourse.processing.org/t/start-with-processing-or-p5-js/42446 "2023-07-19T19:34:16Z")

</div>

Hi everyone, I would like to generate multiple pictures (for now RGB, maybe later CMYK), to use them in an animation and later in a printed book (every shape should be a page of its own). The basic idea is: four graph…

---

## [White Screen and Error Handling Issues in p5.js Online Editor](https://discourse.processing.org/t/white-screen-and-error-handling-issues-in-p5-js-online-editor/42437)

<div class="topic-metadata">

**Author:** [@jayzhofen](https://discourse.processing.org/u/jayzhofen)\
**Replies:** 2\
**Last updated:** [July 19, 2023, 8:59am UTC](https://discourse.processing.org/t/white-screen-and-error-handling-issues-in-p5-js-online-editor/42437 "2023-07-19T08:59:36Z")

</div>

I’m encountering an issue with the p5.js online editor (https://editor.p5js.org). When I input the following code: c function setup() { createCanvas(400, 400); } function draw() { background(220); } I receive a se…

---

## [How to store a web font into variable? How to reference to the web font imported as css @font-face?](https://discourse.processing.org/t/how-to-store-a-web-font-into-variable-how-to-reference-to-the-web-font-imported-as-css-font-face/42444)

<div class="topic-metadata">

**Author:** [@WaningJupiter](https://discourse.processing.org/u/WaningJupiter)\
**Replies:** 2\
**Last updated:** [July 18, 2023, 4:39pm UTC](https://discourse.processing.org/t/how-to-store-a-web-font-into-variable-how-to-reference-to-the-web-font-imported-as-css-font-face/42444 "2023-07-18T16:39:41Z")

</div>

Hello, for some reason I want to import a font from Google Fonts as webfont to avoid using loadFont(); I insert the font link into index.html and in my style.css : @font-face {font-family : "myFont" } In sketch.js, …

---

## [Zoom of a browser](https://discourse.processing.org/t/zoom-of-a-browser/42421)

<div class="topic-metadata">

**Author:** [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Replies:** 3\
**Last updated:** [July 15, 2023, 10:26am UTC](https://discourse.processing.org/t/zoom-of-a-browser/42421 "2023-07-15T10:26:12Z")

</div>

Hi Pals, how do I access the zoom DOM element of a browser?..my project has a major design flaw that requires zooming out from 100 to 50%. I want to access the zoom dom so I will set the zoom at 50%. I also want the opti…

---

## [Slow Drawing, trail left behind when updating rect x and y](https://discourse.processing.org/t/slow-drawing-trail-left-behind-when-updating-rect-x-and-y/42409)

<div class="topic-metadata">

**Author:** [@fools](https://discourse.processing.org/u/fools)\
**Replies:** 2\
**Last updated:** [July 13, 2023, 2:14pm UTC](https://discourse.processing.org/t/slow-drawing-trail-left-behind-when-updating-rect-x-and-y/42409 "2023-07-13T14:14:16Z")

</div>

I have just started learning javascript so my knowledge of the language isnt great. i tried to make a pacman clone in p5.js as i thought that would be a good starting project. i just implemented movement and if you can s…

---

## [Requesting Permission for Accessing Accelerometer Data](https://discourse.processing.org/t/requesting-permission-for-accessing-accelerometer-data/42402)

<div class="topic-metadata">

**Author:** [@Arcriet](https://discourse.processing.org/u/Arcriet)\
**Replies:** 0\
**Last updated:** [July 12, 2023, 1:46am UTC](https://discourse.processing.org/t/requesting-permission-for-accessing-accelerometer-data/42402 "2023-07-12T01:46:58Z")

</div>

Hi all, I am a beginner just starting to learn p5.js. The current version of iOS does not allow users to directly access accelerometer data in the browser. In older versions of iOS, one could enable this permission in t…

---

## [Importing classes from an external GitHub repo](https://discourse.processing.org/t/importing-classes-from-an-external-github-repo/42394)

<div class="topic-metadata">

**Author:** [@Broccaaa](https://discourse.processing.org/u/Broccaaa)\
**Replies:** 6\
**Last updated:** [July 11, 2023, 3:10pm UTC](https://discourse.processing.org/t/importing-classes-from-an-external-github-repo/42394 "2023-07-11T15:10:01Z")

</div>

I want to use some JavaScript tools located on the following github repo: GitHub - mfogel/polygon-clipping: Apply boolean polygon clipping operations (union, intersection, difference, xor) to your Polygons & MultiPolygon…

---

## [Scope and random number generators](https://discourse.processing.org/t/scope-and-random-number-generators/42385)

<div class="topic-metadata">

**Author:** [@Sambo](https://discourse.processing.org/u/Sambo)\
**Replies:** 1\
**Last updated:** [July 9, 2023, 6:41pm UTC](https://discourse.processing.org/t/scope-and-random-number-generators/42385 "2023-07-09T18:41:26Z")

</div>

I understand the problem with choosing randoms either 1: inside function draw(), or 2: inside functions that are called inside draw, but why is it that random() is a scope error outside of setup() ? Is it necessary to g…

---

## [Preloading Many Images in Preload](https://discourse.processing.org/t/preloading-many-images-in-preload/42372)

<div class="topic-metadata">

**Author:** [@DonaldZhu](https://discourse.processing.org/u/DonaldZhu)\
**Replies:** 1\
**Last updated:** [July 8, 2023, 5:25pm UTC](https://discourse.processing.org/t/preloading-many-images-in-preload/42372 "2023-07-08T17:25:17Z")

</div>

I was trying to preload around 200 1MB images in my local sketch with loadImage() but found p5 to be stuck in preload(). I have replicated the issue here. To note, it will stall initially in the web editor due to fetchi…

---

## [Adjusting pixel brightness value of an image](https://discourse.processing.org/t/adjusting-pixel-brightness-value-of-an-image/42343)

<div class="topic-metadata">

**Author:** [@glosoli3](https://discourse.processing.org/u/glosoli3)\
**Replies:** 6\
**Last updated:** [July 8, 2023, 10:06pm UTC](https://discourse.processing.org/t/adjusting-pixel-brightness-value-of-an-image/42343 "2023-07-08T22:06:28Z")

</div>

Ok, I’ve exhausted myself trying to adjust the brightness of pixels from a loaded image using p5.js.I’ve looked online and multiple forums with no solution. It seems like color and colorMode work very differently in p5.j…

---

## [Creating complex programs (merging programs)](https://discourse.processing.org/t/creating-complex-programs-merging-programs/42347)

<div class="topic-metadata">

**Author:** [@cuvner](https://discourse.processing.org/u/cuvner)\
**Replies:** 1\
**Last updated:** [July 5, 2023, 5:56pm UTC](https://discourse.processing.org/t/creating-complex-programs-merging-programs/42347 "2023-07-05T17:56:18Z")

</div>

Hello, Im developing some software that is getting complex fast. Arduino with capacitve touch input Serial comms Particle system Projection mapping My question is about program structure and best practise. I have all…

---

## [Tracking multiple people](https://discourse.processing.org/t/tracking-multiple-people/42324)

<div class="topic-metadata">

**Author:** [@zero2411](https://discourse.processing.org/u/zero2411)\
**Replies:** 0\
**Last updated:** [July 1, 2023, 1:06pm UTC](https://discourse.processing.org/t/tracking-multiple-people/42324 "2023-07-01T13:06:41Z")

</div>

Hi, For an art installation at a small light festival, I’m looking for a way to track people walking through a small street. My idea is to set up a webcam (or Kinect V2 sensor) at a high position pointing down to the s…

---

## [3D model does not respond to light in instance mode](https://discourse.processing.org/t/3d-model-does-not-respond-to-light-in-instance-mode/42206)

<div class="topic-metadata">

**Author:** [@tanzor](https://discourse.processing.org/u/tanzor)\
**Replies:** 1\
**Last updated:** [June 26, 2023, 9:04am UTC](https://discourse.processing.org/t/3d-model-does-not-respond-to-light-in-instance-mode/42206 "2023-06-26T09:04:59Z")

</div>

Hi all, When I load my blender-made object into a p5.js sketch in instance mode it does not interact with the light source, but appears as a silhouette. Is this a known limitation? Is there a workaround, assuming I nee…

---

## [Change default name for right-click "Save image as..."](https://discourse.processing.org/t/change-default-name-for-right-click-save-image-as/42245)

<div class="topic-metadata">

**Author:** [@guille](https://discourse.processing.org/u/guille)\
**Replies:** 2\
**Last updated:** [June 20, 2023, 10:08am UTC](https://discourse.processing.org/t/change-default-name-for-right-click-save-image-as/42245 "2023-06-20T10:08:07Z")

</div>

In Firefox, a p5 canvas can be saved with right click and “Save image as…”. The default name it gives is canvas.png. I know I could use saveCanvas(), but I’d like to use the native browser menu. Is there any way to set t…

---

## [P5.js web editor vs gitpages - same code, different behavior](https://discourse.processing.org/t/p5-js-web-editor-vs-gitpages-same-code-different-behavior/42236)

<div class="topic-metadata">

**Author:** [@nsegal](https://discourse.processing.org/u/nsegal)\
**Replies:** 1\
**Last updated:** [June 17, 2023, 11:39pm UTC](https://discourse.processing.org/t/p5-js-web-editor-vs-gitpages-same-code-different-behavior/42236 "2023-06-17T23:39:40Z")

</div>

Using the p5 web editor I made a web app to run on the browser of a smart phone. I think made a git repo and copied all the code to the repo and hosted it on gitpages. The html, css, and sketch.js are the same, but when …

---

## [Moving a object with the createGraphics function without leaving a trail](https://discourse.processing.org/t/moving-a-object-with-the-creategraphics-function-without-leaving-a-trail/42230)

<div class="topic-metadata">

**Author:** [@Delain](https://discourse.processing.org/u/Delain)\
**Replies:** 4\
**Last updated:** [June 17, 2023, 12:18pm UTC](https://discourse.processing.org/t/moving-a-object-with-the-creategraphics-function-without-leaving-a-trail/42230 "2023-06-17T12:18:27Z")

</div>

My idea is making a background with the watercolor effect used by steve maker’s space on youtube. I succeeded making it into a function and put it in the setup function. Now I have a background with a nice texture I woul…

---

## [Why does my code splice to many rectangles from the array?](https://discourse.processing.org/t/why-does-my-code-splice-to-many-rectangles-from-the-array/42202)

<div class="topic-metadata">

**Author:** [@Delain](https://discourse.processing.org/u/Delain)\
**Replies:** 2\
**Last updated:** [June 13, 2023, 6:27am UTC](https://discourse.processing.org/t/why-does-my-code-splice-to-many-rectangles-from-the-array/42202 "2023-06-13T06:27:48Z")

</div>

I am trying to make the piet mondrian in p5js, kinda following this site https://generativeartistry.com/tutorials/piet-mondrian/ I keep on running into same problem over and over again and have tried different ways to …

---

## [Color mixing shader produces different results in p5.js editor versus local environment](https://discourse.processing.org/t/color-mixing-shader-produces-different-results-in-p5-js-editor-versus-local-environment/42133)

<div class="topic-metadata">

**Author:** [@Misha.studio](https://discourse.processing.org/u/Misha.studio)\
**Replies:** 5\
**Last updated:** [June 12, 2023, 7:37am UTC](https://discourse.processing.org/t/color-mixing-shader-produces-different-results-in-p5-js-editor-versus-local-environment/42133 "2023-06-12T07:37:27Z")

</div>

Hi there! I’m working on a project where I’m exploring pigment color mixing using spectral.js. To improve my code I created a sketch with a color mix shader using the p5.js editor. When I got the shader working it was ti…

---

## [Can someone help to check why the circles are not random color?](https://discourse.processing.org/t/can-someone-help-to-check-why-the-circles-are-not-random-color/42176)

<div class="topic-metadata">

**Author:** [@Jiuyi91](https://discourse.processing.org/u/Jiuyi91)\
**Replies:** 2\
**Last updated:** [June 10, 2023, 3:21pm UTC](https://discourse.processing.org/t/can-someone-help-to-check-why-the-circles-are-not-random-color/42176 "2023-06-10T15:21:56Z")

</div>

let r,g,b,colorFill,R; let col,canvas2; function setup() { createCanvas(windowWidth, windowHeight); canvas2=createGraphics(windowWidth, windowHeight); canvas2.clear(); } function draw() { background(col,0,160); …

---

## [Recursive function for generating permutations of \[0, ..., n\]](https://discourse.processing.org/t/recursive-function-for-generating-permutations-of-0-n/42163)

<div class="topic-metadata">

**Author:** [@jackeddielove](https://discourse.processing.org/u/jackeddielove)\
**Replies:** 9\
**Last updated:** [June 10, 2023, 1:55am UTC](https://discourse.processing.org/t/recursive-function-for-generating-permutations-of-0-n/42163 "2023-06-10T01:55:57Z")

</div>

// trying to write a recursive function that returns all the permutations of \[0, ..., n\], for example: // perms(0) = \[\[0\]\] // perms(1) = \[\[0, 1\], \[1, 0\]\] // perms(2) = \[\[0, 1, 2\], \[0, 2, 1\], \[2, 0, 1\], \[1, 0, 2\], \[1, 2, …

---

## [Save to local storage, canvas and image should always remain](https://discourse.processing.org/t/save-to-local-storage-canvas-and-image-should-always-remain/42162)

<div class="topic-metadata">

**Author:** [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Replies:** 4\
**Last updated:** [June 7, 2023, 5:41pm UTC](https://discourse.processing.org/t/save-to-local-storage-canvas-and-image-should-always-remain/42162 "2023-06-07T17:41:17Z")

</div>

Hi friends, How do I save the variable mybytes holding the data to local storage so that the circles(images created after you drag and drop the Midi file) will always remain on the browser even if web page is reloaded? …

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

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