# p5.js

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

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

**Page:** 95

---

## [Working with html/css and p5.js](https://discourse.processing.org/t/working-with-html-css-and-p5-js/10970)

<div class="topic-metadata">

**Author:** [@Indieminor](https://discourse.processing.org/u/Indieminor)\
**Replies:** 4\
**Last updated:** [May 7, 2019, 10:24pm UTC](https://discourse.processing.org/t/working-with-html-css-and-p5-js/10970 "2019-05-07T22:24:13Z")

</div>

Hey all, So I’ve built my first app with p5.js, yippeee! It’s a simple music visualizer that I plan on building more on later. For now though, I would love to have instructions on my site that tell the user what to do. M…

---

## [Cannot Create Classes](https://discourse.processing.org/t/cannot-create-classes/8756)

<div class="topic-metadata">

**Author:** [@Martin](https://discourse.processing.org/u/Martin)\
**Replies:** 17\
**Last updated:** [May 7, 2019, 9:16pm UTC](https://discourse.processing.org/t/cannot-create-classes/8756 "2019-05-07T21:16:57Z")

</div>

Good morning, people! Recently, I’ve been wresting with one small issue and honestly, it’s really starting to frustrate me. Perhaps it’s a small issue and I’m just going to look stupid, but at this rate, I might as well …

---

## [3D Bezier angle at point](https://discourse.processing.org/t/3d-bezier-angle-at-point/10941)

<div class="topic-metadata">

**Author:** [@Sudev](https://discourse.processing.org/u/Sudev)\
**Replies:** 4\
**Last updated:** [May 7, 2019, 1:10pm UTC](https://discourse.processing.org/t/3d-bezier-angle-at-point/10941 "2019-05-07T13:10:53Z")

</div>

Does anyone knows how to calculate angle at a particular point in 3D bezier curve ? For example, consider there’s a ring to be inserted in BezierCurve. So can I get angles that ring makes in order for it to be parallel …

---

## [Mutual attraction of objects](https://discourse.processing.org/t/mutual-attraction-of-objects/10985)

<div class="topic-metadata">

**Author:** [@Capt.Sloth](https://discourse.processing.org/u/Capt.Sloth)\
**Replies:** 4\
**Last updated:** [May 7, 2019, 5:13am UTC](https://discourse.processing.org/t/mutual-attraction-of-objects/10985 "2019-05-07T05:13:04Z")

</div>

Hello, I am trying to take a different approach and use functions instead of classes to recreate the mutual attraction sketch from Nature of code (ch2.08 to be specific).I have taken a different approach,I am confident …

---

## [Different filters to one image](https://discourse.processing.org/t/different-filters-to-one-image/10981)

<div class="topic-metadata">

**Author:** [@arixha](https://discourse.processing.org/u/arixha)\
**Replies:** 1\
**Last updated:** [May 6, 2019, 9:40pm UTC](https://discourse.processing.org/t/different-filters-to-one-image/10981 "2019-05-06T21:40:32Z")

</div>

Hi, I’m preloading an image and I’m loading it every 10 seconds in a different position of the canvas. I want to apply to my image a new different filter every time I load it (to the image only, not to all the canvas). …

---

## [2d raycast porting issue (P5\>P3)](https://discourse.processing.org/t/2d-raycast-porting-issue-p5-p3/10940)

<div class="topic-metadata">

**Author:** [@TTG](https://discourse.processing.org/u/TTG)\
**Replies:** 4\
**Last updated:** [May 6, 2019, 2:15pm UTC](https://discourse.processing.org/t/2d-raycast-porting-issue-p5-p3/10940 "2019-05-06T14:15:02Z")

</div>

Hi team. I could use some help regarding an issue I experience. Daniel S. did a raycast tutorial in P5 ( https://www.youtube.com/watch?v=-6iIc6-Y-kk ) I am doing the same though in P3. it goes correct until at in P…

---

## [Need help with fill() on Bezier](https://discourse.processing.org/t/need-help-with-fill-on-bezier/10603)

<div class="topic-metadata">

**Author:** [@Sudev](https://discourse.processing.org/u/Sudev)\
**Replies:** 14\
**Last updated:** [May 5, 2019, 12:14pm UTC](https://discourse.processing.org/t/need-help-with-fill-on-bezier/10603 "2019-05-05T12:14:43Z")

</div>

For some reason/s, am unable to set fill to my Bezier (3D). Here’s my code : let p0 = createVector(0, 20, 0); let p1 = createVector(0, 0, 40); let p2 = createVector(0, -60, 0); let p3 = createVector(0, 0, -40); …

---

## [Mapping every value of an array to a color spectrum](https://discourse.processing.org/t/mapping-every-value-of-an-array-to-a-color-spectrum/10868)

<div class="topic-metadata">

**Author:** [@lavina](https://discourse.processing.org/u/lavina)\
**Replies:** 5\
**Last updated:** [May 4, 2019, 9:32pm UTC](https://discourse.processing.org/t/mapping-every-value-of-an-array-to-a-color-spectrum/10868 "2019-05-04T21:32:03Z")

</div>

I have an array called numbers of incrementing values from 0 to n. I want to create an array of colors so that each value in numbers has its own color, and then later draw a line for each element in numbers, with the cor…

---

## [Find multiple arc edge?](https://discourse.processing.org/t/find-multiple-arc-edge/10847)

<div class="topic-metadata">

**Author:** [@pastuh](https://discourse.processing.org/u/pastuh)\
**Replies:** 9\
**Last updated:** [May 4, 2019, 6:07pm UTC](https://discourse.processing.org/t/find-multiple-arc-edge/10847 "2019-05-04T18:07:37Z")

</div>

Hello. I can’t understand how i can find arc() edge. Currently i control White line with mouse. And goal is to change that line to Red, if mouse is outside Yellow zone. I draw multiple arcs (on top of each) and real s…

---

## [2D perlin with smooth transition](https://discourse.processing.org/t/2d-perlin-with-smooth-transition/10897)

<div class="topic-metadata">

**Author:** [@Capt.Sloth](https://discourse.processing.org/u/Capt.Sloth)\
**Replies:** 8\
**Last updated:** [May 4, 2019, 9:43am UTC](https://discourse.processing.org/t/2d-perlin-with-smooth-transition/10897 "2019-05-04T09:43:21Z")

</div>

Simple project to understand Perlin noise better, I plan to have each cell have a certain grey-scale value with the help of perlin noise which I managed to attain in 2D. Now i would also like to add the z offset to the n…

---

## [P5.localmessage (testing, feedback, & discussion)](https://discourse.processing.org/t/p5-localmessage-testing-feedback-discussion/10889)

<div class="topic-metadata">

**Author:** [@bmoren](https://discourse.processing.org/u/bmoren)\
**Replies:** 0\
**Last updated:** [May 3, 2019, 6:49pm UTC](https://discourse.processing.org/t/p5-localmessage-testing-feedback-discussion/10889 "2019-05-03T18:49:55Z")

</div>

Hello! I’m releasing a new library for p5.js today. I’m hoping that this thread can encourage other people to try it out, and test if before I add it officially to the p5.js homepage. Github Repository: https://github.c…

---

## [Rotated polygons with collision detection](https://discourse.processing.org/t/rotated-polygons-with-collision-detection/10755)

<div class="topic-metadata">

**Author:** [@JoeM](https://discourse.processing.org/u/JoeM)\
**Replies:** 9\
**Last updated:** [May 3, 2019, 1:36pm UTC](https://discourse.processing.org/t/rotated-polygons-with-collision-detection/10755 "2019-05-03T13:36:59Z")

</div>

How can i detect the collision between two polygons with different rotations? i use the p5.collide2d Lib, but it don´t know how to apply rotation to it.

---

## [Creating a shape using vertices of different color](https://discourse.processing.org/t/creating-a-shape-using-vertices-of-different-color/10842)

<div class="topic-metadata">

**Author:** [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Replies:** 2\
**Last updated:** [May 3, 2019, 4:17am UTC](https://discourse.processing.org/t/creating-a-shape-using-vertices-of-different-color/10842 "2019-05-03T04:17:59Z")

</div>

Hi, so a little while ago I attempted Dan Shiffman’s code to make my own maze. It was a really nice maze, where lines where drawn top right bottom left to make a square grid of squares, and you could call one of the line…

---

## [Sharing a p5 sketch that has an array of images](https://discourse.processing.org/t/sharing-a-p5-sketch-that-has-an-array-of-images/10821)

<div class="topic-metadata">

**Author:** [@am\_i\_functional](https://discourse.processing.org/u/am_i_functional)\
**Replies:** 12\
**Last updated:** [May 2, 2019, 6:56pm UTC](https://discourse.processing.org/t/sharing-a-p5-sketch-that-has-an-array-of-images/10821 "2019-05-02T18:56:44Z")

</div>

My sketch which is just basically coding challenge 5 works great in the web editor. I used some of my own art in it and it works fine with my art. When i try to share online it has a problem. i saw in inspect element a …

---

## [Click event on two shape](https://discourse.processing.org/t/click-event-on-two-shape/10613)

<div class="topic-metadata">

**Author:** [@clingonboy](https://discourse.processing.org/u/clingonboy)\
**Replies:** 6\
**Last updated:** [May 2, 2019, 1:36pm UTC](https://discourse.processing.org/t/click-event-on-two-shape/10613 "2019-05-02T13:36:56Z")

</div>

If I have two rect one over enother, partially, if a click in the common area, how can I select the last above rectangle? like in this example: https://editor.p5js.org/Clingonboy/sketches/ja\_VJNrg4 Have I do andle mys…

---

## [How to project/map from cartesian space to circular space](https://discourse.processing.org/t/how-to-project-map-from-cartesian-space-to-circular-space/10640)

<div class="topic-metadata">

**Author:** [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Replies:** 2\
**Last updated:** [April 29, 2019, 9:02pm UTC](https://discourse.processing.org/t/how-to-project-map-from-cartesian-space-to-circular-space/10640 "2019-04-29T21:02:47Z")

</div>

Hi, I want to project or map points of specific locations to be within the confine of a circular space (not removing points). Considering map() function does mapping on 1 dimension, how can I do so to take into accounts …

---

## [Genetic Algorithm Is Not Learning](https://discourse.processing.org/t/genetic-algorithm-is-not-learning/10674)

<div class="topic-metadata">

**Author:** [@OrangeC7](https://discourse.processing.org/u/OrangeC7)\
**Replies:** 6\
**Last updated:** [April 29, 2019, 6:36pm UTC](https://discourse.processing.org/t/genetic-algorithm-is-not-learning/10674 "2019-04-29T18:36:26Z")

</div>

I’m trying to get a “player”/circle to avoid getting hit by “obstacles”/other circles, based on Daniel Shiffman’s Neuroevolution Flappy Bird/with tensorflow.js. (https://youtu.be/c6y21FkaUqw) The algorithm has the follo…

---

## [Error output to vim](https://discourse.processing.org/t/error-output-to-vim/10722)

<div class="topic-metadata">

**Author:** [@arielyssou](https://discourse.processing.org/u/arielyssou)\
**Replies:** 2\
**Last updated:** [April 29, 2019, 11:21am UTC](https://discourse.processing.org/t/error-output-to-vim/10722 "2019-04-29T11:21:07Z")

</div>

Hi! I’m just beginning with p5.js and I’m trying to setup a “IDE” using Vim. So far I’ve a local host but I’m having trouble with redirecting error messages from the consoles to vim or even to a local file. Is there a wa…

---

## [Randomly arrange imported shapes on canvas](https://discourse.processing.org/t/randomly-arrange-imported-shapes-on-canvas/10667)

<div class="topic-metadata">

**Author:** [@annab](https://discourse.processing.org/u/annab)\
**Replies:** 7\
**Last updated:** [April 29, 2019, 8:04am UTC](https://discourse.processing.org/t/randomly-arrange-imported-shapes-on-canvas/10667 "2019-04-29T08:04:36Z")

</div>

Hi, I am completely new to processing and need to solve a problem. I am trying to write a simple code to allow me to arrange imported shapes randomly scattered on the canvas. I have found the tutorial for circle packing…

---

## [Call Backs in Preload();](https://discourse.processing.org/t/call-backs-in-preload/10711)

<div class="topic-metadata">

**Author:** [@peachman](https://discourse.processing.org/u/peachman)\
**Replies:** 5\
**Last updated:** [April 29, 2019, 2:28am UTC](https://discourse.processing.org/t/call-backs-in-preload/10711 "2019-04-29T02:28:08Z")

</div>

Hi Again, Something I might be miss understanding here, but here goes. The code below doesn’t run how my mind thinks it should. The call back function is being called twice (proved by the print statement) however it is…

---

## [Possible to stop webcam after using createCapture?](https://discourse.processing.org/t/possible-to-stop-webcam-after-using-createcapture/10557)

<div class="topic-metadata">

**Author:** [@computershawn](https://discourse.processing.org/u/computershawn)\
**Replies:** 4\
**Last updated:** [April 28, 2019, 7:08am UTC](https://discourse.processing.org/t/possible-to-stop-webcam-after-using-createcapture/10557 "2019-04-28T07:08:09Z")

</div>

Is there a way to stop my webcam from recording after I’ve started it using capture = createCapture?

---

## [Accessing Json object](https://discourse.processing.org/t/accessing-json-object/10659)

<div class="topic-metadata">

**Author:** [@Honkitonkie](https://discourse.processing.org/u/Honkitonkie)\
**Replies:** 4\
**Last updated:** [April 26, 2019, 1:40pm UTC](https://discourse.processing.org/t/accessing-json-object/10659 "2019-04-26T13:40:44Z")

</div>

Hi all, I recently started a project where i want to do some aninmations with weather data. However i got stuck rather quickly and can’t seem to acces my JSON. I looked everywhere and tried a lot but the answer still e…

---

## [Code organization](https://discourse.processing.org/t/code-organization/10643)

<div class="topic-metadata">

**Author:** [@jarlook](https://discourse.processing.org/u/jarlook)\
**Replies:** 11\
**Last updated:** [April 26, 2019, 4:30am UTC](https://discourse.processing.org/t/code-organization/10643 "2019-04-26T04:30:46Z")

</div>

I am about to convert a lengthy Processing sketch to p5.js. Currently the code is defined in several files (a common driver, some objects/classes, etc) and I’d like to keep them separate. This was doable with the Proce…

---

## [SVG morphing animation](https://discourse.processing.org/t/svg-morphing-animation/10482)

<div class="topic-metadata">

**Author:** [@weedboy](https://discourse.processing.org/u/weedboy)\
**Replies:** 7\
**Last updated:** [April 25, 2019, 10:20pm UTC](https://discourse.processing.org/t/svg-morphing-animation/10482 "2019-04-25T22:20:47Z")

</div>

Hello Processing Forum, I’m a beginner and this is my first post. How i can morphing svg with p5.js or Processing? I have two svg files from illustrator, and i want create animation morphing one svg into another.

---

## [Can I have multiple independent random number generators with different seeds?](https://discourse.processing.org/t/can-i-have-multiple-independent-random-number-generators-with-different-seeds/10125)

<div class="topic-metadata">

**Author:** [@neel](https://discourse.processing.org/u/neel)\
**Replies:** 10\
**Last updated:** [April 25, 2019, 8:44pm UTC](https://discourse.processing.org/t/can-i-have-multiple-independent-random-number-generators-with-different-seeds/10125 "2019-04-25T20:44:49Z")

</div>

I’m hoping to use multiple random number generators so that I can have different random processes that don’t interfere with each other and can be seeded for some amount of consistency. Is this possible with p5.js?

---

## [Converting code from processing to p5.js (bouncing balls)](https://discourse.processing.org/t/converting-code-from-processing-to-p5-js-bouncing-balls/10612)

<div class="topic-metadata">

**Author:** [@keshavv\_123](https://discourse.processing.org/u/keshavv_123)\
**Replies:** 11\
**Last updated:** [April 25, 2019, 7:43am UTC](https://discourse.processing.org/t/converting-code-from-processing-to-p5-js-bouncing-balls/10612 "2019-04-25T07:43:22Z")

</div>

I changed a example from processing to p5.js but some part of it did’nt change from me. I’m need your help to convert them. This is the part of the code that I want to convert them in to p5.js. for (let i = balls.le…

---

## [How to control 3D using 2D input elements?](https://discourse.processing.org/t/how-to-control-3d-using-2d-input-elements/10573)

<div class="topic-metadata">

**Author:** [@Oliver](https://discourse.processing.org/u/Oliver)\
**Replies:** 1\
**Last updated:** [April 23, 2019, 6:17pm UTC](https://discourse.processing.org/t/how-to-control-3d-using-2d-input-elements/10573 "2019-04-23T18:17:27Z")

</div>

Hello all! I’m writing a program for visualising data in 3D (using WEBGL) and I would like to control some parameters in the scene with 2D elements like sliders, buttons and text fields. Is there any way one can combine …

---

## [How to handle the undefined](https://discourse.processing.org/t/how-to-handle-the-undefined/10552)

<div class="topic-metadata">

**Author:** [@Aesahaettr](https://discourse.processing.org/u/Aesahaettr)\
**Replies:** 3\
**Last updated:** [April 23, 2019, 5:37pm UTC](https://discourse.processing.org/t/how-to-handle-the-undefined/10552 "2019-04-23T17:37:08Z")

</div>

Hello, I have been strugling with some variables that are the type of undefined. I’ve looked on internet but I found nothing on how to determine if it’s “undefined” like this : if (typeof tmp == "undefined") { tmp =…

---

## [Trouble with z-index and body](https://discourse.processing.org/t/trouble-with-z-index-and-body/10486)

<div class="topic-metadata">

**Author:** [@Indieminor](https://discourse.processing.org/u/Indieminor)\
**Replies:** 5\
**Last updated:** [April 23, 2019, 1:20pm UTC](https://discourse.processing.org/t/trouble-with-z-index-and-body/10486 "2019-04-23T13:20:48Z")

</div>

Hey all, I am fairly new to programming (3.5 months in) and I came across p5.js and decided to implement it into a little project of mine. My main idea is to have random circles generate on keypress or click with random…

---

## [Speech Recognition](https://discourse.processing.org/t/speech-recognition/10438)

<div class="topic-metadata">

**Author:** [@dannfelixx](https://discourse.processing.org/u/dannfelixx)\
**Replies:** 15\
**Last updated:** [April 21, 2019, 4:55pm UTC](https://discourse.processing.org/t/speech-recognition/10438 "2019-04-21T16:55:18Z")

</div>

Hello! I’m a student working on a small project for class and I’m having some troubles (I’m pretty new to p5.js). I’m using the p5.speech library to get speech recognition into my project; basically what I want to do is…

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

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