# p5.js

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

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

**Page:** 52

---

## [Can p5js access the camera on a jetson nano?](https://discourse.processing.org/t/can-p5js-access-the-camera-on-a-jetson-nano/27494)

<div class="topic-metadata">

**Author:** [@skypickle](https://discourse.processing.org/u/skypickle)\
**Replies:** 2\
**Last updated:** [February 4, 2021, 12:37am UTC](https://discourse.processing.org/t/can-p5js-access-the-camera-on-a-jetson-nano/27494 "2021-02-04T00:37:17Z")

</div>

The jetson nano is a raspberry-pi like device and it can use raspberry pi cameras. It runs ubuntu and has a facility for running a webserver. I can execute p5js sketches fine. However I cannot get the the video from the…

---

## [Problem with HSB](https://discourse.processing.org/t/problem-with-hsb/27510)

<div class="topic-metadata">

**Author:** [@clankill3r](https://discourse.processing.org/u/clankill3r)\
**Replies:** 2\
**Last updated:** [February 3, 2021, 1:47pm UTC](https://discourse.processing.org/t/problem-with-hsb/27510 "2021-02-03T13:47:29Z")

</div>

If I get the average color using RGB I get this, which looks correct: But when I try it with HSB, no matter what I try, I can’t get it right. I have been playing with colorMode(HSB, x, x, x), but I still end up with …

---

## [How to use an url to stream video](https://discourse.processing.org/t/how-to-use-an-url-to-stream-video/27539)

<div class="topic-metadata">

**Author:** [@ctremblay](https://discourse.processing.org/u/ctremblay)\
**Replies:** 0\
**Last updated:** [February 1, 2021, 11:00pm UTC](https://discourse.processing.org/t/how-to-use-an-url-to-stream-video/27539 "2021-02-01T23:00:26Z")

</div>

I’m trying to make my own movie app but when i try to load the movies onto p5.js it says too big. so I was wondering if there a way I can just grab the url no matter how long the video is and use it instead of loading ea…

---

## [How to use url video at p5js?](https://discourse.processing.org/t/how-to-use-url-video-at-p5js/23368)

<div class="topic-metadata">

**Author:** [@jgh1201](https://discourse.processing.org/u/jgh1201)\
**Replies:** 1\
**Last updated:** [August 20, 2020, 10:03am UTC](https://discourse.processing.org/t/how-to-use-url-video-at-p5js/23368 "2020-08-20T10:03:20Z")

</div>

example function setup() { createCanvas(640, 120); video = createCapture(‘http://11.111.111.11/play.html’) } function draw() { background(220); } is this impossible? Is there any way to use URL video?

---

## [Fragment shader too many uniforms error](https://discourse.processing.org/t/fragment-shader-too-many-uniforms-error/17603)

<div class="topic-metadata">

**Author:** [@GreenCell](https://discourse.processing.org/u/GreenCell)\
**Replies:** 14\
**Last updated:** [February 1, 2021, 8:11pm UTC](https://discourse.processing.org/t/fragment-shader-too-many-uniforms-error/17603 "2021-02-01T20:11:04Z")

</div>

Hi there! I’m trying to get into the world of fragment shaders but ran into an issue that only appears on some devices. I’m driving the shader with particles that I’m calculating in the sketch, then passing a list of th…

---

## [How can I upload GIF in P5.image](https://discourse.processing.org/t/how-can-i-upload-gif-in-p5-image/27516)

<div class="topic-metadata">

**Author:** [@Shubham](https://discourse.processing.org/u/Shubham)\
**Replies:** 4\
**Last updated:** [February 1, 2021, 6:34pm UTC](https://discourse.processing.org/t/how-can-i-upload-gif-in-p5-image/27516 "2021-02-01T18:34:18Z")

</div>

I want to upload gif in image() but it is not getting rendered. I am saving a gif in asset folder from which it is taking other img, png file but it is not loading gif file.

---

## [Using p5.js on a jetson nano](https://discourse.processing.org/t/using-p5-js-on-a-jetson-nano/27511)

<div class="topic-metadata">

**Author:** [@skypickle](https://discourse.processing.org/u/skypickle)\
**Replies:** 0\
**Last updated:** [January 31, 2021, 9:31pm UTC](https://discourse.processing.org/t/using-p5-js-on-a-jetson-nano/27511 "2021-01-31T21:31:09Z")

</div>

P5js is a javascript library that enables media presentation, interactive drawing as well as user input in an area of a web page defined as the CANVAS. https://p5js.org/ I’ve gotten it to work with the jetson nano sinc…

---

## [How do I merge shapes that have a stroke?](https://discourse.processing.org/t/how-do-i-merge-shapes-that-have-a-stroke/27493)

<div class="topic-metadata">

**Author:** [@thesuperdaine](https://discourse.processing.org/u/thesuperdaine)\
**Replies:** 6\
**Last updated:** [January 31, 2021, 9:13pm UTC](https://discourse.processing.org/t/how-do-i-merge-shapes-that-have-a-stroke/27493 "2021-01-31T21:13:18Z")

</div>

I need this ear to be flush with the head. I want to merge it with the head like how you can merge shapes in Inkscape or Illustrator. I can’t do this by just making everything one shape using vertices and beginShape() an…

---

## [Box stroke width](https://discourse.processing.org/t/box-stroke-width/27436)

<div class="topic-metadata">

**Author:** [@yasboy](https://discourse.processing.org/u/yasboy)\
**Replies:** 6\
**Last updated:** [January 31, 2021, 2:17pm UTC](https://discourse.processing.org/t/box-stroke-width/27436 "2021-01-31T14:17:59Z")

</div>

Hello, I’ve just started learning how to use p5.js in a 3D environment. I made a simple array of boxes with different heights (here’s the code, it is very simple https://editor.p5js.org/ybenbihi/sketches/F05toan8W) Ho…

---

## [How do I pass a function by reference and then call it?](https://discourse.processing.org/t/how-do-i-pass-a-function-by-reference-and-then-call-it/27474)

<div class="topic-metadata">

**Author:** [@thesuperdaine](https://discourse.processing.org/u/thesuperdaine)\
**Replies:** 7\
**Last updated:** [January 30, 2021, 10:46pm UTC](https://discourse.processing.org/t/how-do-i-pass-a-function-by-reference-and-then-call-it/27474 "2021-01-30T22:46:41Z")

</div>

I’m making a character animation engine and I want to make this animation class that lets me specify a function to call and 2 sets of arguments and then it uses lerp() to transition overtime using setInterval() between t…

---

## [BlendMode Documentation?](https://discourse.processing.org/t/blendmode-documentation/27451)

<div class="topic-metadata">

**Author:** [@tinywitchdraws](https://discourse.processing.org/u/tinywitchdraws)\
**Replies:** 2\
**Last updated:** [January 30, 2021, 9:27pm UTC](https://discourse.processing.org/t/blendmode-documentation/27451 "2021-01-30T21:27:36Z")

</div>

Hi, I’m working on a little project that plays with blend modes, and I’ve kind of gotten to the point where I’ll need to know the specific math that p5js uses for their blend modes (ie. MULTIPLY=A\*B, LIGHTEST=max(A,B) et…

---

## [Extend p5.js function](https://discourse.processing.org/t/extend-p5-js-function/27441)

<div class="topic-metadata">

**Author:** [@jeffthompson](https://discourse.processing.org/u/jeffthompson)\
**Replies:** 3\
**Last updated:** [January 29, 2021, 2:28pm UTC](https://discourse.processing.org/t/extend-p5-js-function/27441 "2021-01-29T14:28:04Z")

</div>

I’d like to be able to extend the functionality of built-in p5.js functions, keeping the same name but adding some additional code. I don’t want to create my own version of p5.js, since maintaining that will be a pain. I…

---

## [Why doesn't an object return a random() value?](https://discourse.processing.org/t/why-doesnt-an-object-return-a-random-value/27448)

<div class="topic-metadata">

**Author:** [@vettefreak](https://discourse.processing.org/u/vettefreak)\
**Replies:** 8\
**Last updated:** [January 29, 2021, 12:35pm UTC](https://discourse.processing.org/t/why-doesnt-an-object-return-a-random-value/27448 "2021-01-29T12:35:23Z")

</div>

const randomizer = { "rgb1": random(0, 255), } draw = () =\> { let y = random(0, height); let x = random(0, width); noStroke(); fill(randomizer\["rgb1"\], randomizer\["rgb1"\], randomizer\["rgb1"\]); e…

---

## [Video not playing in repl.it but is playing on other platforms](https://discourse.processing.org/t/video-not-playing-in-repl-it-but-is-playing-on-other-platforms/27414)

<div class="topic-metadata">

**Author:** [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Replies:** 11\
**Last updated:** [January 28, 2021, 7:11pm UTC](https://discourse.processing.org/t/video-not-playing-in-repl-it-but-is-playing-on-other-platforms/27414 "2021-01-28T19:11:10Z")

</div>

Hi all, Does anyone have any insight as to why my code does not work on repl.it but it does work on OpenProcessing .org and on the p5.js web editor? Here’s the code: var vid; function setup() { createCanvas(0, 0); …

---

## [From Javascript P5 to Processing 3.x](https://discourse.processing.org/t/from-javascript-p5-to-processing-3-x/27399)

<div class="topic-metadata">

**Author:** [@HerClau](https://discourse.processing.org/u/HerClau)\
**Replies:** 9\
**Last updated:** [January 28, 2021, 7:24am UTC](https://discourse.processing.org/t/from-javascript-p5-to-processing-3-x/27399 "2021-01-28T07:24:17Z")

</div>

good morning How to translate the following line of code to Preocessing: // array containing the x positions of the line graph, scaled to fit the canvas posx = Float32Array.from({ length: time }, (\_, i) =\> map(i, 0, …

---

## [Masking a createGraphics object generates lag](https://discourse.processing.org/t/masking-a-creategraphics-object-generates-lag/27395)

<div class="topic-metadata">

**Author:** [@thesuperdaine](https://discourse.processing.org/u/thesuperdaine)\
**Replies:** 3\
**Last updated:** [January 27, 2021, 9:12pm UTC](https://discourse.processing.org/t/masking-a-creategraphics-object-generates-lag/27395 "2021-01-27T21:12:43Z")

</div>

So I’m creating this animated character who needs to have their pupils stay inside the whites of their eyes. Since you can’t use mask() on a graphics object, I have to convert the pupils to an image using createImage and…

---

## [Create sliding loop](https://discourse.processing.org/t/create-sliding-loop/27409)

<div class="topic-metadata">

**Author:** [@codeflow](https://discourse.processing.org/u/codeflow)\
**Replies:** 4\
**Last updated:** [January 27, 2021, 5:14pm UTC](https://discourse.processing.org/t/create-sliding-loop/27409 "2021-01-27T17:14:55Z")

</div>

Hey everyone, my problem is that I cannot figure out how to loop text. In other words: If the text string leaves the canvas to the left side I want it to enter the canvas on the right side. My approach is to set the …

---

## [Mouse/key pressed question](https://discourse.processing.org/t/mouse-key-pressed-question/27417)

<div class="topic-metadata">

**Author:** [@QueensGambit](https://discourse.processing.org/u/QueensGambit)\
**Replies:** 1\
**Last updated:** [January 27, 2021, 6:48pm UTC](https://discourse.processing.org/t/mouse-key-pressed-question/27417 "2021-01-27T18:48:39Z")

</div>

please format code with \</\> button \* homework policy \* asking questions Hi!! I need some help with a project. I need to put in images and when I push for example number 1 a certain image pops up and when I push numb…

---

## [Slider.style() - change color of slider](https://discourse.processing.org/t/slider-style-change-color-of-slider/4329)

<div class="topic-metadata">

**Author:** [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Replies:** 3\
**Last updated:** [January 27, 2021, 1:42pm UTC](https://discourse.processing.org/t/slider-style-change-color-of-slider/4329 "2021-01-27T13:42:23Z")

</div>

How do you change the color of a slider? It seems most other style properties work properly when using slider.style();, but neither background or background-color seem to make any change. I also tried to set the color in…

---

## [How to make a moving graph in Javascript P5](https://discourse.processing.org/t/how-to-make-a-moving-graph-in-javascript-p5/19630)

<div class="topic-metadata">

**Author:** [@mohashah](https://discourse.processing.org/u/mohashah)\
**Replies:** 3\
**Last updated:** [January 27, 2021, 12:50pm UTC](https://discourse.processing.org/t/how-to-make-a-moving-graph-in-javascript-p5/19630 "2021-01-27T12:50:43Z")

</div>

I have struggled to make my a moving graph in P5. My idea is to make a graph by the length of an array. If the length of the array increases the graph will move up and if it increases it will do the opposite. My code ca…

---

## [Convert processing to p5js code](https://discourse.processing.org/t/convert-processing-to-p5js-code/27405)

<div class="topic-metadata">

**Author:** [@l3ehfar](https://discourse.processing.org/u/l3ehfar)\
**Replies:** 1\
**Last updated:** [January 27, 2021, 10:16am UTC](https://discourse.processing.org/t/convert-processing-to-p5js-code/27405 "2021-01-27T10:16:46Z")

</div>

I need some help converting this Processing sketch to P5js sketch. I would be glad if someone helped me. float unit, theta; int num = 25, frames=180; void setup() { size(500, 500); unit = width/num; } void draw() …

---

## [Cannot upload or create .xml file into editor.p5js](https://discourse.processing.org/t/cannot-upload-or-create-xml-file-into-editor-p5js/27394)

<div class="topic-metadata">

**Author:** [@Laurent](https://discourse.processing.org/u/Laurent)\
**Replies:** 2\
**Last updated:** [January 26, 2021, 11:39pm UTC](https://discourse.processing.org/t/cannot-upload-or-create-xml-file-into-editor-p5js/27394 "2021-01-26T23:39:01Z")

</div>

Hi everyone, Teaching the different data file format, I need to upload a .csv, .json and .xml file into p5.js web editor. Doing this, the editor gives an error message (after upload trial) : ‘You can’t upload files of t…

---

## [Loop through a sequence](https://discourse.processing.org/t/loop-through-a-sequence/26242)

<div class="topic-metadata">

**Author:** [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Replies:** 12\
**Last updated:** [January 26, 2021, 10:23pm UTC](https://discourse.processing.org/t/loop-through-a-sequence/26242 "2021-01-26T22:23:59Z")

</div>

How do I loop through this sequence separated by commas so I can determine the minimum value? x = (min(splitFloat\[0\],splitFloat\[2\],splitFloat\[4\]); Thank you.

---

## [Is this really the best anti aliasing that p5 can do?](https://discourse.processing.org/t/is-this-really-the-best-anti-aliasing-that-p5-can-do/26525)

<div class="topic-metadata">

**Author:** [@thesuperdaine](https://discourse.processing.org/u/thesuperdaine)\
**Replies:** 18\
**Last updated:** [January 26, 2021, 10:02pm UTC](https://discourse.processing.org/t/is-this-really-the-best-anti-aliasing-that-p5-can-do/26525 "2021-01-26T22:02:56Z")

</div>

I’m working on a game with animated characters and I’ve noticed that while I can tell that anti aliasing is happening, it doesn’t look very pretty. Idk how to describe it well, but you can look at the picture. It just do…

---

## [Library import won´t work](https://discourse.processing.org/t/library-import-won-t-work/27364)

<div class="topic-metadata">

**Author:** [@myCatIsAwesome](https://discourse.processing.org/u/myCatIsAwesome)\
**Replies:** 2\
**Last updated:** [January 25, 2021, 7:47pm UTC](https://discourse.processing.org/t/library-import-won-t-work/27364 "2021-01-25T19:47:17Z")

</div>

Hello I am pretty new to coding and very new to processing/p5. I have the simple problem that if I want to include a library in my p5 project it just won´t work. In the web editor I made it work though by simply includ…

---

## [Want to work on bugs at examples page on p5.js-website but I can't GET the pages from examples page on my localhost](https://discourse.processing.org/t/want-to-work-on-bugs-at-examples-page-on-p5-js-website-but-i-cant-get-the-pages-from-examples-page-on-my-localhost/27329)

<div class="topic-metadata">

**Author:** [@Shubham](https://discourse.processing.org/u/Shubham)\
**Replies:** 2\
**Last updated:** [January 25, 2021, 2:13pm UTC](https://discourse.processing.org/t/want-to-work-on-bugs-at-examples-page-on-p5-js-website-but-i-cant-get-the-pages-from-examples-page-on-my-localhost/27329 "2021-01-25T14:13:22Z")

</div>

I am new to open source contributions and want to work on a bug and improve some code to the ‘examples’ page. Is there any way I can do that?

---

## [Translating Processing to P5js](https://discourse.processing.org/t/translating-processing-to-p5js/27332)

<div class="topic-metadata">

**Author:** [@codeflow](https://discourse.processing.org/u/codeflow)\
**Replies:** 6\
**Last updated:** [January 25, 2021, 9:50am UTC](https://discourse.processing.org/t/translating-processing-to-p5js/27332 "2021-01-25T09:50:33Z")

</div>

Hey guys, this problem is driving me crazy, so I hope somebody can help. I have this code written in processing, that I want to implement into my html website. I was doing research and realized I need to convert it in…

---

## [How to apply easing to p5js sketch](https://discourse.processing.org/t/how-to-apply-easing-to-p5js-sketch/27322)

<div class="topic-metadata">

**Author:** [@StudioBoe](https://discourse.processing.org/u/StudioBoe)\
**Replies:** 2\
**Last updated:** [January 24, 2021, 11:12pm UTC](https://discourse.processing.org/t/how-to-apply-easing-to-p5js-sketch/27322 "2021-01-24T23:12:03Z")

</div>

Complete beginner here so apologies for what is probably an obvious solution — I’m using the atan2 function in p5.js to create a simple sketch where an arrow (imported svg) is following the cursor. How would one add eas…

---

## [decodeAudioData' of undefined](https://discourse.processing.org/t/decodeaudiodata-of-undefined/27340)

<div class="topic-metadata">

**Author:** [@kokosic](https://discourse.processing.org/u/kokosic)\
**Replies:** 0\
**Last updated:** [January 24, 2021, 5:39pm UTC](https://discourse.processing.org/t/decodeaudiodata-of-undefined/27340 "2021-01-24T17:39:58Z")

</div>

Hi, I was trying to rewrite some code and then I started getting an error Uncaught TypeError: Cannot read property 'decodeAudioData' of undefined at FileReader.reader.onload (lvl.js:131) on this line this.conte…

---

## [Play music - Clicking in objects](https://discourse.processing.org/t/play-music-clicking-in-objects/27339)

<div class="topic-metadata">

**Author:** [@leobarros](https://discourse.processing.org/u/leobarros)\
**Replies:** 0\
**Last updated:** [January 24, 2021, 4:57pm UTC](https://discourse.processing.org/t/play-music-clicking-in-objects/27339 "2021-01-24T16:57:54Z")

</div>

please format code with \</\> button \* homework policy \* asking questions Hello guys. I am trying to make a specific mp3 file plays when a specific circle is clicked. I have a class named as Balls. Can someone help m…

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

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