# p5.js

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

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

**Page:** 99

---

## [Project Question](https://discourse.processing.org/t/project-question/9352)

<div class="topic-metadata">

**Author:** [@ixd](https://discourse.processing.org/u/ixd)\
**Replies:** 16\
**Last updated:** [March 17, 2019, 1:01am UTC](https://discourse.processing.org/t/project-question/9352 "2019-03-17T01:01:56Z")

</div>

Hi, I’m trying to make it so that the the numbers 1-36 (from the array up top) are listed inside each ellipse (so ellipse 1 would have the number 1, the ellipse next to it would have the number 2, etc. all the way up to…

---

## [Project Help Adding Sound](https://discourse.processing.org/t/project-help-adding-sound/9368)

<div class="topic-metadata">

**Author:** [@ixd](https://discourse.processing.org/u/ixd)\
**Replies:** 1\
**Last updated:** [March 17, 2019, 4:36am UTC](https://discourse.processing.org/t/project-help-adding-sound/9368 "2019-03-17T04:36:22Z")

</div>

Trying to make it so that when I press on number 1, the first sound (rollingsuitcase) is played. If you click again on the number 1, the sound should stop. Number 2 will make second sound (airportambiance) play. What’s t…

---

## [Web Editor : not defined width](https://discourse.processing.org/t/web-editor-not-defined-width/8240)

<div class="topic-metadata">

**Author:** [@Pilou](https://discourse.processing.org/u/Pilou)\
**Replies:** 12\
**Last updated:** [March 16, 2019, 2:15am UTC](https://discourse.processing.org/t/web-editor-not-defined-width/8240 "2019-03-16T02:15:56Z")

</div>

When I drop an image to the screen the width is not defined…in the function “draw” part ! https://editor.p5js.org/Pilou/sketches/qEPc9d1YD I have not this problem when an image is preloaded! https://editor.p5js.org/Pi…

---

## [Convert Processing to p5.js](https://discourse.processing.org/t/convert-processing-to-p5-js/9291)

<div class="topic-metadata">

**Author:** [@julia\_v](https://discourse.processing.org/u/julia_v)\
**Replies:** 5\
**Last updated:** [March 15, 2019, 6:02am UTC](https://discourse.processing.org/t/convert-processing-to-p5-js/9291 "2019-03-15T06:02:17Z")

</div>

Can’t figure out why some code doesn’t work… I highlighted what exactly doesn’t work in the code below… Please please help me to make the code working\* /\* @pjs preload="emma.jpg", "obama.jpg", "clint.jpg"; \*/ var maxT…

---

## [What means x\[\] = \[\] in p5.js](https://discourse.processing.org/t/what-means-x-in-p5-js/9287)

<div class="topic-metadata">

**Author:** [@vjjv](https://discourse.processing.org/u/vjjv)\
**Replies:** 1\
**Last updated:** [March 14, 2019, 1:54am UTC](https://discourse.processing.org/t/what-means-x-in-p5-js/9287 "2019-03-14T01:54:34Z")

</div>

hi! im trying to translate some code from p5.js var st = \[\]; function setup(){ for (var i=0; i\<maxW; i++) { st\[i\]=\[\]; // what means this? bright\[i\]=\[\]; } } what means ? st is a two dimensional array!

---

## [Unable to get matter.js working again](https://discourse.processing.org/t/unable-to-get-matter-js-working-again/9275)

<div class="topic-metadata">

**Author:** [@Code\_Caffeine](https://discourse.processing.org/u/Code_Caffeine)\
**Replies:** 2\
**Last updated:** [March 13, 2019, 8:53pm UTC](https://discourse.processing.org/t/unable-to-get-matter-js-working-again/9275 "2019-03-13T20:53:42Z")

</div>

I am very new to the matter.js library, and I have already made a project using it, which works fine. However, I am now attempting to create another project but cannot get the same results. It seems like I have tried eve…

---

## [How to circle pack ellipses of pre-defined sizes in p5.js](https://discourse.processing.org/t/how-to-circle-pack-ellipses-of-pre-defined-sizes-in-p5-js/8891)

<div class="topic-metadata">

**Author:** [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Replies:** 5\
**Last updated:** [March 13, 2019, 8:39pm UTC](https://discourse.processing.org/t/how-to-circle-pack-ellipses-of-pre-defined-sizes-in-p5-js/8891 "2019-03-13T20:39:05Z")

</div>

I saw the coding train tutorials on how to grow circles until they touch each other in circle packing, but if I already have some circles of specific sizes, say 10 circles of the sizes in the range of random(5,10), how c…

---

## [Bouncing ball hang up (The Nature of Code)](https://discourse.processing.org/t/bouncing-ball-hang-up-the-nature-of-code/8733)

<div class="topic-metadata">

**Author:** [@steinlav](https://discourse.processing.org/u/steinlav)\
**Replies:** 9\
**Last updated:** [March 13, 2019, 5:35pm UTC](https://discourse.processing.org/t/bouncing-ball-hang-up-the-nature-of-code/8733 "2019-03-13T17:35:53Z")

</div>

Example 2.3 The Nature of Code The code: \[https://editor.p5js.org/steinlav/sketches/Y8qlyS9I6\] In the method checkEdges(), line 84 this.pos.y = height; () Problem: Why do the ball not loose bouncer over time when li…

---

## [How to detect simultaneous keypress in p5.js](https://discourse.processing.org/t/how-to-detect-simultaneous-keypress-in-p5-js/9264)

<div class="topic-metadata">

**Author:** [@Jithin](https://discourse.processing.org/u/Jithin)\
**Replies:** 2\
**Last updated:** [March 13, 2019, 1:34pm UTC](https://discourse.processing.org/t/how-to-detect-simultaneous-keypress-in-p5-js/9264 "2019-03-13T13:34:54Z")

</div>

I’m trying to implement an undo functionality in a sketch. I need to detect simultaneous key press in p5. i.e ‘Ctrl’ and ‘z’ together? Is it possible?

---

## [Dynamic image masking, I made it! But how can I improve it?](https://discourse.processing.org/t/dynamic-image-masking-i-made-it-but-how-can-i-improve-it/9040)

<div class="topic-metadata">

**Author:** [@sundftig](https://discourse.processing.org/u/sundftig)\
**Replies:** 11\
**Last updated:** [March 13, 2019, 6:17am UTC](https://discourse.processing.org/t/dynamic-image-masking-i-made-it-but-how-can-i-improve-it/9040 "2019-03-13T06:17:18Z")

</div>

Hi everyone, this is my first post in this forum and I hope I will get some good help from you here! I´ve been looking for a way to mask images with a custom made shape in both Processing and p5.js but I couldn’t find a…

---

## [How does p5, or JS handle decimal drawing on canvas?](https://discourse.processing.org/t/how-does-p5-or-js-handle-decimal-drawing-on-canvas/9196)

<div class="topic-metadata">

**Author:** [@Milky](https://discourse.processing.org/u/Milky)\
**Replies:** 9\
**Last updated:** [March 12, 2019, 11:55pm UTC](https://discourse.processing.org/t/how-does-p5-or-js-handle-decimal-drawing-on-canvas/9196 "2019-03-12T23:55:51Z")

</div>

I am very confused about how this works. I always thought about pixels as whole numbers, and I was writing my game having this constantly in mind. I thought, okay this has to work with whole numbers, I can’t have decimal…

---

## [Need help with saveCanvas](https://discourse.processing.org/t/need-help-with-savecanvas/9221)

<div class="topic-metadata">

**Author:** [@grebjack](https://discourse.processing.org/u/grebjack)\
**Replies:** 2\
**Last updated:** [March 12, 2019, 11:45pm UTC](https://discourse.processing.org/t/need-help-with-savecanvas/9221 "2019-03-12T23:45:46Z")

</div>

I’m trying to generate a series of 12 related images and save each of them. At first I had the 12 generated in a for loop, but that routinely only got me 10 images saved and I had seen something in the saveFrames docume…

---

## [Error with webacm](https://discourse.processing.org/t/error-with-webacm/9241)

<div class="topic-metadata">

**Author:** [@kcuf1623](https://discourse.processing.org/u/kcuf1623)\
**Replies:** 0\
**Last updated:** [March 12, 2019, 5:36pm UTC](https://discourse.processing.org/t/error-with-webacm/9241 "2019-03-12T17:36:00Z")

</div>

Hello everyone! I wanted to use webcam with p5.js But i don’t see video at all and got error message in chrome console like this. Uncaught TypeError: Failed to execute ‘createObjectURL’ on ‘URL’: No function was found…

---

## [New to P5 - basic object question](https://discourse.processing.org/t/new-to-p5-basic-object-question/9207)

<div class="topic-metadata">

**Author:** [@cryptogee](https://discourse.processing.org/u/cryptogee)\
**Replies:** 3\
**Last updated:** [March 12, 2019, 5:11pm UTC](https://discourse.processing.org/t/new-to-p5-basic-object-question/9207 "2019-03-12T17:11:55Z")

</div>

Hi, I’ve just discovered P5 today, I have some coding experience, however it is mainly theoretical/following along. Now I’m trying to make it on my own! Okay, so I have drawn a basic background with a couple of ellipses…

---

## [blendMode(NORMAL)](https://discourse.processing.org/t/blendmode-normal/9093)

<div class="topic-metadata">

**Author:** [@gregorfa](https://discourse.processing.org/u/gregorfa)\
**Replies:** 2\
**Last updated:** [March 10, 2019, 4:40pm UTC](https://discourse.processing.org/t/blendmode-normal/9093 "2019-03-10T16:40:38Z")

</div>

blendMode(NORMAL) doesn’t seem to work here. If you use another mode (DARKEST for example) it will change, but revert to normal does not seem to work. What am I missing? function setup() { createCanvas(400, 400); } fun…

---

## [Need some guidance to convert processing code to p5.js code](https://discourse.processing.org/t/need-some-guidance-to-convert-processing-code-to-p5-js-code/9164)

<div class="topic-metadata">

**Author:** [@keshavv\_123](https://discourse.processing.org/u/keshavv_123)\
**Replies:** 4\
**Last updated:** [March 10, 2019, 4:25pm UTC](https://discourse.processing.org/t/need-some-guidance-to-convert-processing-code-to-p5-js-code/9164 "2019-03-10T16:25:18Z")

</div>

Hi everyone, I’m trying to convert the processing code into the p5.js code but I didn’t understand how to convert the processing class and object into the p5.js code. can anyone please help me?

---

## [Can somebody help me understand this awesome code?](https://discourse.processing.org/t/can-somebody-help-me-understand-this-awesome-code/9153)

<div class="topic-metadata">

**Author:** [@sorenkirk](https://discourse.processing.org/u/sorenkirk)\
**Replies:** 4\
**Last updated:** [March 10, 2019, 4:04pm UTC](https://discourse.processing.org/t/can-somebody-help-me-understand-this-awesome-code/9153 "2019-03-10T16:04:29Z")

</div>

I came across a really cool sketch in Open Processing. But it’s uncommented, and I’d like to better understand what’s going on. (I am really new to p5.js, but have been using Processing for a few months). Anyway, I was …

---

## [Mouse coordinates not working in the area of the screen where there is a form](https://discourse.processing.org/t/mouse-coordinates-not-working-in-the-area-of-the-screen-where-there-is-a-form/9024)

<div class="topic-metadata">

**Author:** [@davide93](https://discourse.processing.org/u/davide93)\
**Replies:** 2\
**Last updated:** [March 8, 2019, 5:51pm UTC](https://discourse.processing.org/t/mouse-coordinates-not-working-in-the-area-of-the-screen-where-there-is-a-form/9024 "2019-03-08T17:51:52Z")

</div>

Hi there, I’m trying to use processing for an html5 page. I want to draw lines for all the page on mouse moving. When I move the mouse on the area of the page in which there is a form the lines are not drawn. I would…

---

## [pointLight not working with custom shapes or I'm doing it wrong](https://discourse.processing.org/t/pointlight-not-working-with-custom-shapes-or-im-doing-it-wrong/9101)

<div class="topic-metadata">

**Author:** [@fragdemented](https://discourse.processing.org/u/fragdemented)\
**Replies:** 2\
**Last updated:** [March 8, 2019, 5:05am UTC](https://discourse.processing.org/t/pointlight-not-working-with-custom-shapes-or-im-doing-it-wrong/9101 "2019-03-08T05:05:04Z")

</div>

Hello Everybody! I’m new here, but I am in love with p5js too! I’m trying to work with lighting in a 3D space. I can get it to work with a sphere, but it’s not working with any custom shapes that I make. Is this a bug o…

---

## [P5.sound: Connecting an Oscillator to a Gain](https://discourse.processing.org/t/p5-sound-connecting-an-oscillator-to-a-gain/9097)

<div class="topic-metadata">

**Author:** [@wvnl](https://discourse.processing.org/u/wvnl)\
**Replies:** 0\
**Last updated:** [March 7, 2019, 9:55pm UTC](https://discourse.processing.org/t/p5-sound-connecting-an-oscillator-to-a-gain/9097 "2019-03-07T21:55:56Z")

</div>

I’m unsure how the p5 gain node works with an oscillator connecting to it, I’m not having any luck using either connect() or setInput(). The following just ignores the gain node: var osc; var gain; function setup() { …

---

## [Is it possible to tile repeat a texture?](https://discourse.processing.org/t/is-it-possible-to-tile-repeat-a-texture/8044)

<div class="topic-metadata">

**Author:** [@Quilliam](https://discourse.processing.org/u/Quilliam)\
**Replies:** 3\
**Last updated:** [March 7, 2019, 8:20pm UTC](https://discourse.processing.org/t/is-it-possible-to-tile-repeat-a-texture/8044 "2019-03-07T20:20:05Z")

</div>

I’m trying to build a 3D model class using WebGL mode. I understand how create boxes with textures applied, but not sure how I would achieve essentially the effect of background-repeat: repeat-y;. I’d have control of the…

---

## [How to code this shape?](https://discourse.processing.org/t/how-to-code-this-shape/8882)

<div class="topic-metadata">

**Author:** [@Vennila](https://discourse.processing.org/u/Vennila)\
**Replies:** 1\
**Last updated:** [March 7, 2019, 5:07pm UTC](https://discourse.processing.org/t/how-to-code-this-shape/8882 "2019-03-07T17:07:23Z")

</div>

Hi, I’m practicing a sketch on p5.js. I have attached below a small cropped portion of the complete image. I want to draw the highlighted image. If I use ellipse function, it fills color on the inside portion of the ell…

---

## [Help please my stuff is gone](https://discourse.processing.org/t/help-please-my-stuff-is-gone/9061)

<div class="topic-metadata">

**Author:** [@firelordhunter](https://discourse.processing.org/u/firelordhunter)\
**Replies:** 4\
**Last updated:** [March 7, 2019, 6:06am UTC](https://discourse.processing.org/t/help-please-my-stuff-is-gone/9061 "2019-03-07T06:06:18Z")

</div>

so i longed in and all of my stuff is gone i tried reloged and restarted my pc and its still not there please help ps i am new to all of this

---

## [I can't make the objects in an array track the mouse position while also moving towards a predefined spot on the canvas](https://discourse.processing.org/t/i-cant-make-the-objects-in-an-array-track-the-mouse-position-while-also-moving-towards-a-predefined-spot-on-the-canvas/8955)

<div class="topic-metadata">

**Author:** [@nielsKoel](https://discourse.processing.org/u/nielsKoel)\
**Replies:** 4\
**Last updated:** [March 5, 2019, 1:26pm UTC](https://discourse.processing.org/t/i-cant-make-the-objects-in-an-array-track-the-mouse-position-while-also-moving-towards-a-predefined-spot-on-the-canvas/8955 "2019-03-05T13:26:34Z")

</div>

Hi all, I’m trying to build a clock. The core idea is to have the actual time track the mouse behavior. As time passed, each past timestamp will get placed behind the current time, creating a visible trail of passed tim…

---

## [My code is "crashing" the editor. What is wrong?](https://discourse.processing.org/t/my-code-is-crashing-the-editor-what-is-wrong/8939)

<div class="topic-metadata">

**Author:** [@Lillbre](https://discourse.processing.org/u/Lillbre)\
**Replies:** 6\
**Last updated:** [March 5, 2019, 5:39am UTC](https://discourse.processing.org/t/my-code-is-crashing-the-editor-what-is-wrong/8939 "2019-03-05T05:39:23Z")

</div>

I made a code for a magnifier glass in p5.js. It works but the editor shuts down after a short time. Can someone please look at it and see what is wrong? The code in p5.js editor

---

## [“Robot 4: Translate, Rotate, Scale” (page 174) - added easing](https://discourse.processing.org/t/robot-4-translate-rotate-scale-page-174-added-easing/8703)

<div class="topic-metadata">

**Author:** [@dougouverson](https://discourse.processing.org/u/dougouverson)\
**Replies:** 2\
**Last updated:** [March 4, 2019, 1:10pm UTC](https://discourse.processing.org/t/robot-4-translate-rotate-scale-page-174-added-easing/8703 "2019-03-04T13:10:07Z")

</div>

I saw that easing variable was added, but no easing code was included so that easing happened. so, I modified the first few lines of function draw () to make easing happen: function draw() { var targetX = mouseX; x …

---

## [mouseWheel and other callback functions not working in Instance Mode](https://discourse.processing.org/t/mousewheel-and-other-callback-functions-not-working-in-instance-mode/5436)

<div class="topic-metadata">

**Author:** [@FedFod](https://discourse.processing.org/u/FedFod)\
**Replies:** 9\
**Last updated:** [March 3, 2019, 11:55pm UTC](https://discourse.processing.org/t/mousewheel-and-other-callback-functions-not-working-in-instance-mode/5436 "2019-03-03T23:55:06Z")

</div>

After converting my code into instance mode, all the callback functions I had in place are not working anymore: for example mouseWheel, mousePressed, windowResized and so on. Should those functions reside inside the ins…

---

## [Where is the error in my code?](https://discourse.processing.org/t/where-is-the-error-in-my-code/8878)

<div class="topic-metadata">

**Author:** [@ximi](https://discourse.processing.org/u/ximi)\
**Replies:** 1\
**Last updated:** [March 3, 2019, 6:22am UTC](https://discourse.processing.org/t/where-is-the-error-in-my-code/8878 "2019-03-03T06:22:28Z")

</div>

https://editor.p5js.org/eternity95097@gmail.com/sketches/TvAwrnaMB

---

## [How to draw circles tangent to each other at random points](https://discourse.processing.org/t/how-to-draw-circles-tangent-to-each-other-at-random-points/8869)

<div class="topic-metadata">

**Author:** [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Replies:** 3\
**Last updated:** [March 3, 2019, 5:12am UTC](https://discourse.processing.org/t/how-to-draw-circles-tangent-to-each-other-at-random-points/8869 "2019-03-03T05:12:10Z")

</div>

I intend to draw circles tangent to each other at random points with no looping, but so far it doesn’t work as expected. let r = 20; function setup() { createCanvas(600, 600); } function draw() { background(…

---

## [P5js web editor - assets folder](https://discourse.processing.org/t/p5js-web-editor-assets-folder/8863)

<div class="topic-metadata">

**Author:** [@boneman](https://discourse.processing.org/u/boneman)\
**Replies:** 4\
**Last updated:** [March 2, 2019, 8:08pm UTC](https://discourse.processing.org/t/p5js-web-editor-assets-folder/8863 "2019-03-02T20:08:36Z")

</div>

SOLVED The assets in the sketch folder don’t seem to be loading. The sketch hasn’t been edited for weeks, and was working fine until a couple days ago. I wonder if there is some sort of expiration date on the images in …

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

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