# p5.js

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

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

**Page:** 46

---

## [Trouble configuring bezier start and end points for uniform arc](https://discourse.processing.org/t/trouble-configuring-bezier-start-and-end-points-for-uniform-arc/29643)

<div class="topic-metadata">

**Author:** [@psemme](https://discourse.processing.org/u/psemme)\
**Replies:** 9\
**Last updated:** [April 27, 2021, 2:05am UTC](https://discourse.processing.org/t/trouble-configuring-bezier-start-and-end-points-for-uniform-arc/29643 "2021-04-27T02:05:04Z")

</div>

I’d like to create a shape that is, in essence, two, uniform concentric arcs connected by lines (radius segments) so that I can fill them individually. I’ve come close to doing it with Bezier curves but it’s still not ri…

---

## [Boolean (CSG union, intersect, etc) 3D shapes into p5js model](https://discourse.processing.org/t/boolean-csg-union-intersect-etc-3d-shapes-into-p5js-model/29613)

<div class="topic-metadata">

**Author:** [@ffd8](https://discourse.processing.org/u/ffd8)\
**Replies:** 10\
**Last updated:** [April 26, 2021, 8:04pm UTC](https://discourse.processing.org/t/boolean-csg-union-intersect-etc-3d-shapes-into-p5js-model/29613 "2021-04-26T20:04:46Z")

</div>

A few years ago a feature request on p5.js’ github asked about boolean 3d modeling – which was determined to be best added as a library. Researching the topic now with a student and that thread informed us about CSG, sp…

---

## [Unexpected behaviour with select method in instance mode](https://discourse.processing.org/t/unexpected-behaviour-with-select-method-in-instance-mode/29612)

<div class="topic-metadata">

**Author:** [@afkqs](https://discourse.processing.org/u/afkqs)\
**Replies:** 7\
**Last updated:** [April 25, 2021, 10:15pm UTC](https://discourse.processing.org/t/unexpected-behaviour-with-select-method-in-instance-mode/29612 "2021-04-25T22:15:18Z")

</div>

Hi there, I started a project that uses p5.js in instance mode and I’m encountering a weird behaviour when I try to use the select() method. In some cases, when I try to select an element in the DOM using that function…

---

## [Troubleshooting converting from .pde to p5 sketch](https://discourse.processing.org/t/troubleshooting-converting-from-pde-to-p5-sketch/29617)

<div class="topic-metadata">

**Author:** [@stanley](https://discourse.processing.org/u/stanley)\
**Replies:** 2\
**Last updated:** [April 25, 2021, 10:15am UTC](https://discourse.processing.org/t/troubleshooting-converting-from-pde-to-p5-sketch/29617 "2021-04-25T10:15:29Z")

</div>

please format code with \</\> button \* homework policy \* asking questions Hi all, I have a Processing sketch that I need to be converted to p5.js. I’ve never used p5 or javascript before so it has become a bit more inv…

---

## [P5.js code for creating a calculator tip app confused](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219)

<div class="topic-metadata">

**Author:** [@rodeodash832](https://discourse.processing.org/u/rodeodash832)\
**Replies:** 34\
**Last updated:** [April 23, 2021, 8:02am UTC](https://discourse.processing.org/t/p5-js-code-for-creating-a-calculator-tip-app-confused/29219 "2021-04-23T08:02:19Z")

</div>

please format code with \</\> button \* homework policy \* asking questions Just confused on how I would make this instruction given: You are going to create an app to help you determine what percentage you should tip s…

---

## [Functions cannot load (Tic tac toe)](https://discourse.processing.org/t/functions-cannot-load-tic-tac-toe/29561)

<div class="topic-metadata">

**Author:** [@JustinChan613](https://discourse.processing.org/u/JustinChan613)\
**Replies:** 4\
**Last updated:** [April 22, 2021, 7:02pm UTC](https://discourse.processing.org/t/functions-cannot-load-tic-tac-toe/29561 "2021-04-22T19:02:19Z")

</div>

Hi all I am continuing my tic tac toe project while I meet another problem. When I load the functions, the system keeps responding ‘Uncaught RangeError: Maximum call stack size exceeded’ or ‘Cannot read property ‘NaN’ of…

---

## [What is the difference between createGraphics() and createDiv()](https://discourse.processing.org/t/what-is-the-difference-between-creategraphics-and-creatediv/29484)

<div class="topic-metadata">

**Author:** [@turtle](https://discourse.processing.org/u/turtle)\
**Replies:** 15\
**Last updated:** [April 22, 2021, 11:55am UTC](https://discourse.processing.org/t/what-is-the-difference-between-creategraphics-and-creatediv/29484 "2021-04-22T11:55:47Z")

</div>

the code as following let pg, div; function setup() { createCanvas(400,400); pg = createGraphics(400,400); div = createDiv(); } function draw() { pg.rect(50,50,50,50); pg.fill("red"); pg.noStroke(); imag…

---

## [Overlayed Transparent Shapes Never Become Fully Opaque](https://discourse.processing.org/t/overlayed-transparent-shapes-never-become-fully-opaque/29518)

<div class="topic-metadata">

**Author:** [@kweso](https://discourse.processing.org/u/kweso)\
**Replies:** 7\
**Last updated:** [April 22, 2021, 12:12am UTC](https://discourse.processing.org/t/overlayed-transparent-shapes-never-become-fully-opaque/29518 "2021-04-22T00:12:13Z")

</div>

Why do the overlaying circles in the bg never become the full color of the circle in the middle? Very low alpha values (\<5) even change the saturation of my color… Is there anything for me to fix this? Tyvm!

---

## [Problem on If-else statement](https://discourse.processing.org/t/problem-on-if-else-statement/29546)

<div class="topic-metadata">

**Author:** [@JustinChan613](https://discourse.processing.org/u/JustinChan613)\
**Replies:** 4\
**Last updated:** [April 21, 2021, 5:03pm UTC](https://discourse.processing.org/t/problem-on-if-else-statement/29546 "2021-04-21T17:03:31Z")

</div>

Hi All I am now doing a project on p5.js gaming. As I want to do random picking on CPU/Player playing first, I am using the concept of random( ) and if-else statement. However, it does not work. Would like to ask what is…

---

## [Responsive grid](https://discourse.processing.org/t/responsive-grid/29507)

<div class="topic-metadata">

**Author:** [@henryM](https://discourse.processing.org/u/henryM)\
**Replies:** 1\
**Last updated:** [April 20, 2021, 8:04am UTC](https://discourse.processing.org/t/responsive-grid/29507 "2021-04-20T08:04:33Z")

</div>

I am making a small little testing thing I am trying to make it so when the mouse is over it turns a different color here is the code. https://editor.p5js.org/Henhog1234/sketches/ehfcx4O9f I am probably doing everythi…

---

## [Help a poor noob - arrays](https://discourse.processing.org/t/help-a-poor-noob-arrays/29505)

<div class="topic-metadata">

**Author:** [@luizF](https://discourse.processing.org/u/luizF)\
**Replies:** 3\
**Last updated:** [April 19, 2021, 9:37pm UTC](https://discourse.processing.org/t/help-a-poor-noob-arrays/29505 "2021-04-19T21:37:29Z")

</div>

Hello there. I’m realy starting learning. I’m trying change the array I’m using but don’t work put the name in variable… How do i do? var fase = stage1; var stage1 = \[ \[‘0’, ‘1’, ‘0’, ‘1’\], \[‘0’, ‘1’, ‘1’, ‘0’\], \]; …

---

## [Need help: Grid with increasing number of columns + incremental greyscale gradient](https://discourse.processing.org/t/need-help-grid-with-increasing-number-of-columns-incremental-greyscale-gradient/29438)

<div class="topic-metadata">

**Author:** [@abk](https://discourse.processing.org/u/abk)\
**Replies:** 10\
**Last updated:** [April 19, 2021, 9:36pm UTC](https://discourse.processing.org/t/need-help-grid-with-increasing-number-of-columns-incremental-greyscale-gradient/29438 "2021-04-19T21:36:50Z")

</div>

Hi I’m trying to do something like this in p5: I’m a total beginner, so I think this should be pretty basic stuff for most :slight\_smile: So far I’ve got this snippet of code: function setup() { createCanvas(w…

---

## [Season of docs-Proposal](https://discourse.processing.org/t/season-of-docs-proposal/29494)

<div class="topic-metadata">

**Author:** [@ananya123](https://discourse.processing.org/u/ananya123)\
**Replies:** 2\
**Last updated:** [April 19, 2021, 2:20pm UTC](https://discourse.processing.org/t/season-of-docs-proposal/29494 "2021-04-19T14:20:00Z")

</div>

Can someone please help me where to submit he proposal for the season of docs 2021.I would find any contact list or communication channel.Please help me with this.

---

## [How to use an image as a link between different html pages](https://discourse.processing.org/t/how-to-use-an-image-as-a-link-between-different-html-pages/29487)

<div class="topic-metadata">

**Author:** [@juju](https://discourse.processing.org/u/juju)\
**Replies:** 4\
**Last updated:** [April 19, 2021, 11:32am UTC](https://discourse.processing.org/t/how-to-use-an-image-as-a-link-between-different-html-pages/29487 "2021-04-19T11:32:55Z")

</div>

I see you can use createA() in P5 to add hyperlinks on texts, is there anyway to use an image as a hyperlink in P5? please format code with \</\> button \* homework policy \* asking questions

---

## [Not defined issue](https://discourse.processing.org/t/not-defined-issue/29476)

<div class="topic-metadata">

**Author:** [@YenX2](https://discourse.processing.org/u/YenX2)\
**Replies:** 3\
**Last updated:** [April 18, 2021, 8:05pm UTC](https://discourse.processing.org/t/not-defined-issue/29476 "2021-04-18T20:05:53Z")

</div>

Hi, I’ve been trying to figure out how to fix this. I keep getting an error message saying that Particle is not defined. type or paste code here let myParticle= \[\]; let buttonA let buttonH let buttonF let buttonB fu…

---

## [Use of p5.clear doubts](https://discourse.processing.org/t/use-of-p5-clear-doubts/29404)

<div class="topic-metadata">

**Author:** [@edufissure](https://discourse.processing.org/u/edufissure)\
**Replies:** 4\
**Last updated:** [April 18, 2021, 5:30pm UTC](https://discourse.processing.org/t/use-of-p5-clear-doubts/29404 "2021-04-18T17:30:27Z")

</div>

please format code with \</\> button \* homework policy \* asking questions I have been developing a pacman game using p5.js library. So i face the problem that sometimes the game was going slower,till almost get stopped…

---

## [We have to claim variables in advance?](https://discourse.processing.org/t/we-have-to-claim-variables-in-advance/29431)

<div class="topic-metadata">

**Author:** [@turtle](https://discourse.processing.org/u/turtle)\
**Replies:** 6\
**Last updated:** [April 17, 2021, 6:59pm UTC](https://discourse.processing.org/t/we-have-to-claim-variables-in-advance/29431 "2021-04-17T18:59:43Z")

</div>

Interestingly, if I claim variable like function setup() { createCanvas(100,100); let pg = createGraphics(100,100); // claim variable like this } function draw() { pg.background(100); image(pg, 0, 0); } when …

---

## [If statement in arrays](https://discourse.processing.org/t/if-statement-in-arrays/29454)

<div class="topic-metadata">

**Author:** [@henryM](https://discourse.processing.org/u/henryM)\
**Replies:** 3\
**Last updated:** [April 17, 2021, 6:38pm UTC](https://discourse.processing.org/t/if-statement-in-arrays/29454 "2021-04-17T18:38:39Z")

</div>

So I am making a prototype for my game to try and demonstrate what I am trying to do. https://editor.p5js.org/henhog123/sketches/B0QwRqpXj In the editor, you can see only one circle moves but I want all the circles to …

---

## [How many ways to make an eraser and how to do that?](https://discourse.processing.org/t/how-many-ways-to-make-an-eraser-and-how-to-do-that/29433)

<div class="topic-metadata">

**Author:** [@turtle](https://discourse.processing.org/u/turtle)\
**Replies:** 3\
**Last updated:** [April 17, 2021, 5:22pm UTC](https://discourse.processing.org/t/how-many-ways-to-make-an-eraser-and-how-to-do-that/29433 "2021-04-17T17:22:54Z")

</div>

I am going to make a sketch board and it needs one eraser, I have made one but it’s not nice enough. Maybe you guys can make some awesome. Looking forward you reply :grinning:.

---

## [Cycle Images on Mouse Click P5Js](https://discourse.processing.org/t/cycle-images-on-mouse-click-p5js/29447)

<div class="topic-metadata">

**Author:** [@Wiltraveller](https://discourse.processing.org/u/Wiltraveller)\
**Replies:** 4\
**Last updated:** [April 17, 2021, 3:50pm UTC](https://discourse.processing.org/t/cycle-images-on-mouse-click-p5js/29447 "2021-04-17T15:50:36Z")

</div>

var img1; var img2; var img3; function preload() { img1 = loadImage("bckgrnd.png"); img2 = loadImage("moon.png"); img3 = loadImage("tuktuk2.png"); } function setup() { createCanvas(windowWidth, windowHeight…

---

## [How to resolve the delay after event occurs](https://discourse.processing.org/t/how-to-resolve-the-delay-after-event-occurs/29440)

<div class="topic-metadata">

**Author:** [@turtle](https://discourse.processing.org/u/turtle)\
**Replies:** 3\
**Last updated:** [April 17, 2021, 11:14am UTC](https://discourse.processing.org/t/how-to-resolve-the-delay-after-event-occurs/29440 "2021-04-17T11:14:26Z")

</div>

the code as following let bgColor = 200; let div; function setup() { createCanvas(windowWidth, windowHeight); background(bgColor); div = createDiv(); div.style("background","rgb(123, 0, 0, 0.1)"); div.style("…

---

## [Maybe one bug in the p5](https://discourse.processing.org/t/maybe-one-bug-in-the-p5/29400)

<div class="topic-metadata">

**Author:** [@turtle](https://discourse.processing.org/u/turtle)\
**Replies:** 8\
**Last updated:** [April 16, 2021, 12:15pm UTC](https://discourse.processing.org/t/maybe-one-bug-in-the-p5/29400 "2021-04-16T12:15:40Z")

</div>

the code as following let x = 50; let y = 50; let diameter = 100; let bgColor = 200; function setup() { createCanvas(400, 400); background(bgColor); noStroke(); } function touchMoved() { print(x-diameter/2, x+…

---

## [How to manipulate one shape or other p5 objects in another place](https://discourse.processing.org/t/how-to-manipulate-one-shape-or-other-p5-objects-in-another-place/29396)

<div class="topic-metadata">

**Author:** [@turtle](https://discourse.processing.org/u/turtle)\
**Replies:** 2\
**Last updated:** [April 16, 2021, 2:10am UTC](https://discourse.processing.org/t/how-to-manipulate-one-shape-or-other-p5-objects-in-another-place/29396 "2021-04-16T02:10:23Z")

</div>

I have checked out the Reference and Examples roundly, now I find that it is difficult to manipulate p5 objects in another place(only can manipulate them in where they are be defined). For example: function draw() { …

---

## [Two amplitude objects listening to two separate loaded sounds](https://discourse.processing.org/t/two-amplitude-objects-listening-to-two-separate-loaded-sounds/29361)

<div class="topic-metadata">

**Author:** [@fbrie002](https://discourse.processing.org/u/fbrie002)\
**Replies:** 3\
**Last updated:** [April 14, 2021, 5:03pm UTC](https://discourse.processing.org/t/two-amplitude-objects-listening-to-two-separate-loaded-sounds/29361 "2021-04-14T17:03:27Z")

</div>

Hi! I’m trying to figure out a way to have two separate sound files loaded and playing at the same time connect to two separate amplitude objects. At the moment all the sounds just go straight to the first amplitude obj…

---

## [P5.js camera movement control with keys, how to assign limits to it?](https://discourse.processing.org/t/p5-js-camera-movement-control-with-keys-how-to-assign-limits-to-it/29342)

<div class="topic-metadata">

**Author:** [@camila](https://discourse.processing.org/u/camila)\
**Replies:** 7\
**Last updated:** [April 14, 2021, 2:28pm UTC](https://discourse.processing.org/t/p5-js-camera-movement-control-with-keys-how-to-assign-limits-to-it/29342 "2021-04-14T14:28:31Z")

</div>

Hello people, I’m trying to set up a fully functional camera in my code that responds to movements assigned by the computer keys, that I’ve accomplished. Now I’m trying to assign a limit to those movements, for example:…

---

## [I want stop the sounds from playing when the webpage is hidden](https://discourse.processing.org/t/i-want-stop-the-sounds-from-playing-when-the-webpage-is-hidden/29340)

<div class="topic-metadata">

**Author:** [@LaserDenis](https://discourse.processing.org/u/LaserDenis)\
**Replies:** 7\
**Last updated:** [April 13, 2021, 8:56pm UTC](https://discourse.processing.org/t/i-want-stop-the-sounds-from-playing-when-the-webpage-is-hidden/29340 "2021-04-13T20:56:34Z")

</div>

I tried to use document.hidden but I doesn’t seem to work .

---

## [Local to global positions](https://discourse.processing.org/t/local-to-global-positions/29333)

<div class="topic-metadata">

**Author:** [@saul](https://discourse.processing.org/u/saul)\
**Replies:** 6\
**Last updated:** [April 13, 2021, 7:09pm UTC](https://discourse.processing.org/t/local-to-global-positions/29333 "2021-04-13T19:09:20Z")

</div>

Hi there; Been dipping my toe in a little p5 and ran into what might be a common problem with what I hope is a common answer (although I couldn’t find one) I have a sketch that creates a secondary canvas and centers it…

---

## [Is it possible to erase part of an object and let the background show through?](https://discourse.processing.org/t/is-it-possible-to-erase-part-of-an-object-and-let-the-background-show-through/29331)

<div class="topic-metadata">

**Author:** [@cottonchipper](https://discourse.processing.org/u/cottonchipper)\
**Replies:** 2\
**Last updated:** [April 13, 2021, 4:51pm UTC](https://discourse.processing.org/t/is-it-possible-to-erase-part-of-an-object-and-let-the-background-show-through/29331 "2021-04-13T16:51:37Z")

</div>

Is it possible to erase part of an object such as a rectangle or ellipse and allow the background color to show through? In the example I’ve got the background set to a gradient and am attempting to erase two rectangles …

---

## [HTML, P5, and Material Design](https://discourse.processing.org/t/html-p5-and-material-design/29308)

<div class="topic-metadata">

**Author:** [@karenmsn](https://discourse.processing.org/u/karenmsn)\
**Replies:** 2\
**Last updated:** [April 13, 2021, 1:04pm UTC](https://discourse.processing.org/t/html-p5-and-material-design/29308 "2021-04-13T13:04:45Z")

</div>

I’m trying to follow this code https://codepen.io/katehummer/pen/jOyGzJp to create a carousel of instructions for the virtual installation I’m creating, but when I tried adding a new card to the list, it inserted it unde…

---

## [API POST error - not sure what's causing it](https://discourse.processing.org/t/api-post-error-not-sure-whats-causing-it/29311)

<div class="topic-metadata">

**Author:** [@psemme](https://discourse.processing.org/u/psemme)\
**Replies:** 2\
**Last updated:** [April 12, 2021, 10:45pm UTC](https://discourse.processing.org/t/api-post-error-not-sure-whats-causing-it/29311 "2021-04-12T22:45:52Z")

</div>

I’m trying to pull in RGB palette info from this cool color API - Colormind API - extracting colors from photos and video. I have it working in other API tools but when I place the code in P5 I get this error: Uncaugh…

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

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