# p5.js

**URL:** https://discourse.processing.org/c/p5js/10.md?no_subcategories=false&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

---

## [Coding train 9.8: Random circle with no overlap](https://discourse.processing.org/t/coding-train-9-8-random-circle-with-no-overlap/39653)

<div class="topic-metadata">

**Author:** [@mwr](https://discourse.processing.org/u/mwr)\
**Replies:** 0\
**Last updated:** [November 10, 2022, 5:28am UTC](https://discourse.processing.org/t/coding-train-9-8-random-circle-with-no-overlap/39653 "2022-11-10T05:28:10Z")

</div>

Good morning beautiful processing people, I’ve been following along the coding train random circle with no overlap video trying to recreate the code but using random text characters instead of circles. I’m encountering…

---

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

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

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