# Beginners

**URL:** https://discourse.processing.org/c/p5js/p5js-beginners/16.md?page=1

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

**Page:** 2

---

## [Error in displaying a image](https://discourse.processing.org/t/error-in-displaying-a-image/45433)

<div class="topic-metadata">

**Author:** [@edufissure](https://discourse.processing.org/u/edufissure)\
**Replies:** 19\
**Last updated:** [December 11, 2024, 4:53pm UTC](https://discourse.processing.org/t/error-in-displaying-a-image/45433 "2024-12-11T16:53:43Z")

</div>

Im facing an error: Console TypeError: this.\_renderer is undefined 🌸 p5.js dice: \[p5.js, line 95593\] Cannot read property of undefined. Check the line number in error and make sure the variable which is being operated …

---

## [Share data ( variable, array) between two canvas](https://discourse.processing.org/t/share-data-variable-array-between-two-canvas/45434)

<div class="topic-metadata">

**Author:** [@edufissure](https://discourse.processing.org/u/edufissure)\
**Replies:** 1\
**Last updated:** [December 5, 2024, 9:33pm UTC](https://discourse.processing.org/t/share-data-variable-array-between-two-canvas/45434 "2024-12-05T21:33:59Z")

</div>

Hi ive been googleing, but im asking if there is any trick or way to share info, for example object, variables, arrays between two sketches. Lets say i have one game in one canvas inside a div id=“game”… but in other pl…

---

## [How to add Help in Webstorm](https://discourse.processing.org/t/how-to-add-help-in-webstorm/45368)

<div class="topic-metadata">

**Author:** [@edufissure](https://discourse.processing.org/u/edufissure)\
**Replies:** 1\
**Last updated:** [December 4, 2024, 10:15am UTC](https://discourse.processing.org/t/how-to-add-help-in-webstorm/45368 "2024-12-04T10:15:58Z")

</div>

Id like to autocomplete and reading help while coding of p5.js in Webstorm… For example if i want write: // Draw the arc. arc(50, 50, 80, 80, startAngle, endAngle, PIE); some kind of: arc( and as a tooltip when m…

---

## [Import class other file syntax error](https://discourse.processing.org/t/import-class-other-file-syntax-error/45358)

<div class="topic-metadata">

**Author:** [@edufissure](https://discourse.processing.org/u/edufissure)\
**Replies:** 18\
**Last updated:** [November 22, 2024, 10:43am UTC](https://discourse.processing.org/t/import-class-other-file-syntax-error/45358 "2024-11-22T10:43:15Z")

</div>

Im facing this error: SyntaxError: import declarations may only appear at top level of a module in Webstorm. When i have: sketch.js import Animal from "path to animal.js"; function setup() { const dog = new Animal…

---

## [I want to control 'scroll' through 'p5' 'mouseWheel' function](https://discourse.processing.org/t/i-want-to-control-scroll-through-p5-mousewheel-function/45127)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 10\
**Last updated:** [October 3, 2024, 10:33pm UTC](https://discourse.processing.org/t/i-want-to-control-scroll-through-p5-mousewheel-function/45127 "2024-10-03T22:33:40Z")

</div>

I want to control ‘scroll’ through ‘p5’ ‘mouseWheel’ function. Hello. Nice to meet you. Please refer to the picture. I want to control up and down through ‘function mouseWheel(event)’. Can I control scroll through…

---

## [Is it possible to pause functions?](https://discourse.processing.org/t/is-it-possible-to-pause-functions/45120)

<div class="topic-metadata">

**Author:** [@dom](https://discourse.processing.org/u/dom)\
**Replies:** 2\
**Last updated:** [October 2, 2024, 7:16am UTC](https://discourse.processing.org/t/is-it-possible-to-pause-functions/45120 "2024-10-02T07:16:02Z")

</div>

I want to create a series of overlapping videos using P5JS, each one slightly more delayed than the previous and with delays that change their values. The issue I am finding is that there does not appear to be an easy wa…

---

## [Unable to setup p5js web editor locally](https://discourse.processing.org/t/unable-to-setup-p5js-web-editor-locally/44730)

<div class="topic-metadata">

**Author:** [@faisu](https://discourse.processing.org/u/faisu)\
**Replies:** 5\
**Last updated:** [July 15, 2024, 3:33pm UTC](https://discourse.processing.org/t/unable-to-setup-p5js-web-editor-locally/44730 "2024-07-15T15:33:28Z")

</div>

When I run npm start in my p5js-web-editor repo. I get this error: /Users/faisal\_imtiyaz/Desktop/openSource/p5.js-web-editor/server/server.js:44 var MongoStore = (0, \_connectMongo\["default"\])(\_expressSession\["default"\])…

---

## [Converting from Processing to p5.js](https://discourse.processing.org/t/converting-from-processing-to-p5-js/38394)

<div class="topic-metadata">

**Author:** [@Tilman](https://discourse.processing.org/u/Tilman)\
**Replies:** 8\
**Last updated:** [May 8, 2024, 9:05pm UTC](https://discourse.processing.org/t/converting-from-processing-to-p5-js/38394 "2024-05-08T21:05:12Z")

</div>

Hi! I have a small little noise graphing code I would love to port to p5.js and have a hard time finding out what needs to change so this code (which works in processing) works in p5.js float inc = 0.05; float start = 0…

---

## [\[p5 WEB\] I would like to save ‘saveFrames’ (current WEB screen) into one image variable](https://discourse.processing.org/t/p5-web-i-would-like-to-save-saveframes-current-web-screen-into-one-image-variable/44381)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 3\
**Last updated:** [May 4, 2024, 11:58am UTC](https://discourse.processing.org/t/p5-web-i-would-like-to-save-saveframes-current-web-screen-into-one-image-variable/44381 "2024-05-04T11:58:05Z")

</div>

\[p5 WEB\] I would like to save ‘saveFrames’ (current WEB screen) into one image variable. hello. Nice to meet you. I would like to save the image of the current WEB screen in a variable. I would like to edit and sa…

---

## [Using p5 variables and functions outside setup and draw](https://discourse.processing.org/t/using-p5-variables-and-functions-outside-setup-and-draw/44336)

<div class="topic-metadata">

**Author:** [@slacle](https://discourse.processing.org/u/slacle)\
**Replies:** 2\
**Last updated:** [April 24, 2024, 11:28am UTC](https://discourse.processing.org/t/using-p5-variables-and-functions-outside-setup-and-draw/44336 "2024-04-24T11:28:48Z")

</div>

Just making sure… p5 variables such as width and height, and p5 functions such as rect() and fill() can be used outside setup() and draw() as long as they’re in a function that is called from within either setup() or dr…

---

## [How can I delete unused assets ?](https://discourse.processing.org/t/how-can-i-delete-unused-assets/44288)

<div class="topic-metadata">

**Author:** [@slaine](https://discourse.processing.org/u/slaine)\
**Replies:** 2\
**Last updated:** [April 18, 2024, 12:05pm UTC](https://discourse.processing.org/t/how-can-i-delete-unused-assets/44288 "2024-04-18T12:05:30Z")

</div>

Hello, I’m Sylvie from France. I’m trying to use P5.js to create digital artworks. My knowledge of code is still basic but I’m learning. Here’s my problem: Yesterday, I created an account, and uploaded 78 PNG images fro…

---

## [How to have circles increase their radius](https://discourse.processing.org/t/how-to-have-circles-increase-their-radius/44171)

<div class="topic-metadata">

**Author:** [@Vovja](https://discourse.processing.org/u/Vovja)\
**Replies:** 5\
**Last updated:** [April 6, 2024, 7:02am UTC](https://discourse.processing.org/t/how-to-have-circles-increase-their-radius/44171 "2024-04-06T07:02:39Z")

</div>

I cant figure out how to have a certain amount of semicircles increase their radius without needing to define a new var for ever new circle. I am trying to recreate this: (the semicircles generate with delay but with …

---

## [How to get the current index in a forEach loop?](https://discourse.processing.org/t/how-to-get-the-current-index-in-a-foreach-loop/43992)

<div class="topic-metadata">

**Author:** [@amundsen](https://discourse.processing.org/u/amundsen)\
**Replies:** 4\
**Last updated:** [February 26, 2024, 12:07pm UTC](https://discourse.processing.org/t/how-to-get-the-current-index-in-a-foreach-loop/43992 "2024-02-26T12:07:29Z")

</div>

Hello, Is it possible to have the current index of the item currently handled inside a forEach loop? Thank you.

---

## [Failed to load image](https://discourse.processing.org/t/failed-to-load-image/43864)

<div class="topic-metadata">

**Author:** [@the](https://discourse.processing.org/u/the)\
**Replies:** 9\
**Last updated:** [February 9, 2024, 1:19am UTC](https://discourse.processing.org/t/failed-to-load-image/43864 "2024-02-09T01:19:53Z")

</div>

Hello, I am teaching a coding class and trying to load and display images on the p5js website as a part of an assignment. I keep running into an error: failed to load error. p5.js says: It looks like there was a proble…

---

## [Advance property in bounding box returned by textBounds](https://discourse.processing.org/t/advance-property-in-bounding-box-returned-by-textbounds/43735)

<div class="topic-metadata">

**Author:** [@fabiopettinati](https://discourse.processing.org/u/fabiopettinati)\
**Replies:** 3\
**Last updated:** [January 23, 2024, 10:03am UTC](https://discourse.processing.org/t/advance-property-in-bounding-box-returned-by-textbounds/43735 "2024-01-23T10:03:16Z")

</div>

The bounding box returned by textBounds() has the expected properties (x, y, h, w) and one more that surprised me: “advance”. What does it do? When would I use it? There is no documentation on this item. Thanks!

---

## [Basic PPI Question](https://discourse.processing.org/t/basic-ppi-question/43677)

<div class="topic-metadata">

**Author:** [@looplider](https://discourse.processing.org/u/looplider)\
**Replies:** 2\
**Last updated:** [January 12, 2024, 11:22am UTC](https://discourse.processing.org/t/basic-ppi-question/43677 "2024-01-12T11:22:31Z")

</div>

Hi there - I know that I can set the pixel dimensions in createCanvas - but I have no idea how to convert that information to inches or metric. It seems like there’s a basic equation that involves taking the square roo…

---

## [I.4: Graphing 1D Perlin Noise - Perlin Noise and p5.js Tutorial](https://discourse.processing.org/t/i-4-graphing-1d-perlin-noise-perlin-noise-and-p5-js-tutorial/33383)

<div class="topic-metadata">

**Author:** [@ibra9](https://discourse.processing.org/u/ibra9)\
**Replies:** 2\
**Last updated:** [January 10, 2024, 6:56pm UTC](https://discourse.processing.org/t/i-4-graphing-1d-perlin-noise-perlin-noise-and-p5-js-tutorial/33383 "2024-01-10T18:56:17Z")

</div>

Hello, I am having a hard time understanding why does the sketch move when start += inc at 10:00. I know its related to start += inc but I just don’t understand the logic behind it. Thanks.

---

## [Help understanding the logic behind this code (center grid)](https://discourse.processing.org/t/help-understanding-the-logic-behind-this-code-center-grid/43643)

<div class="topic-metadata">

**Author:** [@Jiji](https://discourse.processing.org/u/Jiji)\
**Replies:** 2\
**Last updated:** [January 10, 2024, 4:36am UTC](https://discourse.processing.org/t/help-understanding-the-logic-behind-this-code-center-grid/43643 "2024-01-10T04:36:47Z")

</div>

Hi everybody, I have this code from a tutorial. So basically I want to draw a grid of boxes using WEBGL. I have a hard time to understand the logic of this translate( size/2+ i \* size - size \* cols/2, size/2+ j \* size -…

---

## [Can I show the keyboard of a mobile device?](https://discourse.processing.org/t/can-i-show-the-keyboard-of-a-mobile-device/26093)

<div class="topic-metadata">

**Author:** [@Filatov](https://discourse.processing.org/u/Filatov)\
**Replies:** 4\
**Last updated:** [December 25, 2023, 1:40pm UTC](https://discourse.processing.org/t/can-i-show-the-keyboard-of-a-mobile-device/26093 "2023-12-25T13:40:57Z")

</div>

I am developing an interface for the program, made a component for entering text. The PC version works fine. Is it possible to force the keyboard to open in a browser on a mobile device and read the key pressed? Is ther…

---

## [Book recos for p5,js?](https://discourse.processing.org/t/book-recos-for-p5-js/19778)

<div class="topic-metadata">

**Author:** [@CrouchingPython](https://discourse.processing.org/u/CrouchingPython)\
**Replies:** 8\
**Last updated:** [December 15, 2023, 1:23pm UTC](https://discourse.processing.org/t/book-recos-for-p5-js/19778 "2023-12-15T13:23:02Z")

</div>

Hi all, looking for recos for good p5.js books for beginner/intermediate learners. I’ve got the Getting Started from Maker one and searching for the next one. Interested in p5 books, not Processing, thanks!

---

## [Question on buildGeometry() with p5.js](https://discourse.processing.org/t/question-on-buildgeometry-with-p5-js/43473)

<div class="topic-metadata">

**Author:** [@Pierre1](https://discourse.processing.org/u/Pierre1)\
**Replies:** 2\
**Last updated:** [December 14, 2023, 3:52pm UTC](https://discourse.processing.org/t/question-on-buildgeometry-with-p5-js/43473 "2023-12-14T15:52:47Z")

</div>

Using version 4.3 I am unable to have code with buildGeometry & model working on my PC. The example code in p5.js does npt work. When I save it on Openprocessing, it works. (happily…) All other 3D functions with WEBG…

---

## [Need help understanding why array in console.log is not displayed as expected](https://discourse.processing.org/t/need-help-understanding-why-array-in-console-log-is-not-displayed-as-expected/43213)

<div class="topic-metadata">

**Author:** [@jjjochennn](https://discourse.processing.org/u/jjjochennn)\
**Replies:** 3\
**Last updated:** [November 15, 2023, 9:53am UTC](https://discourse.processing.org/t/need-help-understanding-why-array-in-console-log-is-not-displayed-as-expected/43213 "2023-11-15T09:53:50Z")

</div>

Hello! the console.log in my p5 script is not showing what I expect and I do not understand, why. Basically I want to create a random square matrix of zeroes and ones, but in the (rare) case the function returns only z…

---

## [Canvas being redrawn at 200x200 px](https://discourse.processing.org/t/canvas-being-redrawn-at-200x200-px/43177)

<div class="topic-metadata">

**Author:** [@DavevaD](https://discourse.processing.org/u/DavevaD)\
**Replies:** 2\
**Last updated:** [November 9, 2023, 7:30pm UTC](https://discourse.processing.org/t/canvas-being-redrawn-at-200x200-px/43177 "2023-11-09T19:30:05Z")

</div>

Hi All, For some reason this sketch keeps displaying a canvas at 200x200px when I want it to be 500x500. The image is not scaled down, it just shows the top, left corner. When first building this sketch with just one …

---

## [Target an existing canvas in the DOM instead of creating a new one](https://discourse.processing.org/t/target-an-existing-canvas-in-the-dom-instead-of-creating-a-new-one/43179)

<div class="topic-metadata">

**Author:** [@mima](https://discourse.processing.org/u/mima)\
**Replies:** 1\
**Last updated:** [November 9, 2023, 6:19pm UTC](https://discourse.processing.org/t/target-an-existing-canvas-in-the-dom-instead-of-creating-a-new-one/43179 "2023-11-09T18:19:21Z")

</div>

I have an HTML page with a \<canvas\> node already in it. I’d like to connect a p5js sketch to it and draw in it. I’ve seen how to target instance container (examples | p5.js) but in these example a \<div\> tag is targeted…

---

## [New to p5js - strokeWeight & Order of Operations?](https://discourse.processing.org/t/new-to-p5js-strokeweight-order-of-operations/42808)

<div class="topic-metadata">

**Author:** [@DavevaD](https://discourse.processing.org/u/DavevaD)\
**Replies:** 6\
**Last updated:** [September 21, 2023, 4:42pm UTC](https://discourse.processing.org/t/new-to-p5js-strokeweight-order-of-operations/42808 "2023-09-21T16:42:28Z")

</div>

Good Morning! I am making my way (no pun intended) through the book Make: Getting Started with p5.js. I am having trouble understanding Example 3-12: Set Stroke Weight. Based on the code I have included in this post, t…

---

## [Creating a Gradient for a Bezier Curve?](https://discourse.processing.org/t/creating-a-gradient-for-a-bezier-curve/42719)

<div class="topic-metadata">

**Author:** [@looplider](https://discourse.processing.org/u/looplider)\
**Replies:** 5\
**Last updated:** [September 11, 2023, 7:53am UTC](https://discourse.processing.org/t/creating-a-gradient-for-a-bezier-curve/42719 "2023-09-11T07:53:04Z")

</div>

Hi there - I am curious if there is a way to use a gradient as a “fill” color for a Bezier curve. I wrote up a silly example with the Bezier… not sure if this is possible though. Thanks. function setup() { createCa…

---

## [Evaluating Functions in P5.JS](https://discourse.processing.org/t/evaluating-functions-in-p5-js/42693)

<div class="topic-metadata">

**Author:** [@looplider](https://discourse.processing.org/u/looplider)\
**Replies:** 9\
**Last updated:** [September 9, 2023, 3:51pm UTC](https://discourse.processing.org/t/evaluating-functions-in-p5-js/42693 "2023-09-09T15:51:22Z")

</div>

Hi there - I’m new here. I think I’m in the right place! I am trying to create a mathematical function in a P5.JS to return a number. I’ve simplified the code here, so that the function is simply a random number gener…

---

## [Is there an integrated function to get the sign of a number?](https://discourse.processing.org/t/is-there-an-integrated-function-to-get-the-sign-of-a-number/42658)

<div class="topic-metadata">

**Author:** [@1qayxsw2](https://discourse.processing.org/u/1qayxsw2)\
**Replies:** 4\
**Last updated:** [August 28, 2023, 8:10pm UTC](https://discourse.processing.org/t/is-there-an-integrated-function-to-get-the-sign-of-a-number/42658 "2023-08-28T20:10:10Z")

</div>

Hi all, I am probably missing something basic, but I cannot directly solve it by myself. My question is about a function to return the sign of a given number, e.g.: sign(-42) should return -1, sign(42) should return 1…

---

## [Help! In FxHash Code comes up rather than image when trying to mint a token](https://discourse.processing.org/t/help-in-fxhash-code-comes-up-rather-than-image-when-trying-to-mint-a-token/42639)

<div class="topic-metadata">

**Author:** [@ghstvbng](https://discourse.processing.org/u/ghstvbng)\
**Replies:** 2\
**Last updated:** [August 25, 2023, 2:44pm UTC](https://discourse.processing.org/t/help-in-fxhash-code-comes-up-rather-than-image-when-trying-to-mint-a-token/42639 "2023-08-25T14:44:06Z")

</div>

Hello all, Maybe someone can help me out - I am trying to mint a token and it works fine in the sandbox but in the actual mint all that comes up is the written code. I appreciate the help! here is the code including t…

---

## [Ex 2.7 tossing a ball - The Nature of code](https://discourse.processing.org/t/ex-2-7-tossing-a-ball-the-nature-of-code/42551)

<div class="topic-metadata">

**Author:** [@Delain](https://discourse.processing.org/u/Delain)\
**Replies:** 1\
**Last updated:** [August 5, 2023, 10:35am UTC](https://discourse.processing.org/t/ex-2-7-tossing-a-ball-the-nature-of-code/42551 "2023-08-05T10:35:10Z")

</div>

I am following along with The nature of Code of Daniel Shiffman. And I am stuck on exercises 2.7 of tossing a circle with mouse interaction. I think in circles and I hope some body can shine a light on it. I looked in …

[Previous page](https://discourse.processing.org/c/p5js/p5js-beginners/16.md)

[Next page](https://discourse.processing.org/c/p5js/p5js-beginners/16.md?page=2)