# p5.js

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

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

**Page:** 20

---

## [How to export p5 canvas in React](https://discourse.processing.org/t/how-to-export-p5-canvas-in-react/38991)

<div class="topic-metadata">

**Author:** [@amorin](https://discourse.processing.org/u/amorin)\
**Replies:** 1\
**Last updated:** [September 27, 2022, 1:51pm UTC](https://discourse.processing.org/t/how-to-export-p5-canvas-in-react/38991 "2022-09-27T13:51:42Z")

</div>

Hi. I’m using p5 with react typescript. I need to use ‘canva\_image’ value displayed in ‘saveFiles’ function in the Inpaint component to diplay it (for exemple). How I can I do that ? export function Inpaint(props: In…

---

## [Simplified my question: Array - 2 movers from circle border should move through circle center but they move parallel](https://discourse.processing.org/t/simplified-my-question-array-2-movers-from-circle-border-should-move-through-circle-center-but-they-move-parallel/38960)

<div class="topic-metadata">

**Author:** [@Tilman](https://discourse.processing.org/u/Tilman)\
**Replies:** 3\
**Last updated:** [September 25, 2022, 3:26pm UTC](https://discourse.processing.org/t/simplified-my-question-array-2-movers-from-circle-border-should-move-through-circle-center-but-they-move-parallel/38960 "2022-09-25T15:26:26Z")

</div>

I posted this before but made the code simpler so I can explain my problem. When I call two individual movers it works but as soon as I use an array not: I have a circle and with an array define two points on that circl…

---

## [\[p5\] I am curious about the Excel conversion source code / array declaration](https://discourse.processing.org/t/p5-i-am-curious-about-the-excel-conversion-source-code-array-declaration/38965)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 4\
**Last updated:** [September 25, 2022, 8:02am UTC](https://discourse.processing.org/t/p5-i-am-curious-about-the-excel-conversion-source-code-array-declaration/38965 "2022-09-25T08:02:53Z")

</div>

\[p5\] I am curious about the Excel conversion source code / array declaration. 1. How to declare array like ‘java’ in ‘p5’? example) 10x10 array make String\[\]\[\] randoms = new String\[10\]\[10\]; How do I do ‘p5’ to do the…

---

## [Why should the preview images in the libraries directory be grayscale?](https://discourse.processing.org/t/why-should-the-preview-images-in-the-libraries-directory-be-grayscale/38958)

<div class="topic-metadata">

**Author:** [@meezwhite](https://discourse.processing.org/u/meezwhite)\
**Replies:** 1\
**Last updated:** [September 24, 2022, 1:16pm UTC](https://discourse.processing.org/t/why-should-the-preview-images-in-the-libraries-directory-be-grayscale/38958 "2022-09-24T13:16:03Z")

</div>

I always wondered why the preview images for libraries in the libraries directory should be grayscale and I didn’t find a discussion about this. What were the foundations thoughts behind this decision? Just a wondermen…

---

## [\[p5\] cycle of work order](https://discourse.processing.org/t/p5-cycle-of-work-order/38955)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 5\
**Last updated:** [September 24, 2022, 7:29am UTC](https://discourse.processing.org/t/p5-cycle-of-work-order/38955 "2022-09-24T07:29:01Z")

</div>

\[p5\] cycle of work order In ‘p5’, ‘preload()’ function is provided to prepare in advance. However, there are cases where priority is needed even within the ‘preload()’ function. So, the order was given through t…

---

## [Javascript class - class instance variables declaration](https://discourse.processing.org/t/javascript-class-class-instance-variables-declaration/38936)

<div class="topic-metadata">

**Author:** [@vkbr](https://discourse.processing.org/u/vkbr)\
**Replies:** 2\
**Last updated:** [September 22, 2022, 11:55pm UTC](https://discourse.processing.org/t/javascript-class-class-instance-variables-declaration/38936 "2022-09-22T23:55:05Z")

</div>

In Java I could: class Stuff{ //a instance var not got trough constructor color c = color(0,0,0); Stuff(float \_x){ float x = \_x; } } in js, instance vars need all to be inside the constructo…

---

## [\[p5\] I want to change the value of the gauge graphic in real time](https://discourse.processing.org/t/p5-i-want-to-change-the-value-of-the-gauge-graphic-in-real-time/38928)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 4\
**Last updated:** [September 22, 2022, 11:04pm UTC](https://discourse.processing.org/t/p5-i-want-to-change-the-value-of-the-gauge-graphic-in-real-time/38928 "2022-09-22T23:04:46Z")

</div>

\[p5\] I want to change the value of the gauge graphic in real time. Is there an easy way to change that value? link : p5.js Web Editor ref : Gauge charts in JavaScript source code index.html \<!DOCTYPE html\> \<html l…

---

## [Loading screen with preload](https://discourse.processing.org/t/loading-screen-with-preload/38917)

<div class="topic-metadata">

**Author:** [@Omri](https://discourse.processing.org/u/Omri)\
**Replies:** 16\
**Last updated:** [September 22, 2022, 3:44pm UTC](https://discourse.processing.org/t/loading-screen-with-preload/38917 "2022-09-22T15:44:19Z")

</div>

Hi all, I’m using the function preload in my p5 project, because of that I have a couple of seconds of a white page at the beginning, so I want to create a loading screen. I tried to do the following here: and instead…

---

## [Help with createSelect() using array](https://discourse.processing.org/t/help-with-createselect-using-array/38822)

<div class="topic-metadata">

**Author:** [@zara2355](https://discourse.processing.org/u/zara2355)\
**Replies:** 12\
**Last updated:** [September 22, 2022, 6:49am UTC](https://discourse.processing.org/t/help-with-createselect-using-array/38822 "2022-09-22T06:49:07Z")

</div>

Hi all, I was hoping to get some advice on how to use createSelect() a little better. im trying to incorporate a dropdown to use with an autosuggest in my sketch. I sort of have it working, but instead of listing each it…

---

## [Pass Slider value into a class](https://discourse.processing.org/t/pass-slider-value-into-a-class/38668)

<div class="topic-metadata">

**Author:** [@Tilman](https://discourse.processing.org/u/Tilman)\
**Replies:** 19\
**Last updated:** [September 22, 2022, 6:34am UTC](https://discourse.processing.org/t/pass-slider-value-into-a-class/38668 "2022-09-22T06:34:17Z")

</div>

I am doing the NOC 5.3 Steering Behaviour coding challenge and try to map certain values like: maxSpeed, maxForce, and slowRadius to sliders. I also watched the slider tutorials by dan but struggle to implement this corr…

---

## [Help with javascript \`this\` keyword and \`bind\`](https://discourse.processing.org/t/help-with-javascript-this-keyword-and-bind/38897)

<div class="topic-metadata">

**Author:** [@vkbr](https://discourse.processing.org/u/vkbr)\
**Replies:** 11\
**Last updated:** [September 21, 2022, 2:34pm UTC](https://discourse.processing.org/t/help-with-javascript-this-keyword-and-bind/38897 "2022-09-21T14:34:59Z")

</div>

It’s a bit of a follow up of this question but no need to read back. As that one is marked solved, I’m starting a new topic. Not pasting the whole code, but making a pseudo example here to isolate the issue. I cooked …

---

## [Low video quality using createVideo](https://discourse.processing.org/t/low-video-quality-using-createvideo/38912)

<div class="topic-metadata">

**Author:** [@Omri](https://discourse.processing.org/u/Omri)\
**Replies:** 5\
**Last updated:** [September 21, 2022, 2:19pm UTC](https://discourse.processing.org/t/low-video-quality-using-createvideo/38912 "2022-09-21T14:19:52Z")

</div>

hey, I have a video.mp4 on my computer and I want to load it to a p5 sketch. this is the code: let pause\_vid = true; function preload() { vid = createVideo("video.mp4"); } function setup() { createCanvas(window.inn…

---

## [Calculate specific angle between velocity.heading and p5.Vector](https://discourse.processing.org/t/calculate-specific-angle-between-velocity-heading-and-p5-vector/38882)

<div class="topic-metadata">

**Author:** [@Tilman](https://discourse.processing.org/u/Tilman)\
**Replies:** 2\
**Last updated:** [September 21, 2022, 9:12am UTC](https://discourse.processing.org/t/calculate-specific-angle-between-velocity-heading-and-p5-vector/38882 "2022-09-21T09:12:10Z")

</div>

Hi, I know how to calculate an angle between two vectors and did this. But in this example (derived from the NOC steering behavior tutorial) I did calculate the angle from the vehicle to the center of the canvas(grey ci…

---

## [P5.js input text](https://discourse.processing.org/t/p5-js-input-text/38887)

<div class="topic-metadata">

**Author:** [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Replies:** 4\
**Last updated:** [September 20, 2022, 9:57pm UTC](https://discourse.processing.org/t/p5-js-input-text/38887 "2022-09-20T21:57:02Z")

</div>

Hello all, I have 2 questions about text input. a) I am looking for a text field where suggestions of what you going to type appear underneath your text. Similar to when you use save as and type an existing file name …

---

## [How to combine React and P5.js? (loading image)](https://discourse.processing.org/t/how-to-combine-react-and-p5-js-loading-image/38877)

<div class="topic-metadata">

**Author:** [@Mangelo](https://discourse.processing.org/u/Mangelo)\
**Replies:** 1\
**Last updated:** [September 20, 2022, 3:44pm UTC](https://discourse.processing.org/t/how-to-combine-react-and-p5-js-loading-image/38877 "2022-09-20T15:44:58Z")

</div>

Hi! I am currently learning P5.js, and I’m planning on using it with my personal portfolio. I managed to do what I want in p5.js, however, when I try to import it to my react project i’m not able to do it. This is what…

---

## [Publish p5 project](https://discourse.processing.org/t/publish-p5-project/38841)

<div class="topic-metadata">

**Author:** [@Omri](https://discourse.processing.org/u/Omri)\
**Replies:** 4\
**Last updated:** [September 20, 2022, 7:24am UTC](https://discourse.processing.org/t/publish-p5-project/38841 "2022-09-20T07:24:57Z")

</div>

Hey, I have a p5 project on my computer (HTML, CSS, a few js scripts, and some audio files) and I want to publish it. I can’t use the p5 web editor because the audio files are too big. What is the best way to do it? I …

---

## [\[p5\] I want to make a web so that many people can watch the video](https://discourse.processing.org/t/p5-i-want-to-make-a-web-so-that-many-people-can-watch-the-video/38786)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 4\
**Last updated:** [September 19, 2022, 10:59pm UTC](https://discourse.processing.org/t/p5-i-want-to-make-a-web-so-that-many-people-can-watch-the-video/38786 "2022-09-19T22:59:38Z")

</div>

\[p5\] I want to make a web so that many people can watch the video. p5 library vida : Vida Using the library above, we made it possible to view the video on the WEB. We tested that you can view the video through the …

---

## [Set attractor/repeller corresponding to mouse pressed LEFT/RIGHT](https://discourse.processing.org/t/set-attractor-repeller-corresponding-to-mouse-pressed-left-right/38862)

<div class="topic-metadata">

**Author:** [@Tilman](https://discourse.processing.org/u/Tilman)\
**Replies:** 1\
**Last updated:** [September 19, 2022, 7:39pm UTC](https://discourse.processing.org/t/set-attractor-repeller-corresponding-to-mouse-pressed-left-right/38862 "2022-09-19T19:39:11Z")

</div>

Hi am trying to modify the “Attraction and Repulsion Forces” NOC tutorial code and set either an attractor or repeller on mouse LEFT(attractor) or RIGHT(repeller) pressed into the canvas. I got something working but when…

---

## [Javascript classes, but more a design question](https://discourse.processing.org/t/javascript-classes-but-more-a-design-question/38848)

<div class="topic-metadata">

**Author:** [@vkbr](https://discourse.processing.org/u/vkbr)\
**Replies:** 7\
**Last updated:** [September 19, 2022, 2:17pm UTC](https://discourse.processing.org/t/javascript-classes-but-more-a-design-question/38848 "2022-09-19T14:17:54Z")

</div>

Trying to figure out a design for this: I have a class Grid. I want to make points relative to a Grid instance (there will be only one instance of Grid). Relative means the point coordinates will change accordingly to …

---

## [Array releasing particles in specific intervals](https://discourse.processing.org/t/array-releasing-particles-in-specific-intervals/38836)

<div class="topic-metadata">

**Author:** [@Tilman](https://discourse.processing.org/u/Tilman)\
**Replies:** 9\
**Last updated:** [September 18, 2022, 7:19pm UTC](https://discourse.processing.org/t/array-releasing-particles-in-specific-intervals/38836 "2022-09-18T19:19:41Z")

</div>

Hi, I have made an array of particles and I initiate the particles in the draw function to get a particle stream. But what I really want is to release the particles from the array at specific intervals. Like every seco…

---

## [Create a box with different colored sides](https://discourse.processing.org/t/create-a-box-with-different-colored-sides/38792)

<div class="topic-metadata">

**Author:** [@heylittlechef](https://discourse.processing.org/u/heylittlechef)\
**Replies:** 4\
**Last updated:** [September 16, 2022, 10:24am UTC](https://discourse.processing.org/t/create-a-box-with-different-colored-sides/38792 "2022-09-16T10:24:40Z")

</div>

Hi! I’m just starting out and want to make a box with different colored sides. Any tips?

---

## [Array problem with SLIDER VALUE through for loop](https://discourse.processing.org/t/array-problem-with-slider-value-through-for-loop/38753)

<div class="topic-metadata">

**Author:** [@wasif9098](https://discourse.processing.org/u/wasif9098)\
**Replies:** 12\
**Last updated:** [September 16, 2022, 6:08am UTC](https://discourse.processing.org/t/array-problem-with-slider-value-through-for-loop/38753 "2022-09-16T06:08:22Z")

</div>

I’m new to JS and p5. I was trying to make a slider which controls the number of objects through array and for loop. But I’m facing two problems. Problem 1. If the slider value is above 49, it gives this error “Cannot…

---

## [Line width looks thinner with p5 vs canvas api](https://discourse.processing.org/t/line-width-looks-thinner-with-p5-vs-canvas-api/38764)

<div class="topic-metadata">

**Author:** [@glenderr](https://discourse.processing.org/u/glenderr)\
**Replies:** 2\
**Last updated:** [September 15, 2022, 9:08pm UTC](https://discourse.processing.org/t/line-width-looks-thinner-with-p5-vs-canvas-api/38764 "2022-09-15T21:08:12Z")

</div>

I remade an old project that used p5 to do the drawing, and verified that my canvas api drawing functions are no different than p5’s after reading the source. What I’m noticing are that the line widths look slightly thin…

---

## [Place a circle on the surface of a sphere](https://discourse.processing.org/t/place-a-circle-on-the-surface-of-a-sphere/38770)

<div class="topic-metadata">

**Author:** [@rickard](https://discourse.processing.org/u/rickard)\
**Replies:** 6\
**Last updated:** [September 15, 2022, 11:36am UTC](https://discourse.processing.org/t/place-a-circle-on-the-surface-of-a-sphere/38770 "2022-09-15T11:36:05Z")

</div>

Hi, I’m trying to place a circle on the surface of a sphere. I’ve already have the coordinates but i’m struggling a bit with the rotation (see screenshots). I’ve tried using the theta and phi values used when creating …

---

## [Mix video with static images added later to canvas](https://discourse.processing.org/t/mix-video-with-static-images-added-later-to-canvas/38743)

<div class="topic-metadata">

**Author:** [@slgdev](https://discourse.processing.org/u/slgdev)\
**Replies:** 2\
**Last updated:** [September 15, 2022, 12:35am UTC](https://discourse.processing.org/t/mix-video-with-static-images-added-later-to-canvas/38743 "2022-09-15T00:35:14Z")

</div>

Dear Community, since many years im a designer and webdev and just came across p5.js - It blows my mind, there are so much things i can imagine :slight\_smile: Please have a look here: https://editor.p5js.org/slgdev/sk…

---

## [Help with adding autocomplete to a sketch](https://discourse.processing.org/t/help-with-adding-autocomplete-to-a-sketch/38440)

<div class="topic-metadata">

**Author:** [@zara2355](https://discourse.processing.org/u/zara2355)\
**Replies:** 13\
**Last updated:** [September 14, 2022, 1:24pm UTC](https://discourse.processing.org/t/help-with-adding-autocomplete-to-a-sketch/38440 "2022-09-14T13:24:03Z")

</div>

Hi all- Im hoping someone might be able to help point me in the right direction. Im creating a sketch that acts as an interactive inventory map for the shop that i work in. For example, when a person types in a search t…

---

## [Sketch download from web editor zip file corrupt CRC error](https://discourse.processing.org/t/sketch-download-from-web-editor-zip-file-corrupt-crc-error/38366)

<div class="topic-metadata">

**Author:** [@PJR123](https://discourse.processing.org/u/PJR123)\
**Replies:** 2\
**Last updated:** [September 14, 2022, 3:15pm UTC](https://discourse.processing.org/t/sketch-download-from-web-editor-zip-file-corrupt-crc-error/38366 "2022-09-14T15:15:05Z")

</div>

I am trying to download a zip file of my sketch I created with the online web editor, but the zip file which I get back seems to be corrupt as I can’t open the zip file and uncompressed the files (CRC error reported). T…

---

## [Convert p5.js to Processing](https://discourse.processing.org/t/convert-p5-js-to-processing/944)

<div class="topic-metadata">

**Author:** [@codingking03](https://discourse.processing.org/u/codingking03)\
**Replies:** 8\
**Last updated:** [September 14, 2022, 3:38pm UTC](https://discourse.processing.org/t/convert-p5-js-to-processing/944 "2022-09-14T15:38:44Z")

</div>

Is there any easy way to convert p5.js code to processing (java)?

---

## [Does loadStrings() load from the Browser cache?](https://discourse.processing.org/t/does-loadstrings-load-from-the-browser-cache/38700)

<div class="topic-metadata">

**Author:** [@Jan](https://discourse.processing.org/u/Jan)\
**Replies:** 2\
**Last updated:** [September 12, 2022, 1:25pm UTC](https://discourse.processing.org/t/does-loadstrings-load-from-the-browser-cache/38700 "2022-09-12T13:25:37Z")

</div>

Hello everyone, this is happening to me: I’m loading a txt file (only one line) once every 10 seconds with loadStrings() Works. Loaded it already a hundred times. Then the txt file on the server has changed. But loadS…

---

## [Coding a system with sun moon and earth realistically](https://discourse.processing.org/t/coding-a-system-with-sun-moon-and-earth-realistically/38712)

<div class="topic-metadata">

**Author:** [@Beppo](https://discourse.processing.org/u/Beppo)\
**Replies:** 1\
**Last updated:** [September 11, 2022, 4:08pm UTC](https://discourse.processing.org/t/coding-a-system-with-sun-moon-and-earth-realistically/38712 "2022-09-11T16:08:29Z")

</div>

Hi, I am asking my question again because i still couldnt improve: Hello, for a scool project I have to code the in the reality existing system containing sun, moon and earth as realistically as possible. In my opinion …

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

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