# p5.js

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

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

**Page:** 39

---

## [P5.JS 3D Dot Diagram rendering extremely slow](https://discourse.processing.org/t/p5-js-3d-dot-diagram-rendering-extremely-slow/31953)

<div class="topic-metadata">

**Author:** [@salmans911](https://discourse.processing.org/u/salmans911)\
**Replies:** 11\
**Last updated:** [August 31, 2021, 10:50am UTC](https://discourse.processing.org/t/p5-js-3d-dot-diagram-rendering-extremely-slow/31953 "2021-08-31T10:50:16Z")

</div>

I am trying to convert a normal 2D image(a simple JPEG) into a 3D Dot Diagram that the user can move around with. But upon trying to render that dot diagram, the program becomes extremely slow. Can anyone point where I a…

---

## [The different performance of noise() in processing and p5.js](https://discourse.processing.org/t/the-different-performance-of-noise-in-processing-and-p5-js/32019)

<div class="topic-metadata">

**Author:** [@niuuin](https://discourse.processing.org/u/niuuin)\
**Replies:** 2\
**Last updated:** [August 31, 2021, 5:37am UTC](https://discourse.processing.org/t/the-different-performance-of-noise-in-processing-and-p5-js/32019 "2021-08-31T05:37:39Z")

</div>

I am learning a tutorial from Vamoss and trying to implement it with Processing. But I encountered a problem in the noise() part of Chapter 2, which resulted in a different result from Vamoss. This is my code: int…

---

## [JSON file not being read correctly](https://discourse.processing.org/t/json-file-not-being-read-correctly/31791)

<div class="topic-metadata">

**Author:** [@fleshcircuit](https://discourse.processing.org/u/fleshcircuit)\
**Replies:** 9\
**Last updated:** [August 30, 2021, 9:37am UTC](https://discourse.processing.org/t/json-file-not-being-read-correctly/31791 "2021-08-30T09:37:39Z")

</div>

Hello, I am trying to read data from a JSON file, but I am having trouble. I would like the background to change based on the level type indicated (deep, light, wake, rem). I followed Dan Shiffman’s Coding train video a…

---

## [P5.js goes to Processing abnormally slow！](https://discourse.processing.org/t/p5-js-goes-to-processing-abnormally-slow/31984)

<div class="topic-metadata">

**Author:** [@AbleYudada](https://discourse.processing.org/u/AbleYudada)\
**Replies:** 6\
**Last updated:** [August 29, 2021, 1:48pm UTC](https://discourse.processing.org/t/p5-js-goes-to-processing-abnormally-slow/31984 "2021-08-29T13:48:10Z")

</div>

Hello everyone! Does anyone have any research on the transition from p5js to processing? I tried to convert the p5js code to processing successfully but it runs abnormally slowly. I am not sure what went wrong. Can anyo…

---

## [Defining setup() and draw() at runtime](https://discourse.processing.org/t/defining-setup-and-draw-at-runtime/31728)

<div class="topic-metadata">

**Author:** [@javagar](https://discourse.processing.org/u/javagar)\
**Replies:** 8\
**Last updated:** [August 27, 2021, 11:26pm UTC](https://discourse.processing.org/t/defining-setup-and-draw-at-runtime/31728 "2021-08-27T23:26:17Z")

</div>

The following probably ought not be done, as it seems, at best, poor programming style. Perhaps, even worse, it could break in the future. However, as of this time, it does work without any obvious problem, so here goes,…

---

## [Textwrap is not defined](https://discourse.processing.org/t/textwrap-is-not-defined/31967)

<div class="topic-metadata">

**Author:** [@Omri](https://discourse.processing.org/u/Omri)\
**Replies:** 9\
**Last updated:** [August 27, 2021, 3:32pm UTC](https://discourse.processing.org/t/textwrap-is-not-defined/31967 "2021-08-27T15:32:35Z")

</div>

Hey, I’m trying to use the textWrap function but I got an error: “Uncaught (in promise) ReferenceError: textwrap is not defined”. I suspect that the problem is maybe in the p5.min.js library, is that make sense? how ca…

---

## [createSlider does not work sometimes](https://discourse.processing.org/t/createslider-does-not-work-sometimes/31935)

<div class="topic-metadata">

**Author:** [@Ariadne](https://discourse.processing.org/u/Ariadne)\
**Replies:** 2\
**Last updated:** [August 27, 2021, 4:21am UTC](https://discourse.processing.org/t/createslider-does-not-work-sometimes/31935 "2021-08-27T04:21:29Z")

</div>

So in the start of my code, I define time as the return value of createSlider(0, 1, 1 / animationSmoothness, where animationSmoothness is 16. But when I try to call the value() method of time, an error shows up. Why? Co…

---

## [Canvas.parent() with Multiple HTML files](https://discourse.processing.org/t/canvas-parent-with-multiple-html-files/31892)

<div class="topic-metadata">

**Author:** [@dtools22](https://discourse.processing.org/u/dtools22)\
**Replies:** 3\
**Last updated:** [August 26, 2021, 12:31am UTC](https://discourse.processing.org/t/canvas-parent-with-multiple-html-files/31892 "2021-08-26T00:31:12Z")

</div>

Hello all! I’m sure this is a simple question but I’m having some trouble finding the answer. I have a website I am designing that has multiple HTML pages. The main page is a standard “index.html” file and the subseque…

---

## [Combine 2 projects](https://discourse.processing.org/t/combine-2-projects/31921)

<div class="topic-metadata">

**Author:** [@Omri](https://discourse.processing.org/u/Omri)\
**Replies:** 1\
**Last updated:** [August 25, 2021, 10:20pm UTC](https://discourse.processing.org/t/combine-2-projects/31921 "2021-08-25T22:20:04Z")

</div>

Hey, What is the best way to combine 2 projects together? The two of them are in the same screen size (full), and I want to make 1 project that the user can select which project to watch and the go back to the other on…

---

## [Why loadVideo() is not available?](https://discourse.processing.org/t/why-loadvideo-is-not-available/31622)

<div class="topic-metadata">

**Author:** [@matsuda](https://discourse.processing.org/u/matsuda)\
**Replies:** 6\
**Last updated:** [August 25, 2021, 2:51am UTC](https://discourse.processing.org/t/why-loadvideo-is-not-available/31622 "2021-08-25T02:51:57Z")

</div>

Hi there We can deal with an image using loadImage() and also using createImg(). However, in case of video, we can use createVideo() but “loadVideo()” is not available. It seems to be inconsistent. Is there any reas…

---

## [Strange behaviour for bezier() in subpixel stroke weight](https://discourse.processing.org/t/strange-behaviour-for-bezier-in-subpixel-stroke-weight/31875)

<div class="topic-metadata">

**Author:** [@andreiantonescu](https://discourse.processing.org/u/andreiantonescu)\
**Replies:** 1\
**Last updated:** [August 24, 2021, 5:15pm UTC](https://discourse.processing.org/t/strange-behaviour-for-bezier-in-subpixel-stroke-weight/31875 "2021-08-24T17:15:38Z")

</div>

Hello there. I’ve encountered some strange behaviour for bezier() when using subpixel (\<0.49) stroke weights. This seems to happen only on some curve configurations and only on Chrome: The curve on the top has a gl…

---

## [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 to render LaTeX?](https://discourse.processing.org/t/how-to-render-latex/31841)

<div class="topic-metadata">

**Author:** [@Ariadne](https://discourse.processing.org/u/Ariadne)\
**Replies:** 4\
**Last updated:** [August 23, 2021, 2:40pm UTC](https://discourse.processing.org/t/how-to-render-latex/31841 "2021-08-23T14:40:10Z")

</div>

For a recent math visualizer I was programming, I needed to render LaTeX. I normally use Manim for such visualisations, but this time I decided to use p5.js. But it appears that there is no library to do this. What can …

---

## [How to use export & import in p5.js](https://discourse.processing.org/t/how-to-use-export-import-in-p5-js/31724)

<div class="topic-metadata">

**Author:** [@JaPatProccesingDis](https://discourse.processing.org/u/JaPatProccesingDis)\
**Replies:** 9\
**Last updated:** [August 22, 2021, 3:01pm UTC](https://discourse.processing.org/t/how-to-use-export-import-in-p5-js/31724 "2021-08-22T15:01:20Z")

</div>

Hello guys! I have some code stored in my GitHub repository…here is its jsdelivr link https://cdn.jsdelivr.net/gh/JaPatGitHub/EduSimulations@main/Tools/x-y-coordinate%20pointer.js Now, I try importing this into the p5.…

---

## [Multiple sketches in instance mode](https://discourse.processing.org/t/multiple-sketches-in-instance-mode/11222)

<div class="topic-metadata">

**Author:** [@cnie](https://discourse.processing.org/u/cnie)\
**Replies:** 3\
**Last updated:** [August 21, 2021, 9:46pm UTC](https://discourse.processing.org/t/multiple-sketches-in-instance-mode/11222 "2021-08-21T21:46:48Z")

</div>

I am quite new to p5 and am struggling to achieve multiple canvases on a single webpage. I can manage to to get two running, using two instance functions, but I can’t figure out how to position them off their default pos…

---

## [Importing shader .glsl files to Wordpress](https://discourse.processing.org/t/importing-shader-glsl-files-to-wordpress/31821)

<div class="topic-metadata">

**Author:** [@CraigO](https://discourse.processing.org/u/CraigO)\
**Replies:** 2\
**Last updated:** [August 21, 2021, 9:57pm UTC](https://discourse.processing.org/t/importing-shader-glsl-files-to-wordpress/31821 "2021-08-21T21:57:03Z")

</div>

Hey, I have shader files in my p5 project running and displaying perfectly on my local server. The files are preloaded via loadShader because I can access the file path. However, shader .glsl file paths are not accessi…

---

## [Double Möbius strip](https://discourse.processing.org/t/double-mobius-strip/31362)

<div class="topic-metadata">

**Author:** [@fleshcircuit](https://discourse.processing.org/u/fleshcircuit)\
**Replies:** 2\
**Last updated:** [July 24, 2021, 2:56pm UTC](https://discourse.processing.org/t/double-mobius-strip/31362 "2021-07-24T14:56:12Z")

</div>

I am currently working on a mobius strip animation based on this example: Mobius Strip Animation - #6 by glv However, I am trying to figure out a way to increase the folds and double the strip. This is my first attempt …

---

## [Smooth animation/interpolation](https://discourse.processing.org/t/smooth-animation-interpolation/31623)

<div class="topic-metadata">

**Author:** [@anoniim](https://discourse.processing.org/u/anoniim)\
**Replies:** 5\
**Last updated:** [August 19, 2021, 2:44am UTC](https://discourse.processing.org/t/smooth-animation-interpolation/31623 "2021-08-19T02:44:30Z")

</div>

When animating a property of an object, I’d like the property to change slowly at first, then speed up and slow down at the end again. For linear change, there is the lerp() method in Processing PApplet for linear inter…

---

## [Web Assembly (WASM) best practices for p5.js andeditor.p5js.org?](https://discourse.processing.org/t/web-assembly-wasm-best-practices-for-p5-js-andeditor-p5js-org/28111)

<div class="topic-metadata">

**Author:** [@danbri](https://discourse.processing.org/u/danbri)\
**Replies:** 2\
**Last updated:** [August 18, 2021, 10:54pm UTC](https://discourse.processing.org/t/web-assembly-wasm-best-practices-for-p5-js-andeditor-p5js-org/28111 "2021-08-18T22:54:07Z")

</div>

Hello! I spent a while making sure this post had lots of useful links, but couldn’t post it because new users only get 2 links. Which is fair enough but I feel I’m being needy if I just ask without trying to share what …

---

## [Dealing with editing large images](https://discourse.processing.org/t/dealing-with-editing-large-images/26846)

<div class="topic-metadata">

**Author:** [@tinywitchdraws](https://discourse.processing.org/u/tinywitchdraws)\
**Replies:** 3\
**Last updated:** [August 4, 2021, 5:44pm UTC](https://discourse.processing.org/t/dealing-with-editing-large-images/26846 "2021-08-04T17:44:40Z")

</div>

Hi all, I’m working on a little p5js app that will take an image and convert the brightness to opacity. So far, it works well but it crashes the browser when editing large images. here’s the code: https://editor.p5js.or…

---

## [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…

---

## [Using. img.get to retrieve color values](https://discourse.processing.org/t/using-img-get-to-retrieve-color-values/31778)

<div class="topic-metadata">

**Author:** [@glen](https://discourse.processing.org/u/glen)\
**Replies:** 2\
**Last updated:** [August 18, 2021, 11:34am UTC](https://discourse.processing.org/t/using-img-get-to-retrieve-color-values/31778 "2021-08-18T11:34:07Z")

</div>

I am using the following code let c = img.get(xPos,yPos); to sample a color from a pixel of an image and it works brilliantly as I can then fill or stroke with the variable (c) My question is how do I then make (c) us…

---

## [How do I use the X and Y values from an object from touches in P5js?](https://discourse.processing.org/t/how-do-i-use-the-x-and-y-values-from-an-object-from-touches-in-p5js/31766)

<div class="topic-metadata">

**Author:** [@nothingness](https://discourse.processing.org/u/nothingness)\
**Replies:** 4\
**Last updated:** [August 18, 2021, 12:19am UTC](https://discourse.processing.org/t/how-do-i-use-the-x-and-y-values-from-an-object-from-touches-in-p5js/31766 "2021-08-18T00:19:09Z")

</div>

This is my first week playing with P5js and Processing so be gentle. I’ve got the following P5js code where I’m looking at touch values. By pressing multi-points on a touch screen brings up more circles anchored to a ce…

---

## [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 …

---

## [Show country names in a p5 worldmap](https://discourse.processing.org/t/show-country-names-in-a-p5-worldmap/31519)

<div class="topic-metadata">

**Author:** [@Zqrni](https://discourse.processing.org/u/Zqrni)\
**Replies:** 10\
**Last updated:** [August 12, 2021, 9:14pm UTC](https://discourse.processing.org/t/show-country-names-in-a-p5-worldmap/31519 "2021-08-12T21:14:29Z")

</div>

Hi there, I need to show the country name when we have the pointer over a country position on a world map. Could you guys please help me? Don’t even know from where to start with this. The code is in this codepen: T…

---

## [Area of triangle](https://discourse.processing.org/t/area-of-triangle/31652)

<div class="topic-metadata">

**Author:** [@peterson](https://discourse.processing.org/u/peterson)\
**Replies:** 5\
**Last updated:** [August 12, 2021, 7:46pm UTC](https://discourse.processing.org/t/area-of-triangle/31652 "2021-08-12T19:46:42Z")

</div>

type or paste code here \`\</\>button\*/t/2147askingquestionshowtogetareaoftriangle\`\`

---

## [Join the new p5.js Discord](https://discourse.processing.org/t/join-the-new-p5-js-discord/31692)

<div class="topic-metadata">

**Author:** [@qianqian\_ye](https://discourse.processing.org/u/qianqian_ye)\
**Replies:** 0\
**Last updated:** [August 12, 2021, 1:19am UTC](https://discourse.processing.org/t/join-the-new-p5-js-discord/31692 "2021-08-12T01:19:24Z")

</div>

Hi, p5.js is starting a new Discord server (https://discord.gg/SHQ8dH25r9). Look forward to seeing you there! :tada:

---

## [Bug with DOM createInput()](https://discourse.processing.org/t/bug-with-dom-createinput/31686)

<div class="topic-metadata">

**Author:** [@Lynceus](https://discourse.processing.org/u/Lynceus)\
**Replies:** 1\
**Last updated:** [August 11, 2021, 7:36pm UTC](https://discourse.processing.org/t/bug-with-dom-createinput/31686 "2021-08-11T19:36:17Z")

</div>

Hi guys, I think I may of found an issue with createInput() more specifically The example given in the reference document: createInput() It is perfectly lined up and looks flush with the canvas in the example. However…

---

## [Custom button class that can call given function](https://discourse.processing.org/t/custom-button-class-that-can-call-given-function/31670)

<div class="topic-metadata">

**Author:** [@Sayochi](https://discourse.processing.org/u/Sayochi)\
**Replies:** 3\
**Last updated:** [August 11, 2021, 8:02pm UTC](https://discourse.processing.org/t/custom-button-class-that-can-call-given-function/31670 "2021-08-11T20:02:27Z")

</div>

Im trying to make a custom buttons for fun. i want to be able to give him functions and run the functions when I click it. I already completed the clicking detection part. how can I somehow pass the function information …

---

## [Creating and removing one object from an array](https://discourse.processing.org/t/creating-and-removing-one-object-from-an-array/31601)

<div class="topic-metadata">

**Author:** [@atagger](https://discourse.processing.org/u/atagger)\
**Replies:** 14\
**Last updated:** [August 9, 2021, 8:32pm UTC](https://discourse.processing.org/t/creating-and-removing-one-object-from-an-array/31601 "2021-08-09T20:32:31Z")

</div>

This is probably a really silly question, but I can’t seem to find an answer. If you want to create one object and then delete it, what is the typical way to do this? Since I only have one object I don’t want to push it …

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

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