# p5.js

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

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

**Page:** 36

---

## [Converting from p5.js to Processing 3.5.4](https://discourse.processing.org/t/converting-from-p5-js-to-processing-3-5-4/32927)

<div class="topic-metadata">

**Author:** [@laurentangy](https://discourse.processing.org/u/laurentangy)\
**Replies:** 1\
**Last updated:** [October 19, 2021, 10:27pm UTC](https://discourse.processing.org/t/converting-from-p5-js-to-processing-3-5-4/32927 "2021-10-19T22:27:49Z")

</div>

I found some inspiration for a project (see Piano Synthesizer - OpenProcessing) but unfortunately it’s in p5.js. Does anyone know how convert the syntax to Processing 3.5.4? I have read the Github guide on transitions an…

---

## [P5.js - How to save a single picture in the draw()](https://discourse.processing.org/t/p5-js-how-to-save-a-single-picture-in-the-draw/32906)

<div class="topic-metadata">

**Author:** [@niuuin](https://discourse.processing.org/u/niuuin)\
**Replies:** 4\
**Last updated:** [October 19, 2021, 8:01pm UTC](https://discourse.processing.org/t/p5-js-how-to-save-a-single-picture-in-the-draw/32906 "2021-10-19T20:01:47Z")

</div>

I want to save the picture when the volume is greater than a certain level, but the current code will save many pictures continuously. How can I save only one picture? Thank you for your help:) https://editor.p5js.org/…

---

## [Trying to get a better understanding of array loops](https://discourse.processing.org/t/trying-to-get-a-better-understanding-of-array-loops/32779)

<div class="topic-metadata">

**Author:** [@ADG](https://discourse.processing.org/u/ADG)\
**Replies:** 11\
**Last updated:** [October 19, 2021, 7:22pm UTC](https://discourse.processing.org/t/trying-to-get-a-better-understanding-of-array-loops/32779 "2021-10-19T19:22:37Z")

</div>

Hi, I’m trying to get a better understanding of arrays at a basic level before I advance to using them with functions & classes, but I am struggling a little. I wrote this: let r; let g; let b; let x; let y; let w; le…

---

## [Embedding OpenProcessing Sketches](https://discourse.processing.org/t/embedding-openprocessing-sketches/32614)

<div class="topic-metadata">

**Author:** [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Replies:** 18\
**Last updated:** [October 19, 2021, 7:10am UTC](https://discourse.processing.org/t/embedding-openprocessing-sketches/32614 "2021-10-19T07:10:48Z")

</div>

I know this forum supports embedding sketches hosted at editor.p5js.org. However it doesn’t seem to support sketches from openprocessing.org. Presumably this forum is configured with a whitelist of domains that can be em…

---

## [Is there a way to use an external canvas as the canvas p5 uses](https://discourse.processing.org/t/is-there-a-way-to-use-an-external-canvas-as-the-canvas-p5-uses/32910)

<div class="topic-metadata">

**Author:** [@Errorbot1122](https://discourse.processing.org/u/Errorbot1122)\
**Replies:** 4\
**Last updated:** [October 18, 2021, 9:18pm UTC](https://discourse.processing.org/t/is-there-a-way-to-use-an-external-canvas-as-the-canvas-p5-uses/32910 "2021-10-18T21:18:12Z")

</div>

Is there a way to use the \<canvas\> tag as the p5 canvas? Background Non really, I just want to create a premade canvas in my HTML What I’ve tried I try looking at the doc and searching on google, I could not find anyth…

---

## [Why default Black color in chrome](https://discourse.processing.org/t/why-default-black-color-in-chrome/32888)

<div class="topic-metadata">

**Author:** [@Cere1998](https://discourse.processing.org/u/Cere1998)\
**Replies:** 5\
**Last updated:** [October 18, 2021, 10:48am UTC](https://discourse.processing.org/t/why-default-black-color-in-chrome/32888 "2021-10-18T10:48:18Z")

</div>

New to p5.js how come my default color is black when i run it in chrome? using brackets function setup() { createCanvas(480,120); } function draw() { rect(180, 60, 220, 40); }

---

## [Can I load 3dmodels from local?](https://discourse.processing.org/t/can-i-load-3dmodels-from-local/32350)

<div class="topic-metadata">

**Author:** [@yang](https://discourse.processing.org/u/yang)\
**Replies:** 7\
**Last updated:** [October 18, 2021, 4:25am UTC](https://discourse.processing.org/t/can-i-load-3dmodels-from-local/32350 "2021-10-18T04:25:52Z")

</div>

I’ve loaded a model using loadModel(), but it requires a path from the website. And because I can’t upload a file larger than 5M，I wonder if there is a way to load a model just from local (maybe createFileInput)? Thank …

---

## [Chrome performance issues](https://discourse.processing.org/t/chrome-performance-issues/32892)

<div class="topic-metadata">

**Author:** [@mortimr](https://discourse.processing.org/u/mortimr)\
**Replies:** 1\
**Last updated:** [October 17, 2021, 7:30pm UTC](https://discourse.processing.org/t/chrome-performance-issues/32892 "2021-10-17T19:30:01Z")

</div>

Hi ! I’ve got an animation with not that much entities drawn on the screen. Each entity is a set of vertices that draw some shapes with beginShape and endShape (tesseract mode). For some reason, on chrome the animation …

---

## [Webgl scaling interaction can be improved](https://discourse.processing.org/t/webgl-scaling-interaction-can-be-improved/32863)

<div class="topic-metadata">

**Author:** [@yang](https://discourse.processing.org/u/yang)\
**Replies:** 2\
**Last updated:** [October 17, 2021, 2:09am UTC](https://discourse.processing.org/t/webgl-scaling-interaction-can-be-improved/32863 "2021-10-17T02:09:27Z")

</div>

Currently you can only scale between large and small. I suggest changing code like this in order to scale smoothly in interaction.js. “\_pmouseWheelDeltaY” may be removed. const scaleFactor = 50; // ZOOM if there is a …

---

## [Full screen issue, white canvas - keyPressed](https://discourse.processing.org/t/full-screen-issue-white-canvas-keypressed/32795)

<div class="topic-metadata">

**Author:** [@u\_ro](https://discourse.processing.org/u/u_ro)\
**Replies:** 5\
**Last updated:** [October 15, 2021, 11:13am UTC](https://discourse.processing.org/t/full-screen-issue-white-canvas-keypressed/32795 "2021-10-15T11:13:39Z")

</div>

Hi guys, I am an absolutely newbie of p5js. I am having trouble when I play my sketch in full screen, I attach an example I set function setup() { createCanvas(windowWidth, windowHeight); background(0); and then …

---

## [Constraining Image and Shape](https://discourse.processing.org/t/constraining-image-and-shape/32773)

<div class="topic-metadata">

**Author:** [@cartopher](https://discourse.processing.org/u/cartopher)\
**Replies:** 2\
**Last updated:** [October 13, 2021, 12:45am UTC](https://discourse.processing.org/t/constraining-image-and-shape/32773 "2021-10-13T00:45:09Z")

</div>

I need help with my JavaScript code in p5.js. I am struggling to figure out how to constrain the large image, so when you pan the screen at the max zoomed-out position (starting point), the image does not move off the s…

---

## [Letters WEBGL letterbox bug](https://discourse.processing.org/t/letters-webgl-letterbox-bug/32757)

<div class="topic-metadata">

**Author:** [@samroud](https://discourse.processing.org/u/samroud)\
**Replies:** 3\
**Last updated:** [October 12, 2021, 5:32pm UTC](https://discourse.processing.org/t/letters-webgl-letterbox-bug/32757 "2021-10-12T17:32:08Z")

</div>

Hello, With WEBGL and type, I have sometimes a bug \> a black background appear in the letterbox (the «M» in my print screen).

---

## [Support for Dark Theme on p5.org website](https://discourse.processing.org/t/support-for-dark-theme-on-p5-org-website/28537)

<div class="topic-metadata">

**Author:** [@prateek93a](https://discourse.processing.org/u/prateek93a)\
**Replies:** 5\
**Last updated:** [October 11, 2021, 6:38am UTC](https://discourse.processing.org/t/support-for-dark-theme-on-p5-org-website/28537 "2021-10-11T06:38:05Z")

</div>

Hey everyone, I am not sure if it is the right place to ask this, but I would like to know if it is a good idea for the p5js.org website to support dark theme. If it is, I would like to raise this feature request on the …

---

## [Fill text color with the same color of preload image](https://discourse.processing.org/t/fill-text-color-with-the-same-color-of-preload-image/32716)

<div class="topic-metadata">

**Author:** [@tropicalpoison](https://discourse.processing.org/u/tropicalpoison)\
**Replies:** 3\
**Last updated:** [October 10, 2021, 10:46am UTC](https://discourse.processing.org/t/fill-text-color-with-the-same-color-of-preload-image/32716 "2021-10-10T10:46:41Z")

</div>

Hello all, I want to fill a text’s (avg 450 words or more) color with the same color of preload image on canvas in P5js. Actually, I am trying to recreate this image with the same colors as the text I wrote. Is anybod…

---

## [Beginner needs help: unclear behaviour of a self written function (Minimax)](https://discourse.processing.org/t/beginner-needs-help-unclear-behaviour-of-a-self-written-function-minimax/32511)

<div class="topic-metadata">

**Author:** [@arathorn76](https://discourse.processing.org/u/arathorn76)\
**Replies:** 9\
**Last updated:** [October 10, 2021, 9:48am UTC](https://discourse.processing.org/t/beginner-needs-help-unclear-behaviour-of-a-self-written-function-minimax/32511 "2021-10-10T09:48:34Z")

</div>

Hi all, I´m just beginning to try out Javascript and after watching some Coding Train videos decided to give p5js and its online editor a try. Now I made a mistake and can´t figure it out. Detailed questions at the en…

---

## [Image Object Array not displaying correctly](https://discourse.processing.org/t/image-object-array-not-displaying-correctly/32704)

<div class="topic-metadata">

**Author:** [@Alexander\_Kessler](https://discourse.processing.org/u/Alexander_Kessler)\
**Replies:** 5\
**Last updated:** [October 9, 2021, 5:51pm UTC](https://discourse.processing.org/t/image-object-array-not-displaying-correctly/32704 "2021-10-09T17:51:55Z")

</div>

Need some help trying to make an object image array based on Daniel Shiffman tut, but having this console error while displaying . " image() was expecting p5.Image|p5.Element for the first parameter, received an empty v…

---

## [Javascript doesn't support SIMD](https://discourse.processing.org/t/javascript-doesnt-support-simd/32672)

<div class="topic-metadata">

**Author:** [@yang](https://discourse.processing.org/u/yang)\
**Replies:** 5\
**Last updated:** [October 9, 2021, 7:44am UTC](https://discourse.processing.org/t/javascript-doesnt-support-simd/32672 "2021-10-09T07:44:29Z")

</div>

I’m making a 3d rendering demo using p5, but I’m depressed because I notice that javascript doesn’t have SIMD and thus cannot perform fast vector caculation. Should I switch to c or c++? p5 is a really good platform and …

---

## [Get pixels in instance mode](https://discourse.processing.org/t/get-pixels-in-instance-mode/32689)

<div class="topic-metadata">

**Author:** [@mark75](https://discourse.processing.org/u/mark75)\
**Replies:** 5\
**Last updated:** [October 8, 2021, 8:41pm UTC](https://discourse.processing.org/t/get-pixels-in-instance-mode/32689 "2021-10-08T20:41:03Z")

</div>

Hello there, I’m having an odd moment with trying to get pixels from an image in instance mode. I’m unable to reference the image as one would normally \>\>\> let pix = p.img.get(p.x, p.y); What am I doing wrong? Any poin…

---

## [Full screen issue](https://discourse.processing.org/t/full-screen-issue/32692)

<div class="topic-metadata">

**Author:** [@unique](https://discourse.processing.org/u/unique)\
**Replies:** 1\
**Last updated:** [October 8, 2021, 5:23pm UTC](https://discourse.processing.org/t/full-screen-issue/32692 "2021-10-08T17:23:41Z")

</div>

when i run the program it executes perfectly in right side output area, but when i run same program it will not display in full screen, only 20% of screen will be displayed on top , tried in 5 laptops but same issue in …

---

## [How to create angled SVG file from an image?](https://discourse.processing.org/t/how-to-create-angled-svg-file-from-an-image/32618)

<div class="topic-metadata">

**Author:** [@Ajones](https://discourse.processing.org/u/Ajones)\
**Replies:** 9\
**Last updated:** [October 7, 2021, 5:42pm UTC](https://discourse.processing.org/t/how-to-create-angled-svg-file-from-an-image/32618 "2021-10-07T17:42:13Z")

</div>

Hello, I am using \[sine waves portrait\] by \[iamrobin\] and I would like to change the angle on the lines also I would like to save the result as an SVG file instead of a PNG. I have been reading for 2 days now but I am …

---

## [Blendmode in Webgl](https://discourse.processing.org/t/blendmode-in-webgl/32676)

<div class="topic-metadata">

**Author:** [@rickard](https://discourse.processing.org/u/rickard)\
**Replies:** 0\
**Last updated:** [October 7, 2021, 5:42pm UTC](https://discourse.processing.org/t/blendmode-in-webgl/32676 "2021-10-07T17:42:09Z")

</div>

Hi, Not sure if i’m missing something complete obvious here but i’m not getting the blendMode to work when running a the sketch in webgl mode. Example code below. function setup() { createCanvas(400, 400, WEBGL); } …

---

## [How to export a p5.js animation in high quality video](https://discourse.processing.org/t/how-to-export-a-p5-js-animation-in-high-quality-video/32655)

<div class="topic-metadata">

**Author:** [@camilleroux](https://discourse.processing.org/u/camilleroux)\
**Replies:** 2\
**Last updated:** [October 6, 2021, 7:43pm UTC](https://discourse.processing.org/t/how-to-export-a-p5-js-animation-in-high-quality-video/32655 "2021-10-06T19:43:14Z")

</div>

Hi, I’d like to export p5.js animation in high quality videos. I tried the export function of OpenProcessing, but the video is very compressed. Thanks

---

## [Get random seed value in p5.js?](https://discourse.processing.org/t/get-random-seed-value-in-p5-js/32635)

<div class="topic-metadata">

**Author:** [@jeffthompson](https://discourse.processing.org/u/jeffthompson)\
**Replies:** 5\
**Last updated:** [October 6, 2021, 3:54pm UTC](https://discourse.processing.org/t/get-random-seed-value-in-p5-js/32635 "2021-10-06T15:54:56Z")

</div>

I’ve looked at the source code for the p5.js randomSeed() function but can’t quite figure this out: is it possible to get the seed value currently being used by the random() function? I’d like to grab this is setup() so …

---

## [Let/var behaviour inside function vs outside](https://discourse.processing.org/t/let-var-behaviour-inside-function-vs-outside/32639)

<div class="topic-metadata">

**Author:** [@ADG](https://discourse.processing.org/u/ADG)\
**Replies:** 3\
**Last updated:** [October 5, 2021, 6:03pm UTC](https://discourse.processing.org/t/let-var-behaviour-inside-function-vs-outside/32639 "2021-10-05T18:03:41Z")

</div>

Probably a dumb question, but in this example: var angle = 0.0; function setup() { createCanvas(120, 120); background(204); } function draw() { translate(mouseX, mouseY); rotate(angle); rect(-15, -15, 30, 30); angle += …

---

## [I can't seem to use a uniform shader variable if I name it "uAmbientColor"](https://discourse.processing.org/t/i-cant-seem-to-use-a-uniform-shader-variable-if-i-name-it-uambientcolor/32593)

<div class="topic-metadata">

**Author:** [@modusponens](https://discourse.processing.org/u/modusponens)\
**Replies:** 3\
**Last updated:** [October 4, 2021, 8:25pm UTC](https://discourse.processing.org/t/i-cant-seem-to-use-a-uniform-shader-variable-if-i-name-it-uambientcolor/32593 "2021-10-04T20:25:44Z")

</div>

Just as the title says, if I make a p5 sketch with WEBGL enabled and all that, and I make a shader and try to give it a uniform variable called uAmbientColor, I am unable to use it correctly. Regard this humble sketch: …

---

## [Hello,basic question, x is not a function](https://discourse.processing.org/t/hello-basic-question-x-is-not-a-function/32579)

<div class="topic-metadata">

**Author:** [@momo](https://discourse.processing.org/u/momo)\
**Replies:** 4\
**Last updated:** [October 4, 2021, 2:25pm UTC](https://discourse.processing.org/t/hello-basic-question-x-is-not-a-function/32579 "2021-10-04T14:25:47Z")

</div>

let img; let cnv; let points =\[\] let mult = 0.008 var vScale = 1; function preload(){ img = loadImage("assets/22.jpg"); } function setup() { cnv = createCanvas(img.width, img.height); //print img let newCanvasX…

---

## [How to draw a crescent](https://discourse.processing.org/t/how-to-draw-a-crescent/30771)

<div class="topic-metadata">

**Author:** [@Dan](https://discourse.processing.org/u/Dan)\
**Replies:** 26\
**Last updated:** [October 3, 2021, 6:41pm UTC](https://discourse.processing.org/t/how-to-draw-a-crescent/30771 "2021-10-03T18:41:42Z")

</div>

Hello friends, I would like to depict moon phases by laying a dark crescent shape over an image of the moon. I’m able to create a crescent shape using beginShape()/endShape() and generating lots of vertices inside a co…

---

## [Struggling with Webmidi library](https://discourse.processing.org/t/struggling-with-webmidi-library/32539)

<div class="topic-metadata">

**Author:** [@goldorak](https://discourse.processing.org/u/goldorak)\
**Replies:** 1\
**Last updated:** [October 3, 2021, 5:26pm UTC](https://discourse.processing.org/t/struggling-with-webmidi-library/32539 "2021-10-03T17:26:38Z")

</div>

Hi, I’m trying to make the simplest implementation of the Webmidi library. I can get my midi controllers to communicate with my sketch, however I’m really struggling with the code structure. So far I’ve been using: T…

---

## [Hardware device to be controlled by p5.js](https://discourse.processing.org/t/hardware-device-to-be-controlled-by-p5-js/32582)

<div class="topic-metadata">

**Author:** [@Pete\_r61](https://discourse.processing.org/u/Pete_r61)\
**Replies:** 0\
**Last updated:** [October 3, 2021, 4:27pm UTC](https://discourse.processing.org/t/hardware-device-to-be-controlled-by-p5-js/32582 "2021-10-03T16:27:24Z")

</div>

---

## [Using mousePressed to place different indexes of an array on the canvas](https://discourse.processing.org/t/using-mousepressed-to-place-different-indexes-of-an-array-on-the-canvas/32556)

<div class="topic-metadata">

**Author:** [@Cavemind](https://discourse.processing.org/u/Cavemind)\
**Replies:** 4\
**Last updated:** [October 2, 2021, 7:40pm UTC](https://discourse.processing.org/t/using-mousepressed-to-place-different-indexes-of-an-array-on-the-canvas/32556 "2021-10-02T19:40:28Z")

</div>

Hello Reaching out for some help, What I am trying to do is when I press mouse button a different part of an array is show and placed on the screen, what is happening is that even though the selected array index is the…

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

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