# p5.js

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

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

**Page:** 22

---

## [Quad in WEBGL is hidden or shown with diagonal line](https://discourse.processing.org/t/quad-in-webgl-is-hidden-or-shown-with-diagonal-line/38233)

<div class="topic-metadata">

**Author:** [@yedu](https://discourse.processing.org/u/yedu)\
**Replies:** 3\
**Last updated:** [August 6, 2022, 8:14am UTC](https://discourse.processing.org/t/quad-in-webgl-is-hidden-or-shown-with-diagonal-line/38233 "2022-08-06T08:14:18Z")

</div>

In the following code, I expect to see two quads displayed on the canvas, but only the blue one shows up, and it shows up with a diagonal line between its two vertexes. How can I get rid of the diagonal line? How come …

---

## [Does anyone know how to convert processing to p5.js?](https://discourse.processing.org/t/does-anyone-know-how-to-convert-processing-to-p5-js/38212)

<div class="topic-metadata">

**Author:** [@Dazsha](https://discourse.processing.org/u/Dazsha)\
**Replies:** 1\
**Last updated:** [August 3, 2022, 5:03pm UTC](https://discourse.processing.org/t/does-anyone-know-how-to-convert-processing-to-p5-js/38212 "2022-08-03T17:03:25Z")

</div>

please format code with \</\> button \* homework policy \* asking questions This is the processing code that I’d like to convert Particle\[\] particles; float alpha; void setup() { size(1112, 834); background(0); …

---

## [Download empty projects! - Bug!?](https://discourse.processing.org/t/download-empty-projects-bug/38210)

<div class="topic-metadata">

**Author:** [@mandor](https://discourse.processing.org/u/mandor)\
**Replies:** 1\
**Last updated:** [August 3, 2022, 1:50pm UTC](https://discourse.processing.org/t/download-empty-projects-bug/38210 "2022-08-03T13:50:24Z")

</div>

please format code with \</\> button \* homework policy \* asking questions Hello, I am trying to download a project from p5.js online editor, and indeed it download all files of project folder, but those files are empty…

---

## [BlendMode（MULTIPLY) is slow in Firefox](https://discourse.processing.org/t/blendmode-multiply-is-slow-in-firefox/38156)

<div class="topic-metadata">

**Author:** [@Chi3010](https://discourse.processing.org/u/Chi3010)\
**Replies:** 4\
**Last updated:** [August 3, 2022, 3:29am UTC](https://discourse.processing.org/t/blendmode-multiply-is-slow-in-firefox/38156 "2022-08-03T03:29:19Z")

</div>

Hello! I have noticed quite a difference in rendering speed between browsers depending on blendMode. When I run the following code, it runs fast in Chrome and Edge, but slow in Firefox. function setup() { let c = cr…

---

## [Why is my code not working when I'm trying to show and hide the navbar](https://discourse.processing.org/t/why-is-my-code-not-working-when-im-trying-to-show-and-hide-the-navbar/38195)

<div class="topic-metadata">

**Author:** [@dija\_321](https://discourse.processing.org/u/dija_321)\
**Replies:** 0\
**Last updated:** [August 2, 2022, 2:18pm UTC](https://discourse.processing.org/t/why-is-my-code-not-working-when-im-trying-to-show-and-hide-the-navbar/38195 "2022-08-02T14:18:45Z")

</div>

HTML: \<!doctype html\> navbar Home CSS: .container{ background-color: black; height:100vh; width:0vw; } JS: l…

---

## [An object-oriented wrapper for P5](https://discourse.processing.org/t/an-object-oriented-wrapper-for-p5/38180)

<div class="topic-metadata">

**Author:** [@SanzSeraph](https://discourse.processing.org/u/SanzSeraph)\
**Replies:** 6\
**Last updated:** [August 1, 2022, 3:04pm UTC](https://discourse.processing.org/t/an-object-oriented-wrapper-for-p5/38180 "2022-08-01T15:04:00Z")

</div>

I love the simplicity of p5 and the fact that it shies away from an object-oriented API. This actually makes it conceptually closer to how lower level languages work. However, I’m wondering if it would be valuable to ha…

---

## [Problems loading proyects with debian 11 (web editor & vscode)](https://discourse.processing.org/t/problems-loading-proyects-with-debian-11-web-editor-vscode/38178)

<div class="topic-metadata">

**Author:** [@carmavals](https://discourse.processing.org/u/carmavals)\
**Replies:** 0\
**Last updated:** [July 31, 2022, 8:27pm UTC](https://discourse.processing.org/t/problems-loading-proyects-with-debian-11-web-editor-vscode/38178 "2022-07-31T20:27:01Z")

</div>

Hi! I am having problems loading my proyects everytime I work on the web editor or in my code editor(vscode with the p5 extension). It runs slow every time I open it or save it and have to start again the laptop, but it …

---

## [TouchStarted() problem with mobile](https://discourse.processing.org/t/touchstarted-problem-with-mobile/38164)

<div class="topic-metadata">

**Author:** [@FredGuillot](https://discourse.processing.org/u/FredGuillot)\
**Replies:** 4\
**Last updated:** [July 31, 2022, 2:14am UTC](https://discourse.processing.org/t/touchstarted-problem-with-mobile/38164 "2022-07-31T02:14:15Z")

</div>

Hello, I have a sketch where I use the touchStarted() function, and it does not work with a mobile device (i.e.: nothing happen when I’m touching the screen). NOTE: when I run the same script with a compute, it works we…

---

## [Minimising p5.min.js further for production](https://discourse.processing.org/t/minimising-p5-min-js-further-for-production/38158)

<div class="topic-metadata">

**Author:** [@khan360](https://discourse.processing.org/u/khan360)\
**Replies:** 1\
**Last updated:** [July 30, 2022, 6:29am UTC](https://discourse.processing.org/t/minimising-p5-min-js-further-for-production/38158 "2022-07-30T06:29:01Z")

</div>

So as of today, p5.js is on version 1.4.2 and the minified file stands at a whopping 804KB filesize. I am a website developer and have been learning and getting better at it since some months now and want to use it on c…

---

## [Fourier image analysis in P5](https://discourse.processing.org/t/fourier-image-analysis-in-p5/38121)

<div class="topic-metadata">

**Author:** [@scannerlicker](https://discourse.processing.org/u/scannerlicker)\
**Replies:** 0\
**Last updated:** [July 27, 2022, 4:10pm UTC](https://discourse.processing.org/t/fourier-image-analysis-in-p5/38121 "2022-07-27T16:10:39Z")

</div>

Hello everyone! I’ve been trying to make a little diffraction simulator and I’m struggling with finding 2D FFT and IFFT libraries to work along with P5. The program I’m trying to do should do the following: Get a FFT…

---

## [P5.js 2022 Showcase is Open for Submissions!](https://discourse.processing.org/t/p5-js-2022-showcase-is-open-for-submissions/38124)

<div class="topic-metadata">

**Author:** [@anniezheng](https://discourse.processing.org/u/anniezheng)\
**Replies:** 0\
**Last updated:** [July 27, 2022, 6:40pm UTC](https://discourse.processing.org/t/p5-js-2022-showcase-is-open-for-submissions/38124 "2022-07-27T18:40:55Z")

</div>

Hello everyone! We are so excited to bring back the fourth iteration of the annual p5.js Showcase this summer! This time, the showcase will be organized under the theme of . With this in mind, we will be looking for proj…

---

## [P5.js Copy Tool](https://discourse.processing.org/t/p5-js-copy-tool/38109)

<div class="topic-metadata">

**Author:** [@courserastudent16](https://discourse.processing.org/u/courserastudent16)\
**Replies:** 2\
**Last updated:** [July 27, 2022, 8:34am UTC](https://discourse.processing.org/t/p5-js-copy-tool/38109 "2022-07-27T08:34:29Z")

</div>

Hello, I hope everyone is doing well. I’m trying to create a copy tool using P5.js. I’m using a constructor function to make the tool. What should I add to this function below? I want the copy button to work shapes. …

---

## [P5.js Text Box Tool](https://discourse.processing.org/t/p5-js-text-box-tool/38092)

<div class="topic-metadata">

**Author:** [@courserastudent16](https://discourse.processing.org/u/courserastudent16)\
**Replies:** 6\
**Last updated:** [July 26, 2022, 4:26pm UTC](https://discourse.processing.org/t/p5-js-text-box-tool/38092 "2022-07-26T16:26:18Z")

</div>

Hello, I hope everyone is doing well. I’m trying to create a textbox using P5.js. I’m using a constructor function to make the tool. Please let me know what I’m doing here. function textBox(p) { this.name = 'textB…

---

## [Monet Art loop issue](https://discourse.processing.org/t/monet-art-loop-issue/38089)

<div class="topic-metadata">

**Author:** [@druchtie](https://discourse.processing.org/u/druchtie)\
**Replies:** 9\
**Last updated:** [July 25, 2022, 6:56pm UTC](https://discourse.processing.org/t/monet-art-loop-issue/38089 "2022-07-25T18:56:30Z")

</div>

Hi, I have been watching some tutorials this weekend and came across a tutorial that I started to tweak to create some Monet-like artworks from my pictures. The only problem is that it has some strange behavior on the ri…

---

## [P5.js Redo Tool](https://discourse.processing.org/t/p5-js-redo-tool/38095)

<div class="topic-metadata">

**Author:** [@courserastudent16](https://discourse.processing.org/u/courserastudent16)\
**Replies:** 2\
**Last updated:** [July 25, 2022, 10:29am UTC](https://discourse.processing.org/t/p5-js-redo-tool/38095 "2022-07-25T10:29:08Z")

</div>

Hello, I hope everyone is doing well. I’m trying to create a redo tool using P5.js. I’m using a constructor function to make the tool. What should I add to this function below? I want the redo button to work shapes. …

---

## [P5.js Undo Tool](https://discourse.processing.org/t/p5-js-undo-tool/38093)

<div class="topic-metadata">

**Author:** [@courserastudent16](https://discourse.processing.org/u/courserastudent16)\
**Replies:** 3\
**Last updated:** [July 25, 2022, 10:24am UTC](https://discourse.processing.org/t/p5-js-undo-tool/38093 "2022-07-25T10:24:39Z")

</div>

Hello, I hope everyone is doing well. I’m trying to create an undo tool using P5.js. I’m using a constructor function to make the tool. What should I add to this function below? I want the undo button to work shapes. …

---

## [Inner/Outer Stroke Offset Possible?](https://discourse.processing.org/t/inner-outer-stroke-offset-possible/38075)

<div class="topic-metadata">

**Author:** [@arbo](https://discourse.processing.org/u/arbo)\
**Replies:** 7\
**Last updated:** [July 24, 2022, 11:06pm UTC](https://discourse.processing.org/t/inner-outer-stroke-offset-possible/38075 "2022-07-24T23:06:11Z")

</div>

Using P5js, is it possible to create either an inner or outer equidistant stroke line which follows the contour of the shape? Take for example the image below. if I had the capitol letter ‘E’ and wanted to draw the inn…

---

## [Fill from an array](https://discourse.processing.org/t/fill-from-an-array/38080)

<div class="topic-metadata">

**Author:** [@ablanton](https://discourse.processing.org/u/ablanton)\
**Replies:** 4\
**Last updated:** [July 24, 2022, 8:40pm UTC](https://discourse.processing.org/t/fill-from-an-array/38080 "2022-07-24T20:40:06Z")

</div>

hi all, i’m trying to input fill() from a global array and can’t see why this won’t work. it looks like a type conversion issue, but i thought this should work. any hints? let array\_main = \['0fb794', 2, 3\]; function s…

---

## [Save p5js-Script to ipfs with correct MimeType](https://discourse.processing.org/t/save-p5js-script-to-ipfs-with-correct-mimetype/38077)

<div class="topic-metadata">

**Author:** [@res56](https://discourse.processing.org/u/res56)\
**Replies:** 0\
**Last updated:** [July 24, 2022, 4:49pm UTC](https://discourse.processing.org/t/save-p5js-script-to-ipfs-with-correct-mimetype/38077 "2022-07-24T16:49:20Z")

</div>

Hello everyone, I want to save a p5js Script to ipfs with node.js It is necassary to store the script in a string value. What is the smartest way to set the Mimetype to application/javascript so the Browser is able to …

---

## [Weird asynchronous behaviour in p5.js](https://discourse.processing.org/t/weird-asynchronous-behaviour-in-p5-js/38072)

<div class="topic-metadata">

**Author:** [@M1ke](https://discourse.processing.org/u/M1ke)\
**Replies:** 3\
**Last updated:** [July 24, 2022, 2:06pm UTC](https://discourse.processing.org/t/weird-asynchronous-behaviour-in-p5-js/38072 "2022-07-24T14:06:44Z")

</div>

In short: I’m making a programming language in p5.js as an exercise, so nothing too serious, however I have incountered a problem which seems to be unique to p5.js . For example, my compiler interprets these 3 successive…

---

## [Display 1 character (from a choice of 4) in an animation](https://discourse.processing.org/t/display-1-character-from-a-choice-of-4-in-an-animation/38068)

<div class="topic-metadata">

**Author:** [@E-maniak](https://discourse.processing.org/u/E-maniak)\
**Replies:** 4\
**Last updated:** [July 23, 2022, 7:50pm UTC](https://discourse.processing.org/t/display-1-character-from-a-choice-of-4-in-an-animation/38068 "2022-07-23T19:50:46Z")

</div>

Hello, I am trying to create an animation with : TV (fixed) clouds (mobile) a character (not moving) I would like the character to be random at each load (a witch, a mage, an angel and an astronaut). Unfortunately, …

---

## [uPIGr P5.js/Tone.js online editor](https://discourse.processing.org/t/upigr-p5-js-tone-js-online-editor/38065)

<div class="topic-metadata">

**Author:** [@nxmusic](https://discourse.processing.org/u/nxmusic)\
**Replies:** 0\
**Last updated:** [July 23, 2022, 4:07pm UTC](https://discourse.processing.org/t/upigr-p5-js-tone-js-online-editor/38065 "2022-07-23T16:07:13Z")

</div>

Hi I programmed a basic javascript editor for audiovisual livecoding. I’ve done it for my compositions and it’s in a very early stage of development. But I thought maybe it could be useful to someone in the p5.js/Tone.…

---

## [Shorthand code translation](https://discourse.processing.org/t/shorthand-code-translation/38050)

<div class="topic-metadata">

**Author:** [@Sunt](https://discourse.processing.org/u/Sunt)\
**Replies:** 11\
**Last updated:** [July 22, 2022, 7:09am UTC](https://discourse.processing.org/t/shorthand-code-translation/38050 "2022-07-22T07:09:13Z")

</div>

Hi. I found such lovely sketches on Twitter like this one below from @KomaTebe, but I can’t translate it into the usual (not shorthand) code. Could anyone do this? f=0,draw=a=\>{for(f||createCanvas(W=400,W,WEBGL),noStr…

---

## [Brackets live preview generates a 404](https://discourse.processing.org/t/brackets-live-preview-generates-a-404/38042)

<div class="topic-metadata">

**Author:** [@berndbausch](https://discourse.processing.org/u/berndbausch)\
**Replies:** 2\
**Last updated:** [July 21, 2022, 8:38pm UTC](https://discourse.processing.org/t/brackets-live-preview-generates-a-404/38042 "2022-07-21T20:38:50Z")

</div>

This is on a Windows PC. I am totally new to P5JS (and slightly less new to Processing) and try to use Brackets to edit and test my sketches. Originally, it worked. I downloaded the p5js ZIP file, unpacked it on the Des…

---

## [Unexpected behavior from a shader in p5](https://discourse.processing.org/t/unexpected-behavior-from-a-shader-in-p5/38041)

<div class="topic-metadata">

**Author:** [@neel](https://discourse.processing.org/u/neel)\
**Replies:** 2\
**Last updated:** [July 21, 2022, 12:41pm UTC](https://discourse.processing.org/t/unexpected-behavior-from-a-shader-in-p5/38041 "2022-07-21T12:41:28Z")

</div>

I’ve got a shader that I’m trying to run in p5, but it doesn’t work as expected. If I copy this fragment shader into editor.thebookofshaders.com, it generates a gradient that’s black on the left and red on the right. Whe…

---

## [I want to set the background as the canvas](https://discourse.processing.org/t/i-want-to-set-the-background-as-the-canvas/26154)

<div class="topic-metadata">

**Author:** [@bi3her](https://discourse.processing.org/u/bi3her)\
**Replies:** 2\
**Last updated:** [July 19, 2022, 1:56pm UTC](https://discourse.processing.org/t/i-want-to-set-the-background-as-the-canvas/26154 "2022-07-19T13:56:38Z")

</div>

I’m working on a small project website where clients draw something and then they can click a button to send the canvas to the server, and then the server sends it back to other clients and the canvas image is set as th…

---

## [Using my own data in a P5.js sketch?](https://discourse.processing.org/t/using-my-own-data-in-a-p5-js-sketch/37983)

<div class="topic-metadata">

**Author:** [@mamba76](https://discourse.processing.org/u/mamba76)\
**Replies:** 10\
**Last updated:** [July 18, 2022, 8:42pm UTC](https://discourse.processing.org/t/using-my-own-data-in-a-p5-js-sketch/37983 "2022-07-18T20:42:53Z")

</div>

How can I load my JSON file, containing an array of x / y coordinates, into my sketch program so I can draw a graph ?

---

## [Combining classes and instance mode in p5js?](https://discourse.processing.org/t/combining-classes-and-instance-mode-in-p5js/38006)

<div class="topic-metadata">

**Author:** [@basicvisual](https://discourse.processing.org/u/basicvisual)\
**Replies:** 1\
**Last updated:** [July 17, 2022, 6:37pm UTC](https://discourse.processing.org/t/combining-classes-and-instance-mode-in-p5js/38006 "2022-07-17T18:37:30Z")

</div>

Hi recently I came across the topic of running sketches in p5js in an instance mode. I had been able to draw shapes and do basic visualization using the instance mode. However I am quite confused when it comes in dealing…

---

## [Parallel for loops in p5js](https://discourse.processing.org/t/parallel-for-loops-in-p5js/37997)

<div class="topic-metadata">

**Author:** [@mldvxcc](https://discourse.processing.org/u/mldvxcc)\
**Replies:** 0\
**Last updated:** [July 17, 2022, 4:19am UTC](https://discourse.processing.org/t/parallel-for-loops-in-p5js/37997 "2022-07-17T04:19:28Z")

</div>

I was wondering if it is possible to run parallel for loops in JavaScript using the p5js library? I am trying to speed up the following code and run multiple points in parallel given each is independent. \< for (ix = 0…

---

## [How can I see additive filter frequency with two LFOs?](https://discourse.processing.org/t/how-can-i-see-additive-filter-frequency-with-two-lfos/37895)

<div class="topic-metadata">

**Author:** [@exactspace](https://discourse.processing.org/u/exactspace)\
**Replies:** 9\
**Last updated:** [July 15, 2022, 7:03pm UTC](https://discourse.processing.org/t/how-can-i-see-additive-filter-frequency-with-two-lfos/37895 "2022-07-15T19:03:35Z")

</div>

please format code with \</\> button \* homework policy \* asking questions I have two LFOs (which are oscillators) running at 2.9 and 3.9 for their frequencies, set to 1500, and 1600 for their amplitude, and I’m setting…

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

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