# p5.js

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

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

**Page:** 31

---

## [How come that function getLevel() doesn't work: Uncaught TypeError: Cannot read properties of undefined (reading 'getLevel')](https://discourse.processing.org/t/how-come-that-function-getlevel-doesnt-work-uncaught-typeerror-cannot-read-properties-of-undefined-reading-getlevel/34588)

<div class="topic-metadata">

**Author:** [@Joeri](https://discourse.processing.org/u/Joeri)\
**Replies:** 3\
**Last updated:** [January 11, 2022, 11:45pm UTC](https://discourse.processing.org/t/how-come-that-function-getlevel-doesnt-work-uncaught-typeerror-cannot-read-properties-of-undefined-reading-getlevel/34588 "2022-01-11T23:45:31Z")

</div>

I started a project in VS code and at the beginning everything was working but now I get the TypeError. How come? Thanks

---

## [The function UP\_ARROW and DOWN\_ARROW dosen't work at p5.js web](https://discourse.processing.org/t/the-function-up-arrow-and-down-arrow-dosent-work-at-p5-js-web/34584)

<div class="topic-metadata">

**Author:** [@MrPrumucena](https://discourse.processing.org/u/MrPrumucena)\
**Replies:** 2\
**Last updated:** [January 11, 2022, 8:05pm UTC](https://discourse.processing.org/t/the-function-up-arrow-and-down-arrow-dosent-work-at-p5-js-web/34584 "2022-01-11T20:05:53Z")

</div>

I’m making the game Pong on p5.js and i’m trying to move the racket using the function: function (keyIsDown(UP\_ARROW)){ yRacket -= 10; } function (keyIsDown(DOWN\_ARROW)){ yRacket += 10; } But it dosen’t work, the …

---

## [3D rotation changes shape of object?](https://discourse.processing.org/t/3d-rotation-changes-shape-of-object/34550)

<div class="topic-metadata">

**Author:** [@kenjones](https://discourse.processing.org/u/kenjones)\
**Replies:** 2\
**Last updated:** [January 10, 2022, 4:39am UTC](https://discourse.processing.org/t/3d-rotation-changes-shape-of-object/34550 "2022-01-10T04:39:13Z")

</div>

I am developing a WebGL sketch on openprocessing.org and I’ve run into a problem. When I apply a specific sequence of rotations my object retains its shape until I get to one rotation. Applying that rotation causes a dra…

---

## [When will someone recreate some P5 functions with PROMISES](https://discourse.processing.org/t/when-will-someone-recreate-some-p5-functions-with-promises/34555)

<div class="topic-metadata">

**Author:** [@Errorbot1122](https://discourse.processing.org/u/Errorbot1122)\
**Replies:** 0\
**Last updated:** [January 10, 2022, 4:37am UTC](https://discourse.processing.org/t/when-will-someone-recreate-some-p5-functions-with-promises/34555 "2022-01-10T04:37:14Z")

</div>

Promises are almost always better than callbacks, so can someone replace almost all callbacks with Promises. Adding promises would actually shorten the functions by removing the error, and success callbacks, converting l…

---

## [ReferenceError: path is not defined](https://discourse.processing.org/t/referenceerror-path-is-not-defined/34519)

<div class="topic-metadata">

**Author:** [@Errorbot1122](https://discourse.processing.org/u/Errorbot1122)\
**Replies:** 2\
**Last updated:** [January 10, 2022, 4:18am UTC](https://discourse.processing.org/t/referenceerror-path-is-not-defined/34519 "2022-01-10T04:18:14Z")

</div>

Whenever I run my code I get this error ReferenceError: path is not defined at https://365155ea-fe08-466f-b1bf-6d6d9500167a.id.repl.co/loading.js:122:67 at new Promise (\<anonymous\>) at https://365155ea-fe08-…

---

## [Introducing Window.js - run p5.js on the desktop](https://discourse.processing.org/t/introducing-window-js-run-p5-js-on-the-desktop/34540)

<div class="topic-metadata">

**Author:** [@JoaoDaSilva](https://discourse.processing.org/u/JoaoDaSilva)\
**Replies:** 0\
**Last updated:** [January 9, 2022, 3:18pm UTC](https://discourse.processing.org/t/introducing-window-js-run-p5-js-on-the-desktop/34540 "2022-01-09T15:18:47Z")

</div>

Hi p5.js! I’m Joao and I’d like to introduce Window.js to the community: https://windowjs.org Window.js is a Javascript runtime like Node.js that includes native support for desktop windowing and the HTML5 canvas API…

---

## [rotationX on Android](https://discourse.processing.org/t/rotationx-on-android/34479)

<div class="topic-metadata">

**Author:** [@Katarzyna](https://discourse.processing.org/u/Katarzyna)\
**Replies:** 7\
**Last updated:** [January 8, 2022, 11:25pm UTC](https://discourse.processing.org/t/rotationx-on-android/34479 "2022-01-08T23:25:24Z")

</div>

I try with Accelerometer data on Android device. In script function setup() { createCanvas(100, 100); } function draw() { background(200); console.log(rotationX) } there is only a null. Why should I do to get va…

---

## [Sheetrock.js with p5.js](https://discourse.processing.org/t/sheetrock-js-with-p5-js/34526)

<div class="topic-metadata">

**Author:** [@patricio1979](https://discourse.processing.org/u/patricio1979)\
**Replies:** 0\
**Last updated:** [January 8, 2022, 4:51pm UTC](https://discourse.processing.org/t/sheetrock-js-with-p5-js/34526 "2022-01-08T16:51:21Z")

</div>

---

## [I don't get what's wrong with my code (move rect)](https://discourse.processing.org/t/i-dont-get-whats-wrong-with-my-code-move-rect/34509)

<div class="topic-metadata">

**Author:** [@Alexandre\_Normandin](https://discourse.processing.org/u/Alexandre_Normandin)\
**Replies:** 4\
**Last updated:** [January 8, 2022, 12:50am UTC](https://discourse.processing.org/t/i-dont-get-whats-wrong-with-my-code-move-rect/34509 "2022-01-08T00:50:04Z")

</div>

hi, I’m just tarting to learn to code and I want my initial rectangle to move right when my mouse is clicked and I can’t seem to get the code right and I just can’t figure out why. If someone could please run it and tel…

---

## [Split function overrides string.split?](https://discourse.processing.org/t/split-function-overrides-string-split/34518)

<div class="topic-metadata">

**Author:** [@Errorbot1122](https://discourse.processing.org/u/Errorbot1122)\
**Replies:** 1\
**Last updated:** [January 8, 2022, 12:05am UTC](https://discourse.processing.org/t/split-function-overrides-string-split/34518 "2022-01-08T00:05:31Z")

</div>

For some reason every time, when I tried to use the string.split() function, but it says this error. TypeError: Cannot read properties of undefined (reading 'split') Did you just try to use p5.js's split() function? If …

---

## [Jumping mechanic](https://discourse.processing.org/t/jumping-mechanic/34499)

<div class="topic-metadata">

**Author:** [@parichko](https://discourse.processing.org/u/parichko)\
**Replies:** 1\
**Last updated:** [January 7, 2022, 10:27am UTC](https://discourse.processing.org/t/jumping-mechanic/34499 "2022-01-07T10:27:07Z")

</div>

What is the best way to add a jumping mechanic to a shape in p5js

---

## [How to use size() function on external canvas](https://discourse.processing.org/t/how-to-use-size-function-on-external-canvas/34493)

<div class="topic-metadata">

**Author:** [@Errorbot1122](https://discourse.processing.org/u/Errorbot1122)\
**Replies:** 1\
**Last updated:** [January 7, 2022, 2:51am UTC](https://discourse.processing.org/t/how-to-use-size-function-on-external-canvas/34493 "2022-01-07T02:51:22Z")

</div>

I currently want to use the size() method on an external canvas, but I’m worried the size function will change the CSS W/H instead of the W/H attribute itself. almost like this: webglCanvas = select('#mainViewport'); w…

---

## [Put letters from input in array](https://discourse.processing.org/t/put-letters-from-input-in-array/34486)

<div class="topic-metadata">

**Author:** [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Replies:** 2\
**Last updated:** [January 6, 2022, 3:55pm UTC](https://discourse.processing.org/t/put-letters-from-input-in-array/34486 "2022-01-06T15:55:34Z")

</div>

How do I break “text” apart and put it into an array? let input, button, greeting; function setup() { // create canvas createCanvas(710, 400); input = createInput(); input.position(20, 65); button = createB…

---

## [Best practice to merge images](https://discourse.processing.org/t/best-practice-to-merge-images/34461)

<div class="topic-metadata">

**Author:** [@AAAnatoly](https://discourse.processing.org/u/AAAnatoly)\
**Replies:** 4\
**Last updated:** [January 5, 2022, 1:40am UTC](https://discourse.processing.org/t/best-practice-to-merge-images/34461 "2022-01-05T01:40:58Z")

</div>

Hello everyone. I am trying to merge 3 pictures into 1. Right now I am loading their pixels, getting the average colour of each pixel and simply putting that pixel back on the screen, like this - img\_one = loadImage(ra…

---

## [Save in vectorial + background aspect](https://discourse.processing.org/t/save-in-vectorial-background-aspect/34457)

<div class="topic-metadata">

**Author:** [@jdelaro](https://discourse.processing.org/u/jdelaro)\
**Replies:** 0\
**Last updated:** [January 4, 2022, 8:36am UTC](https://discourse.processing.org/t/save-in-vectorial-background-aspect/34457 "2022-01-04T08:36:33Z")

</div>

Hello, I hope I am in the right place to post my question. I am using this code created by Manoylov AC : var blockSize = 150; var countBorder = 2; var wdt = blockSize \* countBorder; var hgt = blockSize \* countBorder; v…

---

## [Same shader, multiple graphics?](https://discourse.processing.org/t/same-shader-multiple-graphics/34427)

<div class="topic-metadata">

**Author:** [@modusponens](https://discourse.processing.org/u/modusponens)\
**Replies:** 2\
**Last updated:** [January 4, 2022, 6:38am UTC](https://discourse.processing.org/t/same-shader-multiple-graphics/34427 "2022-01-04T06:38:49Z")

</div>

Is it possible for more than one graphics object to use the same shader? In this sketch here, I would expect two squares to be drawn, a yellow one on the left and a blue on the right, but only the yellow one appears: A…

---

## [Access the magnetometer sensor](https://discourse.processing.org/t/access-the-magnetometer-sensor/33605)

<div class="topic-metadata">

**Author:** [@sasharvrn](https://discourse.processing.org/u/sasharvrn)\
**Replies:** 3\
**Last updated:** [January 3, 2022, 4:06pm UTC](https://discourse.processing.org/t/access-the-magnetometer-sensor/33605 "2022-01-03T16:06:41Z")

</div>

Hello, I am working on a project to display and test the phone’s sensors (accelerometer, gyroscope etc) by using p5.js. I can’t find any information to access the magnetometer sensor, is there something implemented in P5…

---

## [How to obfuscate P5js?](https://discourse.processing.org/t/how-to-obfuscate-p5js/34245)

<div class="topic-metadata">

**Author:** [@nemecsek69](https://discourse.processing.org/u/nemecsek69)\
**Replies:** 2\
**Last updated:** [December 31, 2021, 4:20pm UTC](https://discourse.processing.org/t/how-to-obfuscate-p5js/34245 "2021-12-31T16:20:22Z")

</div>

I embedded some P5js sketches in another app (python+flask). Any way to obfuscate P5js code? How is the code in Hungry Bird 3: Drop a seed obfuscated obtained? I tried some javascript minifiers online and offline ( YU…

---

## [All new to this trying to understand](https://discourse.processing.org/t/all-new-to-this-trying-to-understand/34429)

<div class="topic-metadata">

**Author:** [@visnudeva](https://discourse.processing.org/u/visnudeva)\
**Replies:** 12\
**Last updated:** [January 3, 2022, 7:54am UTC](https://discourse.processing.org/t/all-new-to-this-trying-to-understand/34429 "2022-01-03T07:54:30Z")

</div>

I’m trying to understand something very basic looking at the exemple and trying to modify them but i don’t get it yet. For exemple with the code here: what should i do to get many circles doing the same thing ?

---

## [Creating chalk-like lines](https://discourse.processing.org/t/creating-chalk-like-lines/34411)

<div class="topic-metadata">

**Author:** [@cconsta1](https://discourse.processing.org/u/cconsta1)\
**Replies:** 0\
**Last updated:** [January 1, 2022, 4:39pm UTC](https://discourse.processing.org/t/creating-chalk-like-lines/34411 "2022-01-01T16:39:07Z")

</div>

Hi all! I’m so excited to find out there is a forum for p5.js :slightly\_smiling\_face: So, I’m trying to create something that will look like chalky, sort of vertical lines similar to the attached picture. Using the…

---

## [How to save a GIF in p5.js web editor](https://discourse.processing.org/t/how-to-save-a-gif-in-p5-js-web-editor/34415)

<div class="topic-metadata">

**Author:** [@mrgrassoxen](https://discourse.processing.org/u/mrgrassoxen)\
**Replies:** 0\
**Last updated:** [January 1, 2022, 6:48pm UTC](https://discourse.processing.org/t/how-to-save-a-gif-in-p5-js-web-editor/34415 "2022-01-01T18:48:53Z")

</div>

How do you save a GIF from the web editor? I attempted following instructions using ccapture but was not able to get it to work… Thanks

---

## [How to load my canvas so I can do pixel manipulation](https://discourse.processing.org/t/how-to-load-my-canvas-so-i-can-do-pixel-manipulation/34406)

<div class="topic-metadata">

**Author:** [@goldorak](https://discourse.processing.org/u/goldorak)\
**Replies:** 2\
**Last updated:** [January 1, 2022, 5:10pm UTC](https://discourse.processing.org/t/how-to-load-my-canvas-so-i-can-do-pixel-manipulation/34406 "2022-01-01T17:10:55Z")

</div>

Hi, I’d like to play around with an existing sketch which uses: function preload() { img = loadImage(url + str(windowWidth) + random(keywords)); } Excepted that I don’t want to use an external image, I would like …

---

## [How to dynamically change API search parameters?](https://discourse.processing.org/t/how-to-dynamically-change-api-search-parameters/26321)

<div class="topic-metadata">

**Author:** [@epignosis567](https://discourse.processing.org/u/epignosis567)\
**Replies:** 7\
**Last updated:** [December 31, 2021, 6:26pm UTC](https://discourse.processing.org/t/how-to-dynamically-change-api-search-parameters/26321 "2021-12-31T18:26:50Z")

</div>

This is the first complex bit of code I’ve written on my own! :partying\_face: I access the API, search for any image with “hand” in the title, download the data, and then display an image and it’s title from an array. A…

---

## [Resize canvas in the DOM](https://discourse.processing.org/t/resize-canvas-in-the-dom/34365)

<div class="topic-metadata">

**Author:** [@yonmaor](https://discourse.processing.org/u/yonmaor)\
**Replies:** 0\
**Last updated:** [December 29, 2021, 9:40pm UTC](https://discourse.processing.org/t/resize-canvas-in-the-dom/34365 "2021-12-29T21:40:53Z")

</div>

Hey! I’m trying to embed a p5.js program into a website via the DOM. I want to place it in a CSS grid element that’s width is proportional to the window size. Is there a method similar to .position(x, y) that will allow …

---

## [Interaction between objects and 2D detector?](https://discourse.processing.org/t/interaction-between-objects-and-2d-detector/33374)

<div class="topic-metadata">

**Author:** [@Timo](https://discourse.processing.org/u/Timo)\
**Replies:** 5\
**Last updated:** [December 28, 2021, 10:30pm UTC](https://discourse.processing.org/t/interaction-between-objects-and-2d-detector/33374 "2021-12-28T22:30:09Z")

</div>

Hi community, I am currently exploring P5js with posenet 2D pose detector. I have currently fiddled around sketched by following objects in the canvas and doing a similar action. I was wondering how can one make some sim…

---

## [Trying to generate a sphere using an array of circles](https://discourse.processing.org/t/trying-to-generate-a-sphere-using-an-array-of-circles/34321)

<div class="topic-metadata">

**Author:** [@lucienfradet](https://discourse.processing.org/u/lucienfradet)\
**Replies:** 6\
**Last updated:** [December 28, 2021, 8:36pm UTC](https://discourse.processing.org/t/trying-to-generate-a-sphere-using-an-array-of-circles/34321 "2021-12-28T20:36:57Z")

</div>

Hello! I’m trying to generate a sphere using circles of different sizes. I want it to be adapt if I change the NUM\_RING variable. Right now, the my code creates overlapping circles, and I don’t get why. Maybe it’s somthi…

---

## [Unable to apply shader to PGraphics in p5js](https://discourse.processing.org/t/unable-to-apply-shader-to-pgraphics-in-p5js/34322)

<div class="topic-metadata">

**Author:** [@urotas](https://discourse.processing.org/u/urotas)\
**Replies:** 4\
**Last updated:** [December 28, 2021, 3:03am UTC](https://discourse.processing.org/t/unable-to-apply-shader-to-pgraphics-in-p5js/34322 "2021-12-28T03:03:30Z")

</div>

Hi. I’m trying to apply a shader to PGraphics. I was able to apply a shader to a canvas. But, when I tried to apply a shader to PGraphics as well, I could not. Should I add something? This is what I’m applying to the c…

---

## [Libraries related - mappa Map style change does not work](https://discourse.processing.org/t/libraries-related-mappa-map-style-change-does-not-work/34326)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 0\
**Last updated:** [December 28, 2021, 1:06am UTC](https://discourse.processing.org/t/libraries-related-mappa-map-style-change-does-not-work/34326 "2021-12-28T01:06:36Z")

</div>

Reference site 1: Reference site 2: MapboxGL Example Reference site 3: Map style change does not work. Previous source code const options = { lat: 0, ng: 0, zoom: 4, style: 'mapbox://styles/mapbox…

---

## [How to feed curve() an array of points](https://discourse.processing.org/t/how-to-feed-curve-an-array-of-points/34310)

<div class="topic-metadata">

**Author:** [@nsegal](https://discourse.processing.org/u/nsegal)\
**Replies:** 4\
**Last updated:** [December 27, 2021, 9:49am UTC](https://discourse.processing.org/t/how-to-feed-curve-an-array-of-points/34310 "2021-12-27T09:49:52Z")

</div>

I made a DataPoint object that has an x property and a y property. I generated an array of these and now want to draw a curve that takes the array as its argument. I tried something like the following: let s = "" for …

---

## [Processing X P5JS (image quality on canvas)](https://discourse.processing.org/t/processing-x-p5js-image-quality-on-canvas/34272)

<div class="topic-metadata">

**Author:** [@vargas](https://discourse.processing.org/u/vargas)\
**Replies:** 7\
**Last updated:** [December 26, 2021, 11:44pm UTC](https://discourse.processing.org/t/processing-x-p5js-image-quality-on-canvas/34272 "2021-12-26T23:44:06Z")

</div>

I have transferred a processing code to P5JS. In it I use an image with rotation and all axes. But image quality on P5JS canvas is not the same as on processing. Does anybody know how to solve this?

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

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