# p5.js

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

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

**Page:** 16

---

## [Weird light origins in 3d scene](https://discourse.processing.org/t/weird-light-origins-in-3d-scene/40489)

<div class="topic-metadata">

**Author:** [@brackish](https://discourse.processing.org/u/brackish)\
**Replies:** 4\
**Last updated:** [January 8, 2023, 5:30pm UTC](https://discourse.processing.org/t/weird-light-origins-in-3d-scene/40489 "2023-01-08T17:30:17Z")

</div>

p5.js Web Editor \<\<this is my project its a 3d game, wasd to move. i’m making calls to camera() and perspective() so that the player can move around the scene in first person and some other small tweaks to the view. y …

---

## [Code work on browser too slow, why?](https://discourse.processing.org/t/code-work-on-browser-too-slow-why/40455)

<div class="topic-metadata">

**Author:** [@vrtx](https://discourse.processing.org/u/vrtx)\
**Replies:** 5\
**Last updated:** [January 6, 2023, 10:35pm UTC](https://discourse.processing.org/t/code-work-on-browser-too-slow-why/40455 "2023-01-06T22:35:05Z")

</div>

Hi there… I mashup some codes and i got this final work. https://vrtxart.github.io/cover3/. I wondering wy its too slow after i upload it to guithub and open in a browser. The smoke efect almost do not work. this is…

---

## [Weird and unpredictable effect of strokeWeight](https://discourse.processing.org/t/weird-and-unpredictable-effect-of-strokeweight/40468)

<div class="topic-metadata">

**Author:** [@vadasambhar](https://discourse.processing.org/u/vadasambhar)\
**Replies:** 2\
**Last updated:** [January 5, 2023, 6:58pm UTC](https://discourse.processing.org/t/weird-and-unpredictable-effect-of-strokeweight/40468 "2023-01-05T18:58:08Z")

</div>

So I’m trying my hand at generative art, with nested inscribed circles within a square. What’s weird is that the exact same code gives wildly different output based on changing just the strokeWeight. Here’s the link to…

---

## [WEBGL positioning issue array of torus objects](https://discourse.processing.org/t/webgl-positioning-issue-array-of-torus-objects/40458)

<div class="topic-metadata">

**Author:** [@Tilman](https://discourse.processing.org/u/Tilman)\
**Replies:** 2\
**Last updated:** [January 5, 2023, 12:38pm UTC](https://discourse.processing.org/t/webgl-positioning-issue-array-of-torus-objects/40458 "2023-01-05T12:38:12Z")

</div>

Hey in this specific code I have a problem aligning an array of torus objects using WEBGL. When I switch it to circle with the same coordinates it runs fine. But when I use translate and Torus everything is off. I feel …

---

## [Help with animation doppler sound-wave propagation](https://discourse.processing.org/t/help-with-animation-doppler-sound-wave-propagation/40429)

<div class="topic-metadata">

**Author:** [@Tilman](https://discourse.processing.org/u/Tilman)\
**Replies:** 9\
**Last updated:** [January 5, 2023, 11:51am UTC](https://discourse.processing.org/t/help-with-animation-doppler-sound-wave-propagation/40429 "2023-01-05T11:51:08Z")

</div>

Hi! I am trying to create an abstract animation visualizing how sound waves propagate emitting from a moving object. Basically circles growing in radius while the x position of the object changes. Like in this animatio…

---

## [Order of layers not working as expected](https://discourse.processing.org/t/order-of-layers-not-working-as-expected/40452)

<div class="topic-metadata">

**Author:** [@slacle](https://discourse.processing.org/u/slacle)\
**Replies:** 10\
**Last updated:** [January 5, 2023, 11:04am UTC](https://discourse.processing.org/t/order-of-layers-not-working-as-expected/40452 "2023-01-05T11:04:28Z")

</div>

I want the circles on top and all the lines below them. Since I’m drawing the circles last, I expected them to all be on top of the lines. How can I solve this problem? p.s.: This is only a small simplified piece of wh…

---

## [How to blur a shape?](https://discourse.processing.org/t/how-to-blur-a-shape/40441)

<div class="topic-metadata">

**Author:** [@usernamenotavailable](https://discourse.processing.org/u/usernamenotavailable)\
**Replies:** 1\
**Last updated:** [January 4, 2023, 11:53am UTC](https://discourse.processing.org/t/how-to-blur-a-shape/40441 "2023-01-04T11:53:28Z")

</div>

I know I can blur a .jpg file I load with reference | p5.js. But is there any way to blur a shape I create in code please? Like create a rect() then blur it, or blur a grid of overlapping circles as a group, like you c…

---

## [Logic Error in For Loop (bookshelf)](https://discourse.processing.org/t/logic-error-in-for-loop-bookshelf/40425)

<div class="topic-metadata">

**Author:** [@01010100-01000010](https://discourse.processing.org/u/01010100-01000010)\
**Replies:** 6\
**Last updated:** [January 4, 2023, 9:49am UTC](https://discourse.processing.org/t/logic-error-in-for-loop-bookshelf/40425 "2023-01-04T09:49:40Z")

</div>

var CanvasB = 500; var CanvasH = 400; var Rand = 30; var Seiten = \[25, 5, 61, 20, 100, 4, 3, 3, 3, 50, 30, 20, 40, 6, 70\]; function setup() { createCanvas(CanvasB, CanvasH); } function draw() { background(220); …

---

## [WebGL Graphics background not clearing](https://discourse.processing.org/t/webgl-graphics-background-not-clearing/40406)

<div class="topic-metadata">

**Author:** [@KeirMeDear](https://discourse.processing.org/u/KeirMeDear)\
**Replies:** 0\
**Last updated:** [January 2, 2023, 5:06pm UTC](https://discourse.processing.org/t/webgl-graphics-background-not-clearing/40406 "2023-01-02T17:06:36Z")

</div>

Hey all, I’m facing an issue that a 3D WebGL enabled createGraphics object doesn’t seem to be clearing it’s background to allow transparency even when the clear() function is called. You can see that the 2D graphics ob…

---

## [Image Array as texture WebGL](https://discourse.processing.org/t/image-array-as-texture-webgl/40405)

<div class="topic-metadata">

**Author:** [@mfcgrp](https://discourse.processing.org/u/mfcgrp)\
**Replies:** 0\
**Last updated:** [January 2, 2023, 5:04pm UTC](https://discourse.processing.org/t/image-array-as-texture-webgl/40405 "2023-01-02T17:04:08Z")

</div>

Hello, I am attempting to texture an obj file with an image array. It will load an image but not loop through the array. Outside of WebGL loading and displaying an image array is fairly simple, but it seems there may b…

---

## [Mouse Interaction Creates Pattern?](https://discourse.processing.org/t/mouse-interaction-creates-pattern/40399)

<div class="topic-metadata">

**Author:** [@museguy](https://discourse.processing.org/u/museguy)\
**Replies:** 2\
**Last updated:** [January 1, 2023, 8:07pm UTC](https://discourse.processing.org/t/mouse-interaction-creates-pattern/40399 "2023-01-01T20:07:53Z")

</div>

Please excuse the n00b question. Is there sample code or a library for a mouse interaction similar to Kawandeep Virdee’s Confetti Vortex? https://whichlight.github.io/interactive-trading-card/ I have looked through th…

---

## [How to check a particle system exist or not](https://discourse.processing.org/t/how-to-check-a-particle-system-exist-or-not/40369)

<div class="topic-metadata">

**Author:** [@AlfredChen](https://discourse.processing.org/u/AlfredChen)\
**Replies:** 0\
**Last updated:** [December 30, 2022, 6:48am UTC](https://discourse.processing.org/t/how-to-check-a-particle-system-exist-or-not/40369 "2022-12-30T06:48:02Z")

</div>

Hi everyone here, I’m a newbie learning P5.js to do something interactive. I’m facing a problem with I want to generate a particle system when receive a trigger from microphone. But when the trigger is on, the particle …

---

## [Porting Shadertoy Code to p5.js Shaders but missing colors](https://discourse.processing.org/t/porting-shadertoy-code-to-p5-js-shaders-but-missing-colors/40319)

<div class="topic-metadata">

**Author:** [@Nayah](https://discourse.processing.org/u/Nayah)\
**Replies:** 0\
**Last updated:** [December 27, 2022, 4:41am UTC](https://discourse.processing.org/t/porting-shadertoy-code-to-p5-js-shaders-but-missing-colors/40319 "2022-12-27T04:41:09Z")

</div>

I ported a shader into my p5.js document from shadertoy, following the instruction of p5 references(https://itp-xstory.github.io/p5js-shaders/#/./docs/examples/shadertoy), and it works but the color of the shader is miss…

---

## [Updating the code of a running p5js sketch](https://discourse.processing.org/t/updating-the-code-of-a-running-p5js-sketch/40048)

<div class="topic-metadata">

**Author:** [@AndreasRef](https://discourse.processing.org/u/AndreasRef)\
**Replies:** 7\
**Last updated:** [December 26, 2022, 10:11pm UTC](https://discourse.processing.org/t/updating-the-code-of-a-running-p5js-sketch/40048 "2022-12-26T22:11:37Z")

</div>

Hi I am curious about how to run p5.js code within a running sketch, so the code changes as the program runs? The code should come from a user input (like a text field) or from a function (like an api-call to GPT-3 or s…

---

## [Touchended() + coordinates issue](https://discourse.processing.org/t/touchended-coordinates-issue/40306)

<div class="topic-metadata">

**Author:** [@frex](https://discourse.processing.org/u/frex)\
**Replies:** 2\
**Last updated:** [December 26, 2022, 8:53pm UTC](https://discourse.processing.org/t/touchended-coordinates-issue/40306 "2022-12-26T20:53:41Z")

</div>

Hey Merry Christmas , I modified this code from the coding train with the function touches: and I was trying to change the code to have the color of the bubble changing back to default on touchended(); ( i…

---

## [Sending value from maxmsp to p5js through socket.io](https://discourse.processing.org/t/sending-value-from-maxmsp-to-p5js-through-socket-io/40312)

<div class="topic-metadata">

**Author:** [@AlfredChen](https://discourse.processing.org/u/AlfredChen)\
**Replies:** 3\
**Last updated:** [December 26, 2022, 3:19pm UTC](https://discourse.processing.org/t/sending-value-from-maxmsp-to-p5js-through-socket-io/40312 "2022-12-26T15:19:01Z")

</div>

Goal: send radius value from maxmsp to p5js through socket.io Current State: testing with index.html works well, but when changed to p5js client, I can’t see the result or reaction. socket.io server part const express…

---

## [Import {OPEN} from "./p5"; is giving an error](https://discourse.processing.org/t/import-open-from-p5-is-giving-an-error/40302)

<div class="topic-metadata">

**Author:** [@rfresh737](https://discourse.processing.org/u/rfresh737)\
**Replies:** 0\
**Last updated:** [December 25, 2022, 7:59pm UTC](https://discourse.processing.org/t/import-open-from-p5-is-giving-an-error/40302 "2022-12-25T19:59:30Z")

</div>

I’m trying to use the ARC() function with the ending optional OPEN constant. I’m getting the error: “Uncaught SyntaxError: ambiguous indirect export: OPEN” I’m using webStorm where I get this error inside their IDE. If…

---

## [Can I self-host the p5 editor in the same computer as my browser?](https://discourse.processing.org/t/can-i-self-host-the-p5-editor-in-the-same-computer-as-my-browser/40220)

<div class="topic-metadata">

**Author:** [@proxor](https://discourse.processing.org/u/proxor)\
**Replies:** 1\
**Last updated:** [December 21, 2022, 10:30pm UTC](https://discourse.processing.org/t/can-i-self-host-the-p5-editor-in-the-same-computer-as-my-browser/40220 "2022-12-21T22:30:08Z")

</div>

Hi, I see that I can edit p5 code locally with my favorite editor, and run it locally with a local server and my browser, or edit online with the online p5 editor. I have “deployed” applets using processing.js on my web…

---

## [p5.Oscillator frequency not changing with the value contained in the index of an array](https://discourse.processing.org/t/p5-oscillator-frequency-not-changing-with-the-value-contained-in-the-index-of-an-array/40233)

<div class="topic-metadata">

**Author:** [@zgaus](https://discourse.processing.org/u/zgaus)\
**Replies:** 1\
**Last updated:** [December 21, 2022, 4:25am UTC](https://discourse.processing.org/t/p5-oscillator-frequency-not-changing-with-the-value-contained-in-the-index-of-an-array/40233 "2022-12-21T04:25:44Z")

</div>

Trying to convert the user input into char code/ascii code. Trying to use a for loop to continuously parse through the array containing the char code numbers 1 by 1 and use those numbers to change the oscillator frequenc…

---

## [Buttons play and pause](https://discourse.processing.org/t/buttons-play-and-pause/40215)

<div class="topic-metadata">

**Author:** [@vrtx](https://discourse.processing.org/u/vrtx)\
**Replies:** 3\
**Last updated:** [December 19, 2022, 9:55pm UTC](https://discourse.processing.org/t/buttons-play-and-pause/40215 "2022-12-19T21:55:32Z")

</div>

Hi there! I got to this point on my project. Add some buttons on right side wich play a sound/music. But i not handle how to play the button again and pause the sound. What is happening is that the sound goes playing o…

---

## [Why the button which was located in a specific place in Processing is now on all the page/work?](https://discourse.processing.org/t/why-the-button-which-was-located-in-a-specific-place-in-processing-is-now-on-all-the-page-work/40170)

<div class="topic-metadata">

**Author:** [@vrtx](https://discourse.processing.org/u/vrtx)\
**Replies:** 1\
**Last updated:** [December 19, 2022, 8:57pm UTC](https://discourse.processing.org/t/why-the-button-which-was-located-in-a-specific-place-in-processing-is-now-on-all-the-page-work/40170 "2022-12-19T20:57:18Z")

</div>

i wrote a skech in Processing and it was working. I toke the soud out off the first page and add a button to play it. I working on where and how to display a sound with a new button, BUT, the thing is, why the ET head b…

---

## [TRIANGLE\_FAN not behaving as expected on WEBGL?](https://discourse.processing.org/t/triangle-fan-not-behaving-as-expected-on-webgl/40180)

<div class="topic-metadata">

**Author:** [@wageDu](https://discourse.processing.org/u/wageDu)\
**Replies:** 10\
**Last updated:** [December 19, 2022, 2:57pm UTC](https://discourse.processing.org/t/triangle-fan-not-behaving-as-expected-on-webgl/40180 "2022-12-19T14:57:19Z")

</div>

Hi all, I just noticed that when trying to draw a Triangle Fan on WEBGL, I don’t get the expected behavior ie. ALL lines stroked. On WEBGL only the outlines + last radial line (point1 to center) appear stroked, while a…

---

## [Setup p5.js for beginners](https://discourse.processing.org/t/setup-p5-js-for-beginners/40210)

<div class="topic-metadata">

**Author:** [@rajput999](https://discourse.processing.org/u/rajput999)\
**Replies:** 2\
**Last updated:** [December 19, 2022, 12:08pm UTC](https://discourse.processing.org/t/setup-p5-js-for-beginners/40210 "2022-12-19T12:08:57Z")

</div>

Can anyone please help to setup p5.js in my computer

---

## [I made an open source p5js live code editor (with VJ performance focus)](https://discourse.processing.org/t/i-made-an-open-source-p5js-live-code-editor-with-vj-performance-focus/40164)

<div class="topic-metadata">

**Author:** [@julesvisuaalinen](https://discourse.processing.org/u/julesvisuaalinen)\
**Replies:** 2\
**Last updated:** [December 14, 2022, 5:02pm UTC](https://discourse.processing.org/t/i-made-an-open-source-p5js-live-code-editor-with-vj-performance-focus/40164 "2022-12-14T17:02:52Z")

</div>

Hey guys! I made a p5js live coding webapp in React / Typescript. My motivation was largely for my own use, but I’ve designed the project and development environment in a way that should facilitate easy open source deve…

---

## [Weird graphical glitches when switching webgl layer to be a separate pgraphics](https://discourse.processing.org/t/weird-graphical-glitches-when-switching-webgl-layer-to-be-a-separate-pgraphics/40112)

<div class="topic-metadata">

**Author:** [@brackish](https://discourse.processing.org/u/brackish)\
**Replies:** 3\
**Last updated:** [December 14, 2022, 2:11pm UTC](https://discourse.processing.org/t/weird-graphical-glitches-when-switching-webgl-layer-to-be-a-separate-pgraphics/40112 "2022-12-14T14:11:51Z")

</div>

p5.js Web Editor \<\< so i have this sketch for sort of a simple 3d game (wasd to move) it works, but i want to draw the 3d scene to a separate pgraphics object, so that i can draw 2d stuff over the top. so the canvas wil…

---

## [fontStyle() is limited?](https://discourse.processing.org/t/fontstyle-is-limited/40161)

<div class="topic-metadata">

**Author:** [@Stanlepunk](https://discourse.processing.org/u/Stanlepunk)\
**Replies:** 0\
**Last updated:** [December 14, 2022, 11:54am UTC](https://discourse.processing.org/t/fontstyle-is-limited/40161 "2022-12-14T11:54:45Z")

</div>

I try to set my font loaded from Typekit, but I’ve the feeling it’s limited and not sure the original variant font is used in ITALIC, BOLD or BOLDITALIC that’s sound more like in Word or Indesign when you use the automa…

---

## [textFont() with font from Typekit / Adobe in React context](https://discourse.processing.org/t/textfont-with-font-from-typekit-adobe-in-react-context/40153)

<div class="topic-metadata">

**Author:** [@Stanlepunk](https://discourse.processing.org/u/Stanlepunk)\
**Replies:** 1\
**Last updated:** [December 14, 2022, 9:56am UTC](https://discourse.processing.org/t/textfont-with-font-from-typekit-adobe-in-react-context/40153 "2022-12-14T09:56:55Z")

</div>

Hello, I try to use font loaded from TypeKit in a React / Gatsby Context, mut the font don’t load. I don’t find the way to do it. I’m sure my font from Adobe is loaded because I it, by the classic way and the font is di…

---

## [How can i do this quicksort visualization example from p5 in Processing?](https://discourse.processing.org/t/how-can-i-do-this-quicksort-visualization-example-from-p5-in-processing/40078)

<div class="topic-metadata">

**Author:** [@MarcosN](https://discourse.processing.org/u/MarcosN)\
**Replies:** 11\
**Last updated:** [December 14, 2022, 2:46am UTC](https://discourse.processing.org/t/how-can-i-do-this-quicksort-visualization-example-from-p5-in-processing/40078 "2022-12-14T02:46:23Z")

</div>

I want to do something similar in processing but it doesn’t have “async” or “await” as far i understand. // width of each bar is taken as 8. let values = \[\]; // The array 'states' helps in identifying the pivot index…

---

## [Run p5js sketch as website locally on ipad](https://discourse.processing.org/t/run-p5js-sketch-as-website-locally-on-ipad/40122)

<div class="topic-metadata">

**Author:** [@fleshcircuit](https://discourse.processing.org/u/fleshcircuit)\
**Replies:** 1\
**Last updated:** [December 12, 2022, 9:00am UTC](https://discourse.processing.org/t/run-p5js-sketch-as-website-locally-on-ipad/40122 "2022-12-12T09:00:50Z")

</div>

Hello! I have a forthcoming exhibition and I want to run some p5js sketches on iPads. Only issue is that I can’t access WiFi in the gallery, so I cannot use b editor (as suggested here: Anyone had success with p5js on i…

---

## [Masking with vertex()](https://discourse.processing.org/t/masking-with-vertex/40095)

<div class="topic-metadata">

**Author:** [@Gecko](https://discourse.processing.org/u/Gecko)\
**Replies:** 2\
**Last updated:** [December 11, 2022, 5:13pm UTC](https://discourse.processing.org/t/masking-with-vertex/40095 "2022-12-11T17:13:24Z")

</div>

Hi there, I’m struggling to mask an image with a shape drawn with beginShape(); vertex(); endShape(); Here’s the code (shorted to highlight the key issue): mskGraphics.image(ink, 100, 100, ink.width / 2, ink.height …

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

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