# p5.js

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

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

**Page:** 33

---

## [P\_4\_3\_1\_02 Image](https://discourse.processing.org/t/p-4-3-1-02-image/34039)

<div class="topic-metadata">

**Author:** [@asymmetric](https://discourse.processing.org/u/asymmetric)\
**Replies:** 1\
**Last updated:** [December 10, 2021, 10:14pm UTC](https://discourse.processing.org/t/p-4-3-1-02-image/34039 "2021-12-10T22:14:11Z")

</div>

please format code with \</\> button \* homework policy \* asking questions Hi Processing community! I would like to upload a photograph from my computer to interact with the code that is provided for P\_4\_3\_1\_02. How wo…

---

## [Canvas objects are not transparent to underlying HTML/CSS objects](https://discourse.processing.org/t/canvas-objects-are-not-transparent-to-underlying-html-css-objects/34037)

<div class="topic-metadata">

**Author:** [@LiterallyANoodle](https://discourse.processing.org/u/LiterallyANoodle)\
**Replies:** 1\
**Last updated:** [December 10, 2021, 8:19pm UTC](https://discourse.processing.org/t/canvas-objects-are-not-transparent-to-underlying-html-css-objects/34037 "2021-12-10T20:19:18Z")

</div>

The body of my html file has a gradient image as it’s background in addition to some other html. I am trying to use the canvas to create an overlay of interactive objects on top of all of the static html/css images benea…

---

## [Get HSB-mode saturation of a color constructed in RGB](https://discourse.processing.org/t/get-hsb-mode-saturation-of-a-color-constructed-in-rgb/33674)

<div class="topic-metadata">

**Author:** [@modusponens](https://discourse.processing.org/u/modusponens)\
**Replies:** 6\
**Last updated:** [December 10, 2021, 6:59pm UTC](https://discourse.processing.org/t/get-hsb-mode-saturation-of-a-color-constructed-in-rgb/33674 "2021-12-10T18:59:33Z")

</div>

If I set colorMode(RGB) and create a color c, then get saturation(c), it always gives me the HSL-mode saturation number, which is different from the HSB-mode number. I can’t think of any way to get the HSB-mode saturatio…

---

## [PNG files appear pixelated](https://discourse.processing.org/t/png-files-appear-pixelated/34011)

<div class="topic-metadata">

**Author:** [@guitarguy](https://discourse.processing.org/u/guitarguy)\
**Replies:** 2\
**Last updated:** [December 9, 2021, 9:42pm UTC](https://discourse.processing.org/t/png-files-appear-pixelated/34011 "2021-12-09T21:42:12Z")

</div>

please format code with \</\> button \* homework policy \* asking questions Hello, we are using p5js to render a PNG in a browser. However, the higher the resolution the PNG is, the more pixelated it appears to the viewe…

---

## [\[p5.js\] About screen composition - Please tell me about a good method](https://discourse.processing.org/t/p5-js-about-screen-composition-please-tell-me-about-a-good-method/34016)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 0\
**Last updated:** [December 9, 2021, 6:25pm UTC](https://discourse.processing.org/t/p5-js-about-screen-composition-please-tell-me-about-a-good-method/34016 "2021-12-09T18:25:48Z")

</div>

\[p5.js\] About screen composition - Please tell me about a good method. Hello. Program production through JAVA Mode I am trying to make a program through ‘p5.js’. \[JAVA Mode\] \[p5.js Mode\] At this time, change…

---

## [\[p5.js\] Communication-related in 'P5', is UDP or TCP possible?](https://discourse.processing.org/t/p5-js-communication-related-in-p5-is-udp-or-tcp-possible/34012)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 2\
**Last updated:** [December 9, 2021, 6:11pm UTC](https://discourse.processing.org/t/p5-js-communication-related-in-p5-is-udp-or-tcp-possible/34012 "2021-12-09T18:11:04Z")

</div>

This is related to socket communication. p5.js, node.js, socket.io · processing/p5.js Wiki · GitHub node.js Node js를 이용하여 UDP Server와 Client 만들기 - SW 기술 블로그 (Q&A) Communication-related in ‘P5’, is UDP or TCP po…

---

## [Whats wrong with this code i am trying to make the circle bounce of the wall and go back to the starting point](https://discourse.processing.org/t/whats-wrong-with-this-code-i-am-trying-to-make-the-circle-bounce-of-the-wall-and-go-back-to-the-starting-point/33995)

<div class="topic-metadata">

**Author:** [@parichko](https://discourse.processing.org/u/parichko)\
**Replies:** 4\
**Last updated:** [December 9, 2021, 1:50pm UTC](https://discourse.processing.org/t/whats-wrong-with-this-code-i-am-trying-to-make-the-circle-bounce-of-the-wall-and-go-back-to-the-starting-point/33995 "2021-12-09T13:50:44Z")

</div>

let circleX = 0 let circleY = 200 let circleD = 100 function setup() { createCanvas(400, 400); } function draw() { background(220); circle(circleX,circleY,circleD) circleX = circleX + 1 if(circleX == 400){ ci…

---

## [Trying to learn how to make simple buttons in p5js](https://discourse.processing.org/t/trying-to-learn-how-to-make-simple-buttons-in-p5js/34014)

<div class="topic-metadata">

**Author:** [@parichko](https://discourse.processing.org/u/parichko)\
**Replies:** 2\
**Last updated:** [December 9, 2021, 1:50pm UTC](https://discourse.processing.org/t/trying-to-learn-how-to-make-simple-buttons-in-p5js/34014 "2021-12-09T13:50:13Z")

</div>

i am trying to learn how to make a simple button that prints hello in p5js or something else simple but when i tried to do it my self it didn’t work. Can someone just show me the code of a button that prints smth(or anyt…

---

## [\[p5.js\] Is there another way to print to Excel (or pdf)?](https://discourse.processing.org/t/p5-js-is-there-another-way-to-print-to-excel-or-pdf/34007)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 2\
**Last updated:** [December 9, 2021, 3:19am UTC](https://discourse.processing.org/t/p5-js-is-there-another-way-to-print-to-excel-or-pdf/34007 "2021-12-09T03:19:53Z")

</div>

You can find out how to print through ‘JS’ (JAVA Script) by searching ‘Google’. excel Export html table data to Excel using JavaScript / JQuery is not working properly in chrome browser - Stack Overflow pdf jspdf -…

---

## [Obj rigging in p5.js or combined with another lib?](https://discourse.processing.org/t/obj-rigging-in-p5-js-or-combined-with-another-lib/27088)

<div class="topic-metadata">

**Author:** [@ffd8](https://discourse.processing.org/u/ffd8)\
**Replies:** 3\
**Last updated:** [December 8, 2021, 11:18pm UTC](https://discourse.processing.org/t/obj-rigging-in-p5-js-or-combined-with-another-lib/27088 "2021-12-08T23:18:31Z")

</div>

Curious if anyone has tips/advice on how to do OBJ rigging (like animating the model from a skeleton) within p5.js? There was an abandoned issue on the topic some years ago… Found one of many tutorials using three.js – b…

---

## [WEBGL context lost error](https://discourse.processing.org/t/webgl-context-lost-error/34005)

<div class="topic-metadata">

**Author:** [@Sap](https://discourse.processing.org/u/Sap)\
**Replies:** 1\
**Last updated:** [December 8, 2021, 10:50pm UTC](https://discourse.processing.org/t/webgl-context-lost-error/34005 "2021-12-08T22:50:41Z")

</div>

Hello, I created a website where I’m using face detection (ml5js), video capture of the webcam, and 3d shapes. I’m using the video as a texture of the 3d shapes. When I’m using only 1 shape everything is okay but when…

---

## [\[p5.js\] When a button is pressed, I want to close the menu bar. Help](https://discourse.processing.org/t/p5-js-when-a-button-is-pressed-i-want-to-close-the-menu-bar-help/33986)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 5\
**Last updated:** [December 8, 2021, 1:22am UTC](https://discourse.processing.org/t/p5-js-when-a-button-is-pressed-i-want-to-close-the-menu-bar-help/33986 "2021-12-08T01:22:26Z")

</div>

js file function setup() { } function draw() { } html file \<html\> \<head\> \<meta charset="utf-8"\> \<meta name="viewport" content="width=device-width, initial-scale=1.0"\> \<link rel="stylesheet" href="style…

---

## [If statement with color not working](https://discourse.processing.org/t/if-statement-with-color-not-working/33904)

<div class="topic-metadata">

**Author:** [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Replies:** 8\
**Last updated:** [December 7, 2021, 9:00pm UTC](https://discourse.processing.org/t/if-statement-with-color-not-working/33904 "2021-12-07T21:00:44Z")

</div>

why is clicks not getting higher whe I click on the cookie? var clicks = 0; let cookie; function setup() { createCanvas(windowWidth, windowHeight); background(100); cookie = color(132, 86, 60, 255); } function dra…

---

## [Displaying for a certain amount of time](https://discourse.processing.org/t/displaying-for-a-certain-amount-of-time/33926)

<div class="topic-metadata">

**Author:** [@k5221](https://discourse.processing.org/u/k5221)\
**Replies:** 1\
**Last updated:** [December 4, 2021, 9:40pm UTC](https://discourse.processing.org/t/displaying-for-a-certain-amount-of-time/33926 "2021-12-04T21:40:58Z")

</div>

I’m trying to switch between two visuals on the screen (orbitpic(), meltingGlobal() ) every 5 seconds. If I call either of them, it works. After switching inside the if statement, if(millis() - ptime \> 5000), I want to k…

---

## [\[p5.js\] How do you know it's a device? / how to make menubar?](https://discourse.processing.org/t/p5-js-how-do-you-know-its-a-device-how-to-make-menubar/33918)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 1\
**Last updated:** [December 4, 2021, 2:32pm UTC](https://discourse.processing.org/t/p5-js-how-do-you-know-its-a-device-how-to-make-menubar/33918 "2021-12-04T14:32:16Z")

</div>

Hello. We would appreciate it if you could let us know if you have any questions. In p5 coding, ‘desktop’, ‘mobile’ How do you know it’s a device? Usually I want to implement a menu bar on the homepage. 2-1) Are…

---

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

<div class="topic-metadata">

**Author:** [@Kristina](https://discourse.processing.org/u/Kristina)\
**Replies:** 1\
**Last updated:** [December 4, 2021, 1:23pm UTC](https://discourse.processing.org/t/p5js-to-processing/33900 "2021-12-04T13:23:09Z")

</div>

Hello! I have created this game in p5js but now i have to convert it to processing and i have no idea how to do it. Can anyone help me? var enemy, enemyList,enemyIMG; //Obstacle Variables var player, playerIMG, bullet…

---

## [Extending a line](https://discourse.processing.org/t/extending-a-line/9880)

<div class="topic-metadata">

**Author:** [@kristofbolyai](https://discourse.processing.org/u/kristofbolyai)\
**Replies:** 9\
**Last updated:** [December 3, 2021, 12:15pm UTC](https://discourse.processing.org/t/extending-a-line/9880 "2021-12-03T12:15:25Z")

</div>

I have a line between two circles and I want to go them to go across the whole screen, but I only have the circle center position This is what I have: https://imgur.com/a/hJQ4mAv I want it to look like this: . PS: …

---

## [drawImage Performance](https://discourse.processing.org/t/drawimage-performance/33854)

<div class="topic-metadata">

**Author:** [@Skranker](https://discourse.processing.org/u/Skranker)\
**Replies:** 0\
**Last updated:** [December 1, 2021, 10:22am UTC](https://discourse.processing.org/t/drawimage-performance/33854 "2021-12-01T10:22:29Z")

</div>

Hey, im having a problem with p5 Performance. Im building a UI tool that uses some p5 Images, the largest ones are around 1000x800px or so. Normally the Performance is good and it looks like this in the profiler: S…

---

## [Stretch the canvas without changing the resolution](https://discourse.processing.org/t/stretch-the-canvas-without-changing-the-resolution/33836)

<div class="topic-metadata">

**Author:** [@Sayochi](https://discourse.processing.org/u/Sayochi)\
**Replies:** 1\
**Last updated:** [November 30, 2021, 11:45pm UTC](https://discourse.processing.org/t/stretch-the-canvas-without-changing-the-resolution/33836 "2021-11-30T23:45:10Z")

</div>

can I stretch the canvas without changing the resolution (width,height veriables)? I’m using my p5js sketch canvas inside a html div. which I’m allowed to thinker with. what I thought was initial canvas size can not be…

---

## [How to upload p5js game from openprocessing.org to itch.io?](https://discourse.processing.org/t/how-to-upload-p5js-game-from-openprocessing-org-to-itch-io/33781)

<div class="topic-metadata">

**Author:** [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Replies:** 4\
**Last updated:** [November 29, 2021, 8:36am UTC](https://discourse.processing.org/t/how-to-upload-p5js-game-from-openprocessing-org-to-itch-io/33781 "2021-11-29T08:36:33Z")

</div>

i would like to upload this game to itch.io, how do i do this?

---

## [Arrow functions](https://discourse.processing.org/t/arrow-functions/33715)

<div class="topic-metadata">

**Author:** [@Clark](https://discourse.processing.org/u/Clark)\
**Replies:** 2\
**Last updated:** [November 29, 2021, 1:18am UTC](https://discourse.processing.org/t/arrow-functions/33715 "2021-11-29T01:18:09Z")

</div>

Hi. This code is from Roni Kaufman on OpenProcessing Could anyone please explain in a beginner-understandable way what the function below does and how it works? let noiseProg = (x) =\> (x); Whole code: // By Roni Kau…

---

## [P5.JS & jsPDF cant use 2.4.0 but 1.3.3 works](https://discourse.processing.org/t/p5-js-jspdf-cant-use-2-4-0-but-1-3-3-works/33792)

<div class="topic-metadata">

**Author:** [@24601](https://discourse.processing.org/u/24601)\
**Replies:** 3\
**Last updated:** [November 28, 2021, 7:55am UTC](https://discourse.processing.org/t/p5-js-jspdf-cant-use-2-4-0-but-1-3-3-works/33792 "2021-11-28T07:55:19Z")

</div>

Hello Trying to upgrade jsPDF library to the latest version but Currently using this \<script src="//cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"\>\</script\> Swapping it out for this \<script src="https://un…

---

## [Using p5.distortion in p5.sound](https://discourse.processing.org/t/using-p5-distortion-in-p5-sound/33777)

<div class="topic-metadata">

**Author:** [@angeltapes](https://discourse.processing.org/u/angeltapes)\
**Replies:** 0\
**Last updated:** [November 26, 2021, 9:16pm UTC](https://discourse.processing.org/t/using-p5-distortion-in-p5-sound/33777 "2021-11-26T21:16:39Z")

</div>

please format code with \</\> button \* homework policy \* asking questions I’ve been trying to use the p5.distortion extension of p5.effect to distort an oscillator. I don’t think it’s working, however. Does anyone have…

---

## [P5.js Output for projection Mapping](https://discourse.processing.org/t/p5-js-output-for-projection-mapping/17587)

<div class="topic-metadata">

**Author:** [@LaserCrafterLP](https://discourse.processing.org/u/LaserCrafterLP)\
**Replies:** 3\
**Last updated:** [November 26, 2021, 3:12am UTC](https://discourse.processing.org/t/p5-js-output-for-projection-mapping/17587 "2021-11-26T03:12:45Z")

</div>

Heyho Guys^^ right now Im working on a Project in witch we would like to project some reactive Visuals we made in P5.js onto a Wall in the City. Right now in our normal workflow we are using Resolume for the mapping pa…

---

## [When do you need "var"? Can you only use "let" to declare variables?](https://discourse.processing.org/t/when-do-you-need-var-can-you-only-use-let-to-declare-variables/19673)

<div class="topic-metadata">

**Author:** [@mnoble](https://discourse.processing.org/u/mnoble)\
**Replies:** 5\
**Last updated:** [November 25, 2021, 2:42am UTC](https://discourse.processing.org/t/when-do-you-need-var-can-you-only-use-let-to-declare-variables/19673 "2021-11-25T02:42:50Z")

</div>

Hello Forum, Can p5js variables be declared and used exclusively with “let” or are there instances when you need “var”? Thank you for your help let move = 150; let on = true; //or var move; var on;

---

## [System Performance](https://discourse.processing.org/t/system-performance/33702)

<div class="topic-metadata">

**Author:** [@BigBigRed](https://discourse.processing.org/u/BigBigRed)\
**Replies:** 2\
**Last updated:** [November 24, 2021, 9:42pm UTC](https://discourse.processing.org/t/system-performance/33702 "2021-11-24T21:42:55Z")

</div>

I will be upgrading to a 4k display from the current 1080P. I realize that at times, the increased pixel count will decrease my framerate/ performance. So I am trying to decide if a new system is warranted (or not). For …

---

## [P5.js choosing randomly from an array of functions](https://discourse.processing.org/t/p5-js-choosing-randomly-from-an-array-of-functions/33666)

<div class="topic-metadata">

**Author:** [@okkobroderson](https://discourse.processing.org/u/okkobroderson)\
**Replies:** 10\
**Last updated:** [November 24, 2021, 7:09pm UTC](https://discourse.processing.org/t/p5-js-choosing-randomly-from-an-array-of-functions/33666 "2021-11-24T19:09:22Z")

</div>

hi, first post! i have declared an array of functions like funx = \[func1, func2, ...\]; in the draw loop i want to call theese randomly like funx\[random(funx)\](); it works when i call the functions by index like fun…

---

## [Problem with x-coordinate of the subsection of the source image in image() on safari. P5JS](https://discourse.processing.org/t/problem-with-x-coordinate-of-the-subsection-of-the-source-image-in-image-on-safari-p5js/33676)

<div class="topic-metadata">

**Author:** [@kalwas](https://discourse.processing.org/u/kalwas)\
**Replies:** 2\
**Last updated:** [November 24, 2021, 5:23pm UTC](https://discourse.processing.org/t/problem-with-x-coordinate-of-the-subsection-of-the-source-image-in-image-on-safari-p5js/33676 "2021-11-24T17:23:48Z")

</div>

Hi, I have a problem with my work. On all browsers it works correctly only not on safari. I noticed that the error occurs (only on safari) if sx in image() in line 66 is different than 0. Does anyone have an idea why th…

---

## [Using React with p5.js (React Hooks and Context)](https://discourse.processing.org/t/using-react-with-p5-js-react-hooks-and-context/10521)

<div class="topic-metadata">

**Author:** [@atoro](https://discourse.processing.org/u/atoro)\
**Replies:** 8\
**Last updated:** [November 24, 2021, 4:46pm UTC](https://discourse.processing.org/t/using-react-with-p5-js-react-hooks-and-context/10521 "2021-11-24T16:46:38Z")

</div>

Using React with p5.js This project demonstrates how to combine React (including the latest features such as hooks and context) and p5.js: Multiple p5 sketches on a same screen; Multiple instances of one sketch mount…

---

## [Low frequency oscillator](https://discourse.processing.org/t/low-frequency-oscillator/33711)

<div class="topic-metadata">

**Author:** [@moutcast](https://discourse.processing.org/u/moutcast)\
**Replies:** 2\
**Last updated:** [November 24, 2021, 1:43pm UTC](https://discourse.processing.org/t/low-frequency-oscillator/33711 "2021-11-24T13:43:06Z")

</div>

hi, beginner here. how can i create a low frequency oscillator with adjustable frequency? i am trying soundloop but i cant figure out how to adjust the tempo from a function with a slider. other examples very welcome?…

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

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