# Coding Questions

**URL:** https://discourse.processing.org/c/p5js/p5js-questions/18.md?page=5

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

**Page:** 6

---

## [Optimizing collision detection and resolution between shapes](https://discourse.processing.org/t/optimizing-collision-detection-and-resolution-between-shapes/41104)

<div class="topic-metadata">

**Author:** [@bdooley](https://discourse.processing.org/u/bdooley)\
**Replies:** 0\
**Last updated:** [March 1, 2023, 2:39pm UTC](https://discourse.processing.org/t/optimizing-collision-detection-and-resolution-between-shapes/41104 "2023-03-01T14:39:21Z")

</div>

Hi all, I am working on a sketch with falling rectangles and circles that collide with each other, the left and right walls, and ground. https://editor.p5js.org/bdooley7/sketches/WXa5AQgKD The collision detection seem…

---

## [Sketch runs slow in P5.js WEBGL, (SOLVED by using P5.Geometry)](https://discourse.processing.org/t/sketch-runs-slow-in-p5-js-webgl-solved-by-using-p5-geometry/31990)

<div class="topic-metadata">

**Author:** [@J\_Silva](https://discourse.processing.org/u/J_Silva)\
**Replies:** 22\
**Last updated:** [February 23, 2023, 11:56pm UTC](https://discourse.processing.org/t/sketch-runs-slow-in-p5-js-webgl-solved-by-using-p5-geometry/31990 "2023-02-23T23:56:02Z")

</div>

Hi. I am translating a sketch from P5.java to P5.js. In java, it runs nice and smooth at a frameRate near 60. In p5.js the frameRate drops to around 4 f/s and a lot of details are missing. How can I improve this, or is…

---

## [Cannot read properties of undefined (reading 'copy')](https://discourse.processing.org/t/cannot-read-properties-of-undefined-reading-copy/41019)

<div class="topic-metadata">

**Author:** [@bdooley](https://discourse.processing.org/u/bdooley)\
**Replies:** 1\
**Last updated:** [February 23, 2023, 11:13am UTC](https://discourse.processing.org/t/cannot-read-properties-of-undefined-reading-copy/41019 "2023-02-23T11:13:25Z")

</div>

Hi, I am working on a sketch with rectangles and circles slowly falling to the bottom of the screen at random angles, colliding with each other and the ground and walls. https://editor.p5js.org/bdooley7/sketches/RBeFV1…

---

## [Code was working not anymore](https://discourse.processing.org/t/code-was-working-not-anymore/40974)

<div class="topic-metadata">

**Author:** [@Mem](https://discourse.processing.org/u/Mem)\
**Replies:** 0\
**Last updated:** [February 21, 2023, 10:58am UTC](https://discourse.processing.org/t/code-was-working-not-anymore/40974 "2023-02-21T10:58:50Z")

</div>

Hi Guys, my code was working perfectly in p5js editor since 3 days ago, not sure why ? I was recording mouvement several time and save as preset, but it’s recording only the last record and and what ever preset play the …

---

## [Multiplying small numbers in shader causes strange behaviour](https://discourse.processing.org/t/multiplying-small-numbers-in-shader-causes-strange-behaviour/40949)

<div class="topic-metadata">

**Author:** [@jvolker](https://discourse.processing.org/u/jvolker)\
**Replies:** 4\
**Last updated:** [February 18, 2023, 10:30am UTC](https://discourse.processing.org/t/multiplying-small-numbers-in-shader-causes-strange-behaviour/40949 "2023-02-18T10:30:08Z")

</div>

Hi, I’m trying to create a fading effect on a masked image/graphics. I’ve implemented it here: p5.js Web Editor I’m trying to slow down the effect even more. Unfortunately, the shader behaves a little strangely when in…

---

## [How to create a 3D geometry with faceted reflection of light (sphere)](https://discourse.processing.org/t/how-to-create-a-3d-geometry-with-faceted-reflection-of-light-sphere/40932)

<div class="topic-metadata">

**Author:** [@peskythisdot](https://discourse.processing.org/u/peskythisdot)\
**Replies:** 7\
**Last updated:** [February 16, 2023, 1:10pm UTC](https://discourse.processing.org/t/how-to-create-a-3d-geometry-with-faceted-reflection-of-light-sphere/40932 "2023-02-16T13:10:04Z")

</div>

My goal is to create a 3d geometry with many facets, where each facet reflects light differently–a disco ball may be a good visual for what I want to say. I created a primitive 3d sphere with low numbers of detailX and …

---

## [Using P5 on OffscreenCanvas?](https://discourse.processing.org/t/using-p5-on-offscreencanvas/40848)

<div class="topic-metadata">

**Author:** [@JohnC](https://discourse.processing.org/u/JohnC)\
**Replies:** 2\
**Last updated:** [February 10, 2023, 4:23pm UTC](https://discourse.processing.org/t/using-p5-on-offscreencanvas/40848 "2023-02-10T16:23:45Z")

</div>

Is there a way to manipulate OffscreenCanvas with p5? As far as I understand the source code, createGraphics does not use it.

---

## [How to add a text as .txt file?](https://discourse.processing.org/t/how-to-add-a-text-as-txt-file/40839)

<div class="topic-metadata">

**Author:** [@Davo](https://discourse.processing.org/u/Davo)\
**Replies:** 10\
**Last updated:** [February 7, 2023, 10:21am UTC](https://discourse.processing.org/t/how-to-add-a-text-as-txt-file/40839 "2023-02-07T10:21:03Z")

</div>

Hola! Totally new here. I just want to change the text in this generative design text: How can I change this “faust\_kurz.txt” for my own text and include it as a .txt file?? …Just have no clue… function preload() { …

---

## [Collision detection sketch running extremely slow](https://discourse.processing.org/t/collision-detection-sketch-running-extremely-slow/40844)

<div class="topic-metadata">

**Author:** [@bdooley](https://discourse.processing.org/u/bdooley)\
**Replies:** 0\
**Last updated:** [February 6, 2023, 1:33pm UTC](https://discourse.processing.org/t/collision-detection-sketch-running-extremely-slow/40844 "2023-02-06T13:33:43Z")

</div>

Hi, I’m working on a sketch drawing circles and squares that slowly fall to the bottom of the window and begin to stack. I first got things to work using matter.js here: https://editor.p5js.org/bdooley7/sketches/yY5Ej6…

---

## [How to start a sketch with full screen?](https://discourse.processing.org/t/how-to-start-a-sketch-with-full-screen/40824)

<div class="topic-metadata">

**Author:** [@adrinalino](https://discourse.processing.org/u/adrinalino)\
**Replies:** 3\
**Last updated:** [February 4, 2023, 1:06pm UTC](https://discourse.processing.org/t/how-to-start-a-sketch-with-full-screen/40824 "2023-02-04T13:06:21Z")

</div>

I’ve been trying multiple tactics to let my sketch open with a full screen. With processing you just put fullScreen(); in setup and the sketch occupies the entire screen. With p5js this does not work. The only way I ma…

---

## [Color change for overlapping objects](https://discourse.processing.org/t/color-change-for-overlapping-objects/40645)

<div class="topic-metadata">

**Author:** [@Pastel](https://discourse.processing.org/u/Pastel)\
**Replies:** 1\
**Last updated:** [January 19, 2023, 9:01am UTC](https://discourse.processing.org/t/color-change-for-overlapping-objects/40645 "2023-01-19T09:01:43Z")

</div>

With two objects (circles, rectangles, …) overlapping I’d like to color them in another color on the overlapping part. For example two objects are blue and the overlapping part is orange. Could this be done by any fil…

---

## [Position algorithm problem in for loop](https://discourse.processing.org/t/position-algorithm-problem-in-for-loop/40604)

<div class="topic-metadata">

**Author:** [@niuuin](https://discourse.processing.org/u/niuuin)\
**Replies:** 5\
**Last updated:** [January 19, 2023, 8:25am UTC](https://discourse.processing.org/t/position-algorithm-problem-in-for-loop/40604 "2023-01-19T08:25:41Z")

</div>

The current state is as shown in the figure, with “a” as the axis of movement, how to move with “d” as the axis in the current cycle? Here’s the current code, thanks for your help! function setup() { createCanvas(4…

---

## [Transparency in background Processing vs P5.js](https://discourse.processing.org/t/transparency-in-background-processing-vs-p5-js/40570)

<div class="topic-metadata">

**Author:** [@adrinalino](https://discourse.processing.org/u/adrinalino)\
**Replies:** 1\
**Last updated:** [January 12, 2023, 11:03pm UTC](https://discourse.processing.org/t/transparency-in-background-processing-vs-p5-js/40570 "2023-01-12T23:03:23Z")

</div>

Hi there, I wanted my moving particles to leave a trail. In “The coding train” I noticed that this can me done in P5.js by calling “background(0,20);” 20 Being the transparency of the background. This does not work i…

---

## [Flappy bird p5.js](https://discourse.processing.org/t/flappy-bird-p5-js/40521)

<div class="topic-metadata">

**Author:** [@ctremblay](https://discourse.processing.org/u/ctremblay)\
**Replies:** 17\
**Last updated:** [January 12, 2023, 7:47pm UTC](https://discourse.processing.org/t/flappy-bird-p5-js/40521 "2023-01-12T19:47:02Z")

</div>

i’m trying to make an ai version of flappy birds, but when i go to save the bird it cant find the saved score. it keeps saying undefined when i console.log. sketch.js var bird = \[\]; var saved = \[\]; var paused = false; …

---

## [Calculate bob vector to a floor in 3D WEBGL](https://discourse.processing.org/t/calculate-bob-vector-to-a-floor-in-3d-webgl/40556)

<div class="topic-metadata">

**Author:** [@Tilman](https://discourse.processing.org/u/Tilman)\
**Replies:** 2\
**Last updated:** [January 12, 2023, 11:17am UTC](https://discourse.processing.org/t/calculate-bob-vector-to-a-floor-in-3d-webgl/40556 "2023-01-12T11:17:33Z")

</div>

Hi I try to visualize: Object (Red Sphere) can be dragged with the mouse in relation to a listeners head (White Sphere). And there is a floor (Grey rotated rectangle) The white lines indicate the direct sound wave to …

---

## [Apply gradient shader to a torus](https://discourse.processing.org/t/apply-gradient-shader-to-a-torus/40491)

<div class="topic-metadata">

**Author:** [@Tilman](https://discourse.processing.org/u/Tilman)\
**Replies:** 12\
**Last updated:** [January 11, 2023, 8:45pm UTC](https://discourse.processing.org/t/apply-gradient-shader-to-a-torus/40491 "2023-01-11T20:45:35Z")

</div>

Hi! I would like to color a torus red on the left half and blue on the right half surely with a transition. Best check my next post below as I made a mockup of what I want to accomplish. ↓↓↓

---

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

---

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

---

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

---

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

---

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

---

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

---

## [Processing code into p5.js code](https://discourse.processing.org/t/processing-code-into-p5-js-code/40105)

<div class="topic-metadata">

**Author:** [@vrtx](https://discourse.processing.org/u/vrtx)\
**Replies:** 4\
**Last updated:** [December 10, 2022, 11:22am UTC](https://discourse.processing.org/t/processing-code-into-p5-js-code/40105 "2022-12-10T11:22:36Z")

</div>

hi guys! I am having the same problem but otherway around. From java processing to p5js. (accutaly in both ways with different projects lol) But here goes my latest… From Processing to p5js. please have a go on java…

[Previous page](https://discourse.processing.org/c/p5js/p5js-questions/18.md?page=4)

[Next page](https://discourse.processing.org/c/p5js/p5js-questions/18.md?page=6)