# p5.js

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

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

**Page:** 28

---

## [beginshape(TESS) how to uv map](https://discourse.processing.org/t/beginshape-tess-how-to-uv-map/32607)

<div class="topic-metadata">

**Author:** [@madwilson](https://discourse.processing.org/u/madwilson)\
**Replies:** 6\
**Last updated:** [March 9, 2022, 10:05pm UTC](https://discourse.processing.org/t/beginshape-tess-how-to-uv-map/32607 "2022-03-09T22:05:05Z")

</div>

I have been attempting to UVmap the beginshape(TESS) but I am assuming that I need to get access to the points created after ending the shape? which is why mapping to the points isn’t working. Any help or pointing me in…

---

## [createGraphics as background image](https://discourse.processing.org/t/creategraphics-as-background-image/35640)

<div class="topic-metadata">

**Author:** [@res56](https://discourse.processing.org/u/res56)\
**Replies:** 2\
**Last updated:** [March 9, 2022, 2:22pm UTC](https://discourse.processing.org/t/creategraphics-as-background-image/35640 "2022-03-09T14:22:28Z")

</div>

Hey frens, I generate a grid in setup-function and want to keep this as background- image in draw. Here some code: let img; var scl = 30; var cols, rows; function setup() { createCanvas(400, 400); img = c…

---

## [P5js mode can’t be installed](https://discourse.processing.org/t/p5js-mode-can-t-be-installed/35625)

<div class="topic-metadata">

**Author:** [@jjjolton](https://discourse.processing.org/u/jjjolton)\
**Replies:** 0\
**Last updated:** [March 9, 2022, 12:18am UTC](https://discourse.processing.org/t/p5js-mode-can-t-be-installed/35625 "2022-03-09T00:18:29Z")

</div>

My students were trying to install p5js mode on the Processing 4 IDE, and were getting the message that the mode had to be compiled for Java 11. I haven’t had this problem, but I’m running the latest version of the IDE. …

---

## [\[Violation\] Added non-passive event listener to a scroll-blocking 'wheel' event](https://discourse.processing.org/t/violation-added-non-passive-event-listener-to-a-scroll-blocking-wheel-event/35624)

<div class="topic-metadata">

**Author:** [@pirela](https://discourse.processing.org/u/pirela)\
**Replies:** 0\
**Last updated:** [March 8, 2022, 10:37pm UTC](https://discourse.processing.org/t/violation-added-non-passive-event-listener-to-a-scroll-blocking-wheel-event/35624 "2022-03-08T22:37:37Z")

</div>

I got this violation info ( to get it, javascript console must have ‘Verbose’ level checked) when my draw loop includes an orbitcontrol . Message appears at the first use or move of the mouse on the canvas. With…

---

## [P5js \[Violation\] 'requestAnimationFrame' handler took 75ms](https://discourse.processing.org/t/p5js-violation-requestanimationframe-handler-took-75ms/31976)

<div class="topic-metadata">

**Author:** [@suecouzq](https://discourse.processing.org/u/suecouzq)\
**Replies:** 2\
**Last updated:** [March 8, 2022, 10:23pm UTC](https://discourse.processing.org/t/p5js-violation-requestanimationframe-handler-took-75ms/31976 "2022-03-08T22:23:07Z")

</div>

I am getting this ‘requestAnimationFrame’ error with this code. I guess there’s something with the for loop that causes the problem but I can’t figure an alternative way of getting the same visual result. Any idea? let …

---

## [Constricting shape movement in p5js](https://discourse.processing.org/t/constricting-shape-movement-in-p5js/35361)

<div class="topic-metadata">

**Author:** [@rorywilliams](https://discourse.processing.org/u/rorywilliams)\
**Replies:** 1\
**Last updated:** [March 8, 2022, 9:41pm UTC](https://discourse.processing.org/t/constricting-shape-movement-in-p5js/35361 "2022-03-08T21:41:39Z")

</div>

Hi, I’m a beginner with p5js and I’ve run into some trouble with some code I’m writing. I have three circles of decreasing size, with the smallest and middle circles mapped to mouseX and mouseY. My issue is that I want t…

---

## [P5.js sound and keyTyped() or keyPressed()](https://discourse.processing.org/t/p5-js-sound-and-keytyped-or-keypressed/35583)

<div class="topic-metadata">

**Author:** [@JessJess](https://discourse.processing.org/u/JessJess)\
**Replies:** 25\
**Last updated:** [March 6, 2022, 10:31pm UTC](https://discourse.processing.org/t/p5-js-sound-and-keytyped-or-keypressed/35583 "2022-03-06T22:31:29Z")

</div>

hi! i’m trying to write a code where when i press a certain keyboard key, a sound will play. I’m using p5.js and have tried keyTyped() function and keyPressed() function but it’s not working. Need help as soon as possibl…

---

## [Web Audio doesn't work on iPhone's Safari and Chrome](https://discourse.processing.org/t/web-audio-doesnt-work-on-iphones-safari-and-chrome/35596)

<div class="topic-metadata">

**Author:** [@teemee](https://discourse.processing.org/u/teemee)\
**Replies:** 0\
**Last updated:** [March 6, 2022, 5:20pm UTC](https://discourse.processing.org/t/web-audio-doesnt-work-on-iphones-safari-and-chrome/35596 "2022-03-06T17:20:14Z")

</div>

I have made a website that plays audio after a user does the mousePressed(). The site works fine on all the platforms like, desktop Internet browser and Android’s browser but, not in iPhone’s Safari and Chrome. My audio …

---

## [Converting 2d output to 3d](https://discourse.processing.org/t/converting-2d-output-to-3d/35210)

<div class="topic-metadata">

**Author:** [@elonmusk](https://discourse.processing.org/u/elonmusk)\
**Replies:** 1\
**Last updated:** [March 5, 2022, 9:32pm UTC](https://discourse.processing.org/t/converting-2d-output-to-3d/35210 "2022-03-05T21:32:32Z")

</div>

please format code with \</\> button \* homework policy \* asking questions Hello Team, I was given a task, I was able to get the output in 2D format, but I have to make use use of 3D perlin noise for my output. What i…

---

## [Accessing \`p5.js\` instance from Vue file](https://discourse.processing.org/t/accessing-p5-js-instance-from-vue-file/35537)

<div class="topic-metadata">

**Author:** [@sylcha](https://discourse.processing.org/u/sylcha)\
**Replies:** 5\
**Last updated:** [March 5, 2022, 10:00am UTC](https://discourse.processing.org/t/accessing-p5-js-instance-from-vue-file/35537 "2022-03-05T10:00:24Z")

</div>

Hi everyone, I’m currently working on an app involving Quasar framework (which works in top of Vue) and p5.js. I have a vue where I want to insert a sketch (please, have a look to the code below). Following these recomm…

---

## [Create colored circle based on midi note](https://discourse.processing.org/t/create-colored-circle-based-on-midi-note/35079)

<div class="topic-metadata">

**Author:** [@AMax](https://discourse.processing.org/u/AMax)\
**Replies:** 6\
**Last updated:** [March 3, 2022, 3:04pm UTC](https://discourse.processing.org/t/create-colored-circle-based-on-midi-note/35079 "2022-03-03T15:04:53Z")

</div>

I’m trying to create code that will let me input a musical note (via midi) and have a corresponding small circle appear that has an assigned color value. The circles will appear next to one another in succession, so that…

---

## [Having trouble with colorMode and WEBGL on OpenProcessing](https://discourse.processing.org/t/having-trouble-with-colormode-and-webgl-on-openprocessing/35531)

<div class="topic-metadata">

**Author:** [@brackish](https://discourse.processing.org/u/brackish)\
**Replies:** 2\
**Last updated:** [March 3, 2022, 12:00pm UTC](https://discourse.processing.org/t/having-trouble-with-colormode-and-webgl-on-openprocessing/35531 "2022-03-03T12:00:44Z")

</div>

I’m trying to build this sketch on openprocessing: it’s a fork of someone else’s sphere mapping sketch, which uses WEBGL. i’m trying to apply a lofi text mode filter over the top. i’ve copied some text mode code tha…

---

## [ASCII Video with GIF](https://discourse.processing.org/t/ascii-video-with-gif/35476)

<div class="topic-metadata">

**Author:** [@JulienBgr](https://discourse.processing.org/u/JulienBgr)\
**Replies:** 0\
**Last updated:** [February 28, 2022, 9:01am UTC](https://discourse.processing.org/t/ascii-video-with-gif/35476 "2022-02-28T09:01:47Z")

</div>

Hey Guys ! I just saw a video on YouTube for ASCII Video (ASCII Video (Coding Challenge 166) by The Coding Train) and tried this for myself. Furthermore I want to include a GIF, but have some troubles with the implementa…

---

## [textureWrap() is not setting after called a second time](https://discourse.processing.org/t/texturewrap-is-not-setting-after-called-a-second-time/35474)

<div class="topic-metadata">

**Author:** [@graph100](https://discourse.processing.org/u/graph100)\
**Replies:** 1\
**Last updated:** [February 28, 2022, 12:59pm UTC](https://discourse.processing.org/t/texturewrap-is-not-setting-after-called-a-second-time/35474 "2022-02-28T12:59:09Z")

</div>

I’m working on a program where some of the models need to have repeated textures and others do not require that. Where I am trying to repeat my textures I call textureWrap(REPEAT), and just to be sure I’ve put textureWra…

---

## [Creating random shapes within the limits](https://discourse.processing.org/t/creating-random-shapes-within-the-limits/35438)

<div class="topic-metadata">

**Author:** [@callenk](https://discourse.processing.org/u/callenk)\
**Replies:** 6\
**Last updated:** [February 27, 2022, 1:00pm UTC](https://discourse.processing.org/t/creating-random-shapes-within-the-limits/35438 "2022-02-27T13:00:07Z")

</div>

Hi, I am trying to draw some shapes to resemble a face, I have arrays that holds the certain x, y points for each part of a human face like eyes, jaw,nose etc. What is the best way to go about this, using arc, vertex? T…

---

## [Convert p5js to Processing](https://discourse.processing.org/t/convert-p5js-to-processing/29893)

<div class="topic-metadata">

**Author:** [@l3ehfar](https://discourse.processing.org/u/l3ehfar)\
**Replies:** 11\
**Last updated:** [February 26, 2022, 1:58am UTC](https://discourse.processing.org/t/convert-p5js-to-processing/29893 "2022-02-26T01:58:30Z")

</div>

could anyone help me converting this code into Processing please? thanks

---

## [Cant call from an Array on createGraphics canvas](https://discourse.processing.org/t/cant-call-from-an-array-on-creategraphics-canvas/35434)

<div class="topic-metadata">

**Author:** [@chriscorey](https://discourse.processing.org/u/chriscorey)\
**Replies:** 4\
**Last updated:** [February 25, 2022, 8:19pm UTC](https://discourse.processing.org/t/cant-call-from-an-array-on-creategraphics-canvas/35434 "2022-02-25T20:19:23Z")

</div>

Project Goal: I’d like to create a simple drawing program that randomly cycles through an array of shapes which the user has to place one at a time. I have a simple version built but when I try to draw something from an …

---

## ["no content type found for .mp3" error](https://discourse.processing.org/t/no-content-type-found-for-mp3-error/35343)

<div class="topic-metadata">

**Author:** [@heurihermilab](https://discourse.processing.org/u/heurihermilab)\
**Replies:** 11\
**Last updated:** [February 24, 2022, 9:36pm UTC](https://discourse.processing.org/t/no-content-type-found-for-mp3-error/35343 "2022-02-24T21:36:00Z")

</div>

Howdy all, I’m trying to work with the example at reference | p5.js but clicking on the canvas to start/pause the audio inexplicably only works once for each state the sketch only executes once, thereafter failing…

---

## [Problem with displaying other players](https://discourse.processing.org/t/problem-with-displaying-other-players/35425)

<div class="topic-metadata">

**Author:** [@IZFvhbadfso](https://discourse.processing.org/u/IZFvhbadfso)\
**Replies:** 1\
**Last updated:** [February 24, 2022, 5:22pm UTC](https://discourse.processing.org/t/problem-with-displaying-other-players/35425 "2022-02-24T17:22:25Z")

</div>

I’m currently programming a simple game to test out p5.js where you fly around in space, there is a bunch of earths, and now I tried to add multiplayer with node.js, but I have a problem with displaying the other player…

---

## [Texture as data in shader has odd behavior](https://discourse.processing.org/t/texture-as-data-in-shader-has-odd-behavior/33197)

<div class="topic-metadata">

**Author:** [@altitudinem](https://discourse.processing.org/u/altitudinem)\
**Replies:** 18\
**Last updated:** [February 23, 2022, 8:20pm UTC](https://discourse.processing.org/t/texture-as-data-in-shader-has-odd-behavior/33197 "2022-02-23T20:20:17Z")

</div>

Dear community, I’m learning how to use a shader, especially within p5js. I’ve learned from this post how to pass a set of data as a texture and use it in the shader program. I appreciate that @hamoid and @myselfhims…

---

## [Testing equality of vectors in a 2 dimensional array](https://discourse.processing.org/t/testing-equality-of-vectors-in-a-2-dimensional-array/35389)

<div class="topic-metadata">

**Author:** [@arathorn76](https://discourse.processing.org/u/arathorn76)\
**Replies:** 5\
**Last updated:** [February 23, 2022, 7:23pm UTC](https://discourse.processing.org/t/testing-equality-of-vectors-in-a-2-dimensional-array/35389 "2022-02-23T19:23:53Z")

</div>

Hello together, I have a problem testing equality of one line of a 2D array against a possible new line. My goal is to add a new line only if a line with the same elements does not yet exist. To achieve this I wrote t…

---

## [How to add math.js to the p5js editor on browser](https://discourse.processing.org/t/how-to-add-math-js-to-the-p5js-editor-on-browser/35390)

<div class="topic-metadata">

**Author:** [@TheSynchronomicon](https://discourse.processing.org/u/TheSynchronomicon)\
**Replies:** 3\
**Last updated:** [February 23, 2022, 4:23pm UTC](https://discourse.processing.org/t/how-to-add-math-js-to-the-p5js-editor-on-browser/35390 "2022-02-23T16:23:08Z")

</div>

I need to use math.js to solve a system of equations but I honestly have no clue on how to add the math.js library to the browser editor for p5js. I have already tried creating a new sketch file and copying over the html…

---

## [Abort loadSound()](https://discourse.processing.org/t/abort-loadsound/35377)

<div class="topic-metadata">

**Author:** [@Lerudan](https://discourse.processing.org/u/Lerudan)\
**Replies:** 0\
**Last updated:** [February 22, 2022, 10:02am UTC](https://discourse.processing.org/t/abort-loadsound/35377 "2022-02-22T10:02:20Z")

</div>

I’m building a little applet with audio-files. Each level starts with loading an audiofile. I also use the history api of the browser, to give each level a usable URL. Now if a user changes the history state, while loa…

---

## [GL.getExtension ('OES\_standard\_derivatives');](https://discourse.processing.org/t/gl-getextension-oes-standard-derivatives/29854)

<div class="topic-metadata">

**Author:** [@BigBigRed](https://discourse.processing.org/u/BigBigRed)\
**Replies:** 6\
**Last updated:** [February 22, 2022, 3:11am UTC](https://discourse.processing.org/t/gl-getextension-oes-standard-derivatives/29854 "2022-02-22T03:11:19Z")

</div>

I am trying to work with some code that someone else did. my p5js sketch is hanging/ crashing at the line ‘vec3 normal = vec3(-dFdx(f), -dFdy(f), 0.5) + 0.5;’. My diagnostic efforts lead me to think that the call to ‘dF…

---

## [Initializing multiple timers within the draw loop ()](https://discourse.processing.org/t/initializing-multiple-timers-within-the-draw-loop/35335)

<div class="topic-metadata">

**Author:** [@basicvisual](https://discourse.processing.org/u/basicvisual)\
**Replies:** 10\
**Last updated:** [February 21, 2022, 9:45pm UTC](https://discourse.processing.org/t/initializing-multiple-timers-within-the-draw-loop/35335 "2022-02-21T21:45:45Z")

</div>

Hello , I am trying to understand the concept of timers in p5js. If i understand , there is no way to initialize two timers in the draw loop. I was using the millis function to take the note of time. For example in the …

---

## [Can't run P5.js "This item needs to be recompiled for Java 8"](https://discourse.processing.org/t/cant-run-p5-js-this-item-needs-to-be-recompiled-for-java-8/35050)

<div class="topic-metadata">

**Author:** [@wageDu](https://discourse.processing.org/u/wageDu)\
**Replies:** 7\
**Last updated:** [February 20, 2022, 7:49pm UTC](https://discourse.processing.org/t/cant-run-p5-js-this-item-needs-to-be-recompiled-for-java-8/35050 "2022-02-20T19:49:27Z")

</div>

Hi all, I don’t know exactly what happened, but starting today “P5.js Mode” is missing in my Processing. I tried to re-add it, but after downloading it gives the above mentioned message “This item needs to be recompile…

---

## [createGraphics combined with text and second()](https://discourse.processing.org/t/creategraphics-combined-with-text-and-second/35293)

<div class="topic-metadata">

**Author:** [@goldorak](https://discourse.processing.org/u/goldorak)\
**Replies:** 19\
**Last updated:** [February 20, 2022, 12:50am UTC](https://discourse.processing.org/t/creategraphics-combined-with-text-and-second/35293 "2022-02-20T00:50:11Z")

</div>

Hi, For debugging purposes, I’d like to display the time value in my canvas. To do so, I’d like to use createGraphics combined with text(); Unfortunately it looks like I can’t send the value from second() to my pg. It…

---

## [How do I create a table inside p5 space?](https://discourse.processing.org/t/how-do-i-create-a-table-inside-p5-space/35283)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 11\
**Last updated:** [February 19, 2022, 4:15pm UTC](https://discourse.processing.org/t/how-do-i-create-a-table-inside-p5-space/35283 "2022-02-19T16:15:13Z")

</div>

How do I create a table inside p5 space? link : https://codepen.io/anon/pen/bNJeLO Like the picture above, I want to create a slide table. Is there any way to make a slide table in p5 space?

---

## [ClickThrough\_mousePressed()](https://discourse.processing.org/t/clickthrough-mousepressed/35277)

<div class="topic-metadata">

**Author:** [@svan](https://discourse.processing.org/u/svan)\
**Replies:** 2\
**Last updated:** [February 19, 2022, 2:33am UTC](https://discourse.processing.org/t/clickthrough-mousepressed/35277 "2022-02-19T02:33:27Z")

</div>

The following demo illustrates ‘click through’; depending on where you click in the green rectangle, mousePressed() will report either two or three rectangles since they are overlapped. Is there a way to trap only the c…

---

## [\[p5.js\] Date search related](https://discourse.processing.org/t/p5-js-date-search-related/35196)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 8\
**Last updated:** [February 19, 2022, 12:49am UTC](https://discourse.processing.org/t/p5-js-date-search-related/35196 "2022-02-19T00:49:12Z")

</div>

Date search related. If you look at the image, you can select the date. within p5.js library If you have an example source code Do you have any content?

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

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