# p5.js

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

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

**Page:** 18

---

## [Random() vs. Math.random() in p5js](https://discourse.processing.org/t/random-vs-math-random-in-p5js/39660)

<div class="topic-metadata">

**Author:** [@rkotty](https://discourse.processing.org/u/rkotty)\
**Replies:** 2\
**Last updated:** [November 10, 2022, 3:24pm UTC](https://discourse.processing.org/t/random-vs-math-random-in-p5js/39660 "2022-11-10T15:24:52Z")

</div>

I wanted to create global random variables, but when I used random() outside of all the functions, random() was not recognized. A student Googled that I needed to use Math.random() in this case. Why is that?

---

## [How to make a card matching game in p5.js (memory)](https://discourse.processing.org/t/how-to-make-a-card-matching-game-in-p5-js-memory/39592)

<div class="topic-metadata">

**Author:** [@yoyo](https://discourse.processing.org/u/yoyo)\
**Replies:** 21\
**Last updated:** [November 9, 2022, 11:46am UTC](https://discourse.processing.org/t/how-to-make-a-card-matching-game-in-p5-js-memory/39592 "2022-11-09T11:46:59Z")

</div>

I am trying to make a card matching game. But I don’t know how I can matching than when they are correct. Maybe I can let the first card and second card . But I don’t really know how to do it. Link: p5.js Web Editor l…

---

## [ColorPicker with alpha?](https://discourse.processing.org/t/colorpicker-with-alpha/39521)

<div class="topic-metadata">

**Author:** [@Chris](https://discourse.processing.org/u/Chris)\
**Replies:** 4\
**Last updated:** [November 8, 2022, 3:44pm UTC](https://discourse.processing.org/t/colorpicker-with-alpha/39521 "2022-11-08T15:44:10Z")

</div>

Hello. What about \`createColorPicker’ with RGBA mode ? It could be great to have this option (ARGB+Alpha) What do you think about ? Thanks. Chris

---

## [How do I avoid "blending" or "bleeding" of edges of solidly-colored shapes?](https://discourse.processing.org/t/how-do-i-avoid-blending-or-bleeding-of-edges-of-solidly-colored-shapes/39569)

<div class="topic-metadata">

**Author:** [@sleepingsun](https://discourse.processing.org/u/sleepingsun)\
**Replies:** 8\
**Last updated:** [November 7, 2022, 9:17pm UTC](https://discourse.processing.org/t/how-do-i-avoid-blending-or-bleeding-of-edges-of-solidly-colored-shapes/39569 "2022-11-07T21:17:47Z")

</div>

Hi all Whenever I draw a solid shape of one color, wherever it has an edge meeting up with a different color, it will have a different color along the edge. Not the color of the shape, not the color that is outside the …

---

## [Possible to restrict mouseDragged to canvas in instance mode?](https://discourse.processing.org/t/possible-to-restrict-mousedragged-to-canvas-in-instance-mode/39606)

<div class="topic-metadata">

**Author:** [@res56](https://discourse.processing.org/u/res56)\
**Replies:** 5\
**Last updated:** [November 7, 2022, 6:40pm UTC](https://discourse.processing.org/t/possible-to-restrict-mousedragged-to-canvas-in-instance-mode/39606 "2022-11-07T18:40:34Z")

</div>

Hi frens, I want to register the mouseDragged Function to a canvas in instance mode (within a react component). But mouseDragged is not available (only mousePressed and mouseClicked…). Is there a workaround to check i…

---

## [My account web editor on P5js is safe for security?](https://discourse.processing.org/t/my-account-web-editor-on-p5js-is-safe-for-security/39599)

<div class="topic-metadata">

**Author:** [@wonwoo](https://discourse.processing.org/u/wonwoo)\
**Replies:** 1\
**Last updated:** [November 7, 2022, 8:44am UTC](https://discourse.processing.org/t/my-account-web-editor-on-p5js-is-safe-for-security/39599 "2022-11-07T08:44:09Z")

</div>

Hi, All. If I upload an image to my account web editor on P5js, is it safe for security? Maybe someone else can see it or use it without permission, right? Thanks. Best, @bemoregt.

---

## [Is There a Free, Up-to-date Offline/Downloadable Reference?](https://discourse.processing.org/t/is-there-a-free-up-to-date-offline-downloadable-reference/39595)

<div class="topic-metadata">

**Author:** [@cottonchipper](https://discourse.processing.org/u/cottonchipper)\
**Replies:** 4\
**Last updated:** [November 6, 2022, 4:27pm UTC](https://discourse.processing.org/t/is-there-a-free-up-to-date-offline-downloadable-reference/39595 "2022-11-06T16:27:06Z")

</div>

I’m going to be away from internet access and working on an iPad. I’ve got a P5js editor installed, but I really need a good P5js reference. I’ve found a PDF version of “Getting Started with P5js” but it doesn’t seem to …

---

## [Problem with delete shader for optimization](https://discourse.processing.org/t/problem-with-delete-shader-for-optimization/39523)

<div class="topic-metadata">

**Author:** [@Omri](https://discourse.processing.org/u/Omri)\
**Replies:** 5\
**Last updated:** [November 6, 2022, 10:43am UTC](https://discourse.processing.org/t/problem-with-delete-shader-for-optimization/39523 "2022-11-06T10:43:23Z")

</div>

hey :slight\_smile: I have a big sketch with a lot of shaders that I use at different times. so for optimizations, I want to delete the PGraphics and the shaders that I don’t want to use anymore. (As recommended here: W…

---

## [Is there any p5 function for 2d FFT?](https://discourse.processing.org/t/is-there-any-p5-function-for-2d-fft/39541)

<div class="topic-metadata">

**Author:** [@wonwoo](https://discourse.processing.org/u/wonwoo)\
**Replies:** 2\
**Last updated:** [November 4, 2022, 5:34am UTC](https://discourse.processing.org/t/is-there-any-p5-function-for-2d-fft/39541 "2022-11-04T05:34:24Z")

</div>

Hi, All. Is there any p5 function for 2d FFT? The “FFT” means Fast Fourier Transform. and … 2d FFT is required for 2D image processing. If not, I’ll try to make one for p5js for the first time in the world. I’ve …

---

## [Trying to change font weight based on volume of sound input](https://discourse.processing.org/t/trying-to-change-font-weight-based-on-volume-of-sound-input/39562)

<div class="topic-metadata">

**Author:** [@frogyolk](https://discourse.processing.org/u/frogyolk)\
**Replies:** 2\
**Last updated:** [November 3, 2022, 2:28pm UTC](https://discourse.processing.org/t/trying-to-change-font-weight-based-on-volume-of-sound-input/39562 "2022-11-03T14:28:20Z")

</div>

sorry this is my first time posting, not sure if I’m doing this right. I’m trying to use the number of the sound input to select a font from an array but it won’t change the font even though it says the variable is chang…

---

## [Generative terrain customization](https://discourse.processing.org/t/generative-terrain-customization/39396)

<div class="topic-metadata">

**Author:** [@fijthecreator](https://discourse.processing.org/u/fijthecreator)\
**Replies:** 16\
**Last updated:** [November 3, 2022, 12:37pm UTC](https://discourse.processing.org/t/generative-terrain-customization/39396 "2022-11-03T12:37:50Z")

</div>

Hi, after following along some tutorials I created a terrain generator using perlin noise and triangle\_stripes. It is working and it runs. For further iterations I would like to slow down the speed of the generated terr…

---

## [Is it possible to fill color to contour part?](https://discourse.processing.org/t/is-it-possible-to-fill-color-to-contour-part/39544)

<div class="topic-metadata">

**Author:** [@nijatmursali](https://discourse.processing.org/u/nijatmursali)\
**Replies:** 1\
**Last updated:** [November 2, 2022, 11:15am UTC](https://discourse.processing.org/t/is-it-possible-to-fill-color-to-contour-part/39544 "2022-11-02T11:15:52Z")

</div>

Hello, I am working on a project to build the sweater model and I have the functionality to add an image to mask the image in the sweater. I’m using contours for this. I want to change the color of only the contoured pa…

---

## [Processing to P5.js](https://discourse.processing.org/t/processing-to-p5-js/39545)

<div class="topic-metadata">

**Author:** [@sosophia10](https://discourse.processing.org/u/sosophia10)\
**Replies:** 1\
**Last updated:** [November 2, 2022, 7:00am UTC](https://discourse.processing.org/t/processing-to-p5-js/39545 "2022-11-02T07:00:50Z")

</div>

I am trying to convert my Processing project to P5.js, however I’ve run into a bunch of errors with an object not being defined and “unexpected identifiers”. The original Processing code works fine. Would someone please…

---

## [Unable to find an explanation of repeat() or simple()](https://discourse.processing.org/t/unable-to-find-an-explanation-of-repeat-or-simple/39535)

<div class="topic-metadata">

**Author:** [@Jess97](https://discourse.processing.org/u/Jess97)\
**Replies:** 3\
**Last updated:** [November 1, 2022, 11:01pm UTC](https://discourse.processing.org/t/unable-to-find-an-explanation-of-repeat-or-simple/39535 "2022-11-01T23:01:53Z")

</div>

Dear Everyone, Thanks for the forum! In reading P5.js, I’ve come across the calls simple() and repeat(). For example repeat(100,700,2,100,500,2,landshape); But I haven’t been able to find explanations for these functi…

---

## [How can i put random images on random position on a grid](https://discourse.processing.org/t/how-can-i-put-random-images-on-random-position-on-a-grid/39525)

<div class="topic-metadata">

**Author:** [@yoyo](https://discourse.processing.org/u/yoyo)\
**Replies:** 1\
**Last updated:** [November 1, 2022, 12:00pm UTC](https://discourse.processing.org/t/how-can-i-put-random-images-on-random-position-on-a-grid/39525 "2022-11-01T12:00:52Z")

</div>

now I have the image on the grid with a sequence. I want to know how to put the image in a random position. Link: p5.js Web Editor let imgs = ; function preload() { for (let i = 1; i \< 10; i++) { imgs\[i\] = loadImag…

---

## [Why background('rgba(0,255,0, 0.25)') inoperative？](https://discourse.processing.org/t/why-background-rgba-0-255-0-0-25-inoperative/39517)

<div class="topic-metadata">

**Author:** [@guanzhuyu](https://discourse.processing.org/u/guanzhuyu)\
**Replies:** 1\
**Last updated:** [October 31, 2022, 8:46am UTC](https://discourse.processing.org/t/why-background-rgba-0-255-0-0-25-inoperative/39517 "2022-10-31T08:46:03Z")

</div>

hello i us background(‘rgba(0,255,0, 0.25)’) in my code,but the Alpha inoperative? the browser is chrome (107.0.5304.88) background(‘rgba(0,255,0, 0.25)’);

---

## [Issue when synchronizing several devices with second()](https://discourse.processing.org/t/issue-when-synchronizing-several-devices-with-second/39470)

<div class="topic-metadata">

**Author:** [@patricio1979](https://discourse.processing.org/u/patricio1979)\
**Replies:** 3\
**Last updated:** [October 28, 2022, 6:32pm UTC](https://discourse.processing.org/t/issue-when-synchronizing-several-devices-with-second/39470 "2022-10-28T18:32:40Z")

</div>

I’m doing a music synchronization code but in my imagination all devices works on the same clock. Is this not true? When I execute this code on three devices (mi laptop, cellphone, and Android Tablet) the all go in diff…

---

## [How to erase object's trail without 'background' in function draw](https://discourse.processing.org/t/how-to-erase-objects-trail-without-background-in-function-draw/39458)

<div class="topic-metadata">

**Author:** [@turquoise](https://discourse.processing.org/u/turquoise)\
**Replies:** 1\
**Last updated:** [October 27, 2022, 6:56pm UTC](https://discourse.processing.org/t/how-to-erase-objects-trail-without-background-in-function-draw/39458 "2022-10-27T18:56:21Z")

</div>

Hello! I’ve just started learning p5js coding! Is there any way to erase trail, but without ‘background’? I’m trying to make a scanning line that will make sounds when it collapses with ellipse. If I use the backgrou…

---

## [drawingContext.drawImage causes offset of element on mobile](https://discourse.processing.org/t/drawingcontext-drawimage-causes-offset-of-element-on-mobile/39455)

<div class="topic-metadata">

**Author:** [@PatrckHutchinson](https://discourse.processing.org/u/PatrckHutchinson)\
**Replies:** 0\
**Last updated:** [October 27, 2022, 8:24am UTC](https://discourse.processing.org/t/drawingcontext-drawimage-causes-offset-of-element-on-mobile/39455 "2022-10-27T08:24:49Z")

</div>

Dear all, I’m working on some of Tim Rodenbrökers code involving a copy() function (Processing-Tutorial: Kinetic Typography 1 • tim rodenbröker creative coding), expanding it and making it ready for web. This involves …

---

## [Different results with the same code on a computer and a smartphone (with used loadPixels())](https://discourse.processing.org/t/different-results-with-the-same-code-on-a-computer-and-a-smartphone-with-used-loadpixels/39346)

<div class="topic-metadata">

**Author:** [@Nik](https://discourse.processing.org/u/Nik)\
**Replies:** 4\
**Last updated:** [October 26, 2022, 6:15pm UTC](https://discourse.processing.org/t/different-results-with-the-same-code-on-a-computer-and-a-smartphone-with-used-loadpixels/39346 "2022-10-26T18:15:12Z")

</div>

Hello. Different results are obtained with the same code on a computer(windows 10) and a smartphone(android) with used loadPixels(). Below is an example code and screenshots. /////////////////////////////////// function…

---

## [P5js handsfree Recognition is not well](https://discourse.processing.org/t/p5js-handsfree-recognition-is-not-well/39444)

<div class="topic-metadata">

**Author:** [@lili2](https://discourse.processing.org/u/lili2)\
**Replies:** 0\
**Last updated:** [October 26, 2022, 12:56pm UTC](https://discourse.processing.org/t/p5js-handsfree-recognition-is-not-well/39444 "2022-10-26T12:56:43Z")

</div>

Hello, I am working with handsfree. I want to make a sound when a point touches the key, but even if I set the coordinates, the key is recognized all at once. What should I do? Sorry for the poor translation.

---

## [P5 Sound Library - mic input issue in Safari, firefox](https://discourse.processing.org/t/p5-sound-library-mic-input-issue-in-safari-firefox/39445)

<div class="topic-metadata">

**Author:** [@m47k0](https://discourse.processing.org/u/m47k0)\
**Replies:** 2\
**Last updated:** [October 26, 2022, 5:28pm UTC](https://discourse.processing.org/t/p5-sound-library-mic-input-issue-in-safari-firefox/39445 "2022-10-26T17:28:34Z")

</div>

using basic Sound: Live Input sketch from Example files mic.getLevel() appears to be rounded down to 0 in Safari & Firefox tested in OSX Catalina and in Monterey Chrome appears ok. Any one else seeing this? & is the…

---

## [Any P5js consultants out there who can connect](https://discourse.processing.org/t/any-p5js-consultants-out-there-who-can-connect/39428)

<div class="topic-metadata">

**Author:** [@Rhythmone](https://discourse.processing.org/u/Rhythmone)\
**Replies:** 2\
**Last updated:** [October 26, 2022, 3:22pm UTC](https://discourse.processing.org/t/any-p5js-consultants-out-there-who-can-connect/39428 "2022-10-26T15:22:53Z")

</div>

Hi My name is Charles. I am looking hire a P5 guru to assist with troubleshooting of: P5 while in instance mode The ability to parse the various functions and ensure proper ordering for execution The ability to solve …

---

## [A loadXXX() call inside preload() doesn't delay draw()](https://discourse.processing.org/t/a-loadxxx-call-inside-preload-doesnt-delay-draw/39354)

<div class="topic-metadata">

**Author:** [@ubuntu-in-a-nutshell](https://discourse.processing.org/u/ubuntu-in-a-nutshell)\
**Replies:** 6\
**Last updated:** [October 24, 2022, 8:01am UTC](https://discourse.processing.org/t/a-loadxxx-call-inside-preload-doesnt-delay-draw/39354 "2022-10-24T08:01:01Z")

</div>

Occasionally when my program loads images using loadImage the program fails to load them and then it gets stuck in the loading screen. When I look in the console it says img is undefined. Tracing this back, I find it hap…

---

## [Why Are My Class Variables Not Working? \[SOLVED\]](https://discourse.processing.org/t/why-are-my-class-variables-not-working-solved/39401)

<div class="topic-metadata">

**Author:** [@bcgreen24](https://discourse.processing.org/u/bcgreen24)\
**Replies:** 3\
**Last updated:** [October 23, 2022, 8:13pm UTC](https://discourse.processing.org/t/why-are-my-class-variables-not-working-solved/39401 "2022-10-23T20:13:14Z")

</div>

I was having issues with a sketch I was working on, so I created this little test to try and narrow down the issue-- which is that this.x and this.y are both undefined, even though the Walker class has a constructor whic…

---

## [How extract an save subimages from a given image](https://discourse.processing.org/t/how-extract-an-save-subimages-from-a-given-image/39380)

<div class="topic-metadata">

**Author:** [@Coyote35](https://discourse.processing.org/u/Coyote35)\
**Replies:** 6\
**Last updated:** [October 22, 2022, 9:43pm UTC](https://discourse.processing.org/t/how-extract-an-save-subimages-from-a-given-image/39380 "2022-10-22T21:43:19Z")

</div>

Hello everyone, I have an image of 100x100 pixels. I’m looking for a simple code example that allows me to extract the 100 sub-images (for example 10x10 pixels) from the starting image. And for each of these sub-image…

---

## [Uploading interactive app from processing to website / github?](https://discourse.processing.org/t/uploading-interactive-app-from-processing-to-website-github/39351)

<div class="topic-metadata">

**Author:** [@YueLin](https://discourse.processing.org/u/YueLin)\
**Replies:** 24\
**Last updated:** [October 22, 2022, 5:45pm UTC](https://discourse.processing.org/t/uploading-interactive-app-from-processing-to-website-github/39351 "2022-10-22T17:45:56Z")

</div>

Hi there everyone! I am super super new to coding and would like some guidance on how to upload apps made with processing onto websites. I have used processing back in 2019 to make a interactive game, and am now looking…

---

## [Interactive 3D balls. Is this even possible in Processing?](https://discourse.processing.org/t/interactive-3d-balls-is-this-even-possible-in-processing/39056)

<div class="topic-metadata">

**Author:** [@fijthecreator](https://discourse.processing.org/u/fijthecreator)\
**Replies:** 14\
**Last updated:** [October 22, 2022, 9:28am UTC](https://discourse.processing.org/t/interactive-3d-balls-is-this-even-possible-in-processing/39056 "2022-10-22T09:28:19Z")

</div>

Hi while I’m fairly new to processing, I was wondering if this is possible and how I would go about it? Example: 3D interactive balls - Webflow I’d like to recreate that effect in Processing 3D to embed the interactive…

---

## [P5JS coding using PORTRAIT](https://discourse.processing.org/t/p5js-coding-using-portrait/39373)

<div class="topic-metadata">

**Author:** [@DaBoyez](https://discourse.processing.org/u/DaBoyez)\
**Replies:** 1\
**Last updated:** [October 20, 2022, 6:05pm UTC](https://discourse.processing.org/t/p5js-coding-using-portrait/39373 "2022-10-20T18:05:13Z")

</div>

I’m trying to create a mobile game (one accessible on the internet), and am trying to code in a portrait orientation lock, so one can turn a device on its side and the screen remains the same instead of trying to awkward…

---

## [Meta get Attribute problem (solved)](https://discourse.processing.org/t/meta-get-attribute-problem-solved/39355)

<div class="topic-metadata">

**Author:** [@Tasp](https://discourse.processing.org/u/Tasp)\
**Replies:** 0\
**Last updated:** [October 19, 2022, 8:19am UTC](https://discourse.processing.org/t/meta-get-attribute-problem-solved/39355 "2022-10-19T08:19:18Z")

</div>

Edit: problem was the pixel density setting set to 3 or something creating a canvas being too large. Hi there. I’m creating right now a presentation to be run on iPads and used then in a Salesforce-Veeva system, and I’…

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

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