# p5.js

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

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

**Page:** 49

---

## [How to export Canva Render has GIF with CSS modification](https://discourse.processing.org/t/how-to-export-canva-render-has-gif-with-css-modification/28781)

<div class="topic-metadata">

**Author:** [@TuringMedia](https://discourse.processing.org/u/TuringMedia)\
**Replies:** 3\
**Last updated:** [March 24, 2021, 10:36am UTC](https://discourse.processing.org/t/how-to-export-canva-render-has-gif-with-css-modification/28781 "2021-03-24T10:36:55Z")

</div>

I’m using p5.js to make a GIF animation but I have an issue when I want to export it. I did a pixelased effect on my animation by adding these css properties to the Canva (140\*140 because I need a blur to apply image-r…

---

## [Visual effects, modifiers](https://discourse.processing.org/t/visual-effects-modifiers/28714)

<div class="topic-metadata">

**Author:** [@eArts](https://discourse.processing.org/u/eArts)\
**Replies:** 2\
**Last updated:** [March 23, 2021, 1:04am UTC](https://discourse.processing.org/t/visual-effects-modifiers/28714 "2021-03-23T01:04:59Z")

</div>

I want to use P5JS for digital arts. A very important thing are 3D modifiers and visual effects, like distortion, clouding, an explosion or blur an the edge of the model. Is P5JS suitable to do things like this? For me i…

---

## [How to view changes to JSDoc comments in browser](https://discourse.processing.org/t/how-to-view-changes-to-jsdoc-comments-in-browser/28733)

<div class="topic-metadata">

**Author:** [@prateek93a](https://discourse.processing.org/u/prateek93a)\
**Replies:** 0\
**Last updated:** [March 22, 2021, 4:58pm UTC](https://discourse.processing.org/t/how-to-view-changes-to-jsdoc-comments-in-browser/28733 "2021-03-22T16:58:20Z")

</div>

If I make some changes to JSDoc comments in a src file for p5.js, how can I view the changes in the browser on the p5.js reference website?

---

## [Display square image as circle image](https://discourse.processing.org/t/display-square-image-as-circle-image/28735)

<div class="topic-metadata">

**Author:** [@Bas950](https://discourse.processing.org/u/Bas950)\
**Replies:** 1\
**Last updated:** [March 22, 2021, 5:49pm UTC](https://discourse.processing.org/t/display-square-image-as-circle-image/28735 "2021-03-22T17:49:41Z")

</div>

So I load a square image, but I want it displayed as a circle image, how could I do this easily? (like just cut of the corners with transparency, width stay the same but just rounded)

---

## [Website idea(s)](https://discourse.processing.org/t/website-idea-s/28695)

<div class="topic-metadata">

**Author:** [@OptOut](https://discourse.processing.org/u/OptOut)\
**Replies:** 4\
**Last updated:** [March 21, 2021, 4:32pm UTC](https://discourse.processing.org/t/website-idea-s/28695 "2021-03-21T16:32:15Z")

</div>

Hi everybody, I am thinking about a project (very early stages) - a website used to tell a ‘story’ (no interactivity). So something like this: Website/page loads x seconds text\_1 appears x seconds image\_1 ap…

---

## [Issues with overwriting](https://discourse.processing.org/t/issues-with-overwriting/28650)

<div class="topic-metadata">

**Author:** [@quargsgreene](https://discourse.processing.org/u/quargsgreene)\
**Replies:** 2\
**Last updated:** [March 19, 2021, 9:08pm UTC](https://discourse.processing.org/t/issues-with-overwriting/28650 "2021-03-19T21:08:58Z")

</div>

I am trying to have multiple same-size rectangular panels of differing colors appear on the canvas. However, each panel is appearing the same color. Each color is stored in an array declared globally and each element the…

---

## [Nature of Code book (random walker)](https://discourse.processing.org/t/nature-of-code-book-random-walker/28637)

<div class="topic-metadata">

**Author:** [@Ariadne](https://discourse.processing.org/u/Ariadne)\
**Replies:** 7\
**Last updated:** [March 18, 2021, 3:13pm UTC](https://discourse.processing.org/t/nature-of-code-book-random-walker/28637 "2021-03-18T15:13:48Z")

</div>

I have been trying to follow with the Nature Of Code processing book in p5js. The following code does not work: class Walker { contructor() { this.x = 250; this.y = 250; } display() { stroke(255); …

---

## [createShader() not working on p5.Graphics](https://discourse.processing.org/t/createshader-not-working-on-p5-graphics/28617)

<div class="topic-metadata">

**Author:** [@duskvirkus](https://discourse.processing.org/u/duskvirkus)\
**Replies:** 4\
**Last updated:** [March 17, 2021, 11:19pm UTC](https://discourse.processing.org/t/createshader-not-working-on-p5-graphics/28617 "2021-03-17T23:19:07Z")

</div>

Not sure if this is a bug but when I try to use createShader() instead of loadShader() it doesn’t work on a p5.Graphics object. Figured I’d post here before creating an issue in case I’m doing something wrong. Below is…

---

## [How to align an ellipse to an arc that is mapped to time/hours? (Creating a sundial clock)](https://discourse.processing.org/t/how-to-align-an-ellipse-to-an-arc-that-is-mapped-to-time-hours-creating-a-sundial-clock/28596)

<div class="topic-metadata">

**Author:** [@keira](https://discourse.processing.org/u/keira)\
**Replies:** 2\
**Last updated:** [March 17, 2021, 9:43am UTC](https://discourse.processing.org/t/how-to-align-an-ellipse-to-an-arc-that-is-mapped-to-time-hours-creating-a-sundial-clock/28596 "2021-03-17T09:43:26Z")

</div>

Hello! I’m trying to create a clock inspired by sundials. I have created an arc that is mapped to the current hour and an ellipse. I want the ellipse to line up with the end of the arc so that when the hour changes it mo…

---

## [P5.js to Processing - How did I do? Are there better/more efficient methods?](https://discourse.processing.org/t/p5-js-to-processing-how-did-i-do-are-there-better-more-efficient-methods/28594)

<div class="topic-metadata">

**Author:** [@leatherbird](https://discourse.processing.org/u/leatherbird)\
**Replies:** 2\
**Last updated:** [March 17, 2021, 2:50am UTC](https://discourse.processing.org/t/p5-js-to-processing-how-did-i-do-are-there-better-more-efficient-methods/28594 "2021-03-17T02:50:28Z")

</div>

Hello! I found this tutorial video online for creating Sine wave structures in p5.js I don’t really know p5 very well, but I thought I would follow along, and try to do everything in the video with Processing instead. …

---

## [Model Rotation: Automatic & Mouse Mapped Issue](https://discourse.processing.org/t/model-rotation-automatic-mouse-mapped-issue/28561)

<div class="topic-metadata">

**Author:** [@cob](https://discourse.processing.org/u/cob)\
**Replies:** 1\
**Last updated:** [March 16, 2021, 11:09pm UTC](https://discourse.processing.org/t/model-rotation-automatic-mouse-mapped-issue/28561 "2021-03-16T23:09:38Z")

</div>

Hello, I’m creating an interactive animation for a friend which moves a model with mouseX & mouseY as well as has automatic movement if the cursor is off the canvas. However when off the canvas, there is no continuity be…

---

## [How to Unpause a sound file?](https://discourse.processing.org/t/how-to-unpause-a-sound-file/28565)

<div class="topic-metadata">

**Author:** [@DhawanGupta](https://discourse.processing.org/u/DhawanGupta)\
**Replies:** 3\
**Last updated:** [March 16, 2021, 3:35pm UTC](https://discourse.processing.org/t/how-to-unpause-a-sound-file/28565 "2021-03-16T15:35:12Z")

</div>

There is a function to pause a playing sound file. But, how to unpause it? Whenever I try to play it after pausing, it plays from the beginning, instead from where I paused it, contrary to reference document of pause()…

---

## [Moving the circle in the direction of another circle revolving around it in canvas](https://discourse.processing.org/t/moving-the-circle-in-the-direction-of-another-circle-revolving-around-it-in-canvas/28569)

<div class="topic-metadata">

**Author:** [@harsha](https://discourse.processing.org/u/harsha)\
**Replies:** 2\
**Last updated:** [March 16, 2021, 1:38pm UTC](https://discourse.processing.org/t/moving-the-circle-in-the-direction-of-another-circle-revolving-around-it-in-canvas/28569 "2021-03-16T13:38:07Z")

</div>

I have a problem of moving the big circle in the direction of small circle when a button is pressed. can anyone help? Goals: Make a circle on canvas \[Done\] Draw a small circle that rotates around the big circle \[Done\] …

---

## [How to control saved image resolution? // get() and save()](https://discourse.processing.org/t/how-to-control-saved-image-resolution-get-and-save/28550)

<div class="topic-metadata">

**Author:** [@tobo](https://discourse.processing.org/u/tobo)\
**Replies:** 4\
**Last updated:** [March 15, 2021, 8:37pm UTC](https://discourse.processing.org/t/how-to-control-saved-image-resolution-get-and-save/28550 "2021-03-15T20:37:45Z")

</div>

I’m trying to save a single image frame from a p5 webgl canvas to a variable. I used the second line of code below just to see the image for myself, as a reference. I noticed that the image it produces is exactly my defi…

---

## [Checkbox listener index](https://discourse.processing.org/t/checkbox-listener-index/28529)

<div class="topic-metadata">

**Author:** [@xbix](https://discourse.processing.org/u/xbix)\
**Replies:** 6\
**Last updated:** [March 15, 2021, 5:12pm UTC](https://discourse.processing.org/t/checkbox-listener-index/28529 "2021-03-15T17:12:14Z")

</div>

I have an array of checkboxes and I need to know which checkbox was pressed. My code looks like this: uiToogles() { var y = 0; checkbox = \[8\]; for (var x = 0; x \< 8; x++) { y = x \* 20; checkbox\[x…

---

## [Loading multiple models with a for loop?](https://discourse.processing.org/t/loading-multiple-models-with-a-for-loop/28395)

<div class="topic-metadata">

**Author:** [@lucienfradet](https://discourse.processing.org/u/lucienfradet)\
**Replies:** 2\
**Last updated:** [March 13, 2021, 2:20pm UTC](https://discourse.processing.org/t/loading-multiple-models-with-a-for-loop/28395 "2021-03-13T14:20:03Z")

</div>

Hello! I’m trying to load 15 different 3D models in P5 and make them appear at specific time. Is there a way to load models with a “for loop” and place the models in an array? I’m a complete beginner :confused: Here’s…

---

## [Can this be done (directionalLight)](https://discourse.processing.org/t/can-this-be-done-directionallight/28455)

<div class="topic-metadata">

**Author:** [@kgschlosser](https://discourse.processing.org/u/kgschlosser)\
**Replies:** 5\
**Last updated:** [March 12, 2021, 7:54pm UTC](https://discourse.processing.org/t/can-this-be-done-directionallight/28455 "2021-03-12T19:54:42Z")

</div>

I am doing a conversion of the headlights on my vehicle so they will work like new high end vehicle. They are going to be curve active and also horizon active. what this means is that they are going to move left or right…

---

## [P5.js Web Editor - French Translation](https://discourse.processing.org/t/p5-js-web-editor-french-translation/28469)

<div class="topic-metadata">

**Author:** [@cassie](https://discourse.processing.org/u/cassie)\
**Replies:** 2\
**Last updated:** [March 12, 2021, 7:42pm UTC](https://discourse.processing.org/t/p5-js-web-editor-french-translation/28469 "2021-03-12T19:42:34Z")

</div>

Hey all! There’s been a French translation of the p5.js Editor in the works, and it would be great to have some eyes on it. You can look at the full translation on GitHub and add your feedback there. You can also see th…

---

## [Corner radius in rectangle doesn't work in WEBGL](https://discourse.processing.org/t/corner-radius-in-rectangle-doesnt-work-in-webgl/28463)

<div class="topic-metadata">

**Author:** [@Amit90113](https://discourse.processing.org/u/Amit90113)\
**Replies:** 1\
**Last updated:** [March 12, 2021, 2:21pm UTC](https://discourse.processing.org/t/corner-radius-in-rectangle-doesnt-work-in-webgl/28463 "2021-03-12T14:21:15Z")

</div>

Well, I tried using the corner radius parameter in a rectangle in WEBGL mode it seems it does nothing.

---

## [Did a talk on p5.js + robotics/arduino using webSerial](https://discourse.processing.org/t/did-a-talk-on-p5-js-robotics-arduino-using-webserial/28443)

<div class="topic-metadata">

**Author:** [@monteslu](https://discourse.processing.org/u/monteslu)\
**Replies:** 0\
**Last updated:** [March 11, 2021, 4:33pm UTC](https://discourse.processing.org/t/did-a-talk-on-p5-js-robotics-arduino-using-webserial/28443 "2021-03-11T16:33:33Z")

</div>

From Halfstack last October. Video released a few days ago:

---

## [Conflict between loadShader() and p5 reference?](https://discourse.processing.org/t/conflict-between-loadshader-and-p5-reference/28402)

<div class="topic-metadata">

**Author:** [@marcela](https://discourse.processing.org/u/marcela)\
**Replies:** 2\
**Last updated:** [March 11, 2021, 12:11pm UTC](https://discourse.processing.org/t/conflict-between-loadshader-and-p5-reference/28402 "2021-03-11T12:11:05Z")

</div>

Hi everyone! I am trying to have a callback function triggered by a shader loading, but there seems to be something wrong. This is the suggested syntax in the reference: loadShader(vertFilename, fragFilename, \[callback…

---

## [setInterval with Posenet](https://discourse.processing.org/t/setinterval-with-posenet/28405)

<div class="topic-metadata">

**Author:** [@karenmsn](https://discourse.processing.org/u/karenmsn)\
**Replies:** 1\
**Last updated:** [March 10, 2021, 7:17pm UTC](https://discourse.processing.org/t/setinterval-with-posenet/28405 "2021-03-10T19:17:32Z")

</div>

I have a quick question about using Posenet! I’m coding a website like you can see here: https://distracted-euclid-963531.netlify.app/ that uses body movement to process sound. Clicking the button starts a looped sound f…

---

## [Posenet and Low Pass Filters](https://discourse.processing.org/t/posenet-and-low-pass-filters/27393)

<div class="topic-metadata">

**Author:** [@karenmsn](https://discourse.processing.org/u/karenmsn)\
**Replies:** 6\
**Last updated:** [March 10, 2021, 5:58pm UTC](https://discourse.processing.org/t/posenet-and-low-pass-filters/27393 "2021-03-10T17:58:05Z")

</div>

I’m working on a project that uses body motion (through Posenet) to perform sound processing (i.e. nose movement pans audio from a sound file). At the moment, I’m trying to use my wrist’s motion to filter the audio on th…

---

## [Open a new tab by clicking on img with mousePressed?](https://discourse.processing.org/t/open-a-new-tab-by-clicking-on-img-with-mousepressed/27106)

<div class="topic-metadata">

**Author:** [@moedigs](https://discourse.processing.org/u/moedigs)\
**Replies:** 6\
**Last updated:** [March 10, 2021, 5:11pm UTC](https://discourse.processing.org/t/open-a-new-tab-by-clicking-on-img-with-mousepressed/27106 "2021-03-10T17:11:37Z")

</div>

I’m attempting to load an img, and open a new tab/website with mousePressed when someone clicks on the img or within the space of the Canvas. It’s on a page with multiple sketches So I want to restrict the activated a…

---

## [Customise Checkbox](https://discourse.processing.org/t/customise-checkbox/28384)

<div class="topic-metadata">

**Author:** [@xbix](https://discourse.processing.org/u/xbix)\
**Replies:** 1\
**Last updated:** [March 10, 2021, 12:32pm UTC](https://discourse.processing.org/t/customise-checkbox/28384 "2021-03-10T12:32:05Z")

</div>

I need a slightly different checkbox like the one from the standard library. Instead of a check, I need a smooth background and custom background colors. What options do I have here? Can I extend the class or are ther…

---

## [How can I count the number of files in a directory?](https://discourse.processing.org/t/how-can-i-count-the-number-of-files-in-a-directory/28377)

<div class="topic-metadata">

**Author:** [@LiterallyANoodle](https://discourse.processing.org/u/LiterallyANoodle)\
**Replies:** 2\
**Last updated:** [March 10, 2021, 10:51am UTC](https://discourse.processing.org/t/how-can-i-count-the-number-of-files-in-a-directory/28377 "2021-03-10T10:51:10Z")

</div>

I’m working on a little side-project where it is necessary for me to preload several images as an array before the rest of the program runs. When this program is run in context, I won’t have any way of knowing how many i…

---

## [Dot Product Question](https://discourse.processing.org/t/dot-product-question/28351)

<div class="topic-metadata">

**Author:** [@BigBigRed](https://discourse.processing.org/u/BigBigRed)\
**Replies:** 2\
**Last updated:** [March 9, 2021, 3:06pm UTC](https://discourse.processing.org/t/dot-product-question/28351 "2021-03-09T15:06:05Z")

</div>

I am trying to understand Dot Product and how to use it. I am trying to follow/re engineer a shader that I have found. (Acid Jelly from either Shadertoy or Shaderific, I think). The line of shader code is ‘uv /= dot(u…

---

## [Full Screen with Hidings sliders](https://discourse.processing.org/t/full-screen-with-hidings-sliders/28249)

<div class="topic-metadata">

**Author:** [@Mem](https://discourse.processing.org/u/Mem)\
**Replies:** 2\
**Last updated:** [March 8, 2021, 6:08pm UTC](https://discourse.processing.org/t/full-screen-with-hidings-sliders/28249 "2021-03-08T18:08:16Z")

</div>

Hello, I would like to use the function full screen fullscreen(); Using sliders, checkboxs, inputs and buttons that will disappear when we are in a full screen mode. So basically I can work with sliders and then go f…

---

## [Checkbox switch](https://discourse.processing.org/t/checkbox-switch/28334)

<div class="topic-metadata">

**Author:** [@Mem](https://discourse.processing.org/u/Mem)\
**Replies:** 0\
**Last updated:** [March 8, 2021, 10:47am UTC](https://discourse.processing.org/t/checkbox-switch/28334 "2021-03-08T10:47:50Z")

</div>

Hi, I would like to be able to select different circle A,B When the A is selected and we select the B, the circle A should disappear and the checkbox A must be unchecked Here is the exemple : Thank you var checkbox\_…

---

## [P5.js onCanvasCreated?](https://discourse.processing.org/t/p5-js-oncanvascreated/28316)

<div class="topic-metadata">

**Author:** [@yy23432](https://discourse.processing.org/u/yy23432)\
**Replies:** 1\
**Last updated:** [March 7, 2021, 5:59pm UTC](https://discourse.processing.org/t/p5-js-oncanvascreated/28316 "2021-03-07T17:59:26Z")

</div>

Hi, I’m trying to use p5.js as a GUI part. Trying to do like… function createP5GUI() { let f = function(p) { p.setup = function() { let c = p.createCanvas(500, 50); } } return new p5(f); } and use it in DOM …

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

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