# Coding Questions

**URL:** https://discourse.processing.org/c/p5js/p5js-questions/18.md?page=47

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

**Page:** 48

---

## [P5.js Prim's Algorithm Maze Generation: Stuck in Infinite Loop](https://discourse.processing.org/t/p5-js-prims-algorithm-maze-generation-stuck-in-infinite-loop/8277)

<div class="topic-metadata">

**Author:** [@henrydavidzhu](https://discourse.processing.org/u/henrydavidzhu)\
**Replies:** 2\
**Last updated:** [February 15, 2019, 9:05pm UTC](https://discourse.processing.org/t/p5-js-prims-algorithm-maze-generation-stuck-in-infinite-loop/8277 "2019-02-15T21:05:59Z")

</div>

Note: Posted this question on StackOverflow and received answers there: https://stackoverflow.com/questions/54613229/p5-js-prims-algorithm-maze-generation-stuck-in-infinite-loop/54621408#54621408 I’m trying on implement…

---

## [P5js video error: Element play method raised an error asynchronously DOMException](https://discourse.processing.org/t/p5js-video-error-element-play-method-raised-an-error-asynchronously-domexception/8358)

<div class="topic-metadata">

**Author:** [@AndreasRef](https://discourse.processing.org/u/AndreasRef)\
**Replies:** 3\
**Last updated:** [February 15, 2019, 9:49am UTC](https://discourse.processing.org/t/p5js-video-error-element-play-method-raised-an-error-asynchronously-domexception/8358 "2019-02-15T09:49:30Z")

</div>

I have a question about an error I get when I want to have a video play in my p5js sketch: WARN: Element play method raised an error asynchronously DOMException If I press the canvas first with my mouse, the error does…

---

## [P5 simple game Question](https://discourse.processing.org/t/p5-simple-game-question/8415)

<div class="topic-metadata">

**Author:** [@helpmeimnew](https://discourse.processing.org/u/helpmeimnew)\
**Replies:** 6\
**Last updated:** [February 15, 2019, 8:06am UTC](https://discourse.processing.org/t/p5-simple-game-question/8415 "2019-02-15T08:06:51Z")

</div>

I am learning how to animate sprites and one video really helped. But now i am anxious to know how to use the mouse clicked function (i think) to stop the said animation clicked. While also having the animation change i…

---

## [Help with speeding up a fractal calculation](https://discourse.processing.org/t/help-with-speeding-up-a-fractal-calculation/8232)

<div class="topic-metadata">

**Author:** [@Dan](https://discourse.processing.org/u/Dan)\
**Replies:** 7\
**Last updated:** [February 13, 2019, 9:10pm UTC](https://discourse.processing.org/t/help-with-speeding-up-a-fractal-calculation/8232 "2019-02-13T21:10:27Z")

</div>

Hi everyone, I’ve used p5.js to render a fractal image by running Newton’s method on each pixel in a 600 by 600 grid. This works well enough for rendering the image once, and my result looks like this: But, this ima…

---

## [Why text label upon mouseover doesn't work in this p5 code?](https://discourse.processing.org/t/why-text-label-upon-mouseover-doesnt-work-in-this-p5-code/8339)

<div class="topic-metadata">

**Author:** [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Replies:** 1\
**Last updated:** [February 13, 2019, 3:04am UTC](https://discourse.processing.org/t/why-text-label-upon-mouseover-doesnt-work-in-this-p5-code/8339 "2019-02-13T03:04:52Z")

</div>

I have a code drawing ellipses based on input data, and there is supposed to be text label on the ellipses upon mouse rollover, but so far that doesn’t work. If I remove if (this.over) condition, the label shows. If…

---

## [Clicked() function? \[Resolved\]](https://discourse.processing.org/t/clicked-function-resolved/8179)

<div class="topic-metadata">

**Author:** [@laurenstrader](https://discourse.processing.org/u/laurenstrader)\
**Replies:** 2\
**Last updated:** [February 12, 2019, 5:33am UTC](https://discourse.processing.org/t/clicked-function-resolved/8179 "2019-02-12T05:33:59Z")

</div>

Hello, I am following the Coding Train 7.4 tutorial, if anyone has seen this, and I am unable to allow the program to recognize when I click inside the circles. In the video, the functions are formatted like this: funct…

---

## [Detect when a button is being pressed down](https://discourse.processing.org/t/detect-when-a-button-is-being-pressed-down/8289)

<div class="topic-metadata">

**Author:** [@AndreasRef](https://discourse.processing.org/u/AndreasRef)\
**Replies:** 5\
**Last updated:** [February 11, 2019, 4:08pm UTC](https://discourse.processing.org/t/detect-when-a-button-is-being-pressed-down/8289 "2019-02-11T16:08:29Z")

</div>

Hey, a simple question: if I have an html button, how can I detect when the button is being pressed. I am not interested in doing something when the button is clicked, but instead in doing something for the entire time t…

---

## [Changing CENTER point of a vertex Shape for rotation](https://discourse.processing.org/t/changing-center-point-of-a-vertex-shape-for-rotation/8239)

<div class="topic-metadata">

**Author:** [@hellonearthis](https://discourse.processing.org/u/hellonearthis)\
**Replies:** 2\
**Last updated:** [February 9, 2019, 10:12am UTC](https://discourse.processing.org/t/changing-center-point-of-a-vertex-shape-for-rotation/8239 "2019-02-09T10:12:57Z")

</div>

In this sketch, I’m trying to changing CENTER point of a vertex Shape so I can easily do rotation on it. In processing there is shapeMode but P5 doesn’t currently have that. (well post a feature request soonish). I had…

---

## [P5 Questions! How to change direction of object](https://discourse.processing.org/t/p5-questions-how-to-change-direction-of-object/8209)

<div class="topic-metadata">

**Author:** [@ixd](https://discourse.processing.org/u/ixd)\
**Replies:** 1\
**Last updated:** [February 8, 2019, 10:20am UTC](https://discourse.processing.org/t/p5-questions-how-to-change-direction-of-object/8209 "2019-02-08T10:20:51Z")

</div>

Hi, I’m new to javascript and am having a hard time figuring out how to move the balls up and down instead of left to right. Thanks function setup() { createCanvas(600, 200); } var ball = 0; var ballSpeed = 10; var…

---

## [Errors with Weather API](https://discourse.processing.org/t/errors-with-weather-api/8180)

<div class="topic-metadata">

**Author:** [@jadenfigger](https://discourse.processing.org/u/jadenfigger)\
**Replies:** 3\
**Last updated:** [February 7, 2019, 5:59am UTC](https://discourse.processing.org/t/errors-with-weather-api/8180 "2019-02-07T05:59:45Z")

</div>

Im trying to draw a circle based on data from a weather api and when i try to draw the circle i keep getting an error. I don’t know how to fix the mistake so here is the code. If you know how to fix it could you please l…

---

## [Is it possible to draw a class that draws sub-classes within itself? For example, a 4x4 block made up of 1x1 blocks](https://discourse.processing.org/t/is-it-possible-to-draw-a-class-that-draws-sub-classes-within-itself-for-example-a-4x4-block-made-up-of-1x1-blocks/8169)

<div class="topic-metadata">

**Author:** [@domedisorder](https://discourse.processing.org/u/domedisorder)\
**Replies:** 1\
**Last updated:** [February 7, 2019, 3:23am UTC](https://discourse.processing.org/t/is-it-possible-to-draw-a-class-that-draws-sub-classes-within-itself-for-example-a-4x4-block-made-up-of-1x1-blocks/8169 "2019-02-07T03:23:57Z")

</div>

I’m attempting to make a Tetris-like game, where the game’s pieces are all made up of smaller pieces that share properties. Currently I have: export class SquareTetromino { \[x: string\]: any; constructor…

---

## [Little Problem with the random function](https://discourse.processing.org/t/little-problem-with-the-random-function/8155)

<div class="topic-metadata">

**Author:** [@Voltflo](https://discourse.processing.org/u/Voltflo)\
**Replies:** 2\
**Last updated:** [February 6, 2019, 3:09pm UTC](https://discourse.processing.org/t/little-problem-with-the-random-function/8155 "2019-02-06T15:09:47Z")

</div>

So for the Start I just wanted to programme a little game. So in the game you have to catch balls with a bucket. So I just wanted to randomize were the balls are dropping but instead of choosing 1 location he chooses 100…

---

## [How do you add up 2 numbers from a duplicate JSON key?](https://discourse.processing.org/t/how-do-you-add-up-2-numbers-from-a-duplicate-json-key/7948)

<div class="topic-metadata">

**Author:** [@anon98404100](https://discourse.processing.org/u/anon98404100)\
**Replies:** 3\
**Last updated:** [February 5, 2019, 8:45am UTC](https://discourse.processing.org/t/how-do-you-add-up-2-numbers-from-a-duplicate-json-key/7948 "2019-02-05T08:45:16Z")

</div>

I have to display data from the JSON file we got. There are a few entries that have a duplicate object. You can see it here : 2 categories called “fruit” which each have a different number. However, The way my code c…

---

## [How to "attach" a box to another box](https://discourse.processing.org/t/how-to-attach-a-box-to-another-box/8053)

<div class="topic-metadata">

**Author:** [@Quilliam](https://discourse.processing.org/u/Quilliam)\
**Replies:** 3\
**Last updated:** [February 6, 2019, 12:23am UTC](https://discourse.processing.org/t/how-to-attach-a-box-to-another-box/8053 "2019-02-06T00:23:46Z")

</div>

The best example I can think of for what I mean is coding something similar to a ferris wheel. Say we have: function draw() { background(20); push(); rotateZ(frameCount \* 0.01); fill(255, 0, 0); box(300, 5, 5…

---

## [How To Make Stem Bloom Into A Leaf?](https://discourse.processing.org/t/how-to-make-stem-bloom-into-a-leaf/7950)

<div class="topic-metadata">

**Author:** [@lgdelacruz](https://discourse.processing.org/u/lgdelacruz)\
**Replies:** 2\
**Last updated:** [February 4, 2019, 9:47pm UTC](https://discourse.processing.org/t/how-to-make-stem-bloom-into-a-leaf/7950 "2019-02-04T21:47:44Z")

</div>

I’m trying to bloom this stem: A stem is basically an elongated rectangle. Into this leaf: I’m trying to animate the blooming of this stem into this leaf. However, I struggle to make it look organic. How can I achiev…

---

## [How to made an object appear after a delay in p5.js](https://discourse.processing.org/t/how-to-made-an-object-appear-after-a-delay-in-p5-js/8074)

<div class="topic-metadata">

**Author:** [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Replies:** 1\
**Last updated:** [February 4, 2019, 4:10am UTC](https://discourse.processing.org/t/how-to-made-an-object-appear-after-a-delay-in-p5-js/8074 "2019-02-04T04:10:28Z")

</div>

I intend to draw dilating circles. First a small circle appears on the center of the screen then radius increases and the circle enlarges, 2 seconds later another circle appears and also enlarges. At the same time there …

---

## [Help with splitting cell](https://discourse.processing.org/t/help-with-splitting-cell/7726)

<div class="topic-metadata">

**Author:** [@nielsKoel](https://discourse.processing.org/u/nielsKoel)\
**Replies:** 3\
**Last updated:** [February 3, 2019, 6:01pm UTC](https://discourse.processing.org/t/help-with-splitting-cell/7726 "2019-02-03T18:01:33Z")

</div>

Hi everyone! I’ve been stuck for a while on this sketch and hope to get some help. What I’m trying to achieve is to create a grid cells (I’ll start my sketch with 4 cells). If clicked, each cell will split into 4 new ce…

---

## [Resizing p5.Graphics](https://discourse.processing.org/t/resizing-p5-graphics/8068)

<div class="topic-metadata">

**Author:** [@marksan](https://discourse.processing.org/u/marksan)\
**Replies:** 9\
**Last updated:** [February 3, 2019, 2:41pm UTC](https://discourse.processing.org/t/resizing-p5-graphics/8068 "2019-02-03T14:41:41Z")

</div>

Hi all , I have a use case in which I draw few small dots ( graphics.ellipse(…) ) on p5.graphics ( for efficiency purpose ) . now on resizing the window I want to resize the graphics along with it’s content ( those smal…

---

## [Drawing a rect on an p5.graphics doesnt seem to update the pixels](https://discourse.processing.org/t/drawing-a-rect-on-an-p5-graphics-doesnt-seem-to-update-the-pixels/8033)

<div class="topic-metadata">

**Author:** [@mat](https://discourse.processing.org/u/mat)\
**Replies:** 3\
**Last updated:** [February 2, 2019, 11:43am UTC](https://discourse.processing.org/t/drawing-a-rect-on-an-p5-graphics-doesnt-seem-to-update-the-pixels/8033 "2019-02-02T11:43:27Z")

</div>

the following code should change the color of the circles when you draw with your mouse, but the pixels array doesnt change at all, while the p5 graphic changes on the image(g,0,0) let g; function setup() { createC…

---

## [Help needed to create irregular circles](https://discourse.processing.org/t/help-needed-to-create-irregular-circles/7897)

<div class="topic-metadata">

**Author:** [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Replies:** 5\
**Last updated:** [January 31, 2019, 8:39pm UTC](https://discourse.processing.org/t/help-needed-to-create-irregular-circles/7897 "2019-01-31T20:39:09Z")

</div>

I intend to create irregular circles like this but unsure how to get smooth noisy lines in circular manner. function setup() { createCanvas(600, 600); background(255); angleMode(DEGREES); } function draw() { …

---

## [Masking an Image](https://discourse.processing.org/t/masking-an-image/7952)

<div class="topic-metadata">

**Author:** [@analog](https://discourse.processing.org/u/analog)\
**Replies:** 3\
**Last updated:** [January 30, 2019, 11:46pm UTC](https://discourse.processing.org/t/masking-an-image/7952 "2019-01-30T23:46:25Z")

</div>

I’m just trying to create a simple graphic and then mask off part of it. This works if I replace the createdGraphic with just an image, but for some reason, when using createGraphic and then saving off an image, it will…

---

## [While (mouseIsPressed) infinite loop nasty](https://discourse.processing.org/t/while-mouseispressed-infinite-loop-nasty/7962)

<div class="topic-metadata">

**Author:** [@hellonearthis](https://discourse.processing.org/u/hellonearthis)\
**Replies:** 2\
**Last updated:** [January 30, 2019, 6:06pm UTC](https://discourse.processing.org/t/while-mouseispressed-infinite-loop-nasty/7962 "2019-01-30T18:06:12Z")

</div>

I was trying to use a while statement in the draw loop. I was thinking it would stop the draw loop until the mouse was released, but it just goes into an infinite loop. let redoLines = true function draw() { while …

---

## [Php & p5.js problem](https://discourse.processing.org/t/php-p5-js-problem/7947)

<div class="topic-metadata">

**Author:** [@bossman](https://discourse.processing.org/u/bossman)\
**Replies:** 1\
**Last updated:** [January 29, 2019, 9:27pm UTC](https://discourse.processing.org/t/php-p5-js-problem/7947 "2019-01-29T21:27:22Z")

</div>

i work on wordpress plugin and p5.js. But i don’t combine php and p5.js . My example codes is under the text.Please help me ! \<?php function information\_Collect(){ ?\> \<script type="text/javascript" src="http…

---

## [The usage of modulo: How can I correctly implement it?](https://discourse.processing.org/t/the-usage-of-modulo-how-can-i-correctly-implement-it/7494)

<div class="topic-metadata">

**Author:** [@anon98404100](https://discourse.processing.org/u/anon98404100)\
**Replies:** 5\
**Last updated:** [January 29, 2019, 6:22pm UTC](https://discourse.processing.org/t/the-usage-of-modulo-how-can-i-correctly-implement-it/7494 "2019-01-29T18:22:29Z")

</div>

In my way of learning P5.js I enountered the ‘Modulo’ function. I did some reading into it, but I fail to understand HOW I should be looking at it and using it. I have a number ‘generator’ that generates the number 1 to…

---

## [Change line() color in a nested while-loop](https://discourse.processing.org/t/change-line-color-in-a-nested-while-loop/7421)

<div class="topic-metadata">

**Author:** [@anon98404100](https://discourse.processing.org/u/anon98404100)\
**Replies:** 6\
**Last updated:** [January 28, 2019, 8:23pm UTC](https://discourse.processing.org/t/change-line-color-in-a-nested-while-loop/7421 "2019-01-28T20:23:46Z")

</div>

I am doing a small assignment that requires the following: I have to create a while-loop that draws 30 lines on-screen. Line number 7 and line number 23 should be colored red. Because I am still trying to figure things…

---

## [Adding the twirl effect to the background in p5js](https://discourse.processing.org/t/adding-the-twirl-effect-to-the-background-in-p5js/7875)

<div class="topic-metadata">

**Author:** [@Gwerbyn](https://discourse.processing.org/u/Gwerbyn)\
**Replies:** 1\
**Last updated:** [January 28, 2019, 6:55pm UTC](https://discourse.processing.org/t/adding-the-twirl-effect-to-the-background-in-p5js/7875 "2019-01-28T18:55:34Z")

</div>

Is there any way to create the twirl effect to the background in p5js?? I want to be able to do stuff like this: https://gyazo.com/7380ed923b08a07f632e4106fa0fb56e with code. If anyone knows how to do this i would really…

---

## [How to change the color of objects near mouse click location or add a new object on mouseClick in p5.js?](https://discourse.processing.org/t/how-to-change-the-color-of-objects-near-mouse-click-location-or-add-a-new-object-on-mouseclick-in-p5-js/7884)

<div class="topic-metadata">

**Author:** [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Replies:** 0\
**Last updated:** [January 27, 2019, 5:00pm UTC](https://discourse.processing.org/t/how-to-change-the-color-of-objects-near-mouse-click-location-or-add-a-new-object-on-mouseclick-in-p5-js/7884 "2019-01-27T17:00:08Z")

</div>

Hi, I have an array of ellipse object as below, and intend to change the color of ellipses near the mouse click, but the mouseIsPressed portion of code is not working. What could have gone wrong? Thanks in advance for an…

---

## [How to use Google fonts in P5JS online editor](https://discourse.processing.org/t/how-to-use-google-fonts-in-p5js-online-editor/6893)

<div class="topic-metadata">

**Author:** [@shlomyli](https://discourse.processing.org/u/shlomyli)\
**Replies:** 9\
**Last updated:** [January 26, 2019, 5:33am UTC](https://discourse.processing.org/t/how-to-use-google-fonts-in-p5js-online-editor/6893 "2019-01-26T05:33:20Z")

</div>

Hi, I have encountered this short video which explains how to manipulate the “index.html” and “style.css” in order to be load use Google fonts. Hope that helps Shlomi

---

## [Gradients on p5.js?](https://discourse.processing.org/t/gradients-on-p5-js/7555)

<div class="topic-metadata">

**Author:** [@davidjj](https://discourse.processing.org/u/davidjj)\
**Replies:** 3\
**Last updated:** [January 26, 2019, 3:58am UTC](https://discourse.processing.org/t/gradients-on-p5-js/7555 "2019-01-26T03:58:13Z")

</div>

Gradients are a pretty standard feature of HTML5 canvas: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient And using straight javascript (actually this example is typescript)…

---

## [Weird behaviour with loadPixels() and updatePixels()](https://discourse.processing.org/t/weird-behaviour-with-loadpixels-and-updatepixels/7741)

<div class="topic-metadata">

**Author:** [@Kazuya\_Yoshimisu](https://discourse.processing.org/u/Kazuya_Yoshimisu)\
**Replies:** 2\
**Last updated:** [January 22, 2019, 4:20pm UTC](https://discourse.processing.org/t/weird-behaviour-with-loadpixels-and-updatepixels/7741 "2019-01-22T16:20:03Z")

</div>

Hi everyone, I got this very short sample of code where for each pixel of my canvas I draw a shade of grey: function setup() { createCanvas(200,200) background(0) loadPixels() for(var y = 0; y \< height; y++) fo…

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

[Next page](https://discourse.processing.org/c/p5js/p5js-questions/18.md?page=48)