# p5.js **URL:** https://discourse.processing.org/c/p5js/10.md?page=41 [Latest](https://discourse.processing.org/latest.md) · [Categories](https://discourse.processing.org/categories.md) · [Tags](https://discourse.processing.org/tags.md) **Page:** 42 --- ## [How to set canvas size to 100% of a container div?](https://discourse.processing.org/t/how-to-set-canvas-size-to-100-of-a-container-div/18734)
**Author:** [@spoke123](https://discourse.processing.org/u/spoke123)\ **Replies:** 5\ **Last updated:** [July 1, 2021, 1:42pm UTC](https://discourse.processing.org/t/how-to-set-canvas-size-to-100-of-a-container-div/18734 "2021-07-01T13:42:51Z")
Hi everyone! How could I go about setting my canvas size to be 100% width and height of its container div, so that I could position and scale the sketch via the div with CSS and have it react to window size adjustment? … --- ## [Can't select \ element in DOM bug](https://discourse.processing.org/t/cant-select-span-element-in-dom-bug/30980)
**Author:** [@griff](https://discourse.processing.org/u/griff)\ **Replies:** 2\ **Last updated:** [June 30, 2021, 4:41pm UTC](https://discourse.processing.org/t/cant-select-span-element-in-dom-bug/30980 "2021-06-30T16:41:34Z")
I am having trouble using select() to get a span element in the DOM. It looks like it is a bug or I’m doing something wrong. Here is the link: https://editor.p5js.org/im-griff/sketches/D7tf9TAC0 Or below here is the cod… --- ## [Problems with converting a P5.js sketch to Processing](https://discourse.processing.org/t/problems-with-converting-a-p5-js-sketch-to-processing/30963)
**Author:** [@lmato](https://discourse.processing.org/u/lmato)\ **Replies:** 4\ **Last updated:** [June 29, 2021, 5:01pm UTC](https://discourse.processing.org/t/problems-with-converting-a-p5-js-sketch-to-processing/30963 "2021-06-29T17:01:47Z")
Hi, we have to research about particles and I found one sketch that I liked, but noticed its on P5.js. I’ve trying to open remake this sketch in processing but i’m having a really hard time doing it (3 and half hours unt… --- ## [Round() produces NaN](https://discourse.processing.org/t/round-produces-nan/30943)
**Author:** [@maze](https://discourse.processing.org/u/maze)\ **Replies:** 3\ **Last updated:** [June 29, 2021, 9:36am UTC](https://discourse.processing.org/t/round-produces-nan/30943 "2021-06-29T09:36:13Z")
When rounding very small numbers to some decimal places, e.g round(1.234567e-14, 2) , the result is NaN. Not specifying decimals - round(1.234567e-14) - gives a correct result of 0. Does someone know if that is a … --- ## [P5.js editor on iPad](https://discourse.processing.org/t/p5-js-editor-on-ipad/30867)
**Author:** [@Lillbre](https://discourse.processing.org/u/Lillbre)\ **Replies:** 1\ **Last updated:** [June 29, 2021, 9:29am UTC](https://discourse.processing.org/t/p5-js-editor-on-ipad/30867 "2021-06-29T09:29:34Z")
When I try to use the p5.js editor on iPad the preview just show “Loading” both in Chrome and Safari. Is there a temporary error or has something changed with the editor so it doesn’t work on iPads any more? --- ## [Stuck with trying to remove points close to the edge, how can I do this?](https://discourse.processing.org/t/stuck-with-trying-to-remove-points-close-to-the-edge-how-can-i-do-this/30939)
**Author:** [@alt](https://discourse.processing.org/u/alt)\ **Replies:** 1\ **Last updated:** [June 28, 2021, 8:03pm UTC](https://discourse.processing.org/t/stuck-with-trying-to-remove-points-close-to-the-edge-how-can-i-do-this/30939 "2021-06-28T20:03:44Z")
I have a problem, I’m trying to remove “stations” or points less than a certain length from the edge, let’s say, 120px from the edge. Now, I tried using a function that removes the stations if they get too close, but tha… --- ## [P5 fft data without .play()? Is it is possible?](https://discourse.processing.org/t/p5-fft-data-without-play-is-it-is-possible/30932)
**Author:** [@atagger](https://discourse.processing.org/u/atagger)\ **Replies:** 5\ **Last updated:** [June 27, 2021, 7:15pm UTC](https://discourse.processing.org/t/p5-fft-data-without-play-is-it-is-possible/30932 "2021-06-27T19:15:20Z")
Is there a function or way to use the fft object without playing the sound? For example, using a loop to get the data out of the audio source before a sound is played? I know there are tools out there that can generate .… --- ## [Load and play sound in p5.js](https://discourse.processing.org/t/load-and-play-sound-in-p5-js/30926)
**Author:** [@cashew](https://discourse.processing.org/u/cashew)\ **Replies:** 4\ **Last updated:** [June 27, 2021, 4:40am UTC](https://discourse.processing.org/t/load-and-play-sound-in-p5-js/30926 "2021-06-27T04:40:30Z")
Hey there, I am new to processing and programming in general. What I want to do is load a sound file in Processing P5.js and play it. Where do I have to put my sound file in, like is there a folder on my Mac I need to… --- ## [Why are there two width and height values in the P5.js sketch canvas tag?](https://discourse.processing.org/t/why-are-there-two-width-and-height-values-in-the-p5-js-sketch-canvas-tag/30930)
**Author:** [@sspboyd](https://discourse.processing.org/u/sspboyd)\ **Replies:** 1\ **Last updated:** [June 27, 2021, 3:50am UTC](https://discourse.processing.org/t/why-are-there-two-width-and-height-values-in-the-p5-js-sketch-canvas-tag/30930 "2021-06-27T03:50:50Z")
The canvas objects created by p5.js have two width and height values. I hadn’t noticed this before and now I’m curious! The example below is the from the p5 editor. \ **Author:** [@LuluLuna](https://discourse.processing.org/u/LuluLuna)\ **Replies:** 2\ **Last updated:** [June 26, 2021, 12:30am UTC](https://discourse.processing.org/t/how-to-play-multiple-of-a-gif-in-in-different-positions-each-loop/30920 "2021-06-26T00:30:36Z") So what I’m trying to do is play a 5 frame gif of a star I made in multiple random positions. And every time the gif is finished playing it then plays in a new random position. This is the code I current have // Variab… --- ## [Object disappears between Setup() and Draw()?](https://discourse.processing.org/t/object-disappears-between-setup-and-draw/30911)
**Author:** [@pbissell](https://discourse.processing.org/u/pbissell)\ **Replies:** 5\ **Last updated:** [June 25, 2021, 8:30pm UTC](https://discourse.processing.org/t/object-disappears-between-setup-and-draw/30911 "2021-06-25T20:30:49Z")
I’m a little perplexed. Is there anything that happens between Setup() and Draw() in the sketch? This is my 20th or so ‘mover’ based project. No arrays on this one, but a basic Mover class (position, velocity, radius, e… --- ## [How to make a variable random in p5.js](https://discourse.processing.org/t/how-to-make-a-variable-random-in-p5-js/30892)
**Author:** [@x06](https://discourse.processing.org/u/x06)\ **Replies:** 5\ **Last updated:** [June 25, 2021, 7:53pm UTC](https://discourse.processing.org/t/how-to-make-a-variable-random-in-p5-js/30892 "2021-06-25T19:53:39Z")
Hi, I’m playing around with a color wheel by kgrnbrg. I want to randomize the segmentCount so the color wheel can change shape and thereby adjusting the number of colors available. I can’t use random in the top and if … --- ## [Texture mapping for lit objects?](https://discourse.processing.org/t/texture-mapping-for-lit-objects/30897)
**Author:** [@modusponens](https://discourse.processing.org/u/modusponens)\ **Replies:** 3\ **Last updated:** [June 25, 2021, 2:17am UTC](https://discourse.processing.org/t/texture-mapping-for-lit-objects/30897 "2021-06-25T02:17:28Z")
Is it possible in p5 to use a texture as a normal map, or as a specular map, etc., and have that affect the way an object appears and interacts with lights? I know that there are functions like normalMaterial and specula… --- ## [Changing shapes for mouseX movement](https://discourse.processing.org/t/changing-shapes-for-mousex-movement/30889)
**Author:** [@afuria](https://discourse.processing.org/u/afuria)\ **Replies:** 5\ **Last updated:** [June 25, 2021, 2:11am UTC](https://discourse.processing.org/t/changing-shapes-for-mousex-movement/30889 "2021-06-25T02:11:01Z")
Hello, I am new to P5.js and have made a simple sketch with an ellipse shape that follows the mouseX movement. I would like to understand how to draw a different shape at mouseX based on three different mouseX movements… --- ## [Image() on a 3d canvas on draw() and setup()](https://discourse.processing.org/t/image-on-a-3d-canvas-on-draw-and-setup/30812)
**Author:** [@JoseMY](https://discourse.processing.org/u/JoseMY)\ **Replies:** 7\ **Last updated:** [June 23, 2021, 6:53am UTC](https://discourse.processing.org/t/image-on-a-3d-canvas-on-draw-and-setup/30812 "2021-06-23T06:53:54Z")
Hi! I’m continuing with my efforts to replicate early works of computer art. I made this nice sketch to replicate Manfred Mohr’s Pascal triangle: http://p5js.sketchpad.cc/NbccVM8Nvk And then I made an animated versio… --- ## [How could I have acces to DOM elements p5.js](https://discourse.processing.org/t/how-could-i-have-acces-to-dom-elements-p5-js/30852)
**Author:** [@WaningJupiter](https://discourse.processing.org/u/WaningJupiter)\ **Replies:** 4\ **Last updated:** [June 22, 2021, 4:50pm UTC](https://discourse.processing.org/t/how-could-i-have-acces-to-dom-elements-p5-js/30852 "2021-06-22T16:50:24Z")
Hi community, I’ve watched Handling DOM Events with Callbacks of Coding Train. In this vidéo, Daniel Shiffman created a button element in sketch.js , using a mousePressed() function to control the randomness of backgro… --- ## [Can I make these animations on curveVertex smooth?](https://discourse.processing.org/t/can-i-make-these-animations-on-curvevertex-smooth/30805)
**Author:** [@cog](https://discourse.processing.org/u/cog)\ **Replies:** 2\ **Last updated:** [June 20, 2021, 11:15pm UTC](https://discourse.processing.org/t/can-i-make-these-animations-on-curvevertex-smooth/30805 "2021-06-20T23:15:29Z")
https://editor.p5js.org/CarlyRaeJepsenStan/sketches/xH6tvmKep Sorry about the poor code - I’m going to rewrite it with arrays. In any case, as you can see the blob changes bounds and position quite often. However, I w… --- ## [Why is curveTightness acting so weird?](https://discourse.processing.org/t/why-is-curvetightness-acting-so-weird/30770)
**Author:** [@cog](https://discourse.processing.org/u/cog)\ **Replies:** 2\ **Last updated:** [June 19, 2021, 1:06am UTC](https://discourse.processing.org/t/why-is-curvetightness-acting-so-weird/30770 "2021-06-19T01:06:17Z")
https://editor.p5js.org/CarlyRaeJepsenStan/sketches/xH6tvmKep I am applying curveTightness to a shape made out of points and curveVertex. For some reason, after a certain level of tightness on the curve, this strang… --- ## [Multiply an array with a number](https://discourse.processing.org/t/multiply-an-array-with-a-number/30778)
**Author:** [@Sayochi](https://discourse.processing.org/u/Sayochi)\ **Replies:** 1\ **Last updated:** [June 18, 2021, 3:17pm UTC](https://discourse.processing.org/t/multiply-an-array-with-a-number/30778 "2021-06-18T15:17:13Z")
I need to multiply a float array with a float value without looping over every item. I checked internet a bit and tried some stuff. array.map(number); looks okay to me but Im getting an error: cannot invoke map(float) o… --- ## [Get coordinate of character on canvas](https://discourse.processing.org/t/get-coordinate-of-character-on-canvas/30749)
**Author:** [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\ **Replies:** 5\ **Last updated:** [June 17, 2021, 12:09am UTC](https://discourse.processing.org/t/get-coordinate-of-character-on-canvas/30749 "2021-06-17T00:09:16Z")
Is there a method or some way of getting the coordinate (or coordinate range ) of a character or portion of a string in a string drawn to canvas using text()? Say I draw text('hello p5', 100,100); … what are the coordin… --- ## [Convert processing Sketch to p5.js](https://discourse.processing.org/t/convert-processing-sketch-to-p5-js/30726)
**Author:** [@momo](https://discourse.processing.org/u/momo)\ **Replies:** 1\ **Last updated:** [June 15, 2021, 6:47pm UTC](https://discourse.processing.org/t/convert-processing-sketch-to-p5-js/30726 "2021-06-15T18:47:30Z")
Hi all, I’m a coding beginner. I was trying to convert a processing sketch into p5. I guess it is a dumb question. But please help me with this. This is the sketch I want to convert (processing) class A{ float r = r… --- ## [Lines with alpha exhibiting weird color behavior in p5.js with webgl](https://discourse.processing.org/t/lines-with-alpha-exhibiting-weird-color-behavior-in-p5-js-with-webgl/30663)
**Author:** [@neel](https://discourse.processing.org/u/neel)\ **Replies:** 6\ **Last updated:** [June 14, 2021, 12:14pm UTC](https://discourse.processing.org/t/lines-with-alpha-exhibiting-weird-color-behavior-in-p5-js-with-webgl/30663 "2021-06-14T12:14:34Z")
I’ve got some p5.js code where I draw lines with some amount of alpha (the last two characters on the hex code). For some reason, these lines appear as gradients from red/blue/green. function setup() { createCanvas(1… --- ## [Equirectangular sketches](https://discourse.processing.org/t/equirectangular-sketches/30626)
**Author:** [@JuanIrache](https://discourse.processing.org/u/JuanIrache)\ **Replies:** 6\ **Last updated:** [June 14, 2021, 11:03am UTC](https://discourse.processing.org/t/equirectangular-sketches/30626 "2021-06-14T11:03:18Z")
Hi, I’m trying to draw things on top of a 360 equirectangular image. The problem is, of course elements I draw won’t keep their proportions when viewed with a 360 viewer. Is there any library or technique that would he… --- ## [P5 Editor Not working](https://discourse.processing.org/t/p5-editor-not-working/30699)
**Author:** [@alihusainsorathiya](https://discourse.processing.org/u/alihusainsorathiya)\ **Replies:** 1\ **Last updated:** [June 14, 2021, 8:41am UTC](https://discourse.processing.org/t/p5-editor-not-working/30699 "2021-06-14T08:41:38Z")
P5 Editor is not working Can anyone confirm if they’re facing the same issue? And TAT Time to fix the same? --- ## [Am i using equation of circle right?](https://discourse.processing.org/t/am-i-using-equation-of-circle-right/22318)
**Author:** [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)\ **Replies:** 17\ **Last updated:** [June 14, 2021, 4:54am UTC](https://discourse.processing.org/t/am-i-using-equation-of-circle-right/22318 "2021-06-14T04:54:03Z")
I want to move an object around a circle therefore, am using equation of circle to every quadrant… I wrote this: if(keyDown(“up”) && this.guy.x \<= 600 && this.guy.x \<= 400){ //using equation of a circle \> … --- ## [Mapping mouse position of user screen to](https://discourse.processing.org/t/mapping-mouse-position-of-user-screen-to/30574)
**Author:** [@gerome](https://discourse.processing.org/u/gerome)\ **Replies:** 3\ **Last updated:** [June 12, 2021, 3:37pm UTC](https://discourse.processing.org/t/mapping-mouse-position-of-user-screen-to/30574 "2021-06-12T15:37:20Z")
I want to synchronize the stream projection of an environment video (youtube stream) with some geometrical objects drawn in it (e.g. little non intersecting circles) in such a way that a user on a smartphone or pc monito… --- ## [orbitControl() is loading super slowly](https://discourse.processing.org/t/orbitcontrol-is-loading-super-slowly/30588)
**Author:** [@tofu3000](https://discourse.processing.org/u/tofu3000)\ **Replies:** 4\ **Last updated:** [June 12, 2021, 11:06am UTC](https://discourse.processing.org/t/orbitcontrol-is-loading-super-slowly/30588 "2021-06-12T11:06:41Z")
In preload(), I have 17 images, 16 videos, and 11 3d objects (file sizes I believe are manageable… nothing exceeding 20 mb), and in setup() I am initializing webgl… In draw(), I’m calling orbitControl() and rendering th… --- ## [Slider programmatic update](https://discourse.processing.org/t/slider-programmatic-update/30651)
**Author:** [@AndyP5](https://discourse.processing.org/u/AndyP5)\ **Replies:** 1\ **Last updated:** [June 11, 2021, 2:30pm UTC](https://discourse.processing.org/t/slider-programmatic-update/30651 "2021-06-11T14:30:51Z")
Hi there, I am looking to programmatically update position of a slider. I would like to have the slider manual user action, but also step the slider in response to a button press. Is this possible or do I need to re-… --- ## [ABCjs music notation library](https://discourse.processing.org/t/abcjs-music-notation-library/30635)
**Author:** [@patricio1979](https://discourse.processing.org/u/patricio1979)\ **Replies:** 4\ **Last updated:** [June 11, 2021, 8:39am UTC](https://discourse.processing.org/t/abcjs-music-notation-library/30635 "2021-06-11T08:39:32Z")
Hello, how can I port this https://www.abcjs.net/ libraryto p5js? It is useful for importing ABC music files (there’s a corpus for musicology research). In the index.html \