# p5.js

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

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

**Page:** 94

---

## [Local server sublime browser sync broken?](https://discourse.processing.org/t/local-server-sublime-browser-sync-broken/11209)

<div class="topic-metadata">

**Author:** [@ursula](https://discourse.processing.org/u/ursula)\
**Replies:** 1\
**Last updated:** [May 17, 2019, 6:46pm UTC](https://discourse.processing.org/t/local-server-sublime-browser-sync-broken/11209 "2019-05-17T18:46:13Z")

</div>

I am experimenting with the various ways to build a local server. I tried the "Setting up Browser Sync for Sublime) but the final step does not happen. Help?

---

## [Travelling trees](https://discourse.processing.org/t/travelling-trees/11226)

<div class="topic-metadata">

**Author:** [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Replies:** 1\
**Last updated:** [May 16, 2019, 3:01pm UTC](https://discourse.processing.org/t/travelling-trees/11226 "2019-05-16T15:01:02Z")

</div>

Hi all, https://editor.p5js.org/paulgoux/sketches/NyWLGYBof I have made a program, which generates mazes, and I’m stuck when trying to count the steps from node to node. To be clear, I can generate the nodes, but I can…

---

## [Rotating entire space before animation](https://discourse.processing.org/t/rotating-entire-space-before-animation/11174)

<div class="topic-metadata">

**Author:** [@Avatrin](https://discourse.processing.org/u/Avatrin)\
**Replies:** 12\
**Last updated:** [May 16, 2019, 9:04am UTC](https://discourse.processing.org/t/rotating-entire-space-before-animation/11174 "2019-05-16T09:04:57Z")

</div>

Hi Look at the three dimensional animation here: https://p5js.org/reference/#/p5/applyMatrix Lets say I want it to rotate the opposite direction. However, instead of just changing the signs of the existing matrix, I w…

---

## [How to take control and/or remove the cursor?](https://discourse.processing.org/t/how-to-take-control-and-or-remove-the-cursor/11258)

<div class="topic-metadata">

**Author:** [@2000mater](https://discourse.processing.org/u/2000mater)\
**Replies:** 3\
**Last updated:** [May 16, 2019, 8:15am UTC](https://discourse.processing.org/t/how-to-take-control-and-or-remove-the-cursor/11258 "2019-05-16T08:15:11Z")

</div>

Is there a way to ‘listen to’ where the mouse wanted to move even if there is no place for it? Basically telling the program the same data the touchpad or mouse would give the device. I’ve seen cases where the page aske…

---

## [\[SOLVED\] Adding createButton() causes an error](https://discourse.processing.org/t/solved-adding-createbutton-causes-an-error/11296)

<div class="topic-metadata">

**Author:** [@akathewb](https://discourse.processing.org/u/akathewb)\
**Replies:** 1\
**Last updated:** [May 16, 2019, 5:37am UTC](https://discourse.processing.org/t/solved-adding-createbutton-causes-an-error/11296 "2019-05-16T05:37:41Z")

</div>

Error: Uncaught ReferenceError: createButton is not defined Things I’ve tried to fix: I tried replacing the script tag to the CDN version of p5 8.0 thinking maybe I was not using the latest code base, but this did no…

---

## [Converting from java to p5js, not working as intended](https://discourse.processing.org/t/converting-from-java-to-p5js-not-working-as-intended/11179)

<div class="topic-metadata">

**Author:** [@dakito](https://discourse.processing.org/u/dakito)\
**Replies:** 9\
**Last updated:** [May 15, 2019, 8:52pm UTC](https://discourse.processing.org/t/converting-from-java-to-p5js-not-working-as-intended/11179 "2019-05-15T20:52:35Z")

</div>

Just like the title says, I have absolutely no idea on what I am supposed to change. I fixed all error messages, replaced variable statements, changed the functions that I know I need to change. I am mostly a newbie to p…

---

## [Animating masks P5.js](https://discourse.processing.org/t/animating-masks-p5-js/11271)

<div class="topic-metadata">

**Author:** [@Hobie](https://discourse.processing.org/u/Hobie)\
**Replies:** 2\
**Last updated:** [May 15, 2019, 3:39pm UTC](https://discourse.processing.org/t/animating-masks-p5-js/11271 "2019-05-15T15:39:40Z")

</div>

Hello, For my thesis i’m researching generative design for online advertisements. I have been working with P5 to generate background visuals for SEAT. (this is a fictional case). I want to animate masks to display cert…

---

## [P5js Music Loop Crash](https://discourse.processing.org/t/p5js-music-loop-crash/11250)

<div class="topic-metadata">

**Author:** [@mcldad1901](https://discourse.processing.org/u/mcldad1901)\
**Replies:** 3\
**Last updated:** [May 15, 2019, 12:30pm UTC](https://discourse.processing.org/t/p5js-music-loop-crash/11250 "2019-05-15T12:30:43Z")

</div>

So, I have just start JS this year for my uni course (diploma), we have been tasked to build a simple game that includes arrays, images, sound, objects, etc. That is why the code may be all over the place, as we must inc…

---

## [\[resolved\] Bootstrap and p5 invisble canvas in jumbotron](https://discourse.processing.org/t/resolved-bootstrap-and-p5-invisble-canvas-in-jumbotron/11256)

<div class="topic-metadata">

**Author:** [@Valoute\_GS](https://discourse.processing.org/u/Valoute_GS)\
**Replies:** 2\
**Last updated:** [May 15, 2019, 9:47am UTC](https://discourse.processing.org/t/resolved-bootstrap-and-p5-invisble-canvas-in-jumbotron/11256 "2019-05-15T09:47:34Z")

</div>

Hello, I’ve got a small problem, I was trying the bootstrap and p5 exemple here and it works great, but not when I try it localy. I’ve make some modification (path to the sketch) and simplify but the code but nothing wo…

---

## [Tip: Do NOT addEventListener to draw()](https://discourse.processing.org/t/tip-do-not-addeventlistener-to-draw/8462)

<div class="topic-metadata">

**Author:** [@2000mater](https://discourse.processing.org/u/2000mater)\
**Replies:** 2\
**Last updated:** [May 15, 2019, 9:31am UTC](https://discourse.processing.org/t/tip-do-not-addeventlistener-to-draw/8462 "2019-05-15T09:31:41Z")

</div>

I don’t know if I have permission to leave tips but as a beginner I made the mistake of assuming an event listener works like keyIsDown(). As it turns out it doesn’t. I struggled so much with my framerate before finally …

---

## [P5js save() to input field?](https://discourse.processing.org/t/p5js-save-to-input-field/11243)

<div class="topic-metadata">

**Author:** [@Gollink](https://discourse.processing.org/u/Gollink)\
**Replies:** 6\
**Last updated:** [May 15, 2019, 6:29am UTC](https://discourse.processing.org/t/p5js-save-to-input-field/11243 "2019-05-15T06:29:05Z")

</div>

I’m experimenting and learning about p5js for a new project I’m about to start. I got quite some processing experience but very little p5js experience. What I’m trying to do is make a SVG with p5.svg.js and trying to edi…

---

## [Uploading a p5.js sketch to OpenProcessing](https://discourse.processing.org/t/uploading-a-p5-js-sketch-to-openprocessing/11200)

<div class="topic-metadata">

**Author:** [@quark](https://discourse.processing.org/u/quark)\
**Replies:** 6\
**Last updated:** [May 14, 2019, 9:32pm UTC](https://discourse.processing.org/t/uploading-a-p5-js-sketch-to-openprocessing/11200 "2019-05-14T21:32:13Z")

</div>

I am trying to change some of my old Java Applet sketches to p5.js and upload them to OpenProcessing with their new UI. Unfortunately I am unable to find any information on how to upload my sketch created in Processing …

---

## [P5js Question: "Locking" the value of mouseX for event completion](https://discourse.processing.org/t/p5js-question-locking-the-value-of-mousex-for-event-completion/11112)

<div class="topic-metadata">

**Author:** [@cryptacritic](https://discourse.processing.org/u/cryptacritic)\
**Replies:** 10\
**Last updated:** [May 12, 2019, 10:47am UTC](https://discourse.processing.org/t/p5js-question-locking-the-value-of-mousex-for-event-completion/11112 "2019-05-12T10:47:39Z")

</div>

How can i store a value of X so that if some condition is met, it is equal to mouseX at the start of an event (like Keypressed)? I don’t want this value to change as i move the mouse, i want it to stay the same after the…

---

## [Access to normal](https://discourse.processing.org/t/access-to-normal/11221)

<div class="topic-metadata">

**Author:** [@vamoss](https://discourse.processing.org/u/vamoss)\
**Replies:** 1\
**Last updated:** [May 14, 2019, 1:14pm UTC](https://discourse.processing.org/t/access-to-normal/11221 "2019-05-14T13:14:42Z")

</div>

Hi, Anyone knows how do I get access to normals? I am trying to create a custom polygon, and it seems that the vertexNormals array is not accessible. Thanks!

---

## [Code Behaving Differently When Inside Function](https://discourse.processing.org/t/code-behaving-differently-when-inside-function/11183)

<div class="topic-metadata">

**Author:** [@PaulMaguire](https://discourse.processing.org/u/PaulMaguire)\
**Replies:** 2\
**Last updated:** [May 13, 2019, 9:20pm UTC](https://discourse.processing.org/t/code-behaving-differently-when-inside-function/11183 "2019-05-13T21:20:42Z")

</div>

I’ve been trying to create a sketch that moves a shape towards the mouse and then returns to a given starting point. This sketch does what I want with one shape but I want to have multiple shapes beginning from different…

---

## [\[SOLVED\] Porting 'Brightness.pde' to P5.js](https://discourse.processing.org/t/solved-porting-brightness-pde-to-p5-js/11155)

<div class="topic-metadata">

**Author:** [@jlsogorb](https://discourse.processing.org/u/jlsogorb)\
**Replies:** 2\
**Last updated:** [May 13, 2019, 4:04pm UTC](https://discourse.processing.org/t/solved-porting-brightness-pde-to-p5-js/11155 "2019-05-13T16:04:52Z")

</div>

Porting Brightnes.pde to P5.js Hi, I’m trying to port example of ‘Brightness’ from Processing to P5, and cannot do with success. The similar sample found in P5 reference is that (changing some things to transform it i…

---

## [Mandelbrot set coding challenge](https://discourse.processing.org/t/mandelbrot-set-coding-challenge/11162)

<div class="topic-metadata">

**Author:** [@FractalGenieGod](https://discourse.processing.org/u/FractalGenieGod)\
**Replies:** 13\
**Last updated:** [May 12, 2019, 12:04pm UTC](https://discourse.processing.org/t/mandelbrot-set-coding-challenge/11162 "2019-05-12T12:04:46Z")

</div>

Coding Challenge #21: Mandelbrot Set. Youtube. @\[14:29\] (https://www.youtube.com/watch?v=6z7GQewK-Ks&t=869s) Can someone help me please @\[14:29\] when we are going to test to see if it’s all working I keep getting this s…

---

## [Collision detection doesn't work when using translate() and rotate() - p5.collide2d](https://discourse.processing.org/t/collision-detection-doesnt-work-when-using-translate-and-rotate-p5-collide2d/11116)

<div class="topic-metadata">

**Author:** [@feelthemall](https://discourse.processing.org/u/feelthemall)\
**Replies:** 3\
**Last updated:** [May 12, 2019, 10:37am UTC](https://discourse.processing.org/t/collision-detection-doesnt-work-when-using-translate-and-rotate-p5-collide2d/11116 "2019-05-12T10:37:55Z")

</div>

So I’m using the p5.collide2d library here, but the problem is still the same when I use something like: if ((mouseX \> x) && (mouseX \< x+w) && (mouseY \> y) && (mouseY \< y+h)) {} When I use translate() and rotate() t…

---

## [IOS support for Inline Video, Touch Events, and Audio](https://discourse.processing.org/t/ios-support-for-inline-video-touch-events-and-audio/10961)

<div class="topic-metadata">

**Author:** [@jacopom](https://discourse.processing.org/u/jacopom)\
**Replies:** 4\
**Last updated:** [May 10, 2019, 4:00pm UTC](https://discourse.processing.org/t/ios-support-for-inline-video-touch-events-and-audio/10961 "2019-05-10T16:00:59Z")

</div>

Greetings, I’m posting this example of how to get these features to work: inline video, touchclicks, ( that’s right touching the screen does not currently trigger mouse click events) and audio in IOS. I just finish…

---

## [Making a Class; web editor vs local](https://discourse.processing.org/t/making-a-class-web-editor-vs-local/11014)

<div class="topic-metadata">

**Author:** [@Rolembeek](https://discourse.processing.org/u/Rolembeek)\
**Replies:** 6\
**Last updated:** [May 9, 2019, 10:38pm UTC](https://discourse.processing.org/t/making-a-class-web-editor-vs-local/11014 "2019-05-09T22:38:46Z")

</div>

As an exercise in making classes in p5.js, I used a piece of code from Dan Shiffman (2D Ray Casting …). Something strange happens : when I use the code -\> class Boundary{ constructor(x1, y1, x2, y2) { this.a =cre…

---

## [Making a Spheroid](https://discourse.processing.org/t/making-a-spheroid/11069)

<div class="topic-metadata">

**Author:** [@Avatrin](https://discourse.processing.org/u/Avatrin)\
**Replies:** 2\
**Last updated:** [May 9, 2019, 4:25pm UTC](https://discourse.processing.org/t/making-a-spheroid/11069 "2019-05-09T16:25:52Z")

</div>

Hi How can I go about creating a spheroid in Processing? I need it to be a solid color.

---

## [this.\_renderer.applyMatrix is not a function](https://discourse.processing.org/t/this-renderer-applymatrix-is-not-a-function/11067)

<div class="topic-metadata">

**Author:** [@Avatrin](https://discourse.processing.org/u/Avatrin)\
**Replies:** 1\
**Last updated:** [May 9, 2019, 2:19pm UTC](https://discourse.processing.org/t/this-renderer-applymatrix-is-not-a-function/11067 "2019-05-09T14:19:08Z")

</div>

I tried running the final code from these examples: https://p5js.org/reference/#/p5/applyMatrix Yet, the animation doesn’t work locally nor on their own editor (https://editor.p5js.org). What am I missing?

---

## [Variable font in processing](https://discourse.processing.org/t/variable-font-in-processing/11060)

<div class="topic-metadata">

**Author:** [@smekis](https://discourse.processing.org/u/smekis)\
**Replies:** 0\
**Last updated:** [May 9, 2019, 11:12am UTC](https://discourse.processing.org/t/variable-font-in-processing/11060 "2019-05-09T11:12:27Z")

</div>

I have created a variable font that I want to be able to present via processing. Is there a function where I can do this in processing? Found this forum post: Controlling CSS values with mouse in p5.js With this type o…

---

## [Flappy Bird pipe generate](https://discourse.processing.org/t/flappy-bird-pipe-generate/11059)

<div class="topic-metadata">

**Author:** [@totolepeco](https://discourse.processing.org/u/totolepeco)\
**Replies:** 1\
**Last updated:** [May 9, 2019, 10:12am UTC](https://discourse.processing.org/t/flappy-bird-pipe-generate/11059 "2019-05-09T10:12:07Z")

</div>

Hello, I’m young French student, and for my scientific secondary school diploma, I must making a little game. I have choosen so to make a Flappy Bird. I successfully to make the random pipe, but I would like to generat …

---

## [How to put data in a table after extraxting it from a JSON file on the runtime in p5.js](https://discourse.processing.org/t/how-to-put-data-in-a-table-after-extraxting-it-from-a-json-file-on-the-runtime-in-p5-js/11054)

<div class="topic-metadata">

**Author:** [@Procoder](https://discourse.processing.org/u/Procoder)\
**Replies:** 1\
**Last updated:** [May 9, 2019, 8:05am UTC](https://discourse.processing.org/t/how-to-put-data-in-a-table-after-extraxting-it-from-a-json-file-on-the-runtime-in-p5-js/11054 "2019-05-09T08:05:41Z")

</div>

If i have a DOM table element how can I insert data in it dynamically during the runtime as its extracted from a JSON file

---

## [Translating sketch from P5 to Java](https://discourse.processing.org/t/translating-sketch-from-p5-to-java/10052)

<div class="topic-metadata">

**Author:** [@PixelMx](https://discourse.processing.org/u/PixelMx)\
**Replies:** 2\
**Last updated:** [May 9, 2019, 4:32am UTC](https://discourse.processing.org/t/translating-sketch-from-p5-to-java/10052 "2019-05-09T04:32:17Z")

</div>

I was beginning to start programming with Processing (Java) but now I see most sketches created in P5. I like Java better because it allows me to export frames to png files and create animations from there. I’m not fam…

---

## [Pushing To Array adds an ID to the object?](https://discourse.processing.org/t/pushing-to-array-adds-an-id-to-the-object/11037)

<div class="topic-metadata">

**Author:** [@peachman](https://discourse.processing.org/u/peachman)\
**Replies:** 3\
**Last updated:** [May 8, 2019, 9:41pm UTC](https://discourse.processing.org/t/pushing-to-array-adds-an-id-to-the-object/11037 "2019-05-08T21:41:38Z")

</div>

HI, Confusing one here, really not sure whats happening. As you can see below, i am only creating a from entry and a to entry in the object. var edgesToLoad = \[\]; for (var j = 0; j \< dataArr.length; j++) { edge …

---

## [My code doesn't work](https://discourse.processing.org/t/my-code-doesnt-work/10891)

<div class="topic-metadata">

**Author:** [@emilyabcde](https://discourse.processing.org/u/emilyabcde)\
**Replies:** 3\
**Last updated:** [May 8, 2019, 7:27pm UTC](https://discourse.processing.org/t/my-code-doesnt-work/10891 "2019-05-08T19:27:56Z")

</div>

Hello to anyone who is reading this… I’m using p5js in my class and I’m having some trouble with a flappy bird game I’m trying to remix. Me and my teacher figured out that it was because the game was set to “rectMode(CE…

---

## [Adding array to array list](https://discourse.processing.org/t/adding-array-to-array-list/11006)

<div class="topic-metadata">

**Author:** [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Replies:** 8\
**Last updated:** [May 8, 2019, 3:52pm UTC](https://discourse.processing.org/t/adding-array-to-array-list/11006 "2019-05-08T15:52:35Z")

</div>

So Im new to processing and I’m trying to port p5 code. This is the original p5 code this.init = function(){ var theta = 360/sides; for (var i=0;i\<sides;i++){ var thetab = theta \* i; …

---

## [Assign a variable from draw function to setup function](https://discourse.processing.org/t/assign-a-variable-from-draw-function-to-setup-function/11022)

<div class="topic-metadata">

**Author:** [@l3ehfar](https://discourse.processing.org/u/l3ehfar)\
**Replies:** 2\
**Last updated:** [May 8, 2019, 8:53am UTC](https://discourse.processing.org/t/assign-a-variable-from-draw-function-to-setup-function/11022 "2019-05-08T08:53:04Z")

</div>

I just wanted to assign mouseX value to one of my parameters value in setup function. how should I assign something that needs to run continuously in setup function? morphDo(){ for (let a = startA; a \< 360; a += spa…

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

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