# p5.js

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

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

**Page:** 58

---

## [Where can I find the p5.js library folder for basic sketches to download?](https://discourse.processing.org/t/where-can-i-find-the-p5-js-library-folder-for-basic-sketches-to-download/25239)

<div class="topic-metadata">

**Author:** [@anna\_rose](https://discourse.processing.org/u/anna_rose)\
**Replies:** 2\
**Last updated:** [November 7, 2020, 9:10am UTC](https://discourse.processing.org/t/where-can-i-find-the-p5-js-library-folder-for-basic-sketches-to-download/25239 "2020-11-07T09:10:25Z")

</div>

Hi, I was wondering if someone could help me because whenever I download p5.js complete, the example folder doesn’t include the library. This means that when I edit the text in Brackets(my editor) it doesn’t have any de…

---

## [Slow render in WebGL](https://discourse.processing.org/t/slow-render-in-webgl/25051)

<div class="topic-metadata">

**Author:** [@Tahsin](https://discourse.processing.org/u/Tahsin)\
**Replies:** 4\
**Last updated:** [November 5, 2020, 4:01am UTC](https://discourse.processing.org/t/slow-render-in-webgl/25051 "2020-11-05T04:01:54Z")

</div>

Hey, I want to make a terrain generator in p5. So, I need WebGL to rotate the canvas on X axis. But, even trying to render 500 lines makes the whole sketch extremely slow. If I remove the WEBGL, the sketch runs pretty fa…

---

## [Convert 2D line drawing into 3D object in p5.js](https://discourse.processing.org/t/convert-2d-line-drawing-into-3d-object-in-p5-js/25108)

<div class="topic-metadata">

**Author:** [@sarath.jasrin](https://discourse.processing.org/u/sarath.jasrin)\
**Replies:** 7\
**Last updated:** [November 3, 2020, 11:03am UTC](https://discourse.processing.org/t/convert-2d-line-drawing-into-3d-object-in-p5-js/25108 "2020-11-03T11:03:57Z")

</div>

Hi I’m very new to p5.js. I found p5 is very easy compare with threejs. I wanted to allow user to draw 2lines and convert in to 3D object then apply texture to the 3D. I know the above is more for the forum question. I …

---

## [loadImage() problem / Cross-Origin](https://discourse.processing.org/t/loadimage-problem-cross-origin/24569)

<div class="topic-metadata">

**Author:** [@\_sv\_11](https://discourse.processing.org/u/_sv_11)\
**Replies:** 2\
**Last updated:** [November 3, 2020, 1:43am UTC](https://discourse.processing.org/t/loadimage-problem-cross-origin/24569 "2020-11-03T01:43:13Z")

</div>

Hi @all I want to load data from a weather-api and also i want to load images from my computer. But when i run the code the following error is displayed. (in german) Can someone help me? //-------------------------…

---

## [Sound loading/ index.html error](https://discourse.processing.org/t/sound-loading-index-html-error/25087)

<div class="topic-metadata">

**Author:** [@ucsduni](https://discourse.processing.org/u/ucsduni)\
**Replies:** 4\
**Last updated:** [November 2, 2020, 4:34am UTC](https://discourse.processing.org/t/sound-loading-index-html-error/25087 "2020-11-02T04:34:10Z")

</div>

I am having an issue getting my canvas to load when I am using the preload function with a sound. The code is producing a output that just says “Loading…” I think this is an issue with my index.html, but I’ve been trying…

---

## [Loading video from base64, putting it on the canvas and adding stuff to each frame, then get the base64 of the new video with canvas stuff](https://discourse.processing.org/t/loading-video-from-base64-putting-it-on-the-canvas-and-adding-stuff-to-each-frame-then-get-the-base64-of-the-new-video-with-canvas-stuff/25090)

<div class="topic-metadata">

**Author:** [@Bas950](https://discourse.processing.org/u/Bas950)\
**Replies:** 0\
**Last updated:** [November 1, 2020, 12:57am UTC](https://discourse.processing.org/t/loading-video-from-base64-putting-it-on-the-canvas-and-adding-stuff-to-each-frame-then-get-the-base64-of-the-new-video-with-canvas-stuff/25090 "2020-11-01T00:57:05Z")

</div>

Could someone help me with this: Loading video from base64, putting it on the canvas and adding stuff to each frame, then get the base64 of the new video with canvas stuff at the end. Already stuck at loading the video…

---

## [Instantiation not working in P5JS](https://discourse.processing.org/t/instantiation-not-working-in-p5js/25024)

<div class="topic-metadata">

**Author:** [@nateb](https://discourse.processing.org/u/nateb)\
**Replies:** 1\
**Last updated:** [October 31, 2020, 8:02pm UTC](https://discourse.processing.org/t/instantiation-not-working-in-p5js/25024 "2020-10-31T20:02:33Z")

</div>

I need to instantiate this so I can combine it with other sketches but keep getting an error. PLS HELP const radius = 100; let x, y; //code for icons p.setup = function(){ p.createCanvas(windowWidth, windowHeight); …

---

## [P5.sound from web server](https://discourse.processing.org/t/p5-sound-from-web-server/24979)

<div class="topic-metadata">

**Author:** [@ylh](https://discourse.processing.org/u/ylh)\
**Replies:** 3\
**Last updated:** [October 31, 2020, 5:52pm UTC](https://discourse.processing.org/t/p5-sound-from-web-server/24979 "2020-10-31T17:52:59Z")

</div>

Most sound examples demonstrate how to play an mp3 file. I want to use Oscillators. Oscillators work well locally but I can’t seem to get a remote browser to play. Are there security issues?

---

## [Difference between "new createVector()" and "createVector()"](https://discourse.processing.org/t/difference-between-new-createvector-and-createvector/25056)

<div class="topic-metadata">

**Author:** [@Jason210](https://discourse.processing.org/u/Jason210)\
**Replies:** 6\
**Last updated:** [October 31, 2020, 5:45pm UTC](https://discourse.processing.org/t/difference-between-new-createvector-and-createvector/25056 "2020-10-31T17:45:17Z")

</div>

Hi Can someone explain in simple terms what the difference is between createVector() and new createVector()? Jason

---

## [MousePressed : select only item in front](https://discourse.processing.org/t/mousepressed-select-only-item-in-front/24936)

<div class="topic-metadata">

**Author:** [@vlafortune](https://discourse.processing.org/u/vlafortune)\
**Replies:** 13\
**Last updated:** [October 31, 2020, 3:42pm UTC](https://discourse.processing.org/t/mousepressed-select-only-item-in-front/24936 "2020-10-31T15:42:59Z")

</div>

Hi! How can I select only the object in front when two objects are stacked? I made a very simple code to show what I mean. In this example, I would like to change only the color of the smaller circle. Thanks! let bubb…

---

## [Translating Syntax Shorthand for Beginners?](https://discourse.processing.org/t/translating-syntax-shorthand-for-beginners/24995)

<div class="topic-metadata">

**Author:** [@mnoble](https://discourse.processing.org/u/mnoble)\
**Replies:** 21\
**Last updated:** [October 31, 2020, 11:21am UTC](https://discourse.processing.org/t/translating-syntax-shorthand-for-beginners/24995 "2020-10-31T11:21:21Z")

</div>

Hello Team Forum, I found this cool sketch but it is reduced to programming shorthand I have no experience with. I keep trying to format in what I am used but keep failing. t=0,draw=\_=\>{t++||createCanvas(w=720,w)+strok…

---

## [P5.js Text along a curve](https://discourse.processing.org/t/p5-js-text-along-a-curve/25002)

<div class="topic-metadata">

**Author:** [@ucsduni](https://discourse.processing.org/u/ucsduni)\
**Replies:** 3\
**Last updated:** [October 30, 2020, 6:59am UTC](https://discourse.processing.org/t/p5-js-text-along-a-curve/25002 "2020-10-30T06:59:11Z")

</div>

I was wondering how I can turn a string into something that allows for text to be displayed along a curve.

---

## [Optimizing for a CPU-Intensive Music Visualizer](https://discourse.processing.org/t/optimizing-for-a-cpu-intensive-music-visualizer/22358)

<div class="topic-metadata">

**Author:** [@dgoren1](https://discourse.processing.org/u/dgoren1)\
**Replies:** 4\
**Last updated:** [October 30, 2020, 5:20am UTC](https://discourse.processing.org/t/optimizing-for-a-cpu-intensive-music-visualizer/22358 "2020-10-30T05:20:18Z")

</div>

Hello! I recently started down my p5.js learning journey trying to build a music visualizer that loads and analyzes multiple audio files at once. I succeeded in building a simple version of the visualizer (watch here!),…

---

## [Using this code for exhibition. how to make the size of file smaller?](https://discourse.processing.org/t/using-this-code-for-exhibition-how-to-make-the-size-of-file-smaller/24997)

<div class="topic-metadata">

**Author:** [@yejincolor](https://discourse.processing.org/u/yejincolor)\
**Replies:** 1\
**Last updated:** [October 29, 2020, 7:13pm UTC](https://discourse.processing.org/t/using-this-code-for-exhibition-how-to-make-the-size-of-file-smaller/24997 "2020-10-29T19:13:22Z")

</div>

changing pixelated dot size by distance Hi, I am a beginner at coding and I just made this code using some references. In this code, the webcam recognizes the distance of people using PoseNet. And the size of dots gets…

---

## [Please give me some feedback on my first-person-shooter engine](https://discourse.processing.org/t/please-give-me-some-feedback-on-my-first-person-shooter-engine/24927)

<div class="topic-metadata">

**Author:** [@LeviathanProgramming](https://discourse.processing.org/u/LeviathanProgramming)\
**Replies:** 4\
**Last updated:** [October 29, 2020, 1:49pm UTC](https://discourse.processing.org/t/please-give-me-some-feedback-on-my-first-person-shooter-engine/24927 "2020-10-29T13:49:59Z")

</div>

Here is the link to my project: I would like some feedback on it if you don’t mind. If you find any bugs, please report them. Thanks.

---

## [Projecting several p5.js sketches sequentially](https://discourse.processing.org/t/projecting-several-p5-js-sketches-sequentially/24991)

<div class="topic-metadata">

**Author:** [@isaacmg](https://discourse.processing.org/u/isaacmg)\
**Replies:** 0\
**Last updated:** [October 29, 2020, 12:30am UTC](https://discourse.processing.org/t/projecting-several-p5-js-sketches-sequentially/24991 "2020-10-29T00:30:27Z")

</div>

I think may be interested projecting several p5.js sketches sequentially. If you want to see the submissions of your students with them as a presentation. I think it is interesting for schools. I created a git repo tryi…

---

## [Getting error message using ml5js with p5js](https://discourse.processing.org/t/getting-error-message-using-ml5js-with-p5js/24980)

<div class="topic-metadata">

**Author:** [@maddyna](https://discourse.processing.org/u/maddyna)\
**Replies:** 1\
**Last updated:** [October 28, 2020, 10:40pm UTC](https://discourse.processing.org/t/getting-error-message-using-ml5js-with-p5js/24980 "2020-10-28T22:40:57Z")

</div>

the errors I got: Uncaught TypeError: Cannot read property ‘split’ of undefined (: line 57) model is loaded Error: Failed to execute ‘texImage2D’ on ‘WebGL2RenderingContext’: The image element contains cross-origin da…

---

## [Force calculation for magnetic pendulum and numerical integration](https://discourse.processing.org/t/force-calculation-for-magnetic-pendulum-and-numerical-integration/24972)

<div class="topic-metadata">

**Author:** [@Eioer](https://discourse.processing.org/u/Eioer)\
**Replies:** 0\
**Last updated:** [October 28, 2020, 3:03pm UTC](https://discourse.processing.org/t/force-calculation-for-magnetic-pendulum-and-numerical-integration/24972 "2020-10-28T15:03:27Z")

</div>

Hello everyone, I’ve been working on a simulation of a magnetic pendulum (Magnetic Pendulum for reference). Now, I have a question concerning how you calculate the forces/acceleration: In examples you find online of th…

---

## [Help with using input values with variables along with if, else if code](https://discourse.processing.org/t/help-with-using-input-values-with-variables-along-with-if-else-if-code/23910)

<div class="topic-metadata">

**Author:** [@DariusKempton](https://discourse.processing.org/u/DariusKempton)\
**Replies:** 29\
**Last updated:** [October 27, 2020, 5:08pm UTC](https://discourse.processing.org/t/help-with-using-input-values-with-variables-along-with-if-else-if-code/23910 "2020-10-27T17:08:03Z")

</div>

//Variables //Character Stat and Detail Variables //Character Details var Character\_Name = \[""\]; var Age = \[""\]; var Alignment = \[""\]; var Religion = \[""\]; var Background = \[""\]; var Hair = \[""\]; …

---

## [Shapes unexpectedly overlay other shapes](https://discourse.processing.org/t/shapes-unexpectedly-overlay-other-shapes/24946)

<div class="topic-metadata">

**Author:** [@alt](https://discourse.processing.org/u/alt)\
**Replies:** 13\
**Last updated:** [October 27, 2020, 3:12pm UTC](https://discourse.processing.org/t/shapes-unexpectedly-overlay-other-shapes/24946 "2020-10-27T15:12:25Z")

</div>

So, In my code, The circles sometimes fill up tiles that have been occupied by the Squares. As seen here: The relevant code is as follows function draw() { noStroke(); // These make a sort-of grid to be filled w…

---

## [Web editor version not working in China](https://discourse.processing.org/t/web-editor-version-not-working-in-china/24789)

<div class="topic-metadata">

**Author:** [@lwlsn](https://discourse.processing.org/u/lwlsn)\
**Replies:** 3\
**Last updated:** [October 27, 2020, 2:57pm UTC](https://discourse.processing.org/t/web-editor-version-not-working-in-china/24789 "2020-10-27T14:57:06Z")

</div>

Hi, I’m trying to teach a course using processing. However there is currently issues with accessing the web editor version in China, presumably due to governmental restrictions. Has anyone encountered this and found a …

---

## [How do I change the font that is used by a button in p5?](https://discourse.processing.org/t/how-do-i-change-the-font-that-is-used-by-a-button-in-p5/24887)

<div class="topic-metadata">

**Author:** [@The\_Rogue12](https://discourse.processing.org/u/The_Rogue12)\
**Replies:** 6\
**Last updated:** [October 26, 2020, 11:24pm UTC](https://discourse.processing.org/t/how-do-i-change-the-font-that-is-used-by-a-button-in-p5/24887 "2020-10-26T23:24:15Z")

</div>

I am not sure how I can do this. I have tried all the style() properties that I know, but none of them are able to change the font on a button. Example code I am trying to write: let drawButton; let circle = false; fun…

---

## [How can I put html text on top of a p5.js script?](https://discourse.processing.org/t/how-can-i-put-html-text-on-top-of-a-p5-js-script/24930)

<div class="topic-metadata">

**Author:** [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Replies:** 0\
**Last updated:** [October 26, 2020, 6:31pm UTC](https://discourse.processing.org/t/how-can-i-put-html-text-on-top-of-a-p5-js-script/24930 "2020-10-26T18:31:45Z")

</div>

How can put text on top of a p5js sketch in html?

---

## [Pixel arrays and performance issues in p5 and processing](https://discourse.processing.org/t/pixel-arrays-and-performance-issues-in-p5-and-processing/24891)

<div class="topic-metadata">

**Author:** [@Birb](https://discourse.processing.org/u/Birb)\
**Replies:** 6\
**Last updated:** [October 25, 2020, 10:55pm UTC](https://discourse.processing.org/t/pixel-arrays-and-performance-issues-in-p5-and-processing/24891 "2020-10-25T22:55:59Z")

</div>

This mainly applies to p5.js, but also Processing Java. Running this simple script in the p5 web editor gets me 3 frames per second, at only 400x400 resolution. What is it about this script that is so slow, and is there…

---

## [Need help creating a function that delays draw()](https://discourse.processing.org/t/need-help-creating-a-function-that-delays-draw/24839)

<div class="topic-metadata">

**Author:** [@The\_Rogue12](https://discourse.processing.org/u/The_Rogue12)\
**Replies:** 7\
**Last updated:** [October 25, 2020, 6:47pm UTC](https://discourse.processing.org/t/need-help-creating-a-function-that-delays-draw/24839 "2020-10-25T18:47:19Z")

</div>

I am currently working on a small game, and am trying to figure out how to delay the draw() function for about 6 seconds so that I can write some text on the screen in time with a song. I have the code set up so that the…

---

## [My solution for trigger events in iOS, Android and Desktop](https://discourse.processing.org/t/my-solution-for-trigger-events-in-ios-android-and-desktop/24882)

<div class="topic-metadata">

**Author:** [@rvalla](https://discourse.processing.org/u/rvalla)\
**Replies:** 0\
**Last updated:** [October 24, 2020, 10:18pm UTC](https://discourse.processing.org/t/my-solution-for-trigger-events-in-ios-android-and-desktop/24882 "2020-10-24T22:18:17Z")

</div>

I fought all day looking for a way to trigger events which works in all browsers and systems. I was unexpected, but mousePressed() seems to not work in Safari in iOS if you define a doubleClicked() function. You could u…

---

## [Can't get audioIn in Android browsers (apparently solved)](https://discourse.processing.org/t/cant-get-audioin-in-android-browsers-apparently-solved/24832)

<div class="topic-metadata">

**Author:** [@rvalla](https://discourse.processing.org/u/rvalla)\
**Replies:** 1\
**Last updated:** [October 23, 2020, 10:53am UTC](https://discourse.processing.org/t/cant-get-audioin-in-android-browsers-apparently-solved/24832 "2020-10-23T10:53:14Z")

</div>

Hi everyone, I am working in a little simulation to guide users to record sound. I am testing p5.sound here (the code is this). The sketch works records and triggered a local download correctly on Firefox, Brave, Opera…

---

## [Additive Wave example](https://discourse.processing.org/t/additive-wave-example/24763)

<div class="topic-metadata">

**Author:** [@DoMi](https://discourse.processing.org/u/DoMi)\
**Replies:** 1\
**Last updated:** [October 22, 2020, 10:55pm UTC](https://discourse.processing.org/t/additive-wave-example/24763 "2020-10-22T22:55:43Z")

</div>

I find a little mistake in Additive Wave exemple, in function renderWave: ellipse(x \* xspacing, height / 2 + yvalues\[x\], 16, 16); height instead of width DoMi

---

## [How do I lerp() colors on a curve? (non linear interpolation)](https://discourse.processing.org/t/how-do-i-lerp-colors-on-a-curve-non-linear-interpolation/24815)

<div class="topic-metadata">

**Author:** [@Birb](https://discourse.processing.org/u/Birb)\
**Replies:** 3\
**Last updated:** [October 22, 2020, 8:26pm UTC](https://discourse.processing.org/t/how-do-i-lerp-colors-on-a-curve-non-linear-interpolation/24815 "2020-10-22T20:26:52Z")

</div>

How do I interpolate two (or maybe even more) colors in a non-linear way along a curve? For example, instead of the mid-point being 50/50, I would want it to be 25/75, or shifted according to the control point. I tried …

---

## [Why cant I run 2 5pjs sketches on a html website?](https://discourse.processing.org/t/why-cant-i-run-2-5pjs-sketches-on-a-html-website/24806)

<div class="topic-metadata">

**Author:** [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Replies:** 6\
**Last updated:** [October 22, 2020, 12:43am UTC](https://discourse.processing.org/t/why-cant-i-run-2-5pjs-sketches-on-a-html-website/24806 "2020-10-22T00:43:50Z")

</div>

I put two script sources but the second one is not showing up, why and how can I fix this? \<!DOCTYPE html\> \<html lang=" \<head\> \<title\>MNCE P5.js2020 Neon Gallery\</title\> \<meta charset="utf-8"\> \<meta name="viewpo…

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

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