# p5.js

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

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

**Page:** 44

---

## [Proof reading german translation p5 web-editor](https://discourse.processing.org/t/proof-reading-german-translation-p5-web-editor/30271)

<div class="topic-metadata">

**Author:** [@tlsaeger](https://discourse.processing.org/u/tlsaeger)\
**Replies:** 2\
**Last updated:** [May 26, 2021, 8:44am UTC](https://discourse.processing.org/t/proof-reading-german-translation-p5-web-editor/30271 "2021-05-26T08:44:04Z")

</div>

Hey there, I just finished the german translation of the p5 web editor. If there are any german speaking people out there who could help me with proof reading, that would be super awesome. You can find my fork here If …

---

## [P5js sound, microphone stop doesn't stop the microphone input](https://discourse.processing.org/t/p5js-sound-microphone-stop-doesnt-stop-the-microphone-input/30283)

<div class="topic-metadata">

**Author:** [@cprieto](https://discourse.processing.org/u/cprieto)\
**Replies:** 1\
**Last updated:** [May 25, 2021, 9:42pm UTC](https://discourse.processing.org/t/p5js-sound-microphone-stop-doesnt-stop-the-microphone-input/30283 "2021-05-25T21:42:58Z")

</div>

I will expect the method stop will stop the microphone from capturing input in p5js, as the documentation states: Turn the AudioIn off. If the AudioIn is stopped, it cannot getLevel(). But that is not happening, even…

---

## [Error when trying to save output audio in P5js sound](https://discourse.processing.org/t/error-when-trying-to-save-output-audio-in-p5js-sound/30280)

<div class="topic-metadata">

**Author:** [@cprieto](https://discourse.processing.org/u/cprieto)\
**Replies:** 1\
**Last updated:** [May 25, 2021, 9:21pm UTC](https://discourse.processing.org/t/error-when-trying-to-save-output-audio-in-p5js-sound/30280 "2021-05-25T21:21:06Z")

</div>

The documentation for p5.SoundRecorder is pretty clear when it says what is going to record: Record sounds for playback and/or to save as a .wav file. The p5.SoundRecorder records all sound output from your sketch, or …

---

## [P5 panning with sliders and play video with button](https://discourse.processing.org/t/p5-panning-with-sliders-and-play-video-with-button/30255)

<div class="topic-metadata">

**Author:** [@karenmani](https://discourse.processing.org/u/karenmani)\
**Replies:** 6\
**Last updated:** [May 25, 2021, 1:38pm UTC](https://discourse.processing.org/t/p5-panning-with-sliders-and-play-video-with-button/30255 "2021-05-25T13:38:52Z")

</div>

Hi! I’m trying to create a website with p5 that plays a video back and then also uses a slider to pan a song that is simultaneously playing. I followed example code from the p5 website, however for some reason, my button…

---

## [Help me to change the color](https://discourse.processing.org/t/help-me-to-change-the-color/30263)

<div class="topic-metadata">

**Author:** [@Nico](https://discourse.processing.org/u/Nico)\
**Replies:** 2\
**Last updated:** [May 25, 2021, 1:01am UTC](https://discourse.processing.org/t/help-me-to-change-the-color/30263 "2021-05-25T01:01:31Z")

</div>

I want the small circles to be green when they approach the big circle and change to red when they move away from it, can you help me? \</\> let puntos = 80/3 let angulo = 360/puntos function setup() { createCanvas(4…

---

## [Displaying text from an API inside the canvas](https://discourse.processing.org/t/displaying-text-from-an-api-inside-the-canvas/30244)

<div class="topic-metadata">

**Author:** [@Blomer478](https://discourse.processing.org/u/Blomer478)\
**Replies:** 10\
**Last updated:** [May 24, 2021, 10:49pm UTC](https://discourse.processing.org/t/displaying-text-from-an-api-inside-the-canvas/30244 "2021-05-24T22:49:08Z")

</div>

Hi, I’m having trouble getting the text from an API to display on my canvas, I can get it outside of it but I can’t find the way to put it in. I have the API key in my code and I know the variable names are kinda weird.…

---

## [Sandbox warning on Mac](https://discourse.processing.org/t/sandbox-warning-on-mac/30200)

<div class="topic-metadata">

**Author:** [@Viz](https://discourse.processing.org/u/Viz)\
**Replies:** 4\
**Last updated:** [May 24, 2021, 8:13am UTC](https://discourse.processing.org/t/sandbox-warning-on-mac/30200 "2021-05-24T08:13:03Z")

</div>

Hi Everyone, I’m a teacher and I’m using p5.js to teach kids javascript at the school I work at. Unfortunately I keep getting this error on my Mac using safari which prevents p5.js from working. “Error while parsing the…

---

## [Preserve quality when CSS scaling?](https://discourse.processing.org/t/preserve-quality-when-css-scaling/30223)

<div class="topic-metadata">

**Author:** [@Gershy13](https://discourse.processing.org/u/Gershy13)\
**Replies:** 4\
**Last updated:** [May 22, 2021, 10:05pm UTC](https://discourse.processing.org/t/preserve-quality-when-css-scaling/30223 "2021-05-22T22:05:08Z")

</div>

I made a piece of art in p5Js, and its being displayed on a webpage, so i used CSS to make the canvas (by setting width,height:80%) fit slightly better on the page. Only problem with that is that the quality doesn’t look…

---

## [Hosting sketches and limitations with using mic/camera](https://discourse.processing.org/t/hosting-sketches-and-limitations-with-using-mic-camera/30202)

<div class="topic-metadata">

**Author:** [@Merk](https://discourse.processing.org/u/Merk)\
**Replies:** 5\
**Last updated:** [May 22, 2021, 10:26pm UTC](https://discourse.processing.org/t/hosting-sketches-and-limitations-with-using-mic-camera/30202 "2021-05-22T22:26:18Z")

</div>

I’ve been coding in Processing.org for 18 months, now exploring moving to p5.js, and trying to get my head around lots of things, including where/how to host my sketches. I watched Dan Schiffman’s video on how to use Gi…

---

## [Big Picture question on WebGL 2.0](https://discourse.processing.org/t/big-picture-question-on-webgl-2-0/30198)

<div class="topic-metadata">

**Author:** [@BigBigRed](https://discourse.processing.org/u/BigBigRed)\
**Replies:** 4\
**Last updated:** [May 21, 2021, 9:16pm UTC](https://discourse.processing.org/t/big-picture-question-on-webgl-2-0/30198 "2021-05-21T21:16:24Z")

</div>

I am trying to learn so please bear with me: I have printed out the Kronos’ ‘WebGL 2.0 API Quick Reference Guide’. While I do see some things on these pages that are used often in p5js sketches (createShader, obviously)…

---

## [Merge and trim audio files in p5Sound?](https://discourse.processing.org/t/merge-and-trim-audio-files-in-p5sound/30156)

<div class="topic-metadata">

**Author:** [@Gershy13](https://discourse.processing.org/u/Gershy13)\
**Replies:** 13\
**Last updated:** [May 21, 2021, 12:14am UTC](https://discourse.processing.org/t/merge-and-trim-audio-files-in-p5sound/30156 "2021-05-21T00:14:03Z")

</div>

Im building an audio visualization project with p5js, and was wondering if it was possible to merge multiple audio files together (and automatically trim them to the same length, maybe 10 seconds (just use the first 10 s…

---

## [Fading Background Colors](https://discourse.processing.org/t/fading-background-colors/30164)

<div class="topic-metadata">

**Author:** [@Pepita](https://discourse.processing.org/u/Pepita)\
**Replies:** 0\
**Last updated:** [May 19, 2021, 1:57am UTC](https://discourse.processing.org/t/fading-background-colors/30164 "2021-05-19T01:57:00Z")

</div>

Hi! I am trying to fade that background from one color to another. I’ve had success by following this very helpful post : But I would like to fade another color in afterwards (so that there will be 3 color changes). …

---

## [dragOver and dragLeave do not work](https://discourse.processing.org/t/dragover-and-dragleave-do-not-work/4208)

<div class="topic-metadata">

**Author:** [@jituibuchipi](https://discourse.processing.org/u/jituibuchipi)\
**Replies:** 7\
**Last updated:** [May 18, 2021, 12:18pm UTC](https://discourse.processing.org/t/dragover-and-dragleave-do-not-work/4208 "2021-05-18T12:18:41Z")

</div>

I wanna write a board which hilight when users drag files upon it, When i run the code the drop() function did work, However the dragOver() and dragLeave() function just do not work,anything wrong with my code? I edit a…

---

## [Read property 'width' undefined](https://discourse.processing.org/t/read-property-width-undefined/30117)

<div class="topic-metadata">

**Author:** [@deardanagrace](https://discourse.processing.org/u/deardanagrace)\
**Replies:** 2\
**Last updated:** [May 17, 2021, 5:11am UTC](https://discourse.processing.org/t/read-property-width-undefined/30117 "2021-05-17T05:11:20Z")

</div>

Hi, I am somewhat of an intro coder for p5.js. Anyways, I am working on some code that changes a drawFunction I made on an index of images and I keep getting: "Uncaught TypeError: Cannot read property ‘width’ of undefin…

---

## [P5.js copy() issue in Safari](https://discourse.processing.org/t/p5-js-copy-issue-in-safari/16289)

<div class="topic-metadata">

**Author:** [@5f5f5f](https://discourse.processing.org/u/5f5f5f)\
**Replies:** 3\
**Last updated:** [May 16, 2021, 5:20pm UTC](https://discourse.processing.org/t/p5-js-copy-issue-in-safari/16289 "2021-05-16T17:20:15Z")

</div>

Hi everyone! Need help :exploding\_head: I’m trying to make an animation like this using p5.js, and faced a really weird issue that is reproduced only in Safari browser, and i really don’t understand why it is happening …

---

## [P5 canvas position on device orientation change](https://discourse.processing.org/t/p5-canvas-position-on-device-orientation-change/23398)

<div class="topic-metadata">

**Author:** [@odotdotdot](https://discourse.processing.org/u/odotdotdot)\
**Replies:** 1\
**Last updated:** [May 16, 2021, 9:57am UTC](https://discourse.processing.org/t/p5-canvas-position-on-device-orientation-change/23398 "2021-05-16T09:57:35Z")

</div>

Hi, I’m working on a browser game and I’ve just extended functionality to mobile browsers. I’m having some trouble reigning in the canvas position after a device orientation change (i.e. flipping your phone from portra…

---

## [P5.sound on google chrome - p5.sound.js:3191 Uncaught (in promise) TypeError: Cannot read property 'addModule' of undefined](https://discourse.processing.org/t/p5-sound-on-google-chrome-p5-sound-js-3191-uncaught-in-promise-typeerror-cannot-read-property-addmodule-of-undefined/29939)

<div class="topic-metadata">

**Author:** [@Discordanian](https://discourse.processing.org/u/Discordanian)\
**Replies:** 4\
**Last updated:** [May 16, 2021, 12:39am UTC](https://discourse.processing.org/t/p5-sound-on-google-chrome-p5-sound-js-3191-uncaught-in-promise-typeerror-cannot-read-property-addmodule-of-undefined/29939 "2021-05-16T00:39:01Z")

</div>

What I’m seeing is that I’m getting an error using p5.sound w/Chrome (seems to work fine in FireFox, haven’t tried it elsewhere). I’ve stubbed out a very small/simple example almost cribbed verbatim from the reference e…

---

## [Vertex Command Issues](https://discourse.processing.org/t/vertex-command-issues/30087)

<div class="topic-metadata">

**Author:** [@willreichling12](https://discourse.processing.org/u/willreichling12)\
**Replies:** 3\
**Last updated:** [May 15, 2021, 10:18pm UTC](https://discourse.processing.org/t/vertex-command-issues/30087 "2021-05-15T22:18:19Z")

</div>

We are trying to build a curve based off control points in multiple segments. We have a beginning segment for the first three control points, an end segment for the last three, and an entire middle with multiple segments…

---

## [Why Doesn't This Sketch Run in Desktop Editor?](https://discourse.processing.org/t/why-doesnt-this-sketch-run-in-desktop-editor/30098)

<div class="topic-metadata">

**Author:** [@cottonchipper](https://discourse.processing.org/u/cottonchipper)\
**Replies:** 2\
**Last updated:** [May 14, 2021, 5:59pm UTC](https://discourse.processing.org/t/why-doesnt-this-sketch-run-in-desktop-editor/30098 "2021-05-14T17:59:58Z")

</div>

I found a discussion thread with an example in the P5js web editor that runs in the web editor but not when I tried copying to the desktop editor. I’m relatively new to P5js and clueless as to why it won’t run on the des…

---

## [Get error message withP5.dom.min.js and min.js](https://discourse.processing.org/t/get-error-message-withp5-dom-min-js-and-min-js/30075)

<div class="topic-metadata">

**Author:** [@momo](https://discourse.processing.org/u/momo)\
**Replies:** 6\
**Last updated:** [May 14, 2021, 3:15am UTC](https://discourse.processing.org/t/get-error-message-withp5-dom-min-js-and-min-js/30075 "2021-05-14T03:15:14Z")

</div>

Hi, I’m using various js like P5.sound.js and dom js in my Html, try to work on show the sound wave on the page, and got errors: 1.amplitude is not defined 2.d.\_validateParameters is not a function #5242 please help me! …

---

## [Loading multiple videos, fails/works randomly](https://discourse.processing.org/t/loading-multiple-videos-fails-works-randomly/27555)

<div class="topic-metadata">

**Author:** [@sandersturing](https://discourse.processing.org/u/sandersturing)\
**Replies:** 8\
**Last updated:** [May 13, 2021, 10:51pm UTC](https://discourse.processing.org/t/loading-multiple-videos-fails-works-randomly/27555 "2021-05-13T22:51:35Z")

</div>

Hello all, I really can’t figure out the right way of loading multiple videos (really small in filesize: \< 200kb) and play them. I’m currently loading a couple in an array and playing them randomly in a grid. The thing…

---

## [React p5: So how do you pass a value generated in p5 back to a React component?](https://discourse.processing.org/t/react-p5-so-how-do-you-pass-a-value-generated-in-p5-back-to-a-react-component/24978)

<div class="topic-metadata">

**Author:** [@venn](https://discourse.processing.org/u/venn)\
**Replies:** 6\
**Last updated:** [May 13, 2021, 1:45pm UTC](https://discourse.processing.org/t/react-p5-so-how-do-you-pass-a-value-generated-in-p5-back-to-a-react-component/24978 "2021-05-13T13:45:02Z")

</div>

Hi there, so I’m using https://github.com/and-who/react-p5-wrapper I’m wondering if there’s a way to pass a value from the p5 Sketch file back into React? For example. I want to keep track of the label value generated…

---

## [Error when splice() is called](https://discourse.processing.org/t/error-when-splice-is-called/30079)

<div class="topic-metadata">

**Author:** [@Boutrup98](https://discourse.processing.org/u/Boutrup98)\
**Replies:** 3\
**Last updated:** [May 13, 2021, 9:21am UTC](https://discourse.processing.org/t/error-when-splice-is-called/30079 "2021-05-13T09:21:42Z")

</div>

Hello everybody! We have a problem with the splice() syntax. Our program works by generating a lot of bubbles, and the bubbles then start to consume each other and will then grow bigger. The problem occurs randomly an…

---

## [Video loops in p5 web editor but error/not playing in VSC](https://discourse.processing.org/t/video-loops-in-p5-web-editor-but-error-not-playing-in-vsc/30028)

<div class="topic-metadata">

**Author:** [@monkey](https://discourse.processing.org/u/monkey)\
**Replies:** 5\
**Last updated:** [May 13, 2021, 3:39am UTC](https://discourse.processing.org/t/video-loops-in-p5-web-editor-but-error-not-playing-in-vsc/30028 "2021-05-13T03:39:41Z")

</div>

My p5 sketches made in web editor work perfectly. I now attempted to move them to VSC but there are issues with the video playback (either it remains frozen, or doest play back at all.) The error that I get is: Uncaug…

---

## [File save limitations](https://discourse.processing.org/t/file-save-limitations/30034)

<div class="topic-metadata">

**Author:** [@geo3geo](https://discourse.processing.org/u/geo3geo)\
**Replies:** 4\
**Last updated:** [May 11, 2021, 1:34pm UTC](https://discourse.processing.org/t/file-save-limitations/30034 "2021-05-11T13:34:37Z")

</div>

I know that for security reasons there are limitations on writing files but wonder if there any way round this. My objective is to read a file, add a line to it and then save it, with the same name. I’m using saveTable…

---

## [Sketch to video efficiently with ffmpeg](https://discourse.processing.org/t/sketch-to-video-efficiently-with-ffmpeg/25522)

<div class="topic-metadata">

**Author:** [@JuanIrache](https://discourse.processing.org/u/JuanIrache)\
**Replies:** 8\
**Last updated:** [May 11, 2021, 12:23am UTC](https://discourse.processing.org/t/sketch-to-video-efficiently-with-ffmpeg/25522 "2021-05-11T00:23:40Z")

</div>

Hi all, I’ve got a project where I am drawing a sketch and saving the frames as a video using ffmpeg. My project is an ElectronJS desktop app, so I have access to both the browser and the operating system. The problem I…

---

## [Having trouble understanding why the information is not being passed correctly in p5js](https://discourse.processing.org/t/having-trouble-understanding-why-the-information-is-not-being-passed-correctly-in-p5js/30010)

<div class="topic-metadata">

**Author:** [@Bife](https://discourse.processing.org/u/Bife)\
**Replies:** 1\
**Last updated:** [May 10, 2021, 7:28pm UTC](https://discourse.processing.org/t/having-trouble-understanding-why-the-information-is-not-being-passed-correctly-in-p5js/30010 "2021-05-10T19:28:42Z")

</div>

I’ll start of by posting the link to the code: https://editor.p5js.org/bsilva.aulas/sketches/T0NVv6ya4 So this was something my teacher did in one of our classes, but didn’t finish, and hasn’t gone back to it, and I’m …

---

## [Need clarification on how this piece of found code is working (recursion)](https://discourse.processing.org/t/need-clarification-on-how-this-piece-of-found-code-is-working-recursion/29969)

<div class="topic-metadata">

**Author:** [@debxyz](https://discourse.processing.org/u/debxyz)\
**Replies:** 5\
**Last updated:** [May 10, 2021, 4:08pm UTC](https://discourse.processing.org/t/need-clarification-on-how-this-piece-of-found-code-is-working-recursion/29969 "2021-05-10T16:08:44Z")

</div>

Hello! I am trying to understand how a sketch works that I saw on the openprocessing.org site by Naoto Hieda. The use of “level” in this sketch, I am not fully understanding. And it’s probably a very simple oversight o…

---

## [How do i ensure preload() has finished?](https://discourse.processing.org/t/how-do-i-ensure-preload-has-finished/30006)

<div class="topic-metadata">

**Author:** [@whatsinausername](https://discourse.processing.org/u/whatsinausername)\
**Replies:** 7\
**Last updated:** [May 10, 2021, 3:23pm UTC](https://discourse.processing.org/t/how-do-i-ensure-preload-has-finished/30006 "2021-05-10T15:23:45Z")

</div>

i’m attempting to use p5.js for some audio processing and phaser.js for some game code. function phaser\_preload() { boop = loadSound('boop.wav'); } function phaser\_create() { fft = new p5.FFT(); boop.play();…

---

## [Node.js and JSON syntax error in a p5 project](https://discourse.processing.org/t/node-js-and-json-syntax-error-in-a-p5-project/29996)

<div class="topic-metadata">

**Author:** [@mattobject](https://discourse.processing.org/u/mattobject)\
**Replies:** 4\
**Last updated:** [May 10, 2021, 2:45pm UTC](https://discourse.processing.org/t/node-js-and-json-syntax-error-in-a-p5-project/29996 "2021-05-10T14:45:40Z")

</div>

Hello all has anyone found success deploying a Node.js/p5 project to Bluehost? I have a working project (locally and on heroku and gltich) but the same project craps out on Bluehost with an “Uncaught (in promise) Syntax…

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

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