# p5.js

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

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

**Page:** 30

---

## [Incorrect .loop() behavior in p5.SoundFile](https://discourse.processing.org/t/incorrect-loop-behavior-in-p5-soundfile/34947)

<div class="topic-metadata">

**Author:** [@jaschanarveson](https://discourse.processing.org/u/jaschanarveson)\
**Replies:** 0\
**Last updated:** [February 3, 2022, 12:59am UTC](https://discourse.processing.org/t/incorrect-loop-behavior-in-p5-soundfile/34947 "2022-02-03T00:59:52Z")

</div>

The .loop() function in p5.SoundFile isn’t working correctly for me. Behavior: I set loop start and end points: it will start at the start point, but then loop back to 0 upon hitting the end point, instead of looping b…

---

## [screenX screenY equivalent in p5.js](https://discourse.processing.org/t/screenx-screeny-equivalent-in-p5-js/10581)

<div class="topic-metadata">

**Author:** [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Replies:** 6\
**Last updated:** [February 2, 2022, 1:03pm UTC](https://discourse.processing.org/t/screenx-screeny-equivalent-in-p5-js/10581 "2022-02-02T13:03:36Z")

</div>

Wow, p5.js is awesome I just look for a screenX screenY equivalent together with orbitControl() Thanks for a great language! Chrisir

---

## [Code is not executed in Processing, but in p5.js Web Editor](https://discourse.processing.org/t/code-is-not-executed-in-processing-but-in-p5-js-web-editor/34867)

<div class="topic-metadata">

**Author:** [@Master\_Kneater](https://discourse.processing.org/u/Master_Kneater)\
**Replies:** 21\
**Last updated:** [February 2, 2022, 10:08am UTC](https://discourse.processing.org/t/code-is-not-executed-in-processing-but-in-p5-js-web-editor/34867 "2022-02-02T10:08:44Z")

</div>

Hello everyone, as the title suggests I am having a problem running my javascript code in Processing. However, if I copy this code into the p5.js web editor (https://editor.p5js.org/) the code works without problems. I u…

---

## [LoadPixels() on SVG with P5.js](https://discourse.processing.org/t/loadpixels-on-svg-with-p5-js/34874)

<div class="topic-metadata">

**Author:** [@patricio1979](https://discourse.processing.org/u/patricio1979)\
**Replies:** 2\
**Last updated:** [January 31, 2022, 3:16pm UTC](https://discourse.processing.org/t/loadpixels-on-svg-with-p5-js/34874 "2022-01-31T15:16:21Z")

</div>

Hello, I’m working with \[OMSD\](https://opensheetmusicdisplay.github.io/) and the music score is rendered on a div element. How Can I get the image’s pixels. I only need this for counting the black ones. Some example co…

---

## [p5Gui and noLoop()](https://discourse.processing.org/t/p5gui-and-noloop/34903)

<div class="topic-metadata">

**Author:** [@goldorak](https://discourse.processing.org/u/goldorak)\
**Replies:** 0\
**Last updated:** [January 31, 2022, 12:32am UTC](https://discourse.processing.org/t/p5gui-and-noloop/34903 "2022-01-31T00:32:29Z")

</div>

Hello, I’m experimenting with p5Gui library. I’m trying to understand this example: p5.gui/sketch.js at master · bitcraftlab/p5.gui · GitHub I would like to create a drop down menu for experimenting with blend modes a…

---

## [About loadImage() method](https://discourse.processing.org/t/about-loadimage-method/34814)

<div class="topic-metadata">

**Author:** [@MoathJ](https://discourse.processing.org/u/MoathJ)\
**Replies:** 8\
**Last updated:** [January 26, 2022, 7:41am UTC](https://discourse.processing.org/t/about-loadimage-method/34814 "2022-01-26T07:41:25Z")

</div>

Hi!! I have faced a problem in loadImage() function, which the p5.js editor doesn’t load a photos by there url, this is the code. function setup() { createCanvas(120, 120); } function draw() { let gender = “Female”…

---

## [Despite translation my square isn't rotating properly](https://discourse.processing.org/t/despite-translation-my-square-isnt-rotating-properly/34831)

<div class="topic-metadata">

**Author:** [@goldorak](https://discourse.processing.org/u/goldorak)\
**Replies:** 2\
**Last updated:** [January 25, 2022, 11:52am UTC](https://discourse.processing.org/t/despite-translation-my-square-isnt-rotating-properly/34831 "2022-01-25T11:52:25Z")

</div>

Hi, I’ve been struggling with rotating my squares. My rectmode is centered and I use degrees. I also understood I need to use translation as well but my square isn’t rotating properly. Here is my very simple code fun…

---

## [Playing sound files in p5.js](https://discourse.processing.org/t/playing-sound-files-in-p5-js/28286)

<div class="topic-metadata">

**Author:** [@Annushka123](https://discourse.processing.org/u/Annushka123)\
**Replies:** 10\
**Last updated:** [January 23, 2022, 10:30pm UTC](https://discourse.processing.org/t/playing-sound-files-in-p5-js/28286 "2022-01-23T22:30:56Z")

</div>

Hi! I’m working through the p5.js course in Kadenze and I’m trying to play an audio sample while my mouse hovers over a section of my sketch: if (mouseX \> 600 && mouseX \<700){ sound\_out.play(); } else { sound\_out.st…

---

## [Background change based on music](https://discourse.processing.org/t/background-change-based-on-music/34794)

<div class="topic-metadata">

**Author:** [@Alix](https://discourse.processing.org/u/Alix)\
**Replies:** 3\
**Last updated:** [January 23, 2022, 3:56pm UTC](https://discourse.processing.org/t/background-change-based-on-music/34794 "2022-01-23T15:56:39Z")

</div>

Hey, I’ve been desperately searching for a solution. Is there any possibility that the background color changes from white to red, regarding the amplitude as how the circle does from black in this example? Thank you! …

---

## [How to connect/trigger elements in specific mouse-pressed combinations in p5.js (piano)](https://discourse.processing.org/t/how-to-connect-trigger-elements-in-specific-mouse-pressed-combinations-in-p5-js-piano/34758)

<div class="topic-metadata">

**Author:** [@Javrimir](https://discourse.processing.org/u/Javrimir)\
**Replies:** 11\
**Last updated:** [January 22, 2022, 4:42pm UTC](https://discourse.processing.org/t/how-to-connect-trigger-elements-in-specific-mouse-pressed-combinations-in-p5-js-piano/34758 "2022-01-22T16:42:56Z")

</div>

Hello everyone, I’m trying to visualize music in a concrete way: I built a keyboard with 60 keys, which I positioned at the bottom of the canvas. The whole visualization of every single key pressed, is supposed to be a…

---

## [Firefox windowWidth and windowHeight return values that are slightly too high](https://discourse.processing.org/t/firefox-windowwidth-and-windowheight-return-values-that-are-slightly-too-high/34769)

<div class="topic-metadata">

**Author:** [@mtavictim](https://discourse.processing.org/u/mtavictim)\
**Replies:** 2\
**Last updated:** [January 22, 2022, 12:24am UTC](https://discourse.processing.org/t/firefox-windowwidth-and-windowheight-return-values-that-are-slightly-too-high/34769 "2022-01-22T00:24:29Z")

</div>

I’ve recently gotten back into p5 after a few months. In that time, I’ve switched browsers from Brave (a Chromium derivative, if I remember correctly) to Firefox. When I opened a p5 project from a while ago in Firefox, I…

---

## [Filling in a triangle with points](https://discourse.processing.org/t/filling-in-a-triangle-with-points/34765)

<div class="topic-metadata">

**Author:** [@goldorak](https://discourse.processing.org/u/goldorak)\
**Replies:** 3\
**Last updated:** [January 21, 2022, 10:51pm UTC](https://discourse.processing.org/t/filling-in-a-triangle-with-points/34765 "2022-01-21T22:51:17Z")

</div>

Hello, I’m drawing triangles. I’d like to fill in these triangles with lots of points. I believe in order to do so I’d need to know the coordinates of each point belonging within the triangle. I could find solutions …

---

## [Help in understanding the tensorflow error for mediapipe hands estimation](https://discourse.processing.org/t/help-in-understanding-the-tensorflow-error-for-mediapipe-hands-estimation/34638)

<div class="topic-metadata">

**Author:** [@Timo](https://discourse.processing.org/u/Timo)\
**Replies:** 15\
**Last updated:** [January 21, 2022, 12:01pm UTC](https://discourse.processing.org/t/help-in-understanding-the-tensorflow-error-for-mediapipe-hands-estimation/34638 "2022-01-21T12:01:58Z")

</div>

Hi, I have been trying to follow the mediapipe documentation and associated tutorial to check if the handpose estimation is working. I seem to get into the following error . I am unable to understand what is the reason f…

---

## [Unable to get console output with p5.js mode in Processing IDE](https://discourse.processing.org/t/unable-to-get-console-output-with-p5-js-mode-in-processing-ide/34691)

<div class="topic-metadata">

**Author:** [@svan](https://discourse.processing.org/u/svan)\
**Replies:** 10\
**Last updated:** [January 21, 2022, 7:54am UTC](https://discourse.processing.org/t/unable-to-get-console-output-with-p5-js-mode-in-processing-ide/34691 "2022-01-21T07:54:36Z")

</div>

For some reason I am unable to get console output in Processing using p5.js mode. Nothing shows up in the Processing window or in the web output screen. function setup() { createCanvas(400, 400); background(220); …

---

## [CodePen Problem - Finance library blocking P5](https://discourse.processing.org/t/codepen-problem-finance-library-blocking-p5/34279)

<div class="topic-metadata">

**Author:** [@rms2256](https://discourse.processing.org/u/rms2256)\
**Replies:** 6\
**Last updated:** [January 19, 2022, 7:37pm UTC](https://discourse.processing.org/t/codepen-problem-finance-library-blocking-p5/34279 "2022-01-19T19:37:43Z")

</div>

Programming a stock charting program with CodePen has not been without errors. My program (here), appears to be encountering an error with running both the Finance API (Finnhub.io) and P5. Particularly, only the financ…

---

## [How do i use 2 loops to place a image in each circles?](https://discourse.processing.org/t/how-do-i-use-2-loops-to-place-a-image-in-each-circles/34723)

<div class="topic-metadata">

**Author:** [@Anjel](https://discourse.processing.org/u/Anjel)\
**Replies:** 1\
**Last updated:** [January 19, 2022, 9:59am UTC](https://discourse.processing.org/t/how-do-i-use-2-loops-to-place-a-image-in-each-circles/34723 "2022-01-19T09:59:32Z")

</div>

I am suppose to insert a image in each circle, which to my understanding i could use this to make a grid for (var j = 0; j \< 4; j++ ) { for (var i=0; i \< 8; i++ ){ image(item, 467 + (i \* 70), 331 + (j \* 60)); } } i…

---

## [P5.js not found as Processing mode?](https://discourse.processing.org/t/p5-js-not-found-as-processing-mode/34662)

<div class="topic-metadata">

**Author:** [@mihnu](https://discourse.processing.org/u/mihnu)\
**Replies:** 10\
**Last updated:** [January 18, 2022, 5:45pm UTC](https://discourse.processing.org/t/p5-js-not-found-as-processing-mode/34662 "2022-01-18T17:45:00Z")

</div>

Sorry if this is an obvious question, but I am having trouble finding the p5.js mode from the PDE’s “mode” section. I was able to find and use it before with a previous version of Processing but not anymore. Is it delaye…

---

## [Buttons and input boxes](https://discourse.processing.org/t/buttons-and-input-boxes/34711)

<div class="topic-metadata">

**Author:** [@parichko](https://discourse.processing.org/u/parichko)\
**Replies:** 2\
**Last updated:** [January 18, 2022, 8:59am UTC](https://discourse.processing.org/t/buttons-and-input-boxes/34711 "2022-01-18T08:59:26Z")

</div>

I am not really sure how buttons and input boxes functions work. I know for each button you have to create a function but I don’t know how to make them work. If someone can give a simple example of a button that changes …

---

## [How to stop a p5js script from looping print()](https://discourse.processing.org/t/how-to-stop-a-p5js-script-from-looping-print/34705)

<div class="topic-metadata">

**Author:** [@Ruimao96](https://discourse.processing.org/u/Ruimao96)\
**Replies:** 1\
**Last updated:** [January 18, 2022, 3:55am UTC](https://discourse.processing.org/t/how-to-stop-a-p5js-script-from-looping-print/34705 "2022-01-18T03:55:50Z")

</div>

so I accidentally put print() in my script and it start trying to save the picture nonstop. How do I stop this? of course I know how using noloop can make draw only run once, but that is not my question. If the saving ta…

---

## [createVector error : Cannot set properties of undefined](https://discourse.processing.org/t/createvector-error-cannot-set-properties-of-undefined/34702)

<div class="topic-metadata">

**Author:** [@Ruimao96](https://discourse.processing.org/u/Ruimao96)\
**Replies:** 2\
**Last updated:** [January 18, 2022, 3:18am UTC](https://discourse.processing.org/t/createvector-error-cannot-set-properties-of-undefined/34702 "2022-01-18T03:18:35Z")

</div>

a really simple script trying to use createvector to make a sliding box. let b; function setup() { createCanvas(800, 800); b=new box(); b.startp(200,500,400,700) b.slided(20,100,40,80) } function draw() { backgr…

---

## [Question about mouseX and mouseY](https://discourse.processing.org/t/question-about-mousex-and-mousey/34620)

<div class="topic-metadata">

**Author:** [@vasco](https://discourse.processing.org/u/vasco)\
**Replies:** 4\
**Last updated:** [January 18, 2022, 2:04am UTC](https://discourse.processing.org/t/question-about-mousex-and-mousey/34620 "2022-01-18T02:04:13Z")

</div>

hello guys Working on a project with p5js and getting a curious result with mouseX and mouseY So I have this code: if(tx \> 0 && tx \< 500 && ty \> 0 && ty \< 500 && myp5.mouseIsPressed && (pty != ty || ptx != tx)){ …

---

## [How to have multiple drawingcontext clip](https://discourse.processing.org/t/how-to-have-multiple-drawingcontext-clip/34696)

<div class="topic-metadata">

**Author:** [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Replies:** 0\
**Last updated:** [January 17, 2022, 9:41pm UTC](https://discourse.processing.org/t/how-to-have-multiple-drawingcontext-clip/34696 "2022-01-17T21:41:54Z")

</div>

I’m trying to have multiple shapes on the canvas clip other shapes. I tried two methods that don’t work: First is to put the multiple shape masks on the canvas into a function. the result is only the last shape will ac…

---

## [Transparency fails looking at backside of 3D shape](https://discourse.processing.org/t/transparency-fails-looking-at-backside-of-3d-shape/34627)

<div class="topic-metadata">

**Author:** [@dy1](https://discourse.processing.org/u/dy1)\
**Replies:** 12\
**Last updated:** [January 17, 2022, 8:51pm UTC](https://discourse.processing.org/t/transparency-fails-looking-at-backside-of-3d-shape/34627 "2022-01-17T20:51:34Z")

</div>

Hi In 3D (WEBGL) I’m drawing a rect with a color that includes an alpha. When I look at that shape from the “front” the alpha works as expected… and I can adjust the rect’s transparency. However, when I rotate the rect …

---

## [How to change name of tab in openprocessing.org IDE?](https://discourse.processing.org/t/how-to-change-name-of-tab-in-openprocessing-org-ide/34676)

<div class="topic-metadata">

**Author:** [@kenjones](https://discourse.processing.org/u/kenjones)\
**Replies:** 2\
**Last updated:** [January 17, 2022, 5:10pm UTC](https://discourse.processing.org/t/how-to-change-name-of-tab-in-openprocessing-org-ide/34676 "2022-01-17T17:10:52Z")

</div>

I know how to create a new tab in the openprocessing.org IDE by clicking the button labeled “+” to the right of the names of the tabs above the code editor. But, by default, the tabs are named “tabx”, where “x” is a nume…

---

## [How to save a sketch a local image or a font?](https://discourse.processing.org/t/how-to-save-a-sketch-a-local-image-or-a-font/34672)

<div class="topic-metadata">

**Author:** [@Pierre1](https://discourse.processing.org/u/Pierre1)\
**Replies:** 11\
**Last updated:** [January 17, 2022, 2:47pm UTC](https://discourse.processing.org/t/how-to-save-a-sketch-a-local-image-or-a-font/34672 "2022-01-17T14:47:17Z")

</div>

After Submit and Save (which work well) , I can’t see how to upload either an image or a font.

---

## [Allowed to remove background in p5.js iframe embeds?](https://discourse.processing.org/t/allowed-to-remove-background-in-p5-js-iframe-embeds/34675)

<div class="topic-metadata">

**Author:** [@pinto](https://discourse.processing.org/u/pinto)\
**Replies:** 0\
**Last updated:** [January 16, 2022, 5:18pm UTC](https://discourse.processing.org/t/allowed-to-remove-background-in-p5-js-iframe-embeds/34675 "2022-01-16T17:18:47Z")

</div>

Hi there! I was wondering if it’s possible to remove the gray background + p5.js bar, and embed only our p5.js canvas as an iframe on another site. My sketch also does not react to mouse movement when embedded in an ifr…

---

## [How to save your p5.js sketch as a GIF using CCapture.js](https://discourse.processing.org/t/how-to-save-your-p5-js-sketch-as-a-gif-using-ccapture-js/1264)

<div class="topic-metadata">

**Author:** [@okliis](https://discourse.processing.org/u/okliis)\
**Replies:** 7\
**Last updated:** [January 15, 2022, 11:26pm UTC](https://discourse.processing.org/t/how-to-save-your-p5-js-sketch-as-a-gif-using-ccapture-js/1264 "2022-01-15T23:26:51Z")

</div>

Hello everyone, I recently figured out how to save my canvas as a GIF using Ccapture.js - something I’ve been trying to do since I started using p5.js a few months ago - so I made a video on how to get it working with a…

---

## [Displaying an image web-editor openprocessing.org](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563)

<div class="topic-metadata">

**Author:** [@kenjones](https://discourse.processing.org/u/kenjones)\
**Replies:** 36\
**Last updated:** [January 13, 2022, 5:58am UTC](https://discourse.processing.org/t/displaying-an-image-web-editor-openprocessing-org/34563 "2022-01-13T05:58:04Z")

</div>

I am simply trying to display an image and I’m not getting what I expect. The 1624 × 1934 image is displayed as a small brown square in the middle of the screen. I have two questions: Why isn’t the image displayed in t…

---

## [Simple trajectory calculating](https://discourse.processing.org/t/simple-trajectory-calculating/34413)

<div class="topic-metadata">

**Author:** [@Coyote35](https://discourse.processing.org/u/Coyote35)\
**Replies:** 5\
**Last updated:** [January 12, 2022, 10:40pm UTC](https://discourse.processing.org/t/simple-trajectory-calculating/34413 "2022-01-12T22:40:53Z")

</div>

Hi, I’m trying to develop a little sketch that manages the trajectory of balls that fall from the top of the canvas, as shown on this diagram. I want each ball thrown from the top of the canvas to have a trajectory tha…

---

## [Creating graphics objects after setup](https://discourse.processing.org/t/creating-graphics-objects-after-setup/34455)

<div class="topic-metadata">

**Author:** [@modusponens](https://discourse.processing.org/u/modusponens)\
**Replies:** 4\
**Last updated:** [January 12, 2022, 4:28am UTC](https://discourse.processing.org/t/creating-graphics-objects-after-setup/34455 "2022-01-12T04:28:40Z")

</div>

I’m having trouble making graphics objects after the sketch is already running. Is this not something I’m supposed to be able to do? In this sketch, you can press the spacebar to create a blue square or you can press th…

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

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