# p5.js

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

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

**Page:** 23

---

## [Array of new p5 instance & DOM](https://discourse.processing.org/t/array-of-new-p5-instance-dom/37964)

<div class="topic-metadata">

**Author:** [@louise00](https://discourse.processing.org/u/louise00)\
**Replies:** 1\
**Last updated:** [July 15, 2022, 10:57am UTC](https://discourse.processing.org/t/array-of-new-p5-instance-dom/37964 "2022-07-15T10:57:10Z")

</div>

Hello I have been building a script with a fractal grid wherein a more complicated vector shape is created per grid square and I want to be able to crop the shape into its square but without turning it into a bitmap imag…

---

## [P5js error when adding a function call to draw()](https://discourse.processing.org/t/p5js-error-when-adding-a-function-call-to-draw/37934)

<div class="topic-metadata">

**Author:** [@Steve](https://discourse.processing.org/u/Steve)\
**Replies:** 0\
**Last updated:** [July 12, 2022, 6:06pm UTC](https://discourse.processing.org/t/p5js-error-when-adding-a-function-call-to-draw/37934 "2022-07-12T18:06:56Z")

</div>

I’m working on a sketch as part of a raycasting course and I keep seeing the error “TypeError: e.set is not a function” and my CPU spins up to 100% which kills browser performance. I can reproduce this a couple differen…

---

## [P5.js extension for Visual Code Studio error](https://discourse.processing.org/t/p5-js-extension-for-visual-code-studio-error/37913)

<div class="topic-metadata">

**Author:** [@asymmetric](https://discourse.processing.org/u/asymmetric)\
**Replies:** 21\
**Last updated:** [July 12, 2022, 9:36pm UTC](https://discourse.processing.org/t/p5-js-extension-for-visual-code-studio-error/37913 "2022-07-12T21:36:23Z")

</div>

Hi! I am running into a wall whenever I attempt to download the p5.js extensions to my Visual Code Studio application. I receive the following error message whenever I press install. “Unable to install because the exte…

---

## [P5js and ZeroTier (or Hamachi)](https://discourse.processing.org/t/p5js-and-zerotier-or-hamachi/37916)

<div class="topic-metadata">

**Author:** [@patricio1979](https://discourse.processing.org/u/patricio1979)\
**Replies:** 2\
**Last updated:** [July 11, 2022, 12:46pm UTC](https://discourse.processing.org/t/p5js-and-zerotier-or-hamachi/37916 "2022-07-11T12:46:51Z")

</div>

Is there a way to send OSC data or even messages from P5js through ZeroTier or Hamachi. Tryed P5js sketch with oscBrowser.js but it gives me SecurityError: Failed to construct 'WebSocket': An insecure WebSocket conne…

---

## [Keep p5.serial port open while mac screen is closed](https://discourse.processing.org/t/keep-p5-serial-port-open-while-mac-screen-is-closed/37892)

<div class="topic-metadata">

**Author:** [@joe\_processing](https://discourse.processing.org/u/joe_processing)\
**Replies:** 0\
**Last updated:** [July 9, 2022, 3:59pm UTC](https://discourse.processing.org/t/keep-p5-serial-port-open-while-mac-screen-is-closed/37892 "2022-07-09T15:59:08Z")

</div>

Hi guys, I attached an Arduino to P5 SERIAL CONTROL. I want to keep the port open while my mac is closed (For an exhibition I’m having). I tried to change the preferences of the Mac battery so it will continue to work…

---

## [Hover effect triangle](https://discourse.processing.org/t/hover-effect-triangle/37873)

<div class="topic-metadata">

**Author:** [@caleidolex](https://discourse.processing.org/u/caleidolex)\
**Replies:** 4\
**Last updated:** [July 9, 2022, 11:35am UTC](https://discourse.processing.org/t/hover-effect-triangle/37873 "2022-07-09T11:35:30Z")

</div>

Hey everyone, i started arround 1 month ago with programming and loving p5js. Right now I have a problem I can’t figure out to implement into my code. I want to have a hover effect on a triangle. I did this with the col…

---

## [Update cursor immediately before and after a long loop](https://discourse.processing.org/t/update-cursor-immediately-before-and-after-a-long-loop/37867)

<div class="topic-metadata">

**Author:** [@nemecsek69](https://discourse.processing.org/u/nemecsek69)\
**Replies:** 2\
**Last updated:** [July 8, 2022, 11:10am UTC](https://discourse.processing.org/t/update-cursor-immediately-before-and-after-a-long-loop/37867 "2022-07-08T11:10:43Z")

</div>

JS newbie here. This is an extreme simplification of the real code but the general behavior is the same: after clicking the button I want to change the cursor to “wait”, execute a blocking loop for 3 seconds, and then r…

---

## [Print() function wants to print out the whole website](https://discourse.processing.org/t/print-function-wants-to-print-out-the-whole-website/37876)

<div class="topic-metadata">

**Author:** [@n0x](https://discourse.processing.org/u/n0x)\
**Replies:** 4\
**Last updated:** [July 7, 2022, 8:08pm UTC](https://discourse.processing.org/t/print-function-wants-to-print-out-the-whole-website/37876 "2022-07-07T20:08:34Z")

</div>

Whenever I have auto-refresh on and have written print() in draw then it wants to print out the websites like with ctrl + p and then when I try to close the tab I get a new one. I have lost code due to it. I’m wonder…

---

## [Amplitude of oscillator using slider in p5.js](https://discourse.processing.org/t/amplitude-of-oscillator-using-slider-in-p5-js/37817)

<div class="topic-metadata">

**Author:** [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Replies:** 7\
**Last updated:** [July 5, 2022, 5:33pm UTC](https://discourse.processing.org/t/amplitude-of-oscillator-using-slider-in-p5-js/37817 "2022-07-05T17:33:14Z")

</div>

i am following the tutorial https://www.youtube.com/watch?v=Bk8rLzzSink where frequency is changed using slider. how can i change the amplitude using slider in the same manner? i tried the following: function draw() { …

---

## [Examples from "Make: Getting Started with p5.js" not working](https://discourse.processing.org/t/examples-from-make-getting-started-with-p5-js-not-working/37835)

<div class="topic-metadata">

**Author:** [@MissAda](https://discourse.processing.org/u/MissAda)\
**Replies:** 4\
**Last updated:** [July 5, 2022, 3:21pm UTC](https://discourse.processing.org/t/examples-from-make-getting-started-with-p5-js-not-working/37835 "2022-07-05T15:21:03Z")

</div>

Hi hi, all! I’ve been working with p5 for a few months now. Going through the “getting started with p5.js” book from McCarthy + Reas. I’ve noticed that even if I copy the examples exactly as written, they sometimes don’t…

---

## [Black to white and then white to black](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307)

<div class="topic-metadata">

**Author:** [@Jayda](https://discourse.processing.org/u/Jayda)\
**Replies:** 30\
**Last updated:** [July 5, 2022, 10:03am UTC](https://discourse.processing.org/t/black-to-white-and-then-white-to-black/26307 "2022-07-05T10:03:42Z")

</div>

Why it doesn’t work? Want the background turn from black to white and then white to black. Thank you! let bg; function setup() { createCanvas(400, 400); bg = 255; } function draw() { background(bg); bg -= 1; i…

---

## [Url stream to canvas / frame updating](https://discourse.processing.org/t/url-stream-to-canvas-frame-updating/37810)

<div class="topic-metadata">

**Author:** [@Sofie](https://discourse.processing.org/u/Sofie)\
**Replies:** 8\
**Last updated:** [July 3, 2022, 6:27pm UTC](https://discourse.processing.org/t/url-stream-to-canvas-frame-updating/37810 "2022-07-03T18:27:25Z")

</div>

Hi, i’m struggeling to write a stream to the canvas. I can get one frame every time the sketch loads but its not updating the variable. My thought was that if i call image() in draw() it updates every cycle, but it doesn…

---

## [Microphone usage browser popup stops working](https://discourse.processing.org/t/microphone-usage-browser-popup-stops-working/37808)

<div class="topic-metadata">

**Author:** [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Replies:** 3\
**Last updated:** [July 3, 2022, 2:14pm UTC](https://discourse.processing.org/t/microphone-usage-browser-popup-stops-working/37808 "2022-07-03T14:14:06Z")

</div>

I am using the microphone example here examples | p5.js and it works only but just for the first time. after page refresh the browser stops asking for microphone usage the program stops working. how can i re-enable the …

---

## [P5.js editor for mobile device](https://discourse.processing.org/t/p5-js-editor-for-mobile-device/37709)

<div class="topic-metadata">

**Author:** [@skybosi](https://discourse.processing.org/u/skybosi)\
**Replies:** 1\
**Last updated:** [July 2, 2022, 5:57pm UTC](https://discourse.processing.org/t/p5-js-editor-for-mobile-device/37709 "2022-07-02T17:57:10Z")

</div>

About a month ago, I accidentally discovered p5.js, which was very amazing. Later, I tried related functions and browsed openprocessing . I found it interesting. As a programmer, I tried to find a suitable editor to pla…

---

## [Sketch using p5-wrapper-react not receiving props on route change but is receiving them on page refresh, reload](https://discourse.processing.org/t/sketch-using-p5-wrapper-react-not-receiving-props-on-route-change-but-is-receiving-them-on-page-refresh-reload/37797)

<div class="topic-metadata">

**Author:** [@hifilorau](https://discourse.processing.org/u/hifilorau)\
**Replies:** 0\
**Last updated:** [July 2, 2022, 4:01pm UTC](https://discourse.processing.org/t/sketch-using-p5-wrapper-react-not-receiving-props-on-route-change-but-is-receiving-them-on-page-refresh-reload/37797 "2022-07-02T16:01:11Z")

</div>

Am facing an interesting challenge here. Have a somewhat straightforward architecture where i am passing props into my sketch via: p5.updateWithProps = props =\> { if (props.isLoading) { isLoading = props…

---

## [Callback context](https://discourse.processing.org/t/callback-context/37768)

<div class="topic-metadata">

**Author:** [@anne](https://discourse.processing.org/u/anne)\
**Replies:** 6\
**Last updated:** [July 1, 2022, 10:34am UTC](https://discourse.processing.org/t/callback-context/37768 "2022-07-01T10:34:03Z")

</div>

How does one pass on the context to a callback in p5? fx in this code, the x i undefined: function setup() { createCanvas(400, 400); noLoop() } function draw() { background(128); let x = 100; loadImage(“birch.p…

---

## [Remove() and images](https://discourse.processing.org/t/remove-and-images/37756)

<div class="topic-metadata">

**Author:** [@caw](https://discourse.processing.org/u/caw)\
**Replies:** 2\
**Last updated:** [June 29, 2022, 11:02pm UTC](https://discourse.processing.org/t/remove-and-images/37756 "2022-06-29T23:02:21Z")

</div>

I have a misunderstanding about images and ‘removing’ them. The remove() function in p5.js Removes a Graphics object from the page and frees any resources associated with it. and one of the examples is: let bg; fun…

---

## [Multiple Canvas](https://discourse.processing.org/t/multiple-canvas/37718)

<div class="topic-metadata">

**Author:** [@vorfra](https://discourse.processing.org/u/vorfra)\
**Replies:** 2\
**Last updated:** [June 29, 2022, 3:10pm UTC](https://discourse.processing.org/t/multiple-canvas/37718 "2022-06-29T15:10:03Z")

</div>

I want this sketch (#1) to be the background p5.js Web Editor of this sketch (#2) p5.js Web Editor I want to save sketch#1 output as an image and use the image as the background of another sketch#2, all in the same prog…

---

## [CreateElement() and Clear() not defined on page load even though it is called in function setup()](https://discourse.processing.org/t/createelement-and-clear-not-defined-on-page-load-even-though-it-is-called-in-function-setup/37733)

<div class="topic-metadata">

**Author:** [@bill.le](https://discourse.processing.org/u/bill.le)\
**Replies:** 1\
**Last updated:** [June 28, 2022, 4:30pm UTC](https://discourse.processing.org/t/createelement-and-clear-not-defined-on-page-load-even-though-it-is-called-in-function-setup/37733 "2022-06-28T16:30:54Z")

</div>

Hi! I’m currently working on a project (a chrome extension) that loads the canvas onto any site so I can draw on it. However, at random times, I would get errors saying that CreateElement() or Clear() is not defined. M…

---

## [How to make p5.speech work in electron application for speech to text?](https://discourse.processing.org/t/how-to-make-p5-speech-work-in-electron-application-for-speech-to-text/37739)

<div class="topic-metadata">

**Author:** [@alokmahor](https://discourse.processing.org/u/alokmahor)\
**Replies:** 1\
**Last updated:** [June 27, 2022, 9:33pm UTC](https://discourse.processing.org/t/how-to-make-p5-speech-work-in-electron-application-for-speech-to-text/37739 "2022-06-27T21:33:10Z")

</div>

I have created a smaple electron application to try p5.speech. But that is not working and I am not seeing any error in console. Index.html \<!DOCTYPE html\> \<html\> \<head\> \<meta charset="UTF-8"\> \<title\>Hello p5…

---

## [Converting coding challenge 'Self-avoiding walk backtracing' from p5.js to Processing (Java)](https://discourse.processing.org/t/converting-coding-challenge-self-avoiding-walk-backtracing-from-p5-js-to-processing-java/35047)

<div class="topic-metadata">

**Author:** [@psamead](https://discourse.processing.org/u/psamead)\
**Replies:** 20\
**Last updated:** [June 25, 2022, 1:52am UTC](https://discourse.processing.org/t/converting-coding-challenge-self-avoiding-walk-backtracing-from-p5-js-to-processing-java/35047 "2022-06-25T01:52:15Z")

</div>

Hi my friends, I am trying to learn coding challenge Self-avoiding walk backtracing from Denial’s video 26:40 ; And converting the P5.js code to processing(java) code. But my code seems it is struggling on getting the a…

---

## [New to processing and just need some quick guidance please](https://discourse.processing.org/t/new-to-processing-and-just-need-some-quick-guidance-please/37695)

<div class="topic-metadata">

**Author:** [@NoobyDooby](https://discourse.processing.org/u/NoobyDooby)\
**Replies:** 6\
**Last updated:** [June 23, 2022, 9:31pm UTC](https://discourse.processing.org/t/new-to-processing-and-just-need-some-quick-guidance-please/37695 "2022-06-23T21:31:56Z")

</div>

Hello! I’m very new to processing and have been watching tons of code train videos. At the moment I’ve spent some time looking at projects from the openprocessing website and have had tons of fun with it. There are som…

---

## [Environment mapping](https://discourse.processing.org/t/environment-mapping/37678)

<div class="topic-metadata">

**Author:** [@DaveH](https://discourse.processing.org/u/DaveH)\
**Replies:** 6\
**Last updated:** [June 22, 2022, 5:21pm UTC](https://discourse.processing.org/t/environment-mapping/37678 "2022-06-22T17:21:44Z")

</div>

Hi, I’m trying to use cubemaps in P5, they seem to work OK if I get the gl context, like const IDcanvas = document.getElementById("canvas"); gl = IDcanvas.getContext("webgl"); … and do the OpenGL TEXTURE\_CUBE\_MAP st…

---

## [How do I smoothly reduce the size of a large image?](https://discourse.processing.org/t/how-do-i-smoothly-reduce-the-size-of-a-large-image/37624)

<div class="topic-metadata">

**Author:** [@Chi3010](https://discourse.processing.org/u/Chi3010)\
**Replies:** 4\
**Last updated:** [June 21, 2022, 12:22pm UTC](https://discourse.processing.org/t/how-do-i-smoothly-reduce-the-size-of-a-large-image/37624 "2022-06-21T12:22:40Z")

</div>

Hello!!! I am having a simple problem. When I generate a large image with p5.graphics and then display it at a reduced size, it does not display nicely. For example, the following code generates p5.graphics with a siz…

---

## [Draw tinted image only once when it is changed with CreateFileInput](https://discourse.processing.org/t/draw-tinted-image-only-once-when-it-is-changed-with-createfileinput/37510)

<div class="topic-metadata">

**Author:** [@Annemiek](https://discourse.processing.org/u/Annemiek)\
**Replies:** 2\
**Last updated:** [June 20, 2022, 1:17pm UTC](https://discourse.processing.org/t/draw-tinted-image-only-once-when-it-is-changed-with-createfileinput/37510 "2022-06-20T13:17:37Z")

</div>

Hi! I’m quite new to programming and I’m trying to make a poster generator, therefore I want people to be able to upload an image which needs to have a tint. On top of that image there are elements like circles and text…

---

## [How to only play animation when deleting and creating new object](https://discourse.processing.org/t/how-to-only-play-animation-when-deleting-and-creating-new-object/37643)

<div class="topic-metadata">

**Author:** [@acorns](https://discourse.processing.org/u/acorns)\
**Replies:** 1\
**Last updated:** [June 19, 2022, 10:56pm UTC](https://discourse.processing.org/t/how-to-only-play-animation-when-deleting-and-creating-new-object/37643 "2022-06-19T22:56:34Z")

</div>

Hi guys, I am creating a cherry blossom branch where you add a new flower object (via pressing z key) and delete flower object (via pressing m key). I want to make it before it display(), it plays a blooming animation wh…

---

## [Set focus on canvas](https://discourse.processing.org/t/set-focus-on-canvas/37617)

<div class="topic-metadata">

**Author:** [@J\_Silva](https://discourse.processing.org/u/J_Silva)\
**Replies:** 5\
**Last updated:** [June 18, 2022, 3:02pm UTC](https://discourse.processing.org/t/set-focus-on-canvas/37617 "2022-06-18T15:02:41Z")

</div>

Hi. In my project, I want to select shapes with radio buttons and move them with my keyboard arrow keys. The problem is that I need to click on the canvas after each button choice, or else the radio buttons will altern…

---

## [Callback function arguments](https://discourse.processing.org/t/callback-function-arguments/37588)

<div class="topic-metadata">

**Author:** [@davidhurwich](https://discourse.processing.org/u/davidhurwich)\
**Replies:** 2\
**Last updated:** [June 17, 2022, 8:00pm UTC](https://discourse.processing.org/t/callback-function-arguments/37588 "2022-06-17T20:00:56Z")

</div>

Hi, question about attaching event callback functions to an object in P5. Can those callback functions take arguments? for instance could I do something like this: obj.mousePressed( function(argument)); ?

---

## [P5.js web editor doesn't like private fields](https://discourse.processing.org/t/p5-js-web-editor-doesnt-like-private-fields/37430)

<div class="topic-metadata">

**Author:** [@fabiopettinati](https://discourse.processing.org/u/fabiopettinati)\
**Replies:** 3\
**Last updated:** [June 17, 2022, 3:30pm UTC](https://discourse.processing.org/t/p5-js-web-editor-doesnt-like-private-fields/37430 "2022-06-17T15:30:52Z")

</div>

The example code at Private fields works as expected but the editor complains visually upon encountering a # symbol… the rest of the line is highlighted in red. Is there a directive I could insert to prevent the lint fu…

---

## [Custom shape creates negative space when overlapping itself in WebGL mode](https://discourse.processing.org/t/custom-shape-creates-negative-space-when-overlapping-itself-in-webgl-mode/37262)

<div class="topic-metadata">

**Author:** [@neel](https://discourse.processing.org/u/neel)\
**Replies:** 1\
**Last updated:** [June 15, 2022, 11:22pm UTC](https://discourse.processing.org/t/custom-shape-creates-negative-space-when-overlapping-itself-in-webgl-mode/37262 "2022-06-15T23:22:46Z")

</div>

I’ve got a script that I’m trying to port from 2d mode to webgl mode, but the shapes are not behaving as expected. The following isn’t my script, but it’s a demonstration of the problem I run into. When I create a custom…

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

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