# p5.js

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

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

**Page:** 24

---

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

---

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

<div class="topic-metadata">

**Author:** [@davidhurwich](https://discourse.processing.org/u/davidhurwich)\
**Replies:** 1\
**Last updated:** [June 15, 2022, 5:08am UTC](https://discourse.processing.org/t/callback-function-argument/37553 "2022-06-15T05:08:14Z")

</div>

I am writing a program that connects P5 with the HTML DOM. I want to have a HTML button when pressed pass along an argument to a function I created. I know I can add an event and callback function to a variable. I am won…

---

## [Compile Error in Java Program?](https://discourse.processing.org/t/compile-error-in-java-program/37533)

<div class="topic-metadata">

**Author:** [@shivambhatele](https://discourse.processing.org/u/shivambhatele)\
**Replies:** 1\
**Last updated:** [June 14, 2022, 12:26pm UTC](https://discourse.processing.org/t/compile-error-in-java-program/37533 "2022-06-14T12:26:40Z")

</div>

Hello All, I’ve recently faced some issues… I’ve been following some online tutorials and added the code from given source, I modify it a little, and it doesn’t work. First Java code which compiles on Interviewbit compi…

---

## [Help with Input Text Boxes and Arrays](https://discourse.processing.org/t/help-with-input-text-boxes-and-arrays/37456)

<div class="topic-metadata">

**Author:** [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Replies:** 2\
**Last updated:** [June 12, 2022, 1:33pm UTC](https://discourse.processing.org/t/help-with-input-text-boxes-and-arrays/37456 "2022-06-12T13:33:11Z")

</div>

Hi guys, please I need your help. I developed this app but it is not working as intended. If a set of values are imputed and one calculation is performed, a result is gotten, but if I edit the values in the text box and …

---

## [Could someone tell me why this isn't working please?](https://discourse.processing.org/t/could-someone-tell-me-why-this-isnt-working-please/37468)

<div class="topic-metadata">

**Author:** [@locky.mcdonald](https://discourse.processing.org/u/locky.mcdonald)\
**Replies:** 2\
**Last updated:** [June 12, 2022, 5:37am UTC](https://discourse.processing.org/t/could-someone-tell-me-why-this-isnt-working-please/37468 "2022-06-12T05:37:07Z")

</div>

// I know its a bit all over the place, but any little help would be much appreciated. The background is supposed to fade from cream to black and back while a circle moves up and down the screen, behind the waves at the …

---

## [Variable scope, \<script\> tage with type="module" option? (firebase)](https://discourse.processing.org/t/variable-scope-script-tage-with-type-module-option-firebase/37477)

<div class="topic-metadata">

**Author:** [@schuelaw](https://discourse.processing.org/u/schuelaw)\
**Replies:** 2\
**Last updated:** [June 11, 2022, 6:46pm UTC](https://discourse.processing.org/t/variable-scope-script-tage-with-type-module-option-firebase/37477 "2022-06-11T18:46:32Z")

</div>

I’m trying to use a firebase database in p5js to read and write a high score table for a game. I followed Shiffman’s Firebase: Saving Data - Programming with Text video, but it’s now out of date. I’m trying to build an e…

---

## [Using API with node.js and p5](https://discourse.processing.org/t/using-api-with-node-js-and-p5/37410)

<div class="topic-metadata">

**Author:** [@Omri](https://discourse.processing.org/u/Omri)\
**Replies:** 3\
**Last updated:** [June 10, 2022, 11:42am UTC](https://discourse.processing.org/t/using-api-with-node-js-and-p5/37410 "2022-06-10T11:42:36Z")

</div>

hey, there is a website I’d like to use his API in a P5 sketch I’m doing. The API looks like that: const { Configuration, OpenAIApi } = require("openai"); const configuration = new Configuration({ apiKey: process.en…

---

## [Fade between random colours for a background](https://discourse.processing.org/t/fade-between-random-colours-for-a-background/1433)

<div class="topic-metadata">

**Author:** [@Carpece](https://discourse.processing.org/u/Carpece)\
**Replies:** 13\
**Last updated:** [June 10, 2022, 11:15am UTC](https://discourse.processing.org/t/fade-between-random-colours-for-a-background/1433 "2022-06-10T11:15:49Z")

</div>

Hi, I’m trying to design a fading transition between random colours for the background (based on time). I thought it could be done with frameRate, but doesn’t respond. Any suggestion? Thanks in advance.

---

## [Using p5.js to generate SVG markup from a module](https://discourse.processing.org/t/using-p5-js-to-generate-svg-markup-from-a-module/37360)

<div class="topic-metadata">

**Author:** [@blundin](https://discourse.processing.org/u/blundin)\
**Replies:** 1\
**Last updated:** [June 8, 2022, 6:50pm UTC](https://discourse.processing.org/t/using-p5-js-to-generate-svg-markup-from-a-module/37360 "2022-06-08T18:50:53Z")

</div>

Hello all! I am an experienced web developer who is brand new to p5.js and generative art in general. I’ve spent several hours searching around for an answer to this question, and I suspect I am just thinking about this …

---

## [createGraphics referencing existing canvas context](https://discourse.processing.org/t/creategraphics-referencing-existing-canvas-context/21067)

<div class="topic-metadata">

**Author:** [@vheun](https://discourse.processing.org/u/vheun)\
**Replies:** 4\
**Last updated:** [June 8, 2022, 2:24pm UTC](https://discourse.processing.org/t/creategraphics-referencing-existing-canvas-context/21067 "2022-06-08T14:24:33Z")

</div>

Is there an easy way to bind an existing html canvas to the Graphics object you create with createGraphics()? Example: I have an existing painted 2D canvas that I would like to draw via image() into my existing WEBGL ca…

---

## [Maximum number in noiseSeed() p5js](https://discourse.processing.org/t/maximum-number-in-noiseseed-p5js/37399)

<div class="topic-metadata">

**Author:** [@Nik](https://discourse.processing.org/u/Nik)\
**Replies:** 2\
**Last updated:** [June 8, 2022, 11:22am UTC](https://discourse.processing.org/t/maximum-number-in-noiseseed-p5js/37399 "2022-06-08T11:22:39Z")

</div>

Hello! What is maximum number that can be used in noiseSeed() in P5JS? Just like for randomSeed() integer range 0 to 4294967295 or not? Thanks!

---

## [Why is a new canvas element added to the DOM every time createGraphics is called?](https://discourse.processing.org/t/why-is-a-new-canvas-element-added-to-the-dom-every-time-creategraphics-is-called/37346)

<div class="topic-metadata">

**Author:** [@sspboyd](https://discourse.processing.org/u/sspboyd)\
**Replies:** 2\
**Last updated:** [June 6, 2022, 3:43pm UTC](https://discourse.processing.org/t/why-is-a-new-canvas-element-added-to-the-dom-every-time-creategraphics-is-called/37346 "2022-06-06T15:43:16Z")

</div>

I have run into an unexpected issue with createGraphics(). Each time I define a new variable to hold a createGraphics object I am getting another canvas element added to the DOM. Here’s a minimalist example and a link t…

---

## [Is there a plan to make Folders in My Sketches?](https://discourse.processing.org/t/is-there-a-plan-to-make-folders-in-my-sketches/37362)

<div class="topic-metadata">

**Author:** [@MissChervinsky](https://discourse.processing.org/u/MissChervinsky)\
**Replies:** 2\
**Last updated:** [June 6, 2022, 3:53pm UTC](https://discourse.processing.org/t/is-there-a-plan-to-make-folders-in-my-sketches/37362 "2022-06-06T15:53:09Z")

</div>

Hello, I am a middle school teacher who uses p5js with her 8th grade students. My Sketches are starting to get filled up with similar projects, and it would be infinitely easier if I were able to folder or sub my works …

---

## [Rotate(); does not work in double for loop in createGraphics canvas](https://discourse.processing.org/t/rotate-does-not-work-in-double-for-loop-in-creategraphics-canvas/37304)

<div class="topic-metadata">

**Author:** [@Annemiek](https://discourse.processing.org/u/Annemiek)\
**Replies:** 3\
**Last updated:** [June 3, 2022, 8:12pm UTC](https://discourse.processing.org/t/rotate-does-not-work-in-double-for-loop-in-creategraphics-canvas/37304 "2022-06-03T20:12:24Z")

</div>

hi! I’m a trying to make a poster generator inside P5.js. I’m quite new to programming and for every new step I watch tutorials so I know what to do. Right now I am facing a problem with rotating my ellipses. At the mom…

---

## [Maximum number in randomSeed() p5js](https://discourse.processing.org/t/maximum-number-in-randomseed-p5js/37352)

<div class="topic-metadata">

**Author:** [@Nik](https://discourse.processing.org/u/Nik)\
**Replies:** 3\
**Last updated:** [June 6, 2022, 12:51pm UTC](https://discourse.processing.org/t/maximum-number-in-randomseed-p5js/37352 "2022-06-06T12:51:39Z")

</div>

Hello! What is maximum number that can be used in randomSeed() in P5JS?

---

## [How do I play sound smoothly while also running Perlin Flow Field?](https://discourse.processing.org/t/how-do-i-play-sound-smoothly-while-also-running-perlin-flow-field/36657)

<div class="topic-metadata">

**Author:** [@JessJess](https://discourse.processing.org/u/JessJess)\
**Replies:** 9\
**Last updated:** [June 3, 2022, 6:31pm UTC](https://discourse.processing.org/t/how-do-i-play-sound-smoothly-while-also-running-perlin-flow-field/36657 "2022-06-03T18:31:12Z")

</div>

The background sound I used works perfectly fine before I added the code for Perlin Flow Field but now that both sound and Perlin Flow Field code works, the sound that comes out is lagging and distorted, is there any way…

---

## [Text array and size with function](https://discourse.processing.org/t/text-array-and-size-with-function/37291)

<div class="topic-metadata">

**Author:** [@luciaromancanivell](https://discourse.processing.org/u/luciaromancanivell)\
**Replies:** 1\
**Last updated:** [June 2, 2022, 10:03pm UTC](https://discourse.processing.org/t/text-array-and-size-with-function/37291 "2022-06-02T22:03:29Z")

</div>

Hello, I am trying to do this… And I have the following so far… how could I change the width depending on the word? so sorry for the many messages, thanks very much! var parrafo = "This is big and this small"; var …

---

## [Same code, differents outputs (using p5.editor)](https://discourse.processing.org/t/same-code-differents-outputs-using-p5-editor/37257)

<div class="topic-metadata">

**Author:** [@vjjv](https://discourse.processing.org/u/vjjv)\
**Replies:** 0\
**Last updated:** [May 31, 2022, 6:38pm UTC](https://discourse.processing.org/t/same-code-differents-outputs-using-p5-editor/37257 "2022-05-31T18:38:53Z")

</div>

Hello! i want to ask why i get two differents outputs using the same code on my browser, and p5.editor. Coordinates seems to be scale in some way this is the code: browser: p5.editor

---

## [Confusing Type Error](https://discourse.processing.org/t/confusing-type-error/37253)

<div class="topic-metadata">

**Author:** [@shodai](https://discourse.processing.org/u/shodai)\
**Replies:** 2\
**Last updated:** [May 31, 2022, 5:30pm UTC](https://discourse.processing.org/t/confusing-type-error/37253 "2022-05-31T17:30:45Z")

</div>

I am working on a project which is a game when a player circle goes around and eats other circles. I feel like I am really close to having everything working but when it gets down to the last circle remaining, I get a ty…

---

## [Word in array counter](https://discourse.processing.org/t/word-in-array-counter/37238)

<div class="topic-metadata">

**Author:** [@luciaromancanivell](https://discourse.processing.org/u/luciaromancanivell)\
**Replies:** 3\
**Last updated:** [May 31, 2022, 12:41pm UTC](https://discourse.processing.org/t/word-in-array-counter/37238 "2022-05-31T12:41:52Z")

</div>

please format code with \</\> button \* homework policy \* asking questions Hello, I am getting a bit confused here… I need to count how many times the word imagine shows up in the array but I do not know how to create t…

---

## [How to rotate view (cube interior) with mobile device gyroscope? - Issues with interaction](https://discourse.processing.org/t/how-to-rotate-view-cube-interior-with-mobile-device-gyroscope-issues-with-interaction/37227)

<div class="topic-metadata">

**Author:** [@jimmy](https://discourse.processing.org/u/jimmy)\
**Replies:** 0\
**Last updated:** [May 30, 2022, 1:59pm UTC](https://discourse.processing.org/t/how-to-rotate-view-cube-interior-with-mobile-device-gyroscope-issues-with-interaction/37227 "2022-05-30T13:59:31Z")

</div>

I’ve been working on a demo in P5.js that would display the inside of a cube with rotation followed by the rotation of a mobile device. We could call this poor-mans-AR, as I don’t need a camera feed, just the rotation. T…

---

## [Synth and .mp3 notes play twice on Android-nowhere else](https://discourse.processing.org/t/synth-and-mp3-notes-play-twice-on-android-nowhere-else/37214)

<div class="topic-metadata">

**Author:** [@HFredrickson](https://discourse.processing.org/u/HFredrickson)\
**Replies:** 0\
**Last updated:** [May 29, 2022, 10:23pm UTC](https://discourse.processing.org/t/synth-and-mp3-notes-play-twice-on-android-nowhere-else/37214 "2022-05-29T22:23:55Z")

</div>

Does anyone know why-This code works fine on laptops, ipads, iphones but plays double (one repeat) notes on Android phone systems: \<!DOCTYPE html\>\<html lang="en"\> \<head\> \<script src="https://icanplaypiano.com…

---

## [Synthesizer and .mp3 notes play twice on Android-nowhere else (using P5.js)](https://discourse.processing.org/t/synthesizer-and-mp3-notes-play-twice-on-android-nowhere-else-using-p5-js/37216)

<div class="topic-metadata">

**Author:** [@HFredrickson](https://discourse.processing.org/u/HFredrickson)\
**Replies:** 0\
**Last updated:** [May 29, 2022, 11:10pm UTC](https://discourse.processing.org/t/synthesizer-and-mp3-notes-play-twice-on-android-nowhere-else-using-p5-js/37216 "2022-05-29T23:10:12Z")

</div>

Also asked on: https://stackoverflow.com/questions/72427862/synthesizer-and-mp3-notes-play-twice-on-android-nowhere-else https://icanplaypiano.com/ Synthesizer and .mp3 notes play twice on Android-nowhere else Doe…

---

## [Any way to add a single word attribute to a dom element?](https://discourse.processing.org/t/any-way-to-add-a-single-word-attribute-to-a-dom-element/37173)

<div class="topic-metadata">

**Author:** [@bluemoon](https://discourse.processing.org/u/bluemoon)\
**Replies:** 1\
**Last updated:** [May 28, 2022, 9:35pm UTC](https://discourse.processing.org/t/any-way-to-add-a-single-word-attribute-to-a-dom-element/37173 "2022-05-28T21:35:39Z")

</div>

For instance, if I wanted to add the ‘autofocus’ attribute to an ‘input’, the normal html would be: \<input type="text" autofocus\> Is there a way to add such a tag in p5js? The following does not work because ‘.attribu…

---

## [Drawing context and p5.Graphics](https://discourse.processing.org/t/drawing-context-and-p5-graphics/37158)

<div class="topic-metadata">

**Author:** [@vjjv](https://discourse.processing.org/u/vjjv)\
**Replies:** 1\
**Last updated:** [May 28, 2022, 11:08am UTC](https://discourse.processing.org/t/drawing-context-and-p5-graphics/37158 "2022-05-28T11:08:34Z")

</div>

Hello! I was using this function to generate quick shadows: drawingContext.shadowColor = color(0, 0, 0, 0.6); drawingContext.shadowBlur = 50; drawingContext.shadowOffsetX = -25; drawingContext.shadowOffsetY = -…

---

## [Tutorial: Using p5.Geometry to create fast 3D graphics](https://discourse.processing.org/t/tutorial-using-p5-geometry-to-create-fast-3d-graphics/32359)

<div class="topic-metadata">

**Author:** [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Replies:** 11\
**Last updated:** [May 27, 2022, 3:08pm UTC](https://discourse.processing.org/t/tutorial-using-p5-geometry-to-create-fast-3d-graphics/32359 "2022-05-27T15:08:45Z")

</div>

I’ve answered a number of questions recently about the performance of complex 3D shapes in p5.js (@J\_Silva and @salmans911 in particular), and I promised a more in depth explanation of how to use p5.Geometry. Without fur…

---

## [Combining textToPoints with Daniel Shiffman’s Space Colonization Algorithm to create leaves](https://discourse.processing.org/t/combining-texttopoints-with-daniel-shiffman-s-space-colonization-algorithm-to-create-leaves/37138)

<div class="topic-metadata">

**Author:** [@\_tt\_tt](https://discourse.processing.org/u/_tt_tt)\
**Replies:** 1\
**Last updated:** [May 27, 2022, 12:40pm UTC](https://discourse.processing.org/t/combining-texttopoints-with-daniel-shiffman-s-space-colonization-algorithm-to-create-leaves/37138 "2022-05-27T12:40:50Z")

</div>

Hello! I am trying to create a project where i want to combine Daniel Shiffmans code from his Coding Challenge and a textToPoints Function. I want to use the points from the texttopoints array as leaves instead of his ra…

---

## [GUI for controlling sketches from separate windows/places](https://discourse.processing.org/t/gui-for-controlling-sketches-from-separate-windows-places/37027)

<div class="topic-metadata">

**Author:** [@jaschanarveson](https://discourse.processing.org/u/jaschanarveson)\
**Replies:** 2\
**Last updated:** [May 27, 2022, 10:12am UTC](https://discourse.processing.org/t/gui-for-controlling-sketches-from-separate-windows-places/37027 "2022-05-27T10:12:01Z")

</div>

How do people run interactive full-screen p5js sketches while also being able to see controls? do people pipe OSC around? is there an easy way to create a second window so that you can have controls on one window and t…

---

## [Need help w/ infinite world w/ random numbers](https://discourse.processing.org/t/need-help-w-infinite-world-w-random-numbers/37086)

<div class="topic-metadata">

**Author:** [@Voleia](https://discourse.processing.org/u/Voleia)\
**Replies:** 18\
**Last updated:** [May 26, 2022, 5:05pm UTC](https://discourse.processing.org/t/need-help-w-infinite-world-w-random-numbers/37086 "2022-05-26T17:05:22Z")

</div>

Hello. So, I am trying to make a program that generates an infinite world where each block has a 50% chance of being either blue or red. The program I have works fine when I move side to side, but when I move up and down…

---

## [Extension made with p5.js blurred out](https://discourse.processing.org/t/extension-made-with-p5-js-blurred-out/37099)

<div class="topic-metadata">

**Author:** [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Replies:** 0\
**Last updated:** [May 26, 2022, 7:54am UTC](https://discourse.processing.org/t/extension-made-with-p5-js-blurred-out/37099 "2022-05-26T07:54:00Z")

</div>

I fixed all the errors that chrome extensions gave when I loaded the folder in but it is grayed out. Is it a problem with my code?

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

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