# p5.js

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

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

**Page:** 48

---

## [How to preview changes made in p5.js repository at ps.js web-editor at my localhost](https://discourse.processing.org/t/how-to-preview-changes-made-in-p5-js-repository-at-ps-js-web-editor-at-my-localhost/28014)

<div class="topic-metadata">

**Author:** [@Amit90113](https://discourse.processing.org/u/Amit90113)\
**Replies:** 6\
**Last updated:** [February 26, 2021, 5:57am UTC](https://discourse.processing.org/t/how-to-preview-changes-made-in-p5-js-repository-at-ps-js-web-editor-at-my-localhost/28014 "2021-02-26T05:57:15Z")

</div>

Hi, I am new to p5.js I have encountered some problems while rendering some GIFs as it is giving “uncaught type error” in the p5.js web-editor console. I have a quick fix also and made some changes in the p5.js repositor…

---

## [Help with 3d object transfiguration/distortion effect](https://discourse.processing.org/t/help-with-3d-object-transfiguration-distortion-effect/28795)

<div class="topic-metadata">

**Author:** [@senhorcodigo](https://discourse.processing.org/u/senhorcodigo)\
**Replies:** 3\
**Last updated:** [April 2, 2021, 11:32pm UTC](https://discourse.processing.org/t/help-with-3d-object-transfiguration-distortion-effect/28795 "2021-04-02T23:32:34Z")

</div>

Hello, I’m trying to a project where there is an interaction with a 3d object and the user, and the interaction being when the user moves/clicks his mouse the vertices of the object move randomly. The project is still …

---

## [I can't seem to play sounds in javascript using p5.js](https://discourse.processing.org/t/i-cant-seem-to-play-sounds-in-javascript-using-p5-js/29043)

<div class="topic-metadata">

**Author:** [@LaserDenis](https://discourse.processing.org/u/LaserDenis)\
**Replies:** 13\
**Last updated:** [April 1, 2021, 12:46pm UTC](https://discourse.processing.org/t/i-cant-seem-to-play-sounds-in-javascript-using-p5-js/29043 "2021-04-01T12:46:56Z")

</div>

I am new to Js, and p5 and I was trying to play a mp3 from my computer, but I continually get this errors: Uncaught (in promise) ReferenceError: loadSound is not defined Uncaught TypeError: Cannot read property 'play' of…

---

## [Get whole Spectrum of an audio file using p5 sound](https://discourse.processing.org/t/get-whole-spectrum-of-an-audio-file-using-p5-sound/29046)

<div class="topic-metadata">

**Author:** [@readera](https://discourse.processing.org/u/readera)\
**Replies:** 1\
**Last updated:** [April 1, 2021, 9:21am UTC](https://discourse.processing.org/t/get-whole-spectrum-of-an-audio-file-using-p5-sound/29046 "2021-04-01T09:21:52Z")

</div>

In the example examples | p5.js of the Frequency Spectrum you can show the spectrum of the sound which is currently played. Is it possible to get the whole spectrum of an file using FFT analyze from p5 sound without bei…

---

## [Convert P5js shader to Java Processing shader](https://discourse.processing.org/t/convert-p5js-shader-to-java-processing-shader/29017)

<div class="topic-metadata">

**Author:** [@Flolo](https://discourse.processing.org/u/Flolo)\
**Replies:** 1\
**Last updated:** [March 31, 2021, 8:01pm UTC](https://discourse.processing.org/t/convert-p5js-shader-to-java-processing-shader/29017 "2021-03-31T20:01:53Z")

</div>

Hey, I saw this program the other day: The Programm Stupidly it is programmed in P5js but I would like to program the same in Processing Java… Could someone translate this for me? Thank you

---

## [P5.js Canvas using Bootstrap](https://discourse.processing.org/t/p5-js-canvas-using-bootstrap/28994)

<div class="topic-metadata">

**Author:** [@karenmsn](https://discourse.processing.org/u/karenmsn)\
**Replies:** 0\
**Last updated:** [March 30, 2021, 8:11pm UTC](https://discourse.processing.org/t/p5-js-canvas-using-bootstrap/28994 "2021-03-30T20:11:08Z")

</div>

I’m trying to use Bootstrap to make my website with my p5.js code and I’m having a hard time with figuring out aligning my elements so the video canvas on top of the button on the left hand side. Any ideas why it’s not p…

---

## [Is noTint() not compatible with WEBGL?](https://discourse.processing.org/t/is-notint-not-compatible-with-webgl/28985)

<div class="topic-metadata">

**Author:** [@marcela](https://discourse.processing.org/u/marcela)\
**Replies:** 0\
**Last updated:** [March 30, 2021, 2:28pm UTC](https://discourse.processing.org/t/is-notint-not-compatible-with-webgl/28985 "2021-03-30T14:28:27Z")

</div>

Hi everyone, I just can’t use noTint() in WEBGL, but I wasn’t able to find any info about that. Is that really the case, or am I doing something wrong? I reproduced the issue that I am having in this sketch here: http…

---

## [Problem with faces obj](https://discourse.processing.org/t/problem-with-faces-obj/28961)

<div class="topic-metadata">

**Author:** [@pedrojateruel](https://discourse.processing.org/u/pedrojateruel)\
**Replies:** 5\
**Last updated:** [March 29, 2021, 9:42pm UTC](https://discourse.processing.org/t/problem-with-faces-obj/28961 "2021-03-29T21:42:38Z")

</div>

Good night . I have a problem when I export figures from blender in .obj. I can create the model in the canvas and it works, but vertex of the figure are not together. There is a gap between faces. I have the same pr…

---

## [Cannot read property 'split' of undefined](https://discourse.processing.org/t/cannot-read-property-split-of-undefined/28877)

<div class="topic-metadata">

**Author:** [@quargsgreene](https://discourse.processing.org/u/quargsgreene)\
**Replies:** 9\
**Last updated:** [March 29, 2021, 8:29pm UTC](https://discourse.processing.org/t/cannot-read-property-split-of-undefined/28877 "2021-03-29T20:29:44Z")

</div>

I am trying to create something which generates some gibberish from a box which the user inputs text and I keep getting the ‘cannot read property ‘split’ of undefined’ error when the mousePressed event fires. This error …

---

## [Processing on Multiple Sound Files](https://discourse.processing.org/t/processing-on-multiple-sound-files/28805)

<div class="topic-metadata">

**Author:** [@karenmsn](https://discourse.processing.org/u/karenmsn)\
**Replies:** 2\
**Last updated:** [March 29, 2021, 1:32pm UTC](https://discourse.processing.org/t/processing-on-multiple-sound-files/28805 "2021-03-29T13:32:00Z")

</div>

Is there a way to apply multiple processes from the p5 sound library onto multiple sound files without calling to connect each sound file to the specific function? i.e. any way to combine all outputs of sound files so I …

---

## [Simple question](https://discourse.processing.org/t/simple-question/28937)

<div class="topic-metadata">

**Author:** [@Rodrigo](https://discourse.processing.org/u/Rodrigo)\
**Replies:** 2\
**Last updated:** [March 29, 2021, 12:10pm UTC](https://discourse.processing.org/t/simple-question/28937 "2021-03-29T12:10:02Z")

</div>

Hello, I’m a beginner in P5 library, is it possible drawing an interactive diagram similar to the image (below). ? each square represents walkways. each yellow (x) represent pieces that can be repaired depending if t…

---

## [Data Visualizations in p5.js](https://discourse.processing.org/t/data-visualizations-in-p5-js/28946)

<div class="topic-metadata">

**Author:** [@Quorum](https://discourse.processing.org/u/Quorum)\
**Replies:** 1\
**Last updated:** [March 29, 2021, 11:47am UTC](https://discourse.processing.org/t/data-visualizations-in-p5-js/28946 "2021-03-29T11:47:42Z")

</div>

Good morning everyone, I am studying p5.js, but my skills are basic. I would like to learn how to approach it creatively and so I would like to see some data visualizations for inspiration and to learn new ways of usin…

---

## [Maximum call stack size exceeded error with merge sort function](https://discourse.processing.org/t/maximum-call-stack-size-exceeded-error-with-merge-sort-function/28913)

<div class="topic-metadata">

**Author:** [@michaelberge](https://discourse.processing.org/u/michaelberge)\
**Replies:** 5\
**Last updated:** [March 29, 2021, 5:13am UTC](https://discourse.processing.org/t/maximum-call-stack-size-exceeded-error-with-merge-sort-function/28913 "2021-03-29T05:13:34Z")

</div>

Here is the function, it calls ‘Uncaught RangeError: Maximum call stack size exceeded’ when run, I’m not sure why this is happening. I’m thinking somewhere it’s getting caught in an infinite loop: function mergeSort(val…

---

## [P5 starts drawing only after web page is done loading](https://discourse.processing.org/t/p5-starts-drawing-only-after-web-page-is-done-loading/28829)

<div class="topic-metadata">

**Author:** [@ravenwit](https://discourse.processing.org/u/ravenwit)\
**Replies:** 3\
**Last updated:** [March 28, 2021, 1:27pm UTC](https://discourse.processing.org/t/p5-starts-drawing-only-after-web-page-is-done-loading/28829 "2021-03-28T13:27:14Z")

</div>

I have written a preloader animation (supposed to be showed while page is loading in background) with p5 javascript library. But I observed that the animation did not start until the entire web page was loaded up, in my …

---

## [Recreate canvas with p5 and Reactjs](https://discourse.processing.org/t/recreate-canvas-with-p5-and-reactjs/28900)

<div class="topic-metadata">

**Author:** [@caruso33](https://discourse.processing.org/u/caruso33)\
**Replies:** 2\
**Last updated:** [March 27, 2021, 2:10pm UTC](https://discourse.processing.org/t/recreate-canvas-with-p5-and-reactjs/28900 "2021-03-27T14:10:34Z")

</div>

Hi, I am trying to implement p5 with react. On the initial render the canvas gets created, however I want to restart the game by clicking a button. I see that the canvas is there but only it’s frame, it is never proper…

---

## [Show video in each element with a specific css class](https://discourse.processing.org/t/show-video-in-each-element-with-a-specific-css-class/28702)

<div class="topic-metadata">

**Author:** [@hilkeros](https://discourse.processing.org/u/hilkeros)\
**Replies:** 5\
**Last updated:** [March 27, 2021, 1:40pm UTC](https://discourse.processing.org/t/show-video-in-each-element-with-a-specific-css-class/28702 "2021-03-27T13:40:24Z")

</div>

I am looking for a way to show the same video in each div with a specific class and looked at different approaches, but I didn’t find a solution. It is not possible to pass a p5.Image as the content of a createDiv functi…

---

## [Counter and if commands](https://discourse.processing.org/t/counter-and-if-commands/28890)

<div class="topic-metadata">

**Author:** [@xiquip](https://discourse.processing.org/u/xiquip)\
**Replies:** 6\
**Last updated:** [March 27, 2021, 1:28pm UTC](https://discourse.processing.org/t/counter-and-if-commands/28890 "2021-03-27T13:28:06Z")

</div>

Hello, does anyone know why the color of the circle does not change when I reach 100? I do not know if it is a problem with the meter or what is happening var contador; var r = 0; var g = 0; var b = 255; function s…

---

## [Performance improvement on a halftone grid particle system](https://discourse.processing.org/t/performance-improvement-on-a-halftone-grid-particle-system/28892)

<div class="topic-metadata">

**Author:** [@dehyde](https://discourse.processing.org/u/dehyde)\
**Replies:** 0\
**Last updated:** [March 26, 2021, 10:32pm UTC](https://discourse.processing.org/t/performance-improvement-on-a-halftone-grid-particle-system/28892 "2021-03-26T22:32:37Z")

</div>

Hi there I’m trying to create an isometric grid of dots that serves both as a halftone effect (which I have reached) and a particle system that reacts to mouse location (gravity / repel). I want the dots to react smoot…

---

## [I am trying to load in a sound file to my p5 sound project, but they all come out distorted or my screen goes black](https://discourse.processing.org/t/i-am-trying-to-load-in-a-sound-file-to-my-p5-sound-project-but-they-all-come-out-distorted-or-my-screen-goes-black/6121)

<div class="topic-metadata">

**Author:** [@thesavgplatypus](https://discourse.processing.org/u/thesavgplatypus)\
**Replies:** 13\
**Last updated:** [March 26, 2021, 2:30pm UTC](https://discourse.processing.org/t/i-am-trying-to-load-in-a-sound-file-to-my-p5-sound-project-but-they-all-come-out-distorted-or-my-screen-goes-black/6121 "2021-03-26T14:30:30Z")

</div>

I have tried .ogg, .m4a, .mp3, everything. any suggestions?

---

## [Need help with trigonometry or circle geometry](https://discourse.processing.org/t/need-help-with-trigonometry-or-circle-geometry/28773)

<div class="topic-metadata">

**Author:** [@Yom](https://discourse.processing.org/u/Yom)\
**Replies:** 10\
**Last updated:** [March 26, 2021, 4:51am UTC](https://discourse.processing.org/t/need-help-with-trigonometry-or-circle-geometry/28773 "2021-03-26T04:51:24Z")

</div>

Hello! For a little project, I would like to put rectangles around a circle… with a twist : the length of the rectangle, the space between each rectangle, and the circle diameter, are user parameters, they must not be c…

---

## [Adding node module to p5.js](https://discourse.processing.org/t/adding-node-module-to-p5-js/28842)

<div class="topic-metadata">

**Author:** [@cenkakay08](https://discourse.processing.org/u/cenkakay08)\
**Replies:** 2\
**Last updated:** [March 25, 2021, 8:02pm UTC](https://discourse.processing.org/t/adding-node-module-to-p5-js/28842 "2021-03-25T20:02:35Z")

</div>

Hi everyone. I’m working on bin packing project. I want to use node module to placement of rectangles. Node module that I want to use: rectangle-bin-pack - npm I’m using p5.vscode extension on VS code for develop. Is t…

---

## [Begginer asks for command 'for'](https://discourse.processing.org/t/begginer-asks-for-command-for/28837)

<div class="topic-metadata">

**Author:** [@xiquip](https://discourse.processing.org/u/xiquip)\
**Replies:** 4\
**Last updated:** [March 25, 2021, 7:37pm UTC](https://discourse.processing.org/t/begginer-asks-for-command-for/28837 "2021-03-25T19:37:18Z")

</div>

I am a beginner in the world of programming and so far I have only seen how to draw basic shapes and apply color to them. I am studying a programming subject at the university, in a university degree in design and this f…

---

## [A newbie needs help](https://discourse.processing.org/t/a-newbie-needs-help/28832)

<div class="topic-metadata">

**Author:** [@xiquip](https://discourse.processing.org/u/xiquip)\
**Replies:** 5\
**Last updated:** [March 25, 2021, 5:30pm UTC](https://discourse.processing.org/t/a-newbie-needs-help/28832 "2021-03-25T17:30:01Z")

</div>

Hello Im dont have a clue about programming and at school they gave us some exercises Anyone knows how to set a random value to an alpha? For example, a circle, triangle or square. for example , I assign a variable to …

---

## [Is there a way to draw rectangles in WebGL mode without it being affected by the camera?](https://discourse.processing.org/t/is-there-a-way-to-draw-rectangles-in-webgl-mode-without-it-being-affected-by-the-camera/28814)

<div class="topic-metadata">

**Author:** [@graph100](https://discourse.processing.org/u/graph100)\
**Replies:** 2\
**Last updated:** [March 25, 2021, 4:19pm UTC](https://discourse.processing.org/t/is-there-a-way-to-draw-rectangles-in-webgl-mode-without-it-being-affected-by-the-camera/28814 "2021-03-25T16:19:22Z")

</div>

Hi, I’ve been wondering for some time if there is a way to draw rectangles (or any 2d shape for that matter) in WebGL mode without it being affected by the camera angle. I’d like to make some kind of GUI system where the…

---

## [Checkbox switch Question Updated](https://discourse.processing.org/t/checkbox-switch-question-updated/28826)

<div class="topic-metadata">

**Author:** [@Mem](https://discourse.processing.org/u/Mem)\
**Replies:** 0\
**Last updated:** [March 25, 2021, 9:31am UTC](https://discourse.processing.org/t/checkbox-switch-question-updated/28826 "2021-03-25T09:31:56Z")

</div>

Hi, I would like to be able to select different circle A and B with a createCheckbox() What I want is when the A is selected then we select the B, the circle A should disappear and the checkbox A must be unchecked Rig…

---

## [Export from P5 to PDF/SVG](https://discourse.processing.org/t/export-from-p5-to-pdf-svg/28530)

<div class="topic-metadata">

**Author:** [@xbix](https://discourse.processing.org/u/xbix)\
**Replies:** 4\
**Last updated:** [March 25, 2021, 9:28am UTC](https://discourse.processing.org/t/export-from-p5-to-pdf-svg/28530 "2021-03-25T09:28:14Z")

</div>

Hello, is it still possible to make an SVG/PDF export with P5? p5.svg.js doesn’t seem to work, see these threads about it: Has anyone found a way that works with the current version of P5? Thank you!

---

## [Checkbox background color](https://discourse.processing.org/t/checkbox-background-color/28527)

<div class="topic-metadata">

**Author:** [@xbix](https://discourse.processing.org/u/xbix)\
**Replies:** 2\
**Last updated:** [March 25, 2021, 9:26am UTC](https://discourse.processing.org/t/checkbox-background-color/28527 "2021-03-25T09:26:36Z")

</div>

I’m trying to change the background color of a checkbox. in css I have tried: input\[type="checkbox"\] { position: relative; appearance: none; background-color: #2ecc71; color: #49400c; } this does not work. And…

---

## [deviceId constraint ignored?](https://discourse.processing.org/t/deviceid-constraint-ignored/28791)

<div class="topic-metadata">

**Author:** [@\_RicH\_1](https://discourse.processing.org/u/_RicH_1)\
**Replies:** 4\
**Last updated:** [March 25, 2021, 8:24am UTC](https://discourse.processing.org/t/deviceid-constraint-ignored/28791 "2021-03-25T08:24:38Z")

</div>

Hi, I’m wanting to use mutliple camera inputs so I’m using the deviceId constraint on createCapture, but it doesnt seem to matter what I enter it will always just uses the first availalbe video source If device ID isn’…

---

## [Just a little help](https://discourse.processing.org/t/just-a-little-help/28768)

<div class="topic-metadata">

**Author:** [@cjswinter](https://discourse.processing.org/u/cjswinter)\
**Replies:** 5\
**Last updated:** [March 25, 2021, 12:07am UTC](https://discourse.processing.org/t/just-a-little-help/28768 "2021-03-25T00:07:54Z")

</div>

Hi, sorry but would someone be able to explain why this code runs fine 7 times in a row and then fails on the 8th. Nothing changes. This is almost certainly not the correct way to code this, but I am still learning. Th…

---

## [How can I limit the player's movement?](https://discourse.processing.org/t/how-can-i-limit-the-players-movement/28760)

<div class="topic-metadata">

**Author:** [@ValkerieZ](https://discourse.processing.org/u/ValkerieZ)\
**Replies:** 1\
**Last updated:** [March 24, 2021, 9:46pm UTC](https://discourse.processing.org/t/how-can-i-limit-the-players-movement/28760 "2021-03-24T21:46:24Z")

</div>

I am not sure why my code is not working. Specifically the section where i am trying to limit the players movements so he does not go out of bounds. This is an incomplete project that I’m trying to nail but i just can’t…

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

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