# Libraries

**URL:** https://discourse.processing.org/c/p5js/p5js-libraries/20.md?page=5

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

**Page:** 6

---

## [Needs help scaling my project to the correct size](https://discourse.processing.org/t/needs-help-scaling-my-project-to-the-correct-size/33414)

<div class="topic-metadata">

**Author:** [@timtam198](https://discourse.processing.org/u/timtam198)\
**Replies:** 1\
**Last updated:** [November 13, 2021, 9:44am UTC](https://discourse.processing.org/t/needs-help-scaling-my-project-to-the-correct-size/33414 "2021-11-13T09:44:49Z")

</div>

Hello, does anyone know how to make my object stay the same size even when the canvas size changes? I am currently using windowWidth/Height for my canvas size and while it look great like this, my shapes distorts we…

---

## [How to add library from github to openprocessing p5js sketch?](https://discourse.processing.org/t/how-to-add-library-from-github-to-openprocessing-p5js-sketch/33468)

<div class="topic-metadata">

**Author:** [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Replies:** 4\
**Last updated:** [November 12, 2021, 3:42pm UTC](https://discourse.processing.org/t/how-to-add-library-from-github-to-openprocessing-p5js-sketch/33468 "2021-11-12T15:42:00Z")

</div>

I want to add this library to this sketch but I cant figure out how to do it. how to I do this?

---

## [How do i create a program to loop through videos in p5.js](https://discourse.processing.org/t/how-do-i-create-a-program-to-loop-through-videos-in-p5-js/33401)

<div class="topic-metadata">

**Author:** [@iade2021](https://discourse.processing.org/u/iade2021)\
**Replies:** 8\
**Last updated:** [November 9, 2021, 7:11pm UTC](https://discourse.processing.org/t/how-do-i-create-a-program-to-loop-through-videos-in-p5-js/33401 "2021-11-09T19:11:04Z")

</div>

\< I am pretty new to coding, I am trying to apply different seriously.js effects on different arrays of videos, I am not even able to make the program loop through the videos in the array …

---

## [Esri/Leaflet : converting between pixel coordinates and latitude/longitude coordinates](https://discourse.processing.org/t/esri-leaflet-converting-between-pixel-coordinates-and-latitude-longitude-coordinates/33418)

<div class="topic-metadata">

**Author:** [@cartopher](https://discourse.processing.org/u/cartopher)\
**Replies:** 1\
**Last updated:** [November 9, 2021, 4:43pm UTC](https://discourse.processing.org/t/esri-leaflet-converting-between-pixel-coordinates-and-latitude-longitude-coordinates/33418 "2021-11-09T16:43:57Z")

</div>

I’m currently working on an interactive map using p5.js. Having said that, I’m on a mission to figure out how to communicate between a p5.js sketch and the leaflet map’s geographic coordinates, i.e., converting between p…

---

## [Save png function keyPressed not working!](https://discourse.processing.org/t/save-png-function-keypressed-not-working/32834)

<div class="topic-metadata">

**Author:** [@u\_ro](https://discourse.processing.org/u/u_ro)\
**Replies:** 3\
**Last updated:** [November 4, 2021, 1:33am UTC](https://discourse.processing.org/t/save-png-function-keypressed-not-working/32834 "2021-11-04T01:33:16Z")

</div>

hey guys, silly question: I am not able to save a png in this sketch, I cannot understand why… saveCount = 0; var mic, fft, spectrum = \[\]; var X,Y; var spectrumBuffer = \[\]; var depth = 20; var length = 40; var spacing …

---

## [Creating perlin noise spheres/ blobs that reacts to mic on p5.js](https://discourse.processing.org/t/creating-perlin-noise-spheres-blobs-that-reacts-to-mic-on-p5-js/33243)

<div class="topic-metadata">

**Author:** [@timtam198](https://discourse.processing.org/u/timtam198)\
**Replies:** 1\
**Last updated:** [November 3, 2021, 6:40am UTC](https://discourse.processing.org/t/creating-perlin-noise-spheres-blobs-that-reacts-to-mic-on-p5-js/33243 "2021-11-03T06:40:12Z")

</div>

Hello, I am trying to create spheres that moves/distorts with mic inputs. I am trying to create a “blob” effect and found out that perlin noise creates an effect similar to what I envision. Does anyone knows how to apply…

---

## [Creating perlin noise spheres/ blobs that reacts to mic](https://discourse.processing.org/t/creating-perlin-noise-spheres-blobs-that-reacts-to-mic/33241)

<div class="topic-metadata">

**Author:** [@timtam198](https://discourse.processing.org/u/timtam198)\
**Replies:** 0\
**Last updated:** [November 2, 2021, 4:23am UTC](https://discourse.processing.org/t/creating-perlin-noise-spheres-blobs-that-reacts-to-mic/33241 "2021-11-02T04:23:38Z")

</div>

Hello, I am trying to create spheres that reacts and distorts with mic inputs. I did some research and thought that perlin noise can create the effect I visualise. I wonder if anyone knows how to add perlin noise to my s…

---

## [SimplexNoise is not defined](https://discourse.processing.org/t/simplexnoise-is-not-defined/33163)

<div class="topic-metadata">

**Author:** [@momo](https://discourse.processing.org/u/momo)\
**Replies:** 5\
**Last updated:** [October 30, 2021, 10:39am UTC](https://discourse.processing.org/t/simplexnoise-is-not-defined/33163 "2021-10-30T10:39:54Z")

</div>

Hello, I’m a beginner of P5.JS. And I found openprocessing is really great place to start. I was learning this interesting sketch made by Takawo 210612a - OpenProcessing(a really nice sketch), when I want to run it local…

---

## [How to draw a shape based on time](https://discourse.processing.org/t/how-to-draw-a-shape-based-on-time/33023)

<div class="topic-metadata">

**Author:** [@Razoil](https://discourse.processing.org/u/Razoil)\
**Replies:** 2\
**Last updated:** [October 23, 2021, 11:21pm UTC](https://discourse.processing.org/t/how-to-draw-a-shape-based-on-time/33023 "2021-10-23T23:21:07Z")

</div>

Hi everyone. I was looking at this video on how to build a radial graph based on sound Is there any (easy) way to map the circle (1 full turn) to the duration of the audio file. In the video I see that the…

---

## [Would it be okay to the Three.Js lib as the 3d renderer and use p5 as the overlay](https://discourse.processing.org/t/would-it-be-okay-to-the-three-js-lib-as-the-3d-renderer-and-use-p5-as-the-overlay/32991)

<div class="topic-metadata">

**Author:** [@Errorbot1122](https://discourse.processing.org/u/Errorbot1122)\
**Replies:** 6\
**Last updated:** [October 22, 2021, 6:10pm UTC](https://discourse.processing.org/t/would-it-be-okay-to-the-three-js-lib-as-the-3d-renderer-and-use-p5-as-the-overlay/32991 "2021-10-22T18:10:50Z")

</div>

I want three.js to use the same canvas, as in p5 being the UI and three.js as the Renderer would that be allowed / okay or is it bad… the could look be like this… // Vars, functions and stuff... function setup() { c…

---

## [Typererror message | cannot figure it out](https://discourse.processing.org/t/typererror-message-cannot-figure-it-out/33000)

<div class="topic-metadata">

**Author:** [@cartopher](https://discourse.processing.org/u/cartopher)\
**Replies:** 2\
**Last updated:** [October 22, 2021, 12:33pm UTC](https://discourse.processing.org/t/typererror-message-cannot-figure-it-out/33000 "2021-10-22T12:33:52Z")

</div>

In the HTML file, I am attempting to set up Esri Leaflet. The base map displays, however, there is a ‘typerror’ message displayed in the console. I researched for too long and still can’t figure out the error. Any sugge…

---

## [Help i m beginner and i don't understand whats happend](https://discourse.processing.org/t/help-i-m-beginner-and-i-dont-understand-whats-happend/32982)

<div class="topic-metadata">

**Author:** [@Hiram-Belgium](https://discourse.processing.org/u/Hiram-Belgium)\
**Replies:** 10\
**Last updated:** [October 21, 2021, 7:38pm UTC](https://discourse.processing.org/t/help-i-m-beginner-and-i-dont-understand-whats-happend/32982 "2021-10-21T19:38:47Z")

</div>

Hello, my English is bad, I am French! I uploaded a file to openprocessing to study the mechanism of an automatic write that I need. I am under visualcode … Cannot run the program because I have an error (view in the co…

---

## [Converting from p5.js to Processing 3.5.4](https://discourse.processing.org/t/converting-from-p5-js-to-processing-3-5-4/32927)

<div class="topic-metadata">

**Author:** [@laurentangy](https://discourse.processing.org/u/laurentangy)\
**Replies:** 1\
**Last updated:** [October 19, 2021, 10:27pm UTC](https://discourse.processing.org/t/converting-from-p5-js-to-processing-3-5-4/32927 "2021-10-19T22:27:49Z")

</div>

I found some inspiration for a project (see Piano Synthesizer - OpenProcessing) but unfortunately it’s in p5.js. Does anyone know how convert the syntax to Processing 3.5.4? I have read the Github guide on transitions an…

---

## [P5.js - How to save a single picture in the draw()](https://discourse.processing.org/t/p5-js-how-to-save-a-single-picture-in-the-draw/32906)

<div class="topic-metadata">

**Author:** [@niuuin](https://discourse.processing.org/u/niuuin)\
**Replies:** 4\
**Last updated:** [October 19, 2021, 8:01pm UTC](https://discourse.processing.org/t/p5-js-how-to-save-a-single-picture-in-the-draw/32906 "2021-10-19T20:01:47Z")

</div>

I want to save the picture when the volume is greater than a certain level, but the current code will save many pictures continuously. How can I save only one picture? Thank you for your help:) https://editor.p5js.org/…

---

## [How to export a p5.js animation in high quality video](https://discourse.processing.org/t/how-to-export-a-p5-js-animation-in-high-quality-video/32655)

<div class="topic-metadata">

**Author:** [@camilleroux](https://discourse.processing.org/u/camilleroux)\
**Replies:** 2\
**Last updated:** [October 6, 2021, 7:43pm UTC](https://discourse.processing.org/t/how-to-export-a-p5-js-animation-in-high-quality-video/32655 "2021-10-06T19:43:14Z")

</div>

Hi, I’d like to export p5.js animation in high quality videos. I tried the export function of OpenProcessing, but the video is very compressed. Thanks

---

## [Struggling with Webmidi library](https://discourse.processing.org/t/struggling-with-webmidi-library/32539)

<div class="topic-metadata">

**Author:** [@goldorak](https://discourse.processing.org/u/goldorak)\
**Replies:** 1\
**Last updated:** [October 3, 2021, 5:26pm UTC](https://discourse.processing.org/t/struggling-with-webmidi-library/32539 "2021-10-03T17:26:38Z")

</div>

Hi, I’m trying to make the simplest implementation of the Webmidi library. I can get my midi controllers to communicate with my sketch, however I’m really struggling with the code structure. So far I’ve been using: T…

---

## [P5.Js sketch used to work but now it doesn't](https://discourse.processing.org/t/p5-js-sketch-used-to-work-but-now-it-doesnt/32524)

<div class="topic-metadata">

**Author:** [@alsumwas](https://discourse.processing.org/u/alsumwas)\
**Replies:** 2\
**Last updated:** [October 1, 2021, 12:32pm UTC](https://discourse.processing.org/t/p5-js-sketch-used-to-work-but-now-it-doesnt/32524 "2021-10-01T12:32:53Z")

</div>

The sketch below worked a year ago but now when I try to play it it just says loading indefinitely. Any thoughts on what the hangup is? \</var bgcolor; var abutton; var bbutton; var cbutton; var dbutton; var ebutto…

---

## [What would this code be in p5js?](https://discourse.processing.org/t/what-would-this-code-be-in-p5js/32541)

<div class="topic-metadata">

**Author:** [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Replies:** 2\
**Last updated:** [October 1, 2021, 9:16am UTC](https://discourse.processing.org/t/what-would-this-code-be-in-p5js/32541 "2021-10-01T09:16:32Z")

</div>

how to translate this to p5js? OpenVRLibrary openVR; public void setup() { frameRate(90); openVR = new OpenVRLibrary(this); }

---

## [Visual studio code shows error on new p5 serial instance](https://discourse.processing.org/t/visual-studio-code-shows-error-on-new-p5-serial-instance/32406)

<div class="topic-metadata">

**Author:** [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Replies:** 0\
**Last updated:** [September 25, 2021, 10:57am UTC](https://discourse.processing.org/t/visual-studio-code-shows-error-on-new-p5-serial-instance/32406 "2021-09-25T10:57:54Z")

</div>

hi, while using a working p5 serial library and sketch in VS code ide i get error on the line: serial = new p5.SerialPort(); error being: Property 'SerialPort' does not exist on type '(sketch: object, node: string | …

---

## [Moving an object ( ellipse ball) between two keypoints (from posenet /ml5)?](https://discourse.processing.org/t/moving-an-object-ellipse-ball-between-two-keypoints-from-posenet-ml5/32118)

<div class="topic-metadata">

**Author:** [@Timo](https://discourse.processing.org/u/Timo)\
**Replies:** 5\
**Last updated:** [September 24, 2021, 11:10am UTC](https://discourse.processing.org/t/moving-an-object-ellipse-ball-between-two-keypoints-from-posenet-ml5/32118 "2021-09-24T11:10:36Z")

</div>

Hi , I am trying exploring the ml5 library implementation of posenet. I am trying to implement a animation where a ball is rolling between the left ear and right ear in a straight line. For this I have done the followin…

---

## [P5.js with plotly.js](https://discourse.processing.org/t/p5-js-with-plotly-js/32393)

<div class="topic-metadata">

**Author:** [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Replies:** 2\
**Last updated:** [September 24, 2021, 7:57am UTC](https://discourse.processing.org/t/p5-js-with-plotly-js/32393 "2021-09-24T07:57:31Z")

</div>

hi, how can i draw plotly.js based chart onto p5.js based canvas? for example, https://editor.p5js.org/ronraisch/sketches/SJbUMtYyM thank you

---

## [P5 serial port not closing](https://discourse.processing.org/t/p5-serial-port-not-closing/32366)

<div class="topic-metadata">

**Author:** [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Replies:** 0\
**Last updated:** [September 22, 2021, 3:49am UTC](https://discourse.processing.org/t/p5-serial-port-not-closing/32366 "2021-09-22T03:49:12Z")

</div>

hi, I am using p5 serial library, everything works fine but the only thing is I am unable to close the port once done using it. The browser once opened will not close the port so I wanted to use keypressed() function to…

---

## [How do I import p5 via npm?](https://discourse.processing.org/t/how-do-i-import-p5-via-npm/11543)

<div class="topic-metadata">

**Author:** [@lion9](https://discourse.processing.org/u/lion9)\
**Replies:** 6\
**Last updated:** [September 18, 2021, 8:53pm UTC](https://discourse.processing.org/t/how-do-i-import-p5-via-npm/11543 "2021-09-18T20:53:07Z")

</div>

I have tried to import p5 into my project using webpack (you can see the code here GitHub - lion9/p5-npm), but to no avail. Everything seems to be built into the app.bundle.js file, but the canvas is not appering at all. …

---

## [Drawing a skeleton for the movenet p5js sketch](https://discourse.processing.org/t/drawing-a-skeleton-for-the-movenet-p5js-sketch/31346)

<div class="topic-metadata">

**Author:** [@basicvisual](https://discourse.processing.org/u/basicvisual)\
**Replies:** 13\
**Last updated:** [September 17, 2021, 12:44pm UTC](https://discourse.processing.org/t/drawing-a-skeleton-for-the-movenet-p5js-sketch/31346 "2021-09-17T12:44:54Z")

</div>

Hi, I have been trying to run movenet with p5js. I have managed to get the detector working and can log out the poses. However , I am trying to draw a skeleton on top of the connected circle for vizualization purposes. I…

---

## [Bizarre Hard-to-Diagnose Javascript Bug While Using P5.js in Firebase App](https://discourse.processing.org/t/bizarre-hard-to-diagnose-javascript-bug-while-using-p5-js-in-firebase-app/32240)

<div class="topic-metadata">

**Author:** [@nguzman](https://discourse.processing.org/u/nguzman)\
**Replies:** 1\
**Last updated:** [September 15, 2021, 7:38pm UTC](https://discourse.processing.org/t/bizarre-hard-to-diagnose-javascript-bug-while-using-p5-js-in-firebase-app/32240 "2021-09-15T19:38:29Z")

</div>

Edit, Update: I can now reproduce the error 100% of the time across all browsers in any context. By much trial and error, I discovered that by rapidly clicking the right arrow key on the first instruction screen (where t…

---

## [Ml5: hands object in draw() is undefined](https://discourse.processing.org/t/ml5-hands-object-in-draw-is-undefined/31845)

<div class="topic-metadata">

**Author:** [@k5221](https://discourse.processing.org/u/k5221)\
**Replies:** 3\
**Last updated:** [August 24, 2021, 3:35pm UTC](https://discourse.processing.org/t/ml5-hands-object-in-draw-is-undefined/31845 "2021-08-24T15:35:58Z")

</div>

I’m trying to incorporate a model to detect hands in the camera provided by ml5 into my work (a similar example is available here). The modelLoaded function is properly called, but I’m getting the error that ‘hands’ wit…

---

## [How can I make my code work for multiple figure detection (poseNet)?](https://discourse.processing.org/t/how-can-i-make-my-code-work-for-multiple-figure-detection-posenet/10762)

<div class="topic-metadata">

**Author:** [@sguzmanolmos](https://discourse.processing.org/u/sguzmanolmos)\
**Replies:** 9\
**Last updated:** [August 18, 2021, 4:58pm UTC](https://discourse.processing.org/t/how-can-i-make-my-code-work-for-multiple-figure-detection-posenet/10762 "2021-08-18T16:58:55Z")

</div>

Hoi! I’ve just started learning how to code and in my school, there’s not much guidance about the subject. Currently, I’m doing a project with p5.js and poseNet. But I’m stuck trying to modify each keypoint independentl…

---

## [Ccapture to save graphics vs canvas](https://discourse.processing.org/t/ccapture-to-save-graphics-vs-canvas/31747)

<div class="topic-metadata">

**Author:** [@rkdnson](https://discourse.processing.org/u/rkdnson)\
**Replies:** 4\
**Last updated:** [August 16, 2021, 7:34pm UTC](https://discourse.processing.org/t/ccapture-to-save-graphics-vs-canvas/31747 "2021-08-16T19:34:33Z")

</div>

Hello all, using the library ccapture - I realize this is an older Library so if anyone has another recommendation for capturing png sequences from P5.js that would be fantasic. In the sketch here: I am using ccapture …

---

## [Beat Detection Algorithm help / feedback](https://discourse.processing.org/t/beat-detection-algorithm-help-feedback/31588)

<div class="topic-metadata">

**Author:** [@atagger](https://discourse.processing.org/u/atagger)\
**Replies:** 2\
**Last updated:** [August 6, 2021, 9:42pm UTC](https://discourse.processing.org/t/beat-detection-algorithm-help-feedback/31588 "2021-08-06T21:42:40Z")

</div>

I am trying to recreate an algorithm from this link - specifically the one for frequency selected sound energy: Frequency selected sound energy In the author’s work he uses a constant C set to 250. This constant does n…

---

## [How to draw with coordinates from face-api.js?](https://discourse.processing.org/t/how-to-draw-with-coordinates-from-face-api-js/31562)

<div class="topic-metadata">

**Author:** [@hermitcrab](https://discourse.processing.org/u/hermitcrab)\
**Replies:** 3\
**Last updated:** [August 5, 2021, 9:15pm UTC](https://discourse.processing.org/t/how-to-draw-with-coordinates-from-face-api-js/31562 "2021-08-05T21:15:56Z")

</div>

I have this code from GitHub - WebDevSimplified/Face-Detection-JavaScript, using face-api.js. const video = document.getElementById('video') Promise.all(\[ faceapi.nets.tinyFaceDetector.loadFromUri('/models'), facea…

[Previous page](https://discourse.processing.org/c/p5js/p5js-libraries/20.md?page=4)

[Next page](https://discourse.processing.org/c/p5js/p5js-libraries/20.md?page=6)