# p5.js

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

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

**Page:** 50

---

## [Error when playing SoundFile](https://discourse.processing.org/t/error-when-playing-soundfile/23011)

<div class="topic-metadata">

**Author:** [@dansumption](https://discourse.processing.org/u/dansumption)\
**Replies:** 13\
**Last updated:** [March 6, 2021, 1:53pm UTC](https://discourse.processing.org/t/error-when-playing-soundfile/23011 "2021-03-06T13:53:38Z")

</div>

I have a p5js application which loads and plays a sound file. It was worked fine for a very long time, but suddenly it’s started throwing errors when I try to play the file. I’ve stripped the code down to its basics, as…

---

## [Browserify to require NPM Modules](https://discourse.processing.org/t/browserify-to-require-npm-modules/28242)

<div class="topic-metadata">

**Author:** [@diogorsergio](https://discourse.processing.org/u/diogorsergio)\
**Replies:** 4\
**Last updated:** [March 6, 2021, 12:46am UTC](https://discourse.processing.org/t/browserify-to-require-npm-modules/28242 "2021-03-06T00:46:23Z")

</div>

Hi, I’ve been playing around p5.js and manage to get the sketches running and rendering on the browser with VS code + Live Server. I wanted to take advantage of NPM modules with the require, but if I use browserify and…

---

## [Easycam and gui](https://discourse.processing.org/t/easycam-and-gui/28060)

<div class="topic-metadata">

**Author:** [@Madse20](https://discourse.processing.org/u/Madse20)\
**Replies:** 4\
**Last updated:** [March 5, 2021, 7:45pm UTC](https://discourse.processing.org/t/easycam-and-gui/28060 "2021-03-05T19:45:03Z")

</div>

I am trying to go a bit deeper into coding and would like to have easycam and a gui working together at the same time. I used easycam and P5gui, but thea seem to block each other. I would like to have the functionality …

---

## [Pan and zoom large panorama image](https://discourse.processing.org/t/pan-and-zoom-large-panorama-image/28076)

<div class="topic-metadata">

**Author:** [@petemanzel](https://discourse.processing.org/u/petemanzel)\
**Replies:** 9\
**Last updated:** [March 5, 2021, 9:20am UTC](https://discourse.processing.org/t/pan-and-zoom-large-panorama-image/28076 "2021-03-05T09:20:59Z")

</div>

Hi, i have an panorama-image with the size of 2048x179121px. I would like to pan through the image using a rotary encoder and zoom in using a touchscreen. The encoder/arduino part is working fine but if i try to load th…

---

## [Implementation of IntelliSense code completion in p5.js-web-editor](https://discourse.processing.org/t/implementation-of-intellisense-code-completion-in-p5-js-web-editor/27505)

<div class="topic-metadata">

**Author:** [@rt1301](https://discourse.processing.org/u/rt1301)\
**Replies:** 2\
**Last updated:** [March 5, 2021, 6:47am UTC](https://discourse.processing.org/t/implementation-of-intellisense-code-completion-in-p5-js-web-editor/27505 "2021-03-05T06:47:42Z")

</div>

Hello everyone, First of all thank you all the creators of p5.js for creating such an amazing project. I have recently started learning p5.js and while using the p5.js-web-editor, I didn’t found any code completion feat…

---

## [How to get the position of the point directly in front of the camera？](https://discourse.processing.org/t/how-to-get-the-position-of-the-point-directly-in-front-of-the-camera/28042)

<div class="topic-metadata">

**Author:** [@AbleYudada](https://discourse.processing.org/u/AbleYudada)\
**Replies:** 5\
**Last updated:** [March 5, 2021, 4:44am UTC](https://discourse.processing.org/t/how-to-get-the-position-of-the-point-directly-in-front-of-the-camera/28042 "2021-03-05T04:44:08Z")

</div>

Hello everyone! I want to put a box in front of a mobile camera, but no matter how I try, I can’t get it

---

## [Neural Network genetic algorithm game](https://discourse.processing.org/t/neural-network-genetic-algorithm-game/28146)

<div class="topic-metadata">

**Author:** [@Farbod](https://discourse.processing.org/u/Farbod)\
**Replies:** 6\
**Last updated:** [March 3, 2021, 4:01pm UTC](https://discourse.processing.org/t/neural-network-genetic-algorithm-game/28146 "2021-03-03T16:01:50Z")

</div>

I am trying to train a neural network to be able to shoot a bubble accurately. My solution is to have a brain inside the “arrow” and make it determine the shooting “angle” based on the scores it receives. I have followed…

---

## [Shader question!](https://discourse.processing.org/t/shader-question/28164)

<div class="topic-metadata">

**Author:** [@carfreesun](https://discourse.processing.org/u/carfreesun)\
**Replies:** 1\
**Last updated:** [March 1, 2021, 4:43pm UTC](https://discourse.processing.org/t/shader-question/28164 "2021-03-01T16:43:55Z")

</div>

hello everyone, i’m curious about shader language. so i write this question! When I want to use the ‘ease’ function, why do I have to use another function instead of just putting a variable in parameter t? for example, …

---

## [Converting PGraphics and Mask from Processing to p5.js](https://discourse.processing.org/t/converting-pgraphics-and-mask-from-processing-to-p5-js/28133)

<div class="topic-metadata">

**Author:** [@bdooley](https://discourse.processing.org/u/bdooley)\
**Replies:** 8\
**Last updated:** [February 28, 2021, 10:17pm UTC](https://discourse.processing.org/t/converting-pgraphics-and-mask-from-processing-to-p5-js/28133 "2021-02-28T22:17:03Z")

</div>

Is there a tag for super beginners? I currently have a simple sketch that uses a mask to reveal an image below another. For some reason once I convert to p5.js, nothing shows up. I think it might have to do with the begi…

---

## [Problem playing one sound and then other](https://discourse.processing.org/t/problem-playing-one-sound-and-then-other/28015)

<div class="topic-metadata">

**Author:** [@edufissure](https://discourse.processing.org/u/edufissure)\
**Replies:** 10\
**Last updated:** [February 27, 2021, 2:21pm UTC](https://discourse.processing.org/t/problem-playing-one-sound-and-then-other/28015 "2021-02-27T14:21:04Z")

</div>

Hello, im trying to implement pacman in p5.js. But im facing the problem that when i loose a game I play a song, a mp3 file… and then when i restart the game it should play initial sound/song. So im facing that the two…

---

## [Add an input text to "Genetic Algorithm, Evolving Shakespeare" example from NoC](https://discourse.processing.org/t/add-an-input-text-to-genetic-algorithm-evolving-shakespeare-example-from-noc/28086)

<div class="topic-metadata">

**Author:** [@pab10](https://discourse.processing.org/u/pab10)\
**Replies:** 1\
**Last updated:** [February 26, 2021, 8:47pm UTC](https://discourse.processing.org/t/add-an-input-text-to-genetic-algorithm-evolving-shakespeare-example-from-noc/28086 "2021-02-26T20:47:18Z")

</div>

Hi there… i’m try to add an input box to the Shakespeare genetic algorithm example from Daniel Shiffman’s Nature Of Code (https://github.com/nature-of-code/noc-examples-p5.js/tree/master/chp09\_ga/NOC\_9\_01\_GA\_Shakespeare)…

---

## [Can't form array using splitText method (loadStrings)](https://discourse.processing.org/t/cant-form-array-using-splittext-method-loadstrings/28092)

<div class="topic-metadata">

**Author:** [@geo3geo](https://discourse.processing.org/u/geo3geo)\
**Replies:** 12\
**Last updated:** [February 26, 2021, 7:41pm UTC](https://discourse.processing.org/t/cant-form-array-using-splittext-method-loadstrings/28092 "2021-02-26T19:41:32Z")

</div>

I’m trying to get text elements from a local text file into an array. pets.txt contains cat dog Hopefully this code explains the problem. Thanks for looking! var pets; var petArray = \[\]; function preload() { . . …

---

## [Text has opaque background when using webgl renderer](https://discourse.processing.org/t/text-has-opaque-background-when-using-webgl-renderer/18107)

<div class="topic-metadata">

**Author:** [@nevillestyles](https://discourse.processing.org/u/nevillestyles)\
**Replies:** 4\
**Last updated:** [February 25, 2021, 6:51pm UTC](https://discourse.processing.org/t/text-has-opaque-background-when-using-webgl-renderer/18107 "2021-02-25T18:51:16Z")

</div>

Hi all, I am developing a rotating 3D scatter plot to display egg colours. I have labelled the three axes red, green and blue using these bits of code (only relevant sections shown (full script): function preload() { …

---

## [Create p5.js Instances Sequentially in For Loop But Only After the Previous One Finishes](https://discourse.processing.org/t/create-p5-js-instances-sequentially-in-for-loop-but-only-after-the-previous-one-finishes/28050)

<div class="topic-metadata">

**Author:** [@nguzman](https://discourse.processing.org/u/nguzman)\
**Replies:** 3\
**Last updated:** [February 25, 2021, 10:07pm UTC](https://discourse.processing.org/t/create-p5-js-instances-sequentially-in-for-loop-but-only-after-the-previous-one-finishes/28050 "2021-02-25T22:07:31Z")

</div>

The basic question is in the title. I use a function to define a p5.js instance with a particular set of parameters. The sketch itself runs an in-browser video game. When any one out of a set of events occurs in the game…

---

## [For loop driven by event crashes](https://discourse.processing.org/t/for-loop-driven-by-event-crashes/28065)

<div class="topic-metadata">

**Author:** [@cmoredock](https://discourse.processing.org/u/cmoredock)\
**Replies:** 4\
**Last updated:** [February 25, 2021, 7:56pm UTC](https://discourse.processing.org/t/for-loop-driven-by-event-crashes/28065 "2021-02-25T19:56:11Z")

</div>

https://editor.p5js.org/cmoredock@rdschool.org/sketches/obDjqJJfM let lt = input1.value(); let st = input2.value(); let tt = input3.value(); // why does this infinite loop? for (let i = st; i \< lt; i = i + tt) …

---

## [Forum-like site creation](https://discourse.processing.org/t/forum-like-site-creation/28052)

<div class="topic-metadata">

**Author:** [@ath](https://discourse.processing.org/u/ath)\
**Replies:** 7\
**Last updated:** [February 25, 2021, 10:21am UTC](https://discourse.processing.org/t/forum-like-site-creation/28052 "2021-02-25T10:21:41Z")

</div>

Hello, I’m new to all the coding stuff so the question might be way too general. I want to code a website where people will be writing posts under specific threads, which will be saved so that other users can read them…

---

## [Print CSV not working](https://discourse.processing.org/t/print-csv-not-working/28045)

<div class="topic-metadata">

**Author:** [@xbix](https://discourse.processing.org/u/xbix)\
**Replies:** 2\
**Last updated:** [February 24, 2021, 3:57pm UTC](https://discourse.processing.org/t/print-csv-not-working/28045 "2021-02-24T15:57:11Z")

</div>

I am trying to load a CSV file and print the contents. The file loads and I get the filename, but the rows and columns are not passed. Here is my code: "use strict"; let i, k, trows, tcols; let table, loadButton; fun…

---

## [Multiple p5 sketches on one page](https://discourse.processing.org/t/multiple-p5-sketches-on-one-page/28035)

<div class="topic-metadata">

**Author:** [@add2fic](https://discourse.processing.org/u/add2fic)\
**Replies:** 2\
**Last updated:** [February 24, 2021, 9:13am UTC](https://discourse.processing.org/t/multiple-p5-sketches-on-one-page/28035 "2021-02-24T09:13:38Z")

</div>

Hi, I’m trying to add multiple p5 sketches on one page. I’m trying to use the .parent(‘x’) function to put the canvases inside of their own divs, when I use one it shows up just fine, but when I include two, the other on…

---

## [I get a TypeError: f.default.\_friendlyAutoplayError randomly when calling video.loop()](https://discourse.processing.org/t/i-get-a-typeerror-f-default-friendlyautoplayerror-randomly-when-calling-video-loop/27675)

<div class="topic-metadata">

**Author:** [@sandersturing](https://discourse.processing.org/u/sandersturing)\
**Replies:** 4\
**Last updated:** [February 23, 2021, 10:53pm UTC](https://discourse.processing.org/t/i-get-a-typeerror-f-default-friendlyautoplayerror-randomly-when-calling-video-loop/27675 "2021-02-23T22:53:35Z")

</div>

Can’t really find anything when googling the error. When I call video.loop (actually, I’m calling a couple of really small videos (together smaller than 2MB), like so: for(let i = 0; i \< videos.length; i++){ videos\[…

---

## [Manually calculate additive blendmode with pixels\[\]](https://discourse.processing.org/t/manually-calculate-additive-blendmode-with-pixels/28031)

<div class="topic-metadata">

**Author:** [@lilzer7](https://discourse.processing.org/u/lilzer7)\
**Replies:** 1\
**Last updated:** [February 23, 2021, 8:34pm UTC](https://discourse.processing.org/t/manually-calculate-additive-blendmode-with-pixels/28031 "2021-02-23T20:34:09Z")

</div>

Hi, I’m currently coding a program in which I draw some random generated patterns like this : function setup() { colorMode(RGB, 255, 255, 255, 255); blendMode(ADD); } function draw() { for(var i = 0; i \< …

---

## [Drawing on a Spheres texture, Making it go over the edge](https://discourse.processing.org/t/drawing-on-a-spheres-texture-making-it-go-over-the-edge/28017)

<div class="topic-metadata">

**Author:** [@Gollink](https://discourse.processing.org/u/Gollink)\
**Replies:** 1\
**Last updated:** [February 23, 2021, 2:24pm UTC](https://discourse.processing.org/t/drawing-on-a-spheres-texture-making-it-go-over-the-edge/28017 "2021-02-23T14:24:34Z")

</div>

Im trying to make randomised marbles based on particles that draw lines on a texture. But Im trying to make a particle go over the edge of the texture so to speak. But I just can’t wrap my head around the math that I nee…

---

## [P5 makes me crazy！](https://discourse.processing.org/t/p5-makes-me-crazy/27907)

<div class="topic-metadata">

**Author:** [@AbleYudada](https://discourse.processing.org/u/AbleYudada)\
**Replies:** 7\
**Last updated:** [February 23, 2021, 8:23am UTC](https://discourse.processing.org/t/p5-makes-me-crazy/27907 "2021-02-23T08:23:43Z")

</div>

let planeImage var easycam; let eyex=200, eyey=100, eyez=200; let cx=100, cy=10, cz=100; let angle = 339; let dx = 1.0, dy=1.0, dz = 1.0; let pg =\[\]; let tv; let p1, p2, p3, p4, p55, p6, p7, p8; let d1, d2, d3, d4, d5…

---

## [P5JS editor very slow in projects ~100 lines](https://discourse.processing.org/t/p5js-editor-very-slow-in-projects-100-lines/27992)

<div class="topic-metadata">

**Author:** [@Ariadne](https://discourse.processing.org/u/Ariadne)\
**Replies:** 7\
**Last updated:** [February 23, 2021, 7:58am UTC](https://discourse.processing.org/t/p5js-editor-very-slow-in-projects-100-lines/27992 "2021-02-23T07:58:15Z")

</div>

The P5JS editor is very laggy when it has to handle projects around 100 lines of code. And by “very”, I mean that the editor takes around a minute to run the code, and typing a character takes a few seconds for the chara…

---

## [Cannot find 'length' of undefined](https://discourse.processing.org/t/cannot-find-length-of-undefined/28008)

<div class="topic-metadata">

**Author:** [@adworetzky](https://discourse.processing.org/u/adworetzky)\
**Replies:** 2\
**Last updated:** [February 23, 2021, 12:25am UTC](https://discourse.processing.org/t/cannot-find-length-of-undefined/28008 "2021-02-23T00:25:57Z")

</div>

I’m trying to get my noisy type generator to iterate over multiple letters. But I seem to be stuck at the 2dimesional array. It keeps throwing the error “Uncaught TypeError: Cannot read property ‘length’ of undefined (sk…

---

## [Flower Game: P5 audio does not play on safari, and crackles terribly on android](https://discourse.processing.org/t/flower-game-p5-audio-does-not-play-on-safari-and-crackles-terribly-on-android/27879)

<div class="topic-metadata">

**Author:** [@Persica](https://discourse.processing.org/u/Persica)\
**Replies:** 3\
**Last updated:** [February 22, 2021, 9:29pm UTC](https://discourse.processing.org/t/flower-game-p5-audio-does-not-play-on-safari-and-crackles-terribly-on-android/27879 "2021-02-22T21:29:04Z")

</div>

Hello! This is my first post and I am a beginner P5.js user. I made a little game where you grow a flower which can be accessed here: https://autoglyphic.com/petitchidish/flowergame.html (audio plays as the flower de…

---

## [Read data from Google Sheets](https://discourse.processing.org/t/read-data-from-google-sheets/28001)

<div class="topic-metadata">

**Author:** [@benjaminmarkus](https://discourse.processing.org/u/benjaminmarkus)\
**Replies:** 1\
**Last updated:** [February 22, 2021, 6:51pm UTC](https://discourse.processing.org/t/read-data-from-google-sheets/28001 "2021-02-22T18:51:34Z")

</div>

Is there a way to pull data into a p5js sketch from a Google Sheet? I plan to host my sketch on GitHub.

---

## [P5 Delay Sound without User Interaction](https://discourse.processing.org/t/p5-delay-sound-without-user-interaction/27890)

<div class="topic-metadata">

**Author:** [@karenmsn](https://discourse.processing.org/u/karenmsn)\
**Replies:** 1\
**Last updated:** [February 22, 2021, 6:48pm UTC](https://discourse.processing.org/t/p5-delay-sound-without-user-interaction/27890 "2021-02-22T18:48:21Z")

</div>

Hi! I’m working on a project involving Posenet where body movement triggers sound processing. So far I have the nose panning audio from left to right and the left wrist’s vertical motion causing a delay on a bell sound. …

---

## [P5JS error showing up](https://discourse.processing.org/t/p5js-error-showing-up/27904)

<div class="topic-metadata">

**Author:** [@Ariadne](https://discourse.processing.org/u/Ariadne)\
**Replies:** 9\
**Last updated:** [February 22, 2021, 4:08am UTC](https://discourse.processing.org/t/p5js-error-showing-up/27904 "2021-02-22T04:08:10Z")

</div>

So, I am trying to recreate the game of life in p5js. And for some reason, the official p5js web editor raises some sort of error in my code, which I have inspected thoroughly: const segmentSize = 25; class Point { …

---

## [Trying to Understand a Shader](https://discourse.processing.org/t/trying-to-understand-a-shader/27965)

<div class="topic-metadata">

**Author:** [@BigBigRed](https://discourse.processing.org/u/BigBigRed)\
**Replies:** 2\
**Last updated:** [February 21, 2021, 7:57pm UTC](https://discourse.processing.org/t/trying-to-understand-a-shader/27965 "2021-02-21T19:57:08Z")

</div>

I am trying to understand a shader file. They file has its own function to generate/produce noise. They have a function call ‘col.r+=noise(uv.xyy\*(12. … continues’. I understand that ‘uv’ refers a texture with u bei…

---

## [Place a p5.js canvas inside a div](https://discourse.processing.org/t/place-a-p5-js-canvas-inside-a-div/27913)

<div class="topic-metadata">

**Author:** [@EunieceHarris](https://discourse.processing.org/u/EunieceHarris)\
**Replies:** 5\
**Last updated:** [February 19, 2021, 10:09pm UTC](https://discourse.processing.org/t/place-a-p5-js-canvas-inside-a-div/27913 "2021-02-19T22:09:59Z")

</div>

Hello! I have a diagram that I hope conveys my question: This is a screenshot of my website that I plan on showing multiple p5.js illustrations. I want to place the drawing in the div element but I’ve not been succes…

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

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