# p5.js

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

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

**Page:** 47

---

## ['Exploding' or 'dissolving' an ellipse?](https://discourse.processing.org/t/exploding-or-dissolving-an-ellipse/29205)

<div class="topic-metadata">

**Author:** [@gctwnl](https://discourse.processing.org/u/gctwnl)\
**Replies:** 5\
**Last updated:** [April 12, 2021, 12:06pm UTC](https://discourse.processing.org/t/exploding-or-dissolving-an-ellipse/29205 "2021-04-12T12:06:35Z")

</div>

I am new to p5.js (and to Javascript to be honest) and I was wondering if I can (with the help of other libraries if need be) have an ellipse object either explode, go up in smoke, implode, or visually disappear-in-place…

---

## [Masks not working on animated gifs?](https://discourse.processing.org/t/masks-not-working-on-animated-gifs/29243)

<div class="topic-metadata">

**Author:** [@sandersturing](https://discourse.processing.org/u/sandersturing)\
**Replies:** 6\
**Last updated:** [April 12, 2021, 10:37am UTC](https://discourse.processing.org/t/masks-not-working-on-animated-gifs/29243 "2021-04-12T10:37:09Z")

</div>

I’m trying to display animated gifs using planetSurface\[0\] = loadImage('assets/planets/tp.gif'); This works, but I would like to mask them out (using a simple image with a black circle): planetSurface\[this.i\].mask(pla…

---

## [P5 instance mode syntax question (createInput() constantly gets error'd not defined)](https://discourse.processing.org/t/p5-instance-mode-syntax-question-createinput-constantly-gets-errord-not-defined/29206)

<div class="topic-metadata">

**Author:** [@NayrbEroom](https://discourse.processing.org/u/NayrbEroom)\
**Replies:** 3\
**Last updated:** [April 12, 2021, 7:34am UTC](https://discourse.processing.org/t/p5-instance-mode-syntax-question-createinput-constantly-gets-errord-not-defined/29206 "2021-04-12T07:34:48Z")

</div>

Hello I have an instanced version of p5.js on my site. I am trying to get a canvas with a createInput method to accept some input from user. This is how it’s defined var sketch3 = function( controller ) { controlle…

---

## [P5.js serial port and Microbit connection](https://discourse.processing.org/t/p5-js-serial-port-and-microbit-connection/6986)

<div class="topic-metadata">

**Author:** [@loretod](https://discourse.processing.org/u/loretod)\
**Replies:** 10\
**Last updated:** [April 11, 2021, 9:17am UTC](https://discourse.processing.org/t/p5-js-serial-port-and-microbit-connection/6986 "2021-04-11T09:17:05Z")

</div>

I am working on getting the serial communication to work between a Microbit and p5.js. I’m pretty sure the Microbit side of the project is working since I am able to see the serial write in my terminal. On the p5.js sid…

---

## [Help understanding Instance mode vs "normal mode"](https://discourse.processing.org/t/help-understanding-instance-mode-vs-normal-mode/29262)

<div class="topic-metadata">

**Author:** [@edufissure](https://discourse.processing.org/u/edufissure)\
**Replies:** 3\
**Last updated:** [April 11, 2021, 9:05am UTC](https://discourse.processing.org/t/help-understanding-instance-mode-vs-normal-mode/29262 "2021-04-11T09:05:03Z")

</div>

please format code with \</\> button \* homework policy \* asking questions So i dont understand why to use instance mode. First i thought that putting “myContainer” i could add class and css position and integrate in a …

---

## [Library installation](https://discourse.processing.org/t/library-installation/22283)

<div class="topic-metadata">

**Author:** [@code\_X](https://discourse.processing.org/u/code_X)\
**Replies:** 1\
**Last updated:** [July 1, 2020, 2:00am UTC](https://discourse.processing.org/t/library-installation/22283 "2020-07-01T02:00:53Z")

</div>

Hello, i am here to ask for help getting a usable repository import link, i use microbits and want to use the p5js library in a microbit program but I can’t import the library from the links i’ve tried. I needs help. Tha…

---

## [Performance issue - \[Violation\] 'requestAnimationFrame'](https://discourse.processing.org/t/performance-issue-violation-requestanimationframe/29260)

<div class="topic-metadata">

**Author:** [@xbix](https://discourse.processing.org/u/xbix)\
**Replies:** 3\
**Last updated:** [April 10, 2021, 4:45pm UTC](https://discourse.processing.org/t/performance-issue-violation-requestanimationframe/29260 "2021-04-10T16:45:04Z")

</div>

In my code, I draw excel data using 2 classes. The CPU load is extremely high and I get this message in the console: \[Violation\] 'requestAnimationFrame' handler took 542ms There are no flare messages and when I reduce …

---

## [Canvas doesn't show on mobile](https://discourse.processing.org/t/canvas-doesnt-show-on-mobile/29250)

<div class="topic-metadata">

**Author:** [@loopy](https://discourse.processing.org/u/loopy)\
**Replies:** 1\
**Last updated:** [April 10, 2021, 2:03pm UTC](https://discourse.processing.org/t/canvas-doesnt-show-on-mobile/29250 "2021-04-10T14:03:29Z")

</div>

Hi everyone! I recently published a background creation app and I’m confused about its canvas behavior, namely that the canvas sometimes doesn’t display on mobile. I know it doesn’t show on my old iPhone on Safari and Fi…

---

## [Some please help me with my code](https://discourse.processing.org/t/some-please-help-me-with-my-code/29254)

<div class="topic-metadata">

**Author:** [@Bryce](https://discourse.processing.org/u/Bryce)\
**Replies:** 3\
**Last updated:** [April 10, 2021, 2:32am UTC](https://discourse.processing.org/t/some-please-help-me-with-my-code/29254 "2021-04-10T02:32:31Z")

</div>

Hi, my name is Bryce, I am confused about how to make the squares disappear once to circle hits them. Here is my code // circX is for the smaller circle let circX; // circY is for the smaller circle let circY; //b…

---

## [Help with my code](https://discourse.processing.org/t/help-with-my-code/29013)

<div class="topic-metadata">

**Author:** [@Bryce](https://discourse.processing.org/u/Bryce)\
**Replies:** 3\
**Last updated:** [April 9, 2021, 9:43pm UTC](https://discourse.processing.org/t/help-with-my-code/29013 "2021-04-09T21:43:04Z")

</div>

Hello, my name is Bryce, I have been working on a project for a while and I just cant get it. This is what I'm supposed to do: “Your job is to create a game where there is a row of boxes along the top of the canvas…

---

## [Privacy policy and terms of service for p5js.org web editor?](https://discourse.processing.org/t/privacy-policy-and-terms-of-service-for-p5js-org-web-editor/29247)

<div class="topic-metadata">

**Author:** [@teacher\_guy](https://discourse.processing.org/u/teacher_guy)\
**Replies:** 4\
**Last updated:** [April 9, 2021, 4:05pm UTC](https://discourse.processing.org/t/privacy-policy-and-terms-of-service-for-p5js-org-web-editor/29247 "2021-04-09T16:05:14Z")

</div>

I’d like to start using the p5js.org web editor with my elementary and middle school students, but I can’t do so without first reviewing a privacy policy and/or terms of service. I’ve looked through the site and can’t se…

---

## [Difference between collide and bounce in p5.play](https://discourse.processing.org/t/difference-between-collide-and-bounce-in-p5-play/29214)

<div class="topic-metadata">

**Author:** [@edufissure](https://discourse.processing.org/u/edufissure)\
**Replies:** 0\
**Last updated:** [April 8, 2021, 11:36am UTC](https://discourse.processing.org/t/difference-between-collide-and-bounce-in-p5-play/29214 "2021-04-08T11:36:48Z")

</div>

please format code with \</\> button \* homework policy \* asking questions Im trying to implement a ping-pong game or pong, and i ask to myself what is better to use when ball bounces/collides with player…I assume i hav…

---

## [P5 Canvas and HTML](https://discourse.processing.org/t/p5-canvas-and-html/29196)

<div class="topic-metadata">

**Author:** [@karenmsn](https://discourse.processing.org/u/karenmsn)\
**Replies:** 2\
**Last updated:** [April 7, 2021, 7:18pm UTC](https://discourse.processing.org/t/p5-canvas-and-html/29196 "2021-04-07T19:18:52Z")

</div>

Hi! Quick question about using the P5 canvas with HTML code. I understand that calling createCanvas() creates the element in the HTML side of a website, but how do I reference that canvas in my HTML code in order to mov…

---

## [Qualtrics and p5.js](https://discourse.processing.org/t/qualtrics-and-p5-js/29184)

<div class="topic-metadata">

**Author:** [@Jwebstercrowd](https://discourse.processing.org/u/Jwebstercrowd)\
**Replies:** 2\
**Last updated:** [April 7, 2021, 11:52am UTC](https://discourse.processing.org/t/qualtrics-and-p5-js/29184 "2021-04-07T11:52:04Z")

</div>

Hey! I was wondering if anyone has had any success with implenting a p5 sketch inside of a Qualtrics survey? I have been unable to get it to work thus far, and now I’m wondering if it is even possible. I added the p5 lib…

---

## [P5.js basic webworkers tutorial](https://discourse.processing.org/t/p5-js-basic-webworkers-tutorial/29155)

<div class="topic-metadata">

**Author:** [@kris.dpd](https://discourse.processing.org/u/kris.dpd)\
**Replies:** 4\
**Last updated:** [April 7, 2021, 9:36am UTC](https://discourse.processing.org/t/p5-js-basic-webworkers-tutorial/29155 "2021-04-07T09:36:06Z")

</div>

Hi! I am having a bit of trouble getting webworkers to properly work with P5.js is anyone familiar with a basic getting started tutorial in P5.js? Here is a basic sketch but somehow the old response gets stuck in the b…

---

## [Glitch effect with or without pixels](https://discourse.processing.org/t/glitch-effect-with-or-without-pixels/13556)

<div class="topic-metadata">

**Author:** [@l3ehfar](https://discourse.processing.org/u/l3ehfar)\
**Replies:** 14\
**Last updated:** [April 6, 2021, 9:47pm UTC](https://discourse.processing.org/t/glitch-effect-with-or-without-pixels/13556 "2021-04-06T21:47:45Z")

</div>

I’ve been working on a project which has been developed with pure p5js code, but I wanna have a glitch effect as a reaction to sound though, as I know the actual glitch effect works much better on image pixels (although …

---

## [Sin() cos() functions acting strangely](https://discourse.processing.org/t/sin-cos-functions-acting-strangely/29149)

<div class="topic-metadata">

**Author:** [@psemme](https://discourse.processing.org/u/psemme)\
**Replies:** 6\
**Last updated:** [April 6, 2021, 1:44pm UTC](https://discourse.processing.org/t/sin-cos-functions-acting-strangely/29149 "2021-04-06T13:44:36Z")

</div>

Hello, Can’t understand this: In one simple sketch sin(30) and cos(30) produce results that appear incorrect while the exact same code in another sketch (from the Examples section) returns the correct result. Here…

---

## [Unexpected result with random pattern](https://discourse.processing.org/t/unexpected-result-with-random-pattern/29133)

<div class="topic-metadata">

**Author:** [@xiquip](https://discourse.processing.org/u/xiquip)\
**Replies:** 5\
**Last updated:** [April 6, 2021, 10:49am UTC](https://discourse.processing.org/t/unexpected-result-with-random-pattern/29133 "2021-04-06T10:49:46Z")

</div>

Hello, I thought every time I ran the code, the black boxes would appear like this. (image 1 and 2) But they are doing it like this (image 3) or anything but this. Does anyone know why? function blacksquare1() { f…

---

## [p5JS server side render - using node-canvas](https://discourse.processing.org/t/p5js-server-side-render-using-node-canvas/29126)

<div class="topic-metadata">

**Author:** [@DCsan](https://discourse.processing.org/u/DCsan)\
**Replies:** 4\
**Last updated:** [April 6, 2021, 7:53am UTC](https://discourse.processing.org/t/p5js-server-side-render-using-node-canvas/29126 "2021-04-06T07:53:09Z")

</div>

I’d like to render images from a P5 script, for preview thumbnails. Has someone got advice on that? The node-canvas library would seem to be a good fit for this, but not sure how p5 deals with things like the event loop…

---

## [TypeError: Cannot set property '0' of undefined](https://discourse.processing.org/t/typeerror-cannot-set-property-0-of-undefined/29139)

<div class="topic-metadata">

**Author:** [@xbix](https://discourse.processing.org/u/xbix)\
**Replies:** 6\
**Last updated:** [April 6, 2021, 7:30am UTC](https://discourse.processing.org/t/typeerror-cannot-set-property-0-of-undefined/29139 "2021-04-06T07:30:13Z")

</div>

In my constructor I define my variable like this: constructor(){ this.myvar = \[\]; } and then, inside a function, I init the array like this: initSutff(){ for (let i = 0; i \< labels.length; i++) { this.m…

---

## [NodeJS with Fastify but want to make an canvas (p5js server-side)](https://discourse.processing.org/t/nodejs-with-fastify-but-want-to-make-an-canvas-p5js-server-side/24317)

<div class="topic-metadata">

**Author:** [@Bas950](https://discourse.processing.org/u/Bas950)\
**Replies:** 15\
**Last updated:** [April 6, 2021, 6:56am UTC](https://discourse.processing.org/t/nodejs-with-fastify-but-want-to-make-an-canvas-p5js-server-side/24317 "2021-04-06T06:56:44Z")

</div>

Hey so I am kinda new to this, But I am making an API using Fastify & NodeJS and want to add an overlay to a video, I have looked at multiple things and found that p5js would be the best for me, but I am failing to set …

---

## [Discussion regarding FriendlyGlobalFunctionBinder in FES](https://discourse.processing.org/t/discussion-regarding-friendlyglobalfunctionbinder-in-fes/29140)

<div class="topic-metadata">

**Author:** [@bhushan](https://discourse.processing.org/u/bhushan)\
**Replies:** 0\
**Last updated:** [April 5, 2021, 8:04pm UTC](https://discourse.processing.org/t/discussion-regarding-friendlyglobalfunctionbinder-in-fes/29140 "2021-04-05T20:04:05Z")

</div>

While implementing ‘friendly error when user overwrites p5.js functions’ discussed in this issue, the approach taken was that (solved by this PR) at the start of the run, every function in p5.js is assigned a “binding” …

---

## [Switch with createCheckbox()](https://discourse.processing.org/t/switch-with-createcheckbox/28945)

<div class="topic-metadata">

**Author:** [@Mem](https://discourse.processing.org/u/Mem)\
**Replies:** 10\
**Last updated:** [April 5, 2021, 1:41pm UTC](https://discourse.processing.org/t/switch-with-createcheckbox/28945 "2021-04-05T13:41:59Z")

</div>

Hi Again Sorry, I’m a beginner, I didn’t understand what was formatting the code. I hope now I will get some help :slightly\_smiling\_face: I would like to be able to select different circle A and B with a createCheckbox…

---

## [P5.js video upload into switch statement](https://discourse.processing.org/t/p5-js-video-upload-into-switch-statement/29107)

<div class="topic-metadata">

**Author:** [@empero1615](https://discourse.processing.org/u/empero1615)\
**Replies:** 5\
**Last updated:** [April 5, 2021, 7:18am UTC](https://discourse.processing.org/t/p5-js-video-upload-into-switch-statement/29107 "2021-04-05T07:18:45Z")

</div>

How can I upload a video into a switch statement and get it to play? I have referred to the video canvas example and have applied that code within my program but it still doesn’t run, I’m not sure if P5 allows me to uplo…

---

## [How can I get version constant in p5.js?](https://discourse.processing.org/t/how-can-i-get-version-constant-in-p5-js/28217)

<div class="topic-metadata">

**Author:** [@micuat](https://discourse.processing.org/u/micuat)\
**Replies:** 5\
**Last updated:** [April 5, 2021, 6:56am UTC](https://discourse.processing.org/t/how-can-i-get-version-constant-in-p5-js/28217 "2021-04-05T06:56:18Z")

</div>

basically what the title says - for debugging purpose I want to get the version as a constant variable. I checked each variable in “this” but didn’t get anything relevant matches /version/i function setup() { createCa…

---

## [Detect p5 1.1.9 vs 1.0.0?](https://discourse.processing.org/t/detect-p5-1-1-9-vs-1-0-0/22920)

<div class="topic-metadata">

**Author:** [@grege2](https://discourse.processing.org/u/grege2)\
**Replies:** 5\
**Last updated:** [April 5, 2021, 6:19am UTC](https://discourse.processing.org/t/detect-p5-1-1-9-vs-1-0-0/22920 "2021-04-05T06:19:43Z")

</div>

Hi folks, Since p5.js 0.7.2 I’ve been able to distinguish what release I’m running on by checking that “typeof” some function or constant is “undefined” or not. This relies on new functions etc. being available to check…

---

## [Coding problem 123 (Messy Curve Draw)](https://discourse.processing.org/t/coding-problem-123-messy-curve-draw/29085)

<div class="topic-metadata">

**Author:** [@fxddf](https://discourse.processing.org/u/fxddf)\
**Replies:** 4\
**Last updated:** [April 4, 2021, 9:18am UTC](https://discourse.processing.org/t/coding-problem-123-messy-curve-draw/29085 "2021-04-04T09:18:23Z")

</div>

I found this code from the following site, but I do not see anything by changing the values. Can anyone help me?

---

## [globalCompositeOperation in P5](https://discourse.processing.org/t/globalcompositeoperation-in-p5/29105)

<div class="topic-metadata">

**Author:** [@hellonearthis](https://discourse.processing.org/u/hellonearthis)\
**Replies:** 1\
**Last updated:** [April 4, 2021, 6:55am UTC](https://discourse.processing.org/t/globalcompositeoperation-in-p5/29105 "2021-04-04T06:55:30Z")

</div>

I was watching the video below talk about the globalCompositeOperation And I wondered how this is used in P5.js It’s similar but different to (blendmode)\[ \<blend-mode\> - CSS: Cascading Style Sheets | MDN\] So I made th…

---

## [Is there a way to detect 2 key presses at once?](https://discourse.processing.org/t/is-there-a-way-to-detect-2-key-presses-at-once/29100)

<div class="topic-metadata">

**Author:** [@graph100](https://discourse.processing.org/u/graph100)\
**Replies:** 2\
**Last updated:** [April 3, 2021, 11:14pm UTC](https://discourse.processing.org/t/is-there-a-way-to-detect-2-key-presses-at-once/29100 "2021-04-03T23:14:39Z")

</div>

Hi, I’ve mainly been working in p5.js, and some time ago, I was porting one of my javascript games to processing and I noticed there isn’t really and equivalent in processing. I’ve tried: if (keyPressed) { switch key …

---

## [Is there any way to implement invisibility using opencv js framework](https://discourse.processing.org/t/is-there-any-way-to-implement-invisibility-using-opencv-js-framework/29079)

<div class="topic-metadata">

**Author:** [@bandhavya](https://discourse.processing.org/u/bandhavya)\
**Replies:** 3\
**Last updated:** [April 3, 2021, 11:46am UTC](https://discourse.processing.org/t/is-there-any-way-to-implement-invisibility-using-opencv-js-framework/29079 "2021-04-03T11:46:45Z")

</div>

please format code with \</\> button \* homework policy \* asking questions Is there a possibility of implementing something like this https://analyticsindiamag.com/my-fun-ai-project-how-to-be-invisible/ Is this possibl…

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

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