# p5.js

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

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

**Page:** 29

---

## [Converting sketch from p5.js to Processing (Image art: Messy Curve Draw)](https://discourse.processing.org/t/converting-sketch-from-p5-js-to-processing-image-art-messy-curve-draw/26969)

<div class="topic-metadata">

**Author:** [@Marinus](https://discourse.processing.org/u/Marinus)\
**Replies:** 8\
**Last updated:** [February 18, 2022, 2:17pm UTC](https://discourse.processing.org/t/converting-sketch-from-p5-js-to-processing-image-art-messy-curve-draw/26969 "2022-02-18T14:17:55Z")

</div>

Hi, I’ve found a beautiful starting point for what I am intending to achieve: drawing a portrait of a face with curved lines and exporting it to SVG. However, it’s written in p5.js and the p5.js version doesn’t support …

---

## [Calling .selected(value) multiple times on a radio button does not change the selected option](https://discourse.processing.org/t/calling-selected-value-multiple-times-on-a-radio-button-does-not-change-the-selected-option/35194)

<div class="topic-metadata">

**Author:** [@fabiopettinati](https://discourse.processing.org/u/fabiopettinati)\
**Replies:** 6\
**Last updated:** [February 17, 2022, 8:47pm UTC](https://discourse.processing.org/t/calling-selected-value-multiple-times-on-a-radio-button-does-not-change-the-selected-option/35194 "2022-02-17T20:47:35Z")

</div>

I have a sketch where I create a radio button with 4 options, the last one being selected upon creation inside the setup() function. When the sketch runs and I resize the window, I want to force selecting the last optio…

---

## [How to use mask with animation loop?](https://discourse.processing.org/t/how-to-use-mask-with-animation-loop/35244)

<div class="topic-metadata">

**Author:** [@ongo](https://discourse.processing.org/u/ongo)\
**Replies:** 0\
**Last updated:** [February 17, 2022, 5:03pm UTC](https://discourse.processing.org/t/how-to-use-mask-with-animation-loop/35244 "2022-02-17T17:03:59Z")

</div>

Code used to attempt this so far: I want to find a way to be able to slightly edit a mask on every loop to create an animated effect. Such as on each loop increasing the Y coordinate of where the ellipse is drawn over …

---

## [Question about Drawing Application with Background Change and createGraphics()](https://discourse.processing.org/t/question-about-drawing-application-with-background-change-and-creategraphics/35238)

<div class="topic-metadata">

**Author:** [@jdec](https://discourse.processing.org/u/jdec)\
**Replies:** 2\
**Last updated:** [February 17, 2022, 3:33pm UTC](https://discourse.processing.org/t/question-about-drawing-application-with-background-change-and-creategraphics/35238 "2022-02-17T15:33:43Z")

</div>

Hi there. I am teaching an 8th grade creative coding class and I have a few students who are having the same issue that I don’t know how to solve. Any suggestions for how to solve the following coding challenge? :pray: W…

---

## [\[p5.js\] I don't know how to make it into a p5 file](https://discourse.processing.org/t/p5-js-i-dont-know-how-to-make-it-into-a-p5-file/35187)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 5\
**Last updated:** [February 16, 2022, 6:41pm UTC](https://discourse.processing.org/t/p5-js-i-dont-know-how-to-make-it-into-a-p5-file/35187 "2022-02-16T18:41:56Z")

</div>

LINK : Sea life sketch sketch - jagracar Looking at the above, You can see that it was made with p5. Based on the above, I am trying to save it as p5.js using ‘Processing’. File: WEB\_FISH\_TEST.zip - Google Driv…

---

## [Cropping an image buffer on transparency?](https://discourse.processing.org/t/cropping-an-image-buffer-on-transparency/35125)

<div class="topic-metadata">

**Author:** [@xeronimo](https://discourse.processing.org/u/xeronimo)\
**Replies:** 2\
**Last updated:** [February 16, 2022, 12:38pm UTC](https://discourse.processing.org/t/cropping-an-image-buffer-on-transparency/35125 "2022-02-16T12:38:16Z")

</div>

I’d like to crop/copy an image buffer in #p5js so that only the non-transparent part is kept/copied … any ideas how to do that (quickly)!? Thanks!

---

## [How can I set a dat.GUI panel anywhere on screen in OpenProcessing p5js](https://discourse.processing.org/t/how-can-i-set-a-dat-gui-panel-anywhere-on-screen-in-openprocessing-p5js/14423)

<div class="topic-metadata">

**Author:** [@rbytes](https://discourse.processing.org/u/rbytes)\
**Replies:** 11\
**Last updated:** [February 16, 2022, 12:46am UTC](https://discourse.processing.org/t/how-can-i-set-a-dat-gui-panel-anywhere-on-screen-in-openprocessing-p5js/14423 "2022-02-16T00:46:27Z")

</div>

0 I have seen similar questions on various websites, but the answers always require using HTML, CSS and p5js code to reposition a dat.GUI panel from its default location. I am working strictly in p5js on OpenProcessing,…

---

## [Rotate canvas around its center](https://discourse.processing.org/t/rotate-canvas-around-its-center/34990)

<div class="topic-metadata">

**Author:** [@res56](https://discourse.processing.org/u/res56)\
**Replies:** 8\
**Last updated:** [February 12, 2022, 10:28pm UTC](https://discourse.processing.org/t/rotate-canvas-around-its-center/34990 "2022-02-12T22:28:49Z")

</div>

Hi frens, I use the draw function to display objects of the class Mover. After the objects are displayed I want to rotate the result around the center. function draw() { if(frameCount \< 600){ for (var i…

---

## [Refresh values in P5.gui](https://discourse.processing.org/t/refresh-values-in-p5-gui/27581)

<div class="topic-metadata">

**Author:** [@rbanks](https://discourse.processing.org/u/rbanks)\
**Replies:** 4\
**Last updated:** [February 15, 2022, 7:21pm UTC](https://discourse.processing.org/t/refresh-values-in-p5-gui/27581 "2022-02-15T19:21:00Z")

</div>

I’m using p5.gui to play with some variables and setting for my sketch. I want to change those variables both in the gui and in code. If I change the variables in code the p5.gui interface doesn’t update automatically to…

---

## [TypeError: Cannot read properties of undefined (reading '\_elements')](https://discourse.processing.org/t/typeerror-cannot-read-properties-of-undefined-reading-elements/34969)

<div class="topic-metadata">

**Author:** [@Errorbot1122](https://discourse.processing.org/u/Errorbot1122)\
**Replies:** 4\
**Last updated:** [February 14, 2022, 7:38pm UTC](https://discourse.processing.org/t/typeerror-cannot-read-properties-of-undefined-reading-elements/34969 "2022-02-14T19:38:21Z")

</div>

I tried to remove a div inside the set timeout function but it give me the error in the title. Here is the stack trace: TypeError: Cannot read properties of undefined (reading '\_elements') at f.default.Element.remo…

---

## [imageMode works not in Safari and Opera](https://discourse.processing.org/t/imagemode-works-not-in-safari-and-opera/35163)

<div class="topic-metadata">

**Author:** [@res56](https://discourse.processing.org/u/res56)\
**Replies:** 0\
**Last updated:** [February 14, 2022, 2:51pm UTC](https://discourse.processing.org/t/imagemode-works-not-in-safari-and-opera/35163 "2022-02-14T14:51:17Z")

</div>

Hey frens, when I use imageMode(CENTER) my script does not run in Safari and Opera.(Script Error). Without this command it works (but the output is not placed correct…) Is this a known issue? thanks in advance There…

---

## [How to use BLENDMODE masking to make graphical images fill black or white regions of the image?](https://discourse.processing.org/t/how-to-use-blendmode-masking-to-make-graphical-images-fill-black-or-white-regions-of-the-image/35153)

<div class="topic-metadata">

**Author:** [@ongo](https://discourse.processing.org/u/ongo)\
**Replies:** 0\
**Last updated:** [February 13, 2022, 6:51pm UTC](https://discourse.processing.org/t/how-to-use-blendmode-masking-to-make-graphical-images-fill-black-or-white-regions-of-the-image/35153 "2022-02-13T18:51:05Z")

</div>

I am using P5JS to draw multiple ellipse locations in an image. The background is black and all circles drawn are white. I’d like to figure out how to use image1 to replace all black areas and image2 to replace all whit…

---

## [Masking shader with alpha blending](https://discourse.processing.org/t/masking-shader-with-alpha-blending/35132)

<div class="topic-metadata">

**Author:** [@AndreasRef](https://discourse.processing.org/u/AndreasRef)\
**Replies:** 2\
**Last updated:** [February 13, 2022, 1:28pm UTC](https://discourse.processing.org/t/masking-shader-with-alpha-blending/35132 "2022-02-13T13:28:00Z")

</div>

Hi I have a working example in the p5js online editor (adapted from GitHub - b2renger/p5js-shaders) using shaders for masking, but I would like to add alpha blending to the sketch allowing me to more smoothly blend the …

---

## [How to make a dotted or dashed ellipse in p5.js?](https://discourse.processing.org/t/how-to-make-a-dotted-or-dashed-ellipse-in-p5-js/35137)

<div class="topic-metadata">

**Author:** [@ongo](https://discourse.processing.org/u/ongo)\
**Replies:** 1\
**Last updated:** [February 13, 2022, 10:29am UTC](https://discourse.processing.org/t/how-to-make-a-dotted-or-dashed-ellipse-in-p5-js/35137 "2022-02-13T10:29:55Z")

</div>

I have no code example to provide, this is just a general question on how to do this. Are there any external libraries that could help with this? Any code examples would be much appreciated!

---

## [My p5.js -2nd timed setInterval(); rolling ball flickers](https://discourse.processing.org/t/my-p5-js-2nd-timed-setinterval-rolling-ball-flickers/23218)

<div class="topic-metadata">

**Author:** [@HFredrickson](https://discourse.processing.org/u/HFredrickson)\
**Replies:** 5\
**Last updated:** [February 12, 2022, 2:48am UTC](https://discourse.processing.org/t/my-p5-js-2nd-timed-setinterval-rolling-ball-flickers/23218 "2022-02-12T02:48:57Z")

</div>

This p5.js code works in my local server Chrome browser. The problem is the 2nd moving circle created flickers as it moves. I tried: setTimeout(); instead of setInterval();-no change window.fill(51) to try to solve a…

---

## [Online piano works but I want to eliminate static sound](https://discourse.processing.org/t/online-piano-works-but-i-want-to-eliminate-static-sound/35122)

<div class="topic-metadata">

**Author:** [@HFredrickson](https://discourse.processing.org/u/HFredrickson)\
**Replies:** 0\
**Last updated:** [February 12, 2022, 2:31am UTC](https://discourse.processing.org/t/online-piano-works-but-i-want-to-eliminate-static-sound/35122 "2022-02-12T02:31:00Z")

</div>

This code works(just copy and paste the sketch.js code below into the online p5.js editor: https://editor.p5js.org/ ) but every note plays emits a static-sound when the synth turns on. Can anyone suggest a way to elimina…

---

## [Save & Redraw Pixels (quickly)](https://discourse.processing.org/t/save-redraw-pixels-quickly/34968)

<div class="topic-metadata">

**Author:** [@mosacrafts](https://discourse.processing.org/u/mosacrafts)\
**Replies:** 3\
**Last updated:** [February 12, 2022, 12:02am UTC](https://discourse.processing.org/t/save-redraw-pixels-quickly/34968 "2022-02-12T00:02:28Z")

</div>

Is there a way to redraw or save pixels in near constant time? Currently Im creating a grain overlay by drawing thousands of randomly placed rectangles. I have to draw this grain for every single frame. My issue is that…

---

## [How to crop to shape in hand-drawn image?](https://discourse.processing.org/t/how-to-crop-to-shape-in-hand-drawn-image/35088)

<div class="topic-metadata">

**Author:** [@jacobsmith](https://discourse.processing.org/u/jacobsmith)\
**Replies:** 0\
**Last updated:** [February 11, 2022, 3:46am UTC](https://discourse.processing.org/t/how-to-crop-to-shape-in-hand-drawn-image/35088 "2022-02-11T03:46:44Z")

</div>

I’m trying to make a p5.js version of something similar to https://www.youtube.com/watch?v=zBeHOAfemEA where you can draw a fish or other sea creature, take a picture, and have it appear on the screen “swimming” with oth…

---

## [Use of "F1" KEY in p5.js](https://discourse.processing.org/t/use-of-f1-key-in-p5-js/35055)

<div class="topic-metadata">

**Author:** [@Rolembeek](https://discourse.processing.org/u/Rolembeek)\
**Replies:** 4\
**Last updated:** [February 10, 2022, 2:39pm UTC](https://discourse.processing.org/t/use-of-f1-key-in-p5-js/35055 "2022-02-10T14:39:39Z")

</div>

Hi all, In my program I use the “h” key to bring up a kind of “Help Menu”. This works very well but I would like to replace it by a more “standard” use of the “F1” key (keyCode = 112). Whenever I use the F1 key the “nor…

---

## [Sketches disappearing from p5js web editor](https://discourse.processing.org/t/sketches-disappearing-from-p5js-web-editor/34544)

<div class="topic-metadata">

**Author:** [@basicvisual](https://discourse.processing.org/u/basicvisual)\
**Replies:** 4\
**Last updated:** [February 9, 2022, 5:30pm UTC](https://discourse.processing.org/t/sketches-disappearing-from-p5js-web-editor/34544 "2022-02-09T17:30:41Z")

</div>

Hi , I had a few sketches uploaded on p5js web editor. However when i logged into it post vacation , the sketches seem to have disappeared. Has anyone else faced similar problem ?

---

## [How to create this kind of curve?](https://discourse.processing.org/t/how-to-create-this-kind-of-curve/35011)

<div class="topic-metadata">

**Author:** [@liukov](https://discourse.processing.org/u/liukov)\
**Replies:** 12\
**Last updated:** [February 9, 2022, 3:23pm UTC](https://discourse.processing.org/t/how-to-create-this-kind-of-curve/35011 "2022-02-09T15:23:14Z")

</div>

Hello, I recently found about this animation on instagram and wonder how it was made. Do you have any idea how to create a similar shape ? By similar I mean a closed space-filling curve with pleats of similar size …

---

## [Hungry Flower Game: the buttons are not centered in browser, unlike they are in Brackets live preview](https://discourse.processing.org/t/hungry-flower-game-the-buttons-are-not-centered-in-browser-unlike-they-are-in-brackets-live-preview/35041)

<div class="topic-metadata">

**Author:** [@Persica](https://discourse.processing.org/u/Persica)\
**Replies:** 0\
**Last updated:** [February 8, 2022, 11:14am UTC](https://discourse.processing.org/t/hungry-flower-game-the-buttons-are-not-centered-in-browser-unlike-they-are-in-brackets-live-preview/35041 "2022-02-08T11:14:08Z")

</div>

Hey all, I made a game about a hungry flower here. The problem is that the buttons are no longer centered, nor the commanded size once placed on my website. To give an example I’ll attach how they appear in my brackets…

---

## [Sketch conversion Processing to p5.js](https://discourse.processing.org/t/sketch-conversion-processing-to-p5-js/35037)

<div class="topic-metadata">

**Author:** [@CoPiQuMi](https://discourse.processing.org/u/CoPiQuMi)\
**Replies:** 4\
**Last updated:** [February 8, 2022, 4:58pm UTC](https://discourse.processing.org/t/sketch-conversion-processing-to-p5-js/35037 "2022-02-08T16:58:23Z")

</div>

Hi everyone, My apologies if my message may no respect some of the rules of the community, this is my first one. I’ll try to do my best ! I’m trying to convert the following processing sketch to p5.js, I think I manage…

---

## [beginShape and custom shaders](https://discourse.processing.org/t/beginshape-and-custom-shaders/35021)

<div class="topic-metadata">

**Author:** [@matthewortega](https://discourse.processing.org/u/matthewortega)\
**Replies:** 3\
**Last updated:** [February 8, 2022, 10:58am UTC](https://discourse.processing.org/t/beginshape-and-custom-shaders/35021 "2022-02-08T10:58:16Z")

</div>

I have written a custom shader to be applied to shapes, and is applying correctly. For some reason, if I create custom shape using beginShape() the shader is not applied even though it hasn’t been reset. Any pointers on …

---

## [How to access main p5.Renderer object?](https://discourse.processing.org/t/how-to-access-main-p5-renderer-object/34951)

<div class="topic-metadata">

**Author:** [@benjaminmarkus](https://discourse.processing.org/u/benjaminmarkus)\
**Replies:** 1\
**Last updated:** [February 6, 2022, 12:42am UTC](https://discourse.processing.org/t/how-to-access-main-p5-renderer-object/34951 "2022-02-06T00:42:55Z")

</div>

Is there a way to refer to the main p5.Renderer object that draws to the canvas in a way one would refer to an object created with createGraphics()? An example: //how it works when you created a Renderer: var myRenderer…

---

## [How do I load images?](https://discourse.processing.org/t/how-do-i-load-images/34965)

<div class="topic-metadata">

**Author:** [@tazrXxx](https://discourse.processing.org/u/tazrXxx)\
**Replies:** 27\
**Last updated:** [February 4, 2022, 6:13am UTC](https://discourse.processing.org/t/how-do-i-load-images/34965 "2022-02-04T06:13:08Z")

</div>

Hi! I was researching Javascript libraries and I found p5.js. It looks simple and easy, so I decided to try it out. So I made this little code snippet where it should just put up an image on the screen, but for some rea…

---

## [Setting alpha for a point in HSB mode](https://discourse.processing.org/t/setting-alpha-for-a-point-in-hsb-mode/34959)

<div class="topic-metadata">

**Author:** [@goldorak](https://discourse.processing.org/u/goldorak)\
**Replies:** 1\
**Last updated:** [February 4, 2022, 12:57am UTC](https://discourse.processing.org/t/setting-alpha-for-a-point-in-hsb-mode/34959 "2022-02-04T00:57:54Z")

</div>

Hi, I’m trying to change randomly the alpha setting of a point. Here is a summary of my code strokeWeight(10); c = color(0,0,0); c.setAlpha(random(10)); stroke(c); point(i,j); I can’t get any kind of graduat…

---

## [Adding an image as "mask" to existing code](https://discourse.processing.org/t/adding-an-image-as-mask-to-existing-code/34824)

<div class="topic-metadata">

**Author:** [@marieeiko](https://discourse.processing.org/u/marieeiko)\
**Replies:** 0\
**Last updated:** [January 24, 2022, 3:33pm UTC](https://discourse.processing.org/t/adding-an-image-as-mask-to-existing-code/34824 "2022-01-24T15:33:06Z")

</div>

Hello ! I’m having issues to add in image as background : I created a light on a sphere, following my mouse, but I would like it to be all over an image background, not on the sphere as in P5js references… How can I ad…

---

## [Trying to load random images from an array into rows and columns](https://discourse.processing.org/t/trying-to-load-random-images-from-an-array-into-rows-and-columns/34950)

<div class="topic-metadata">

**Author:** [@Rico22](https://discourse.processing.org/u/Rico22)\
**Replies:** 2\
**Last updated:** [February 3, 2022, 12:49pm UTC](https://discourse.processing.org/t/trying-to-load-random-images-from-an-array-into-rows-and-columns/34950 "2022-02-03T12:49:58Z")

</div>

Hello! I am new here and this is my first post. I looked around and wasn’t able to quite find a solution. I am relatively new to coding and am stuck. I have created a pattern of four squares and have attempted to set u…

---

## [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…

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

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