# p5.js

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

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

**Page:** 10

---

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

---

## [Adding new Feature of mouse interactions](https://discourse.processing.org/t/adding-new-feature-of-mouse-interactions/43379)

<div class="topic-metadata">

**Author:** [@Nandini](https://discourse.processing.org/u/Nandini)\
**Replies:** 4\
**Last updated:** [December 3, 2023, 12:45pm UTC](https://discourse.processing.org/t/adding-new-feature-of-mouse-interactions/43379 "2023-12-03T12:45:14Z")

</div>

Usually we see that mouse and pointer interactions are a bit difficult to implement in code, how about we provide access to some of the most common mouse interactions? We can also allow users to create their own custom i…

---

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

---

## [Any text documentation//tutorial to learn about online multiplayer game?](https://discourse.processing.org/t/any-text-documentation-tutorial-to-learn-about-online-multiplayer-game/43339)

<div class="topic-metadata">

**Author:** [@teemee](https://discourse.processing.org/u/teemee)\
**Replies:** 0\
**Last updated:** [November 28, 2023, 3:33pm UTC](https://discourse.processing.org/t/any-text-documentation-tutorial-to-learn-about-online-multiplayer-game/43339 "2023-11-28T15:33:19Z")

</div>

Hi… I know there’re videos to learn about create a multiplayer games. But I have an issue watching videos and would like to just read. I does not live where I can purchase a text book so I have to look up online but wha…

---

## [Is it possible to overlay a p5 canvas over an entire page but still let interaction through?](https://discourse.processing.org/t/is-it-possible-to-overlay-a-p5-canvas-over-an-entire-page-but-still-let-interaction-through/17804)

<div class="topic-metadata">

**Author:** [@BSiemens](https://discourse.processing.org/u/BSiemens)\
**Replies:** 2\
**Last updated:** [November 22, 2023, 6:18pm UTC](https://discourse.processing.org/t/is-it-possible-to-overlay-a-p5-canvas-over-an-entire-page-but-still-let-interaction-through/17804 "2023-11-22T18:18:59Z")

</div>

I want to position a canvas over the entire page allowing me to draw anywhere. Is this possible and/or is this the best approach?

---

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

---

## [Latest chrome update breaks image() / loadpixels() combo](https://discourse.processing.org/t/latest-chrome-update-breaks-image-loadpixels-combo/43268)

<div class="topic-metadata">

**Author:** [@nathansonic](https://discourse.processing.org/u/nathansonic)\
**Replies:** 0\
**Last updated:** [November 20, 2023, 12:35pm UTC](https://discourse.processing.org/t/latest-chrome-update-breaks-image-loadpixels-combo/43268 "2023-11-20T12:35:39Z")

</div>

After the last chrome update a p5 program I’ve been working on has broken. I’m using image() to draw an image on the canvas and on mouseup the canvas is stored using loadpixels(). This is so I have some undo data to go …

---

## [HELP: Adding a "start game" and "game over" screens to game](https://discourse.processing.org/t/help-adding-a-start-game-and-game-over-screens-to-game/37889)

<div class="topic-metadata">

**Author:** [@BMS](https://discourse.processing.org/u/BMS)\
**Replies:** 12\
**Last updated:** [November 20, 2023, 4:45am UTC](https://discourse.processing.org/t/help-adding-a-start-game-and-game-over-screens-to-game/37889 "2023-11-20T04:45:22Z")

</div>

My 10 year old son attended a Javascript camp this week and had a great time. However, he is trying to complete his game and I am absolutely no help to him unfortunately. He and I are both fairly familiar with Scratch,…

---

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

---

## [There is lag when running on a smartphone](https://discourse.processing.org/t/there-is-lag-when-running-on-a-smartphone/43230)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 0\
**Last updated:** [November 16, 2023, 11:25pm UTC](https://discourse.processing.org/t/there-is-lag-when-running-on-a-smartphone/43230 "2023-11-16T23:25:37Z")

</div>

There is lag when running on a smartphone. hello. Nice to meet you. I created a WEB with ‘p5’. When accessing through the smartphone’s ‘Internet’ or ‘Chrome’ URL When entering ‘Webpage’ through ‘App’ on smartphone Wh…

---

## [P5 'mousePressed()' function error](https://discourse.processing.org/t/p5-mousepressed-function-error/43221)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 3\
**Last updated:** [November 16, 2023, 5:55pm UTC](https://discourse.processing.org/t/p5-mousepressed-function-error/43221 "2023-11-16T17:55:40Z")

</div>

p5 ‘mousePressed()’ function error hello. Nice to meet you. Please refer to the video. https://www.youtube.com/shorts/n2i0YRm-yJY WEB was implemented through ‘p5’. Image change was performed through ‘mousePressed()’…

---

## [Need help understanding why array in console.log is not displayed as expected](https://discourse.processing.org/t/need-help-understanding-why-array-in-console-log-is-not-displayed-as-expected/43213)

<div class="topic-metadata">

**Author:** [@jjjochennn](https://discourse.processing.org/u/jjjochennn)\
**Replies:** 3\
**Last updated:** [November 15, 2023, 9:53am UTC](https://discourse.processing.org/t/need-help-understanding-why-array-in-console-log-is-not-displayed-as-expected/43213 "2023-11-15T09:53:50Z")

</div>

Hello! the console.log in my p5 script is not showing what I expect and I do not understand, why. Basically I want to create a random square matrix of zeroes and ones, but in the (rare) case the function returns only z…

---

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

---

## [Canvas being redrawn at 200x200 px](https://discourse.processing.org/t/canvas-being-redrawn-at-200x200-px/43177)

<div class="topic-metadata">

**Author:** [@DavevaD](https://discourse.processing.org/u/DavevaD)\
**Replies:** 2\
**Last updated:** [November 9, 2023, 7:30pm UTC](https://discourse.processing.org/t/canvas-being-redrawn-at-200x200-px/43177 "2023-11-09T19:30:05Z")

</div>

Hi All, For some reason this sketch keeps displaying a canvas at 200x200px when I want it to be 500x500. The image is not scaled down, it just shows the top, left corner. When first building this sketch with just one …

---

## [Target an existing canvas in the DOM instead of creating a new one](https://discourse.processing.org/t/target-an-existing-canvas-in-the-dom-instead-of-creating-a-new-one/43179)

<div class="topic-metadata">

**Author:** [@mima](https://discourse.processing.org/u/mima)\
**Replies:** 1\
**Last updated:** [November 9, 2023, 6:19pm UTC](https://discourse.processing.org/t/target-an-existing-canvas-in-the-dom-instead-of-creating-a-new-one/43179 "2023-11-09T18:19:21Z")

</div>

I have an HTML page with a \<canvas\> node already in it. I’d like to connect a p5js sketch to it and draw in it. I’ve seen how to target instance container (examples | p5.js) but in these example a \<div\> tag is targeted…

---

## [Why does frameRate go slow after exactly 100 get() calls?](https://discourse.processing.org/t/why-does-framerate-go-slow-after-exactly-100-get-calls/43055)

<div class="topic-metadata">

**Author:** [@timpickup1](https://discourse.processing.org/u/timpickup1)\
**Replies:** 5\
**Last updated:** [November 7, 2023, 2:03pm UTC](https://discourse.processing.org/t/why-does-framerate-go-slow-after-exactly-100-get-calls/43055 "2023-11-07T14:03:36Z")

</div>

If you make a get(x,y) call every frame in P5JS, after 100 frames the frameRate suddenly drops from 60fps (or whatever it was set to) to about 14fps (or even slower). This only happens if there are some image objects dra…

---

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

---

## [Arduino Nano 33 IoT Basic LSM6DS3 Yaw Pitch & Roll on p5js via BLE \[working\]](https://discourse.processing.org/t/arduino-nano-33-iot-basic-lsm6ds3-yaw-pitch-roll-on-p5js-via-ble-working/43125)

<div class="topic-metadata">

**Author:** [@dgomba](https://discourse.processing.org/u/dgomba)\
**Replies:** 1\
**Last updated:** [November 5, 2023, 9:42am UTC](https://discourse.processing.org/t/arduino-nano-33-iot-basic-lsm6ds3-yaw-pitch-roll-on-p5js-via-ble-working/43125 "2023-11-05T09:42:27Z")

</div>

Hi! I’m trying to create a basic cube visualisation of the LSM6DS3 on the Arduino 33 IoT in p5js using ble.js- But I have to say the data I receive is totally random. This is the Arduino code This is the P5js I ex…

---

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

---

## [How to return usb soundcard channels/inputs](https://discourse.processing.org/t/how-to-return-usb-soundcard-channels-inputs/43038)

<div class="topic-metadata">

**Author:** [@mcfrsvn](https://discourse.processing.org/u/mcfrsvn)\
**Replies:** 1\
**Last updated:** [October 28, 2023, 7:22pm UTC](https://discourse.processing.org/t/how-to-return-usb-soundcard-channels-inputs/43038 "2023-10-28T19:22:28Z")

</div>

I work on an audio reactive project for live, and don’t find a way to return the data from the different channels of my usb soundcard (expert-sleepers es-9 with 14 channels/inputs). Do I need to convert all my signals in…

---

## [Major differences between v0.0.9 and 1.8.0](https://discourse.processing.org/t/major-differences-between-v0-0-9-and-1-8-0/43071)

<div class="topic-metadata">

**Author:** [@davidkramer](https://discourse.processing.org/u/davidkramer)\
**Replies:** 1\
**Last updated:** [October 27, 2023, 8:22am UTC](https://discourse.processing.org/t/major-differences-between-v0-0-9-and-1-8-0/43071 "2023-10-27T08:22:12Z")

</div>

Hello, I got my self into developing some extension. So my question what are the biggest differences between version 0.9.0 and the last one so 1.8.0… Just because I can’t find if there are any breaking differences betwe…

---

## [Function keyPressed() doesn't run in my Web Editor](https://discourse.processing.org/t/function-keypressed-doesnt-run-in-my-web-editor/43053)

<div class="topic-metadata">

**Author:** [@Olibri](https://discourse.processing.org/u/Olibri)\
**Replies:** 2\
**Last updated:** [October 25, 2023, 2:13pm UTC](https://discourse.processing.org/t/function-keypressed-doesnt-run-in-my-web-editor/43053 "2023-10-25T14:13:10Z")

</div>

Hi i don’t know why this code runs well in the p5js reference but not in my web editor could you help me please? let value = 0; function draw() { fill(value); rect(25, 25, 50, 50); describe(black rect center. turns …

---

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

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

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