# p5.js

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

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

**Page:** 96

---

## [Should width and height of canvas be double?](https://discourse.processing.org/t/should-width-and-height-of-canvas-be-double/10451)

<div class="topic-metadata">

**Author:** [@anthonygalea](https://discourse.processing.org/u/anthonygalea)\
**Replies:** 4\
**Last updated:** [April 21, 2019, 3:20pm UTC](https://discourse.processing.org/t/should-width-and-height-of-canvas-be-double/10451 "2019-04-21T15:20:01Z")

</div>

I’m using a Macbook pro (with a hidpi display) and just noticed that the width and height properties of the canvas element are double the width and height parameters passed to the createCanvas call. Screenshot attached. …

---

## [Trying to make a box rotate, getting error even after p5 check](https://discourse.processing.org/t/trying-to-make-a-box-rotate-getting-error-even-after-p5-check/10512)

<div class="topic-metadata">

**Author:** [@octaminotin](https://discourse.processing.org/u/octaminotin)\
**Replies:** 1\
**Last updated:** [April 21, 2019, 4:55am UTC](https://discourse.processing.org/t/trying-to-make-a-box-rotate-getting-error-even-after-p5-check/10512 "2019-04-21T04:55:39Z")

</div>

Heres the error code: Uncaught SyntaxError: missing ) after argument list (sketch: line 10) Thats, "rotateX(framecount \* 01.0) function setup() { createCanvas(400, 400); } function draw() { background(0); noStrok…

---

## [Code gets replaced](https://discourse.processing.org/t/code-gets-replaced/10504)

<div class="topic-metadata">

**Author:** [@gooffyy80](https://discourse.processing.org/u/gooffyy80)\
**Replies:** 2\
**Last updated:** [April 20, 2019, 7:00pm UTC](https://discourse.processing.org/t/code-gets-replaced/10504 "2019-04-20T19:00:33Z")

</div>

Whenever I type one thing that has something following it such as x/y coordinates whatever is after that gets replaced by what I am currently typing. Is that supposed to happen? If not how do I fix it?

---

## [How to create an sphere to have set of tiles in certain position p5](https://discourse.processing.org/t/how-to-create-an-sphere-to-have-set-of-tiles-in-certain-position-p5/10470)

<div class="topic-metadata">

**Author:** [@alpheraz](https://discourse.processing.org/u/alpheraz)\
**Replies:** 6\
**Last updated:** [April 20, 2019, 6:01pm UTC](https://discourse.processing.org/t/how-to-create-an-sphere-to-have-set-of-tiles-in-certain-position-p5/10470 "2019-04-20T18:01:11Z")

</div>

Hello all, I am interested in creating an object that I want to use to hold videos/ or images within but am having great trouble in creating the framework of it. After looking at multiple forums and posts, I can’t seem…

---

## [How do you combine canvases in p5j weather you overlap or organise them](https://discourse.processing.org/t/how-do-you-combine-canvases-in-p5j-weather-you-overlap-or-organise-them/10275)

<div class="topic-metadata">

**Author:** [@octaminotin](https://discourse.processing.org/u/octaminotin)\
**Replies:** 8\
**Last updated:** [April 20, 2019, 5:24pm UTC](https://discourse.processing.org/t/how-do-you-combine-canvases-in-p5j-weather-you-overlap-or-organise-them/10275 "2019-04-20T17:24:56Z")

</div>

basically here it is the basic form of this thought. im considering instance mode being something, although i don’t get the error message for my first equation; note this for someone who knows nothing, but needs to learn…

---

## [How can i use this higher dimmensional equation in p5](https://discourse.processing.org/t/how-can-i-use-this-higher-dimmensional-equation-in-p5/10285)

<div class="topic-metadata">

**Author:** [@octaminotin](https://discourse.processing.org/u/octaminotin)\
**Replies:** 7\
**Last updated:** [April 20, 2019, 5:22pm UTC](https://discourse.processing.org/t/how-can-i-use-this-higher-dimmensional-equation-in-p5/10285 "2019-04-20T17:22:01Z")

</div>

decided to start a math script it reads x^2 + y^2 = 1

---

## [How to make an object move in a circle, as in revolving around a center](https://discourse.processing.org/t/how-to-make-an-object-move-in-a-circle-as-in-revolving-around-a-center/9965)

<div class="topic-metadata">

**Author:** [@Neo\_Wang](https://discourse.processing.org/u/Neo_Wang)\
**Replies:** 4\
**Last updated:** [April 20, 2019, 3:07pm UTC](https://discourse.processing.org/t/how-to-make-an-object-move-in-a-circle-as-in-revolving-around-a-center/9965 "2019-04-20T15:07:03Z")

</div>

what I am trying to do is to create a solar system. several ellipses revolve around a central point to simulate solar system. i know that i could use translate function to make it happen. however, what I am hoping to is…

---

## [The friction acting on a particle is the same , no matter the size](https://discourse.processing.org/t/the-friction-acting-on-a-particle-is-the-same-no-matter-the-size/10491)

<div class="topic-metadata">

**Author:** [@Capt.Sloth](https://discourse.processing.org/u/Capt.Sloth)\
**Replies:** 1\
**Last updated:** [April 20, 2019, 3:00pm UTC](https://discourse.processing.org/t/the-friction-acting-on-a-particle-is-the-same-no-matter-the-size/10491 "2019-04-20T15:00:18Z")

</div>

I have set the value of friction acting on a particle based on its size, yet it appears as if the small ones and the large ones come to a halt at the same rate.I plan on having the large circles come to a halt much quick…

---

## [Uncaught TypeError: Cannot read property 'x' of undefined (sketch: line 36)](https://discourse.processing.org/t/uncaught-typeerror-cannot-read-property-x-of-undefined-sketch-line-36/10462)

<div class="topic-metadata">

**Author:** [@replicant2021](https://discourse.processing.org/u/replicant2021)\
**Replies:** 1\
**Last updated:** [April 20, 2019, 1:05am UTC](https://discourse.processing.org/t/uncaught-typeerror-cannot-read-property-x-of-undefined-sketch-line-36/10462 "2019-04-20T01:05:41Z")

</div>

Hello there. I am making a code for Travel Salesman Problem but i got this issue function draw() { background(0); for (var i = 0; i \< cities.length; i++) { ellipse(cities\[i\].x , cities\[i\].y, 8, 8); } stroke(255) s…

---

## [Some variable overflow?](https://discourse.processing.org/t/some-variable-overflow/10449)

<div class="topic-metadata">

**Author:** [@Alexstrinda](https://discourse.processing.org/u/Alexstrinda)\
**Replies:** 2\
**Last updated:** [April 19, 2019, 3:46pm UTC](https://discourse.processing.org/t/some-variable-overflow/10449 "2019-04-19T15:46:45Z")

</div>

Hello! To make my first steps in creating a photo filter I decided to write a script that will take every pixel of some photo and redraw it to the left of the original. This way I planned to see two identical photos. S…

---

## [Theres must be a way of doing this more effectively!](https://discourse.processing.org/t/theres-must-be-a-way-of-doing-this-more-effectively/10430)

<div class="topic-metadata">

**Author:** [@peachman](https://discourse.processing.org/u/peachman)\
**Replies:** 3\
**Last updated:** [April 19, 2019, 7:58am UTC](https://discourse.processing.org/t/theres-must-be-a-way-of-doing-this-more-effectively/10430 "2019-04-19T07:58:49Z")

</div>

Hi all, At the moment I have a tile based system and I want to move either North, East, South or West of a tile, depending on what tile the ‘player’ is in. Done this fine. However my problems comes because of walls in t…

---

## [Mousedrag objects](https://discourse.processing.org/t/mousedrag-objects/10403)

<div class="topic-metadata">

**Author:** [@b\_and\_z](https://discourse.processing.org/u/b_and_z)\
**Replies:** 4\
**Last updated:** [April 18, 2019, 3:23pm UTC](https://discourse.processing.org/t/mousedrag-objects/10403 "2019-04-18T15:23:33Z")

</div>

I recently started looking into classes with a little help from the coding train, so I’m trying to rewrite a project with classes in hopes of making it simpler. Now I’m stuck with this problem: I want the user to drag ar…

---

## [3D rain drops \[The rate at which the drops fall gradually increases\]](https://discourse.processing.org/t/3d-rain-drops-the-rate-at-which-the-drops-fall-gradually-increases/10397)

<div class="topic-metadata">

**Author:** [@Capt.Sloth](https://discourse.processing.org/u/Capt.Sloth)\
**Replies:** 7\
**Last updated:** [April 18, 2019, 9:42am UTC](https://discourse.processing.org/t/3d-rain-drops-the-rate-at-which-the-drops-fall-gradually-increases/10397 "2019-04-18T09:42:04Z")

</div>

This a simple code in which multiple spheres are created at different X and Y coordinates and are given the speed at which they will fall.The speed seems to gradually increase as the number of spheres increase as a resu…

---

## [Reason why accelerationX, accelerationY, accelerationZ and and rotationX, rotationY, rotationZ values are not recorded sometimes?](https://discourse.processing.org/t/reason-why-accelerationx-accelerationy-accelerationz-and-and-rotationx-rotationy-rotationz-values-are-not-recorded-sometimes/10336)

<div class="topic-metadata">

**Author:** [@togo](https://discourse.processing.org/u/togo)\
**Replies:** 11\
**Last updated:** [April 18, 2019, 4:35am UTC](https://discourse.processing.org/t/reason-why-accelerationx-accelerationy-accelerationz-and-and-rotationx-rotationy-rotationz-values-are-not-recorded-sometimes/10336 "2019-04-18T04:35:02Z")

</div>

Hello, I have a question about accelerationX, accelerationY, accelerationZ and rotationX, rotationY, rotationZ. For a class project, I made a sketch on p5.js that records both the acceleration and the rotation of the mo…

---

## [My paragraph '\<p\> \</p\>' is not uder the sketch](https://discourse.processing.org/t/my-paragraph-p-p-is-not-uder-the-sketch/10408)

<div class="topic-metadata">

**Author:** [@Sky](https://discourse.processing.org/u/Sky)\
**Replies:** 1\
**Last updated:** [April 17, 2019, 8:04pm UTC](https://discourse.processing.org/t/my-paragraph-p-p-is-not-uder-the-sketch/10408 "2019-04-17T20:04:47Z")

</div>

\<body\> \<h1\>Hello World!\</h1\> \<script src="sketch.js"\>\</script\> \<p\>I should be under the sketch\</p\> \</body\> (it is not under the sketch) How does this exactly work?

---

## [Can I include p5.js in a game download?](https://discourse.processing.org/t/can-i-include-p5-js-in-a-game-download/10268)

<div class="topic-metadata">

**Author:** [@burningpocket](https://discourse.processing.org/u/burningpocket)\
**Replies:** 4\
**Last updated:** [April 17, 2019, 6:53pm UTC](https://discourse.processing.org/t/can-i-include-p5-js-in-a-game-download/10268 "2019-04-17T18:53:11Z")

</div>

I made a game using p5.js and have it on my website. I have a code explanation section where I link to p5js.org adn explane that I used it. I want to provide a download of my script so that people can check it out. Can I…

---

## [Debugging via web inspector in p5 web editor](https://discourse.processing.org/t/debugging-via-web-inspector-in-p5-web-editor/10373)

<div class="topic-metadata">

**Author:** [@jafish](https://discourse.processing.org/u/jafish)\
**Replies:** 2\
**Last updated:** [April 17, 2019, 7:41am UTC](https://discourse.processing.org/t/debugging-via-web-inspector-in-p5-web-editor/10373 "2019-04-17T07:41:25Z")

</div>

Hello, I’m attempting to debug a p5.js sketch and, for this particular sketch it would be helpful to use the web inspector (via Chrome or Safari, for example) to track a variable’s value. Can anyone provide some pointers…

---

## [Assignment operator](https://discourse.processing.org/t/assignment-operator/10249)

<div class="topic-metadata">

**Author:** [@jdk](https://discourse.processing.org/u/jdk)\
**Replies:** 5\
**Last updated:** [April 17, 2019, 4:48am UTC](https://discourse.processing.org/t/assignment-operator/10249 "2019-04-17T04:48:44Z")

</div>

I was preparing simple animation game of bouncing ball. There I have to insert an assignment condition for collision with a paddle to bounce. But it seems that p5js isn’t compatible with assignment operator. Its not …

---

## [Array of method calls?](https://discourse.processing.org/t/array-of-method-calls/10327)

<div class="topic-metadata">

**Author:** [@aaronjmcd2](https://discourse.processing.org/u/aaronjmcd2)\
**Replies:** 2\
**Last updated:** [April 16, 2019, 5:21pm UTC](https://discourse.processing.org/t/array-of-method-calls/10327 "2019-04-16T17:21:42Z")

</div>

Hi all! Basically, I’m trying to build an overlapping drawing that is dependent on which step the user selects. For example: Step 1: A line. Step 2: A line and a circle. Step 3: A line and a circle and a square. Ste…

---

## [Flying text animation jitter](https://discourse.processing.org/t/flying-text-animation-jitter/10296)

<div class="topic-metadata">

**Author:** [@AndreasF](https://discourse.processing.org/u/AndreasF)\
**Replies:** 9\
**Last updated:** [April 16, 2019, 3:57pm UTC](https://discourse.processing.org/t/flying-text-animation-jitter/10296 "2019-04-16T15:57:00Z")

</div>

Hi everyone, I just started with my first sketch in p5. I want to create a flying text effect. I created a simple prototype in the online editor: https://editor.p5js.org/AndreasFurster/sketches/jc1Ozy7VU The only pro…

---

## [Getting gif exporting via ccapture working in the p5js web editor](https://discourse.processing.org/t/getting-gif-exporting-via-ccapture-working-in-the-p5js-web-editor/7815)

<div class="topic-metadata">

**Author:** [@jgl](https://discourse.processing.org/u/jgl)\
**Replies:** 1\
**Last updated:** [April 16, 2019, 6:59am UTC](https://discourse.processing.org/t/getting-gif-exporting-via-ccapture-working-in-the-p5js-web-editor/7815 "2019-04-16T06:59:12Z")

</div>

Hi All, I’m trying to get animated gif export via ccapture.js, there is an example here: I’ve duplicated @GoToLoop code into the online editor: But I get the error: “ReferenceError: can’t access lexical declarati…

---

## [Can some one help me stack and navigate two canvases](https://discourse.processing.org/t/can-some-one-help-me-stack-and-navigate-two-canvases/10315)

<div class="topic-metadata">

**Author:** [@octaminotin](https://discourse.processing.org/u/octaminotin)\
**Replies:** 0\
**Last updated:** [April 16, 2019, 12:09am UTC](https://discourse.processing.org/t/can-some-one-help-me-stack-and-navigate-two-canvases/10315 "2019-04-16T00:09:42Z")

</div>

i got this so far {dot.operator function setup1() { iframe\>createCanvas(400, 500); } function draw() { background1(220); } {dot.operator function setup2() { iframe\>createCanvas(400, 400); } function draw() { …

---

## [Dev tool result](https://discourse.processing.org/t/dev-tool-result/10183)

<div class="topic-metadata">

**Author:** [@l3ehfar](https://discourse.processing.org/u/l3ehfar)\
**Replies:** 2\
**Last updated:** [April 15, 2019, 11:41pm UTC](https://discourse.processing.org/t/dev-tool-result/10183 "2019-04-15T23:41:13Z")

</div>

As my code has been crashed, I got a result from chrome dev tool which said: DevTools: CPU profile parser is fixing 1 missing samples. what does it mean? https://editor.p5js.org/l3ehfar/sketches/JFf1Dxf2K

---

## [Anyone tried Observable? It looks awesome!](https://discourse.processing.org/t/anyone-tried-observable-it-looks-awesome/10112)

<div class="topic-metadata">

**Author:** [@Oskar](https://discourse.processing.org/u/Oskar)\
**Replies:** 2\
**Last updated:** [April 15, 2019, 10:15pm UTC](https://discourse.processing.org/t/anyone-tried-observable-it-looks-awesome/10112 "2019-04-15T22:15:21Z")

</div>

So, I stumbled into this while browsing D3’s website. I think it looks pretty awesome, and may be useful for some members in the community. @kll would something like this help out with what you were looking for? https:…

---

## [How to make ball bouncy in matterjs](https://discourse.processing.org/t/how-to-make-ball-bouncy-in-matterjs/10250)

<div class="topic-metadata">

**Author:** [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Replies:** 4\
**Last updated:** [April 14, 2019, 6:42pm UTC](https://discourse.processing.org/t/how-to-make-ball-bouncy-in-matterjs/10250 "2019-04-14T18:42:43Z")

</div>

Hi I adapted this snippet of code from here However, despite the restitution, the objects aren’t bouncy at all. Is there anything I need to change? // This example is based on examples from: http://brm.io/matter-js/ va…

---

## [Using a string as parameter name](https://discourse.processing.org/t/using-a-string-as-parameter-name/10246)

<div class="topic-metadata">

**Author:** [@b\_and\_z](https://discourse.processing.org/u/b_and_z)\
**Replies:** 6\
**Last updated:** [April 14, 2019, 1:22pm UTC](https://discourse.processing.org/t/using-a-string-as-parameter-name/10246 "2019-04-14T13:22:14Z")

</div>

Hi everyone! I want to make a simple interactive sequencer for my homepage, but I’m running into a problem when trying to play the single notes. let ton1; let ton2; let ton3; let beats = 16; let tonName = \[\]; let sequ…

---

## [Trying to code a catch game](https://discourse.processing.org/t/trying-to-code-a-catch-game/10137)

<div class="topic-metadata">

**Author:** [@gp-gp](https://discourse.processing.org/u/gp-gp)\
**Replies:** 3\
**Last updated:** [April 12, 2019, 4:20pm UTC](https://discourse.processing.org/t/trying-to-code-a-catch-game/10137 "2019-04-12T16:20:39Z")

</div>

Im trying to code this catch game i p5, and i cant figure out how i can detect the falling objekt with the “basket” i’ve drawn… hope you guys can help let box1\_x; let box1\_y; let box1 let box2\_x; let box2\_y; let box2\_…

---

## [Mapping Shapes to a Multi-Color Gradient](https://discourse.processing.org/t/mapping-shapes-to-a-multi-color-gradient/619)

<div class="topic-metadata">

**Author:** [@scoyoh](https://discourse.processing.org/u/scoyoh)\
**Replies:** 1\
**Last updated:** [June 4, 2018, 1:36am UTC](https://discourse.processing.org/t/mapping-shapes-to-a-multi-color-gradient/619 "2018-06-04T01:36:25Z")

</div>

Hi guys! I’m working on a music visualizer which was a fork from a great one I found on openprocessing. I just wanted to make a small change: Right now, each of the bars around the circle cycle straight through the RGB…

---

## [How to Disable Right Click in the Internet browser](https://discourse.processing.org/t/how-to-disable-right-click-in-the-internet-browser/10211)

<div class="topic-metadata">

**Author:** [@peachman](https://discourse.processing.org/u/peachman)\
**Replies:** 2\
**Last updated:** [April 12, 2019, 12:38pm UTC](https://discourse.processing.org/t/how-to-disable-right-click-in-the-internet-browser/10211 "2019-04-12T12:38:00Z")

</div>

Hi all, I am having a huge frustration with ‘right Clicking’ with P5 in the online editor. I have been looking about for a while and cannot find the answer. Every time i ‘right click’ the options come up for chome, how…

---

## [P5js code crash](https://discourse.processing.org/t/p5js-code-crash/10176)

<div class="topic-metadata">

**Author:** [@l3ehfar](https://discourse.processing.org/u/l3ehfar)\
**Replies:** 2\
**Last updated:** [April 12, 2019, 2:08am UTC](https://discourse.processing.org/t/p5js-code-crash/10176 "2019-04-12T02:08:27Z")

</div>

I just realized that due to this loop, the code is going to crash after playing 4 5 notes. how can I avoid an infinitive loop here? function granularPlay(){ for(let i=1;i\<10;i++){ if (doorbell\[i\].contains(mouseX,…

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

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