# p5.js

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

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

**Page:** 70

---

## [How to show xy coordinate scale itself](https://discourse.processing.org/t/how-to-show-xy-coordinate-scale-itself/21383)

<div class="topic-metadata">

**Author:** [@suvir](https://discourse.processing.org/u/suvir)\
**Replies:** 4\
**Last updated:** [May 29, 2020, 9:30pm UTC](https://discourse.processing.org/t/how-to-show-xy-coordinate-scale-itself/21383 "2020-05-29T21:30:03Z")

</div>

I am drawing a spectrum graph, like the one from fft example. Code looks bit like below and draws fine: for (let i = 0; i \< data.getRowCount() / 1; i++) { let x = p.map(i, 0, data.getRowCount() / 1, 0, p.width); …

---

## [Please help with set() and get()](https://discourse.processing.org/t/please-help-with-set-and-get/21403)

<div class="topic-metadata">

**Author:** [@noob](https://discourse.processing.org/u/noob)\
**Replies:** 3\
**Last updated:** [May 29, 2020, 3:39pm UTC](https://discourse.processing.org/t/please-help-with-set-and-get/21403 "2020-05-29T15:39:52Z")

</div>

Hello good people, I have been writing code to manipulate an image in p5.js. The effect that I want to achieve is simple. But I can’t get around to find a way to do it. Currently, the result from my code is that the ima…

---

## [Moving figures in z-coordinate (z-axis)](https://discourse.processing.org/t/moving-figures-in-z-coordinate-z-axis/21310)

<div class="topic-metadata">

**Author:** [@Nis](https://discourse.processing.org/u/Nis)\
**Replies:** 31\
**Last updated:** [May 29, 2020, 3:19pm UTC](https://discourse.processing.org/t/moving-figures-in-z-coordinate-z-axis/21310 "2020-05-29T15:19:16Z")

</div>

Can someone please tell me, how can I make figures move in(on) the z-axis in p5.js? Like, ‘X-axis’ makes things move ‘Right-Left’ and ‘Y-axis’ makes things move ‘Up-Down’. But both of them I know. I am frustrated at th…

---

## [Posenet & P5js - classification of poses to trigger sounds](https://discourse.processing.org/t/posenet-p5js-classification-of-poses-to-trigger-sounds/21363)

<div class="topic-metadata">

**Author:** [@jhyde](https://discourse.processing.org/u/jhyde)\
**Replies:** 11\
**Last updated:** [May 29, 2020, 11:33am UTC](https://discourse.processing.org/t/posenet-p5js-classification-of-poses-to-trigger-sounds/21363 "2020-05-29T11:33:25Z")

</div>

Hi there! I’m a newbie to P5js and looking for some help. So what I am trying to do is use the outputs of a trained Posenet model to trigger sound files playing. I’m following Dan Shiffman’s ‘Posenet Classification’, tut…

---

## [Correct way to use ES6 modules and import classes](https://discourse.processing.org/t/correct-way-to-use-es6-modules-and-import-classes/21386)

<div class="topic-metadata">

**Author:** [@josephh](https://discourse.processing.org/u/josephh)\
**Replies:** 4\
**Last updated:** [May 29, 2020, 8:34am UTC](https://discourse.processing.org/t/correct-way-to-use-es6-modules-and-import-classes/21386 "2020-05-29T08:34:18Z")

</div>

Hi, I am making a project in p5.js where I have a simple class called Stone that I want to import into another file using ES6 modules. So I used export default : // js/src/Stone.js export default class Stone { con…

---

## [Issue with P5js Server loading](https://discourse.processing.org/t/issue-with-p5js-server-loading/21380)

<div class="topic-metadata">

**Author:** [@jhyde](https://discourse.processing.org/u/jhyde)\
**Replies:** 1\
**Last updated:** [May 28, 2020, 8:37pm UTC](https://discourse.processing.org/t/issue-with-p5js-server-loading/21380 "2020-05-28T20:37:58Z")

</div>

apologies if I put this in the wrong section, but having some trouble seeing the canvas loaded on the server I’m running from Atom. I’ve attached how my script looks in Atom and what I copy and pasted from the Reference.…

---

## [Highlighting an arc in P5](https://discourse.processing.org/t/highlighting-an-arc-in-p5/21267)

<div class="topic-metadata">

**Author:** [@viniciusfersil](https://discourse.processing.org/u/viniciusfersil)\
**Replies:** 3\
**Last updated:** [May 28, 2020, 7:10pm UTC](https://discourse.processing.org/t/highlighting-an-arc-in-p5/21267 "2020-05-28T19:10:37Z")

</div>

Hello to you all :slight\_smile: . I am trying to develop a pizza-like graph. Each “slice” of the full circle represents an element that will have some data attached to it. I am having trouble to acess each slice “individ…

---

## [Using loadTable with correct types in typescript with p5js](https://discourse.processing.org/t/using-loadtable-with-correct-types-in-typescript-with-p5js/21236)

<div class="topic-metadata">

**Author:** [@suvir](https://discourse.processing.org/u/suvir)\
**Replies:** 9\
**Last updated:** [May 28, 2020, 5:04pm UTC](https://discourse.processing.org/t/using-loadtable-with-correct-types-in-typescript-with-p5js/21236 "2020-05-28T17:04:19Z")

</div>

I am loading a csv file using the p5.js function, loadTable in typescript. It seems that its not reading the csv file at all, maybe i am missing something in my approach. I have all the type definition in typescript for …

---

## [Microphone input threshold p5.js](https://discourse.processing.org/t/microphone-input-threshold-p5-js/21096)

<div class="topic-metadata">

**Author:** [@rose1](https://discourse.processing.org/u/rose1)\
**Replies:** 8\
**Last updated:** [May 28, 2020, 11:54am UTC](https://discourse.processing.org/t/microphone-input-threshold-p5-js/21096 "2020-05-28T11:54:51Z")

</div>

Hi! How can I put a threshold on microphone input signal and modify the oscillator’s amplitude (with this new range)? I use “p5.Oscillator” to make sound and “p5.AudioIn()” to catch the microphone signal. This example d…

---

## [Engine that uses js Processing](https://discourse.processing.org/t/engine-that-uses-js-processing/21102)

<div class="topic-metadata">

**Author:** [@WolfRaj](https://discourse.processing.org/u/WolfRaj)\
**Replies:** 7\
**Last updated:** [May 28, 2020, 11:02am UTC](https://discourse.processing.org/t/engine-that-uses-js-processing/21102 "2020-05-28T11:02:50Z")

</div>

Can someone help me find or tell me some engine that uses js Processing?

---

## [Displaying from an array](https://discourse.processing.org/t/displaying-from-an-array/21251)

<div class="topic-metadata">

**Author:** [@katjs](https://discourse.processing.org/u/katjs)\
**Replies:** 7\
**Last updated:** [May 27, 2020, 4:52pm UTC](https://discourse.processing.org/t/displaying-from-an-array/21251 "2020-05-27T16:52:48Z")

</div>

Hello guys, so I’m trying to make this counter sort of thing where a function takes in an input and then it shows it back in reverse like a countdown. But I’m unable to get it working properly as the numbers tend to just…

---

## [Video + text tracks via .vtt file](https://discourse.processing.org/t/video-text-tracks-via-vtt-file/21324)

<div class="topic-metadata">

**Author:** [@stephanschulz](https://discourse.processing.org/u/stephanschulz)\
**Replies:** 2\
**Last updated:** [May 27, 2020, 1:44pm UTC](https://discourse.processing.org/t/video-text-tracks-via-vtt-file/21324 "2020-05-27T13:44:02Z")

</div>

I am using createVideo to load in a new video file. At the same time I would like to generate a text track and attach it to the video, so when it plays back I can see the text for each time cue and read the cue data via…

---

## [Javascript: Question re prototpyes](https://discourse.processing.org/t/javascript-question-re-prototpyes/21149)

<div class="topic-metadata">

**Author:** [@femke.blanco](https://discourse.processing.org/u/femke.blanco)\
**Replies:** 3\
**Last updated:** [May 25, 2020, 11:57pm UTC](https://discourse.processing.org/t/javascript-question-re-prototpyes/21149 "2020-05-25T23:57:24Z")

</div>

Why would I want to use Object.create() when I can just assign one object’s prototype to another object’s prototype? function Thingy() {} Thingy.prototype.change = function () { return this.char1 + this.char2; } funct…

---

## [Permanent coloring for text in p5.js](https://discourse.processing.org/t/permanent-coloring-for-text-in-p5-js/21271)

<div class="topic-metadata">

**Author:** [@Johann75](https://discourse.processing.org/u/Johann75)\
**Replies:** 1\
**Last updated:** [May 25, 2020, 3:18pm UTC](https://discourse.processing.org/t/permanent-coloring-for-text-in-p5-js/21271 "2020-05-25T15:18:05Z")

</div>

Could anyone please suggest a way to not loop the text colour separately from my sound loop. I was creating a timer which would highlight as red after the last 5 seconds. Also, I added a beep sound to remind the user(th…

---

## [Possibility to avoid redraw with virtual mouse cursor](https://discourse.processing.org/t/possibility-to-avoid-redraw-with-virtual-mouse-cursor/21168)

<div class="topic-metadata">

**Author:** [@monade](https://discourse.processing.org/u/monade)\
**Replies:** 3\
**Last updated:** [May 25, 2020, 12:11pm UTC](https://discourse.processing.org/t/possibility-to-avoid-redraw-with-virtual-mouse-cursor/21168 "2020-05-25T12:11:40Z")

</div>

I am developing a little game with p5.js in which I need to draw my own mouse cursor (for reasons that are not so important). Apart from the mouse cursor, the game has mostly static content and each frame consist of arou…

---

## [How do you stop a timer as it reaches 0 in p5.js](https://discourse.processing.org/t/how-do-you-stop-a-timer-as-it-reaches-0-in-p5-js/21240)

<div class="topic-metadata">

**Author:** [@Johann75](https://discourse.processing.org/u/Johann75)\
**Replies:** 2\
**Last updated:** [May 25, 2020, 8:49am UTC](https://discourse.processing.org/t/how-do-you-stop-a-timer-as-it-reaches-0-in-p5-js/21240 "2020-05-25T08:49:02Z")

</div>

Referring the code made by Mr.Shiffman, i found that he couldn’t explain the code for stopping the timer at 0, so could anyone help with it…-Johann

---

## ["paste" event listener not working for a P5.Graphic?](https://discourse.processing.org/t/paste-event-listener-not-working-for-a-p5-graphic/20095)

<div class="topic-metadata">

**Author:** [@Yom](https://discourse.processing.org/u/Yom)\
**Replies:** 3\
**Last updated:** [May 25, 2020, 5:10am UTC](https://discourse.processing.org/t/paste-event-listener-not-working-for-a-p5-graphic/20095 "2020-05-25T05:10:42Z")

</div>

Hello :slight\_smile: I would like to add a “paste” event listener to a p5.Graphic, how can I do that ? I’ve tried like this: g = createGraphics(100, 100); g.elt.addEventListener("paste", pasteEvent =\> console.log("pas…

---

## [.render() PRoBleM](https://discourse.processing.org/t/render-problem/21255)

<div class="topic-metadata">

**Author:** [@pinchme](https://discourse.processing.org/u/pinchme)\
**Replies:** 6\
**Last updated:** [May 24, 2020, 10:22pm UTC](https://discourse.processing.org/t/render-problem/21255 "2020-05-24T22:22:52Z")

</div>

I am very new to this but like to jump in at the deep end and learn that way. I’m making a fork of an existing processing prog. and wishing to use sound rather than mouse to interact with it. I’ve probably done lots of t…

---

## [How to change picture on p5](https://discourse.processing.org/t/how-to-change-picture-on-p5/21231)

<div class="topic-metadata">

**Author:** [@Gravic216](https://discourse.processing.org/u/Gravic216)\
**Replies:** 1\
**Last updated:** [May 24, 2020, 8:41pm UTC](https://discourse.processing.org/t/how-to-change-picture-on-p5/21231 "2020-05-24T20:41:14Z")

</div>

Hi, I’m looking for how just mouse click once time and the load picture will change to another change picture as well as never change.

---

## [Rotate p5 Vector and get angleBetweend](https://discourse.processing.org/t/rotate-p5-vector-and-get-anglebetweend/21215)

<div class="topic-metadata">

**Author:** [@Bouls631](https://discourse.processing.org/u/Bouls631)\
**Replies:** 3\
**Last updated:** [May 24, 2020, 12:23pm UTC](https://discourse.processing.org/t/rotate-p5-vector-and-get-anglebetweend/21215 "2020-05-24T12:23:17Z")

</div>

Hy every one, Here is my probleme i try to get angle between two Vectors in p5 when both Can moove. What i’ve done is : Push(); Translate(...); Bb= createVector (mouseX,mouseY) RotateZ(x); Aa= createVector(0,100); Pop(…

---

## [How to make a pulling mouse constraint?](https://discourse.processing.org/t/how-to-make-a-pulling-mouse-constraint/21200)

<div class="topic-metadata">

**Author:** [@Nis](https://discourse.processing.org/u/Nis)\
**Replies:** 1\
**Last updated:** [May 24, 2020, 5:06am UTC](https://discourse.processing.org/t/how-to-make-a-pulling-mouse-constraint/21200 "2020-05-24T05:06:36Z")

</div>

https://editor.p5js.org/Nis\_Collect/sketches/U0p3GjOK1 Above is the link of my code. Please check it and please let me know how can I make my player get pulled towards an enemy (like Spiderman is attracted with some sp…

---

## [Image Array from non-sequential image names](https://discourse.processing.org/t/image-array-from-non-sequential-image-names/20990)

<div class="topic-metadata">

**Author:** [@clintsleeper](https://discourse.processing.org/u/clintsleeper)\
**Replies:** 4\
**Last updated:** [May 23, 2020, 6:55pm UTC](https://discourse.processing.org/t/image-array-from-non-sequential-image-names/20990 "2020-05-23T18:55:54Z")

</div>

Hi all, I’m hoping I have a simple question - I’m trying to populate an image array from a folder where images are stored but will not have sequential naming schemes (the folder is populated by a PHP uploader with a han…

---

## [Someone please help me: enemy shooting](https://discourse.processing.org/t/someone-please-help-me-enemy-shooting/21197)

<div class="topic-metadata">

**Author:** [@Nis](https://discourse.processing.org/u/Nis)\
**Replies:** 4\
**Last updated:** [May 23, 2020, 3:12pm UTC](https://discourse.processing.org/t/someone-please-help-me-enemy-shooting/21197 "2020-05-23T15:12:36Z")

</div>

https://editor.p5js.org/Nis\_Collect/sketches/U0p3GjOK1 Above is the link of my code. Please check it and please tell me how can I make the circular enemies (which are moving towards left), fire small circular bullets a…

---

## [Player should move on drag, shouldn’t respond on click](https://discourse.processing.org/t/player-should-move-on-drag-shouldn-t-respond-on-click/21194)

<div class="topic-metadata">

**Author:** [@Nis](https://discourse.processing.org/u/Nis)\
**Replies:** 5\
**Last updated:** [May 23, 2020, 12:20pm UTC](https://discourse.processing.org/t/player-should-move-on-drag-shouldn-t-respond-on-click/21194 "2020-05-23T12:20:42Z")

</div>

https://editor.p5js.org/Nis\_Collect/sketches/U0p3GjOK1 Above is the link of my code in p5.js editor. As you can see in the code that the player which is in blue colour on the preview screen, moves on mouseX and mouseY. …

---

## [Question as drawing with pixels on Processing](https://discourse.processing.org/t/question-as-drawing-with-pixels-on-processing/21207)

<div class="topic-metadata">

**Author:** [@shinnn](https://discourse.processing.org/u/shinnn)\
**Replies:** 1\
**Last updated:** [May 23, 2020, 9:07am UTC](https://discourse.processing.org/t/question-as-drawing-with-pixels-on-processing/21207 "2020-05-23T09:07:56Z")

</div>

Hello Now I am trying to draw picture based on the data got from the original picture. It went quite successful on p5.js but it somehow did not work well on Processing. Am I doing wrong? and What is the problem? Thank y…

---

## [Please help with Perlin Noise problem](https://discourse.processing.org/t/please-help-with-perlin-noise-problem/21160)

<div class="topic-metadata">

**Author:** [@noob](https://discourse.processing.org/u/noob)\
**Replies:** 2\
**Last updated:** [May 23, 2020, 1:22am UTC](https://discourse.processing.org/t/please-help-with-perlin-noise-problem/21160 "2020-05-23T01:22:02Z")

</div>

Hi good people, I have been looking for this solutions in days now. I hope you can show me the light how to get it done. So I found this image in the internet: I try to replicate the image above using p5js, with pe…

---

## [Advice on setting width of the slider to cm or inches](https://discourse.processing.org/t/advice-on-setting-width-of-the-slider-to-cm-or-inches/21118)

<div class="topic-metadata">

**Author:** [@cperezl](https://discourse.processing.org/u/cperezl)\
**Replies:** 1\
**Last updated:** [May 22, 2020, 5:05pm UTC](https://discourse.processing.org/t/advice-on-setting-width-of-the-slider-to-cm-or-inches/21118 "2020-05-22T17:05:00Z")

</div>

Hi everyone, I have a very basic understanding of p5.js and I am working on a program using sliders for a psychological experiment. The sliders will be used to answer questions on a scale from “nothing” to “a lot”. When…

---

## [Send Value to slider in the index.html from p5sketch?](https://discourse.processing.org/t/send-value-to-slider-in-the-index-html-from-p5sketch/21157)

<div class="topic-metadata">

**Author:** [@ballinoates](https://discourse.processing.org/u/ballinoates)\
**Replies:** 2\
**Last updated:** [May 22, 2020, 4:13pm UTC](https://discourse.processing.org/t/send-value-to-slider-in-the-index-html-from-p5sketch/21157 "2020-05-22T16:13:42Z")

</div>

Hi All- I have a slightly complex index.html page with additional js that allows the user to switch between different sketches. In each sketch I have coded 2 sliders that live in the index outside of the canvas. The ide…

---

## [Printing the y coordinate is "undefined"](https://discourse.processing.org/t/printing-the-y-coordinate-is-undefined/21158)

<div class="topic-metadata">

**Author:** [@Nis](https://discourse.processing.org/u/Nis)\
**Replies:** 3\
**Last updated:** [May 22, 2020, 11:42am UTC](https://discourse.processing.org/t/printing-the-y-coordinate-is-undefined/21158 "2020-05-22T11:42:56Z")

</div>

The above the picture of my code, where it isn’t printing the y coordinate of the moving rectangles, instead it is printing “undefined”

---

## [Collision of the player with the moving rectangles](https://discourse.processing.org/t/collision-of-the-player-with-the-moving-rectangles/21124)

<div class="topic-metadata">

**Author:** [@Nis](https://discourse.processing.org/u/Nis)\
**Replies:** 18\
**Last updated:** [May 22, 2020, 11:41am UTC](https://discourse.processing.org/t/collision-of-the-player-with-the-moving-rectangles/21124 "2020-05-22T11:41:47Z")

</div>

https://editor.p5js.org/Nis\_Collect/sketches/U0p3GjOK1 Given above is the link of my project. Someone please help me by reviewing my code and telling me that how can I confirm the collision of the player with the movin…

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

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