# Coding Questions

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

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

**Page:** 4

---

## [Vertex Trail with fading alpha possible?](https://discourse.processing.org/t/vertex-trail-with-fading-alpha-possible/43522)

<div class="topic-metadata">

**Author:** [@Tilman](https://discourse.processing.org/u/Tilman)\
**Replies:** 2\
**Last updated:** [December 27, 2023, 9:16pm UTC](https://discourse.processing.org/t/vertex-trail-with-fading-alpha-possible/43522 "2023-12-27T21:16:24Z")

</div>

Hi I have a visual trail. A vertex from history vector positions. I want this trail to be transitioning from full alpha at the beginning and 0 alpha at its end. When I do this with individual ellipses for the history a…

---

## [Mouse interactions stop working on published page](https://discourse.processing.org/t/mouse-interactions-stop-working-on-published-page/43506)

<div class="topic-metadata">

**Author:** [@holby](https://discourse.processing.org/u/holby)\
**Replies:** 1\
**Last updated:** [December 20, 2023, 4:04pm UTC](https://discourse.processing.org/t/mouse-interactions-stop-working-on-published-page/43506 "2023-12-20T16:04:06Z")

</div>

Hello When I publish my sketch to a folder on my webhost, the mouse interactions stop functioning (they work in the editor): https://north-berlin.com/p5/ Can anyone see anything wrong here with this code? Thanks! va…

---

## [Camera not in sync with position and rotation](https://discourse.processing.org/t/camera-not-in-sync-with-position-and-rotation/43384)

<div class="topic-metadata">

**Author:** [@somartist](https://discourse.processing.org/u/somartist)\
**Replies:** 28\
**Last updated:** [December 7, 2023, 8:56am UTC](https://discourse.processing.org/t/camera-not-in-sync-with-position-and-rotation/43384 "2023-12-07T08:56:37Z")

</div>

I’m working on a prototype, mostly for fun. I have the camera following the player model, by its position and rotation. Everything works kinda, but there seems to be a problem with the camera being desynced with the po…

---

## [Markov Chain in p5.js](https://discourse.processing.org/t/markov-chain-in-p5-js/43399)

<div class="topic-metadata">

**Author:** [@abkeil](https://discourse.processing.org/u/abkeil)\
**Replies:** 0\
**Last updated:** [December 5, 2023, 3:39pm UTC](https://discourse.processing.org/t/markov-chain-in-p5-js/43399 "2023-12-05T15:39:22Z")

</div>

Hello, I am interested in creating a project that uses a markov chain. I have edited this example a bit: p5.js Web Editor. Whereas right now the code features a generate button and produces a list, I would like for a s…

---

## [Trouble with angleBetween() in p5.js](https://discourse.processing.org/t/trouble-with-anglebetween-in-p5-js/43387)

<div class="topic-metadata">

**Author:** [@jeffthompson](https://discourse.processing.org/u/jeffthompson)\
**Replies:** 5\
**Last updated:** [December 5, 2023, 12:19pm UTC](https://discourse.processing.org/t/trouble-with-anglebetween-in-p5-js/43387 "2023-12-05T12:19:39Z")

</div>

Ok, I’m totally stuck and could use some help! I’m trying to use the angleBetween() function with two vectors, but am getting very weird results. I feel like this is probably something boneheaded and obvious, but just ca…

---

## [Line(x,y,z,x2,y2,z2) not working in the editor (logged in)](https://discourse.processing.org/t/line-x-y-z-x2-y2-z2-not-working-in-the-editor-logged-in/43290)

<div class="topic-metadata">

**Author:** [@somartist](https://discourse.processing.org/u/somartist)\
**Replies:** 5\
**Last updated:** [December 3, 2023, 3:31pm UTC](https://discourse.processing.org/t/line-x-y-z-x2-y2-z2-not-working-in-the-editor-logged-in/43290 "2023-12-03T15:31:28Z")

</div>

Hello Why does this line(0,0,0,100,100,100) give an error in the editor? It works in my local version. Code is directly from the references: EDIT: I just now see that it’s working once I’m logged out. It seems to be …

---

## [Does the mask-function behave differently from Processing to P5?](https://discourse.processing.org/t/does-the-mask-function-behave-differently-from-processing-to-p5/43357)

<div class="topic-metadata">

**Author:** [@alignleft](https://discourse.processing.org/u/alignleft)\
**Replies:** 1\
**Last updated:** [December 2, 2023, 9:23pm UTC](https://discourse.processing.org/t/does-the-mask-function-behave-differently-from-processing-to-p5/43357 "2023-12-02T21:23:45Z")

</div>

Hi :slight\_smile: I have a working Processing sketch, that masks images using a thresholded clone of itself as a mask resulting in a replica of this effect. I am using the mask like this, in Processing, and everything …

---

## [Why is text not centered properly with textAlign(CENTER, CENTER)?](https://discourse.processing.org/t/why-is-text-not-centered-properly-with-textalign-center-center/43322)

<div class="topic-metadata">

**Author:** [@qashto](https://discourse.processing.org/u/qashto)\
**Replies:** 8\
**Last updated:** [November 28, 2023, 4:17am UTC](https://discourse.processing.org/t/why-is-text-not-centered-properly-with-textalign-center-center/43322 "2023-11-28T04:17:48Z")

</div>

textAlign(CENTER, CENTER) does not seem to work when used with user loaded fonts. Here is a demonstration I made in p5.js: Here’s the same code run with q5.js showing how the text is supposed to be displayed in the c…

---

## [How can I improve the performance for the following 3d Animation?](https://discourse.processing.org/t/how-can-i-improve-the-performance-for-the-following-3d-animation/43278)

<div class="topic-metadata">

**Author:** [@nomemory](https://discourse.processing.org/u/nomemory)\
**Replies:** 1\
**Last updated:** [November 22, 2023, 5:33pm UTC](https://discourse.processing.org/t/how-can-i-improve-the-performance-for-the-following-3d-animation/43278 "2023-11-22T17:33:31Z")

</div>

I am a beginner with p5js and graphics in general. I’ve done a few 2D sketches, and while they were becoming more complex, I read about createGraphics() and how I can use this as a buffer to improve performance. A few d…

---

## [Trigonometric confusion over simple diagonals](https://discourse.processing.org/t/trigonometric-confusion-over-simple-diagonals/43233)

<div class="topic-metadata">

**Author:** [@amundsen](https://discourse.processing.org/u/amundsen)\
**Replies:** 5\
**Last updated:** [November 17, 2023, 6:25pm UTC](https://discourse.processing.org/t/trigonometric-confusion-over-simple-diagonals/43233 "2023-11-17T18:25:48Z")

</div>

Hello, I am coding a sketch to generate diagonals. The diagonals all start from the left side of the canvas from a random vertical position. Then the diagonal should be traced from a random angle. The range of possible …

---

## [Ways to Erase Part of a Line? (Preserve background)](https://discourse.processing.org/t/ways-to-erase-part-of-a-line-preserve-background/43207)

<div class="topic-metadata">

**Author:** [@cottonchipper](https://discourse.processing.org/u/cottonchipper)\
**Replies:** 5\
**Last updated:** [November 15, 2023, 1:44am UTC](https://discourse.processing.org/t/ways-to-erase-part-of-a-line-preserve-background/43207 "2023-11-15T01:44:59Z")

</div>

In Setup I’ve got a gradient being applied to the entire canvas. In Draw, I’m drawing some lines using a wide strokeWeight. I’d like to be able to erase part of the line and have the gradient below show through. Is ther…

---

## [How to draw a line in p5 v1.0 webgl (bezier)](https://discourse.processing.org/t/how-to-draw-a-line-in-p5-v1-0-webgl-bezier/43195)

<div class="topic-metadata">

**Author:** [@chaseLoop](https://discourse.processing.org/u/chaseLoop)\
**Replies:** 3\
**Last updated:** [November 14, 2023, 3:50pm UTC](https://discourse.processing.org/t/how-to-draw-a-line-in-p5-v1-0-webgl-bezier/43195 "2023-11-14T15:50:28Z")

</div>

I’m stuck with P5 v1.0’s webgl mode where each line turns out to be a plane. How to remove the white fill for the lines? I tried noFill() which doesn’t work. Also tried filling with a color at full transparency. That wor…

---

## [How does P5 webgl vertex fill work](https://discourse.processing.org/t/how-does-p5-webgl-vertex-fill-work/43192)

<div class="topic-metadata">

**Author:** [@chaseLoop](https://discourse.processing.org/u/chaseLoop)\
**Replies:** 2\
**Last updated:** [November 12, 2023, 10:44am UTC](https://discourse.processing.org/t/how-does-p5-webgl-vertex-fill-work/43192 "2023-11-12T10:44:25Z")

</div>

Hi, I intend to fill some custom flat shape with different color for different vertex in p5js Webgl mode, but some vertex color doesn’t show up as intended. In this example below i’m expecting the upper right corner to b…

---

## [Circles are the same color - Using Classes](https://discourse.processing.org/t/circles-are-the-same-color-using-classes/43122)

<div class="topic-metadata">

**Author:** [@DavevaD](https://discourse.processing.org/u/DavevaD)\
**Replies:** 5\
**Last updated:** [November 10, 2023, 1:07am UTC](https://discourse.processing.org/t/circles-are-the-same-color-using-classes/43122 "2023-11-10T01:07:04Z")

</div>

Hi All, My homework this week is about Classes. I can’t figure out how to get each of the three circles to be a different color. I am trying to make one red circle, one green circle, and one blue circle. They are all…

---

## [Restricting touches to be used by P5.js and not the browser: possible?](https://discourse.processing.org/t/restricting-touches-to-be-used-by-p5-js-and-not-the-browser-possible/43149)

<div class="topic-metadata">

**Author:** [@amundsen](https://discourse.processing.org/u/amundsen)\
**Replies:** 0\
**Last updated:** [November 5, 2023, 1:07pm UTC](https://discourse.processing.org/t/restricting-touches-to-be-used-by-p5-js-and-not-the-browser-possible/43149 "2023-11-05T13:07:44Z")

</div>

Hello, I want to have a multitouch interaction on a sketch using touches. However as soon as I have two or more fingers on the touchscreen the browser interprets the distance between the two first contacts as the zoom f…

---

## [Gradient line in p5js webgl context](https://discourse.processing.org/t/gradient-line-in-p5js-webgl-context/43123)

<div class="topic-metadata">

**Author:** [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Replies:** 2\
**Last updated:** [November 3, 2023, 1:14am UTC](https://discourse.processing.org/t/gradient-line-in-p5js-webgl-context/43123 "2023-11-03T01:14:29Z")

</div>

How could one color a line or a group of lines in p5 webgl canvas with linear gradient?

---

## [Shader breaking when used with createGraphics](https://discourse.processing.org/t/shader-breaking-when-used-with-creategraphics/43088)

<div class="topic-metadata">

**Author:** [@slone](https://discourse.processing.org/u/slone)\
**Replies:** 2\
**Last updated:** [October 30, 2023, 9:02pm UTC](https://discourse.processing.org/t/shader-breaking-when-used-with-creategraphics/43088 "2023-10-30T21:02:00Z")

</div>

Hello :smiling\_face: I’ve ran into some trouble trying to use shaders in conjunction with createGraphics. The shader works fine drawing to the main canvas, and can be used within a createGraphics canvas once, however af…

---

## [Please help me explaining this code logic](https://discourse.processing.org/t/please-help-me-explaining-this-code-logic/43048)

<div class="topic-metadata">

**Author:** [@Jiji](https://discourse.processing.org/u/Jiji)\
**Replies:** 2\
**Last updated:** [October 25, 2023, 10:18am UTC](https://discourse.processing.org/t/please-help-me-explaining-this-code-logic/43048 "2023-10-25T10:18:30Z")

</div>

Hi y’all, I am very new to P5.js. I am learning the dist() function of P5js ,and there is this code exercise that I have to Create a spotlight when the cursor is moved. I have a hard time understand the logic behind thi…

---

## [Can't access p5.Vector methods in typescript, like random2D() and sub()](https://discourse.processing.org/t/cant-access-p5-vector-methods-in-typescript-like-random2d-and-sub/38315)

<div class="topic-metadata">

**Author:** [@pedrocoelho](https://discourse.processing.org/u/pedrocoelho)\
**Replies:** 4\
**Last updated:** [October 16, 2023, 8:20pm UTC](https://discourse.processing.org/t/cant-access-p5-vector-methods-in-typescript-like-random2d-and-sub/38315 "2023-10-16T20:20:46Z")

</div>

Hello, I’m new to p5.js and I’m trying to convert what I learned in a tutorial from the Coding Train into a NextJS app with React and Typescript. I have this Vehicle class but when I try to use any Vector methods I get …

---

## [How to play a short animation upon interaction (rotate a shape)](https://discourse.processing.org/t/how-to-play-a-short-animation-upon-interaction-rotate-a-shape/42934)

<div class="topic-metadata">

**Author:** [@jackeddielove](https://discourse.processing.org/u/jackeddielove)\
**Replies:** 14\
**Last updated:** [October 13, 2023, 6:01am UTC](https://discourse.processing.org/t/how-to-play-a-short-animation-upon-interaction-rotate-a-shape/42934 "2023-10-13T06:01:58Z")

</div>

Hi all! I want to rotate a cube about a particular axis through a particular angle every time the user presses the RIGHTARROW key. I want the user to see the rotation happen, starting at its original position and rotati…

---

## [Display grid of objects (animated circles)](https://discourse.processing.org/t/display-grid-of-objects-animated-circles/42927)

<div class="topic-metadata">

**Author:** [@Alesk1969](https://discourse.processing.org/u/Alesk1969)\
**Replies:** 5\
**Last updated:** [October 9, 2023, 3:48pm UTC](https://discourse.processing.org/t/display-grid-of-objects-animated-circles/42927 "2023-10-09T15:48:42Z")

</div>

Hi everyone, I know that this is a frequent and simple question but I haven’t been able to find a solution for what I’d like to do. I’m creating an object made of circles. In the class I have a function that modifies t…

---

## [Load obj files with mtl colours](https://discourse.processing.org/t/load-obj-files-with-mtl-colours/42825)

<div class="topic-metadata">

**Author:** [@discuss9128](https://discourse.processing.org/u/discuss9128)\
**Replies:** 0\
**Last updated:** [September 25, 2023, 6:23am UTC](https://discourse.processing.org/t/load-obj-files-with-mtl-colours/42825 "2023-09-25T06:23:44Z")

</div>

Hi, I have some models in obj format, with mtl files specifying colours for faces (like this). p5 doesn’t support support mtl files, however. I could write a bit of code to process the mtl files, but what’s the best way…

---

## [\[p5\] loadImage : How to load an image from an internet URL](https://discourse.processing.org/t/p5-loadimage-how-to-load-an-image-from-an-internet-url/42752)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 6\
**Last updated:** [September 13, 2023, 6:01am UTC](https://discourse.processing.org/t/p5-loadimage-how-to-load-an-image-from-an-internet-url/42752 "2023-09-13T06:01:42Z")

</div>

\[p5\] loadImage : How to load an image from an internet URL let img; var url ="https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo\_color\_272x92dp.png"; function preload() { img = loadImage(url); } functi…

---

## [FloodFill Demo Problem in p5.js Web Editor](https://discourse.processing.org/t/floodfill-demo-problem-in-p5-js-web-editor/42749)

<div class="topic-metadata">

**Author:** [@svan](https://discourse.processing.org/u/svan)\
**Replies:** 2\
**Last updated:** [September 12, 2023, 6:25am UTC](https://discourse.processing.org/t/floodfill-demo-problem-in-p5-js-web-editor/42749 "2023-09-12T06:25:41Z")

</div>

@codeguppy I have been unable to run the CodeGuppy demo on flood fill for reasons I do not understand. It worked just fine in the editor used in the video, but fails to run as expected in a p5.js web editor. The follow…

---

## [Can users ADD functions to p5.js code through interaction with the sketch?](https://discourse.processing.org/t/can-users-add-functions-to-p5-js-code-through-interaction-with-the-sketch/42688)

<div class="topic-metadata">

**Author:** [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Replies:** 17\
**Last updated:** [September 8, 2023, 5:14am UTC](https://discourse.processing.org/t/can-users-add-functions-to-p5-js-code-through-interaction-with-the-sketch/42688 "2023-09-08T05:14:28Z")

</div>

Hello, I would like to write code that does the following: User clicks and drags on the canvas, and when they release a square has been drawn. The code, now has a rect() function, but no rect() function existed before t…

---

## [Writing data to assets folder in p5.js sketch](https://discourse.processing.org/t/writing-data-to-assets-folder-in-p5-js-sketch/42709)

<div class="topic-metadata">

**Author:** [@svan](https://discourse.processing.org/u/svan)\
**Replies:** 8\
**Last updated:** [September 6, 2023, 10:57pm UTC](https://discourse.processing.org/t/writing-data-to-assets-folder-in-p5-js-sketch/42709 "2023-09-06T22:57:02Z")

</div>

I have created an ‘assets’ folder in my p5.js sketch and enclosed a ‘xxxx.txt’ file. Does anyone know how to write data strings to the .txt file?

---

## [Reflection on ellipse simulation](https://discourse.processing.org/t/reflection-on-ellipse-simulation/42155)

<div class="topic-metadata">

**Author:** [@nikosliapis](https://discourse.processing.org/u/nikosliapis)\
**Replies:** 5\
**Last updated:** [August 22, 2023, 1:06pm UTC](https://discourse.processing.org/t/reflection-on-ellipse-simulation/42155 "2023-08-22T13:06:31Z")

</div>

Hello Everyone. I’m trying to create a simulation for a ball bouncing in the inside surface of a ellipse. This is how far i’ve been, https://editor.p5js.org/nikosliapis2000/sketches/\_Yx-KgwLN I can’t find a way to ma…

---

## [Any Ideas: Obstruct Flow Fields By An Image](https://discourse.processing.org/t/any-ideas-obstruct-flow-fields-by-an-image/42587)

<div class="topic-metadata">

**Author:** [@Jeton\_K](https://discourse.processing.org/u/Jeton_K)\
**Replies:** 0\
**Last updated:** [August 13, 2023, 9:52am UTC](https://discourse.processing.org/t/any-ideas-obstruct-flow-fields-by-an-image/42587 "2023-08-13T09:52:43Z")

</div>

Hey all! I was wondering if anyones creative genius could help. I’m designing an app and I have a loading screen, where I want flow fields to generate to represent the data being pulled together and give the user somet…

---

## [\[p5 WEB\] The website IP address is exposed. help me](https://discourse.processing.org/t/p5-web-the-website-ip-address-is-exposed-help-me/42539)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 2\
**Last updated:** [August 2, 2023, 6:22pm UTC](https://discourse.processing.org/t/p5-web-the-website-ip-address-is-exposed-help-me/42539 "2023-08-02T18:22:13Z")

</div>

source code alert('Check your ID and password.'); A pop-up window operates. However, the website IP address is exposed. Is it possible to open a ‘pop-up’ window so that the IP address is not exposed?

---

## [Collision detection with rotated objects](https://discourse.processing.org/t/collision-detection-with-rotated-objects/11810)

<div class="topic-metadata">

**Author:** [@lizzy](https://discourse.processing.org/u/lizzy)\
**Replies:** 4\
**Last updated:** [July 28, 2023, 1:29pm UTC](https://discourse.processing.org/t/collision-detection-with-rotated-objects/11810 "2023-07-28T13:29:34Z")

</div>

I am trying to detect collision between a rotated and non-rotated object. I’m using the p5 rotate function, and the objects are not in the same coordinate space. Thanks for your help! translate(width/2,height/2); …

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

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