# p5.js

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

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

**Page:** 101

---

## [I cant open P5.Js](https://discourse.processing.org/t/i-cant-open-p5-js/8194)

<div class="topic-metadata">

**Author:** [@Voltflo](https://discourse.processing.org/u/Voltflo)\
**Replies:** 5\
**Last updated:** [February 8, 2019, 2:48pm UTC](https://discourse.processing.org/t/i-cant-open-p5-js/8194 "2019-02-08T14:48:19Z")

</div>

So I want to dowload P5.js but everytime I try to open it, it just gives me an error. (I have Windows 10) Blockquote Windows Script Host

---

## [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…

---

## [How do you use random without the numbers in between](https://discourse.processing.org/t/how-do-you-use-random-without-the-numbers-in-between/8144)

<div class="topic-metadata">

**Author:** [@Birnfeld](https://discourse.processing.org/u/Birnfeld)\
**Replies:** 3\
**Last updated:** [February 8, 2019, 5:06am UTC](https://discourse.processing.org/t/how-do-you-use-random-without-the-numbers-in-between/8144 "2019-02-08T05:06:06Z")

</div>

im doing a simple code and i want the variable to be -5 or +5 but i dont understand how you can do that without the numbers in between, for exemple sometimes i get -3,4,2,-1,2 ect…

---

## [Setting canvas and background color in setup() not working](https://discourse.processing.org/t/setting-canvas-and-background-color-in-setup-not-working/8162)

<div class="topic-metadata">

**Author:** [@Milky](https://discourse.processing.org/u/Milky)\
**Replies:** 2\
**Last updated:** [February 7, 2019, 4:48pm UTC](https://discourse.processing.org/t/setting-canvas-and-background-color-in-setup-not-working/8162 "2019-02-07T16:48:22Z")

</div>

function setup() { createCanvas(windowWidth, windowHeight); background(0, 0, 0); } this is pretty much how my setup() function starts. Everything in draw() works fine, but my canvas is never set and my background col…

---

## [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 debug p5 mic input](https://discourse.processing.org/t/how-to-debug-p5-mic-input/8082)

<div class="topic-metadata">

**Author:** [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Replies:** 4\
**Last updated:** [February 5, 2019, 4:36pm UTC](https://discourse.processing.org/t/how-to-debug-p5-mic-input/8082 "2019-02-05T16:36:52Z")

</div>

I’m using the sample code on p5 website for mic input, but the screen doesn’t change on sound input - the circle doesn’t change height. I have p5.sound.js in the library folder, and another song input sample works, so th…

---

## [p5.AudioIn using more than one audio channel](https://discourse.processing.org/t/p5-audioin-using-more-than-one-audio-channel/8020)

<div class="topic-metadata">

**Author:** [@specpro](https://discourse.processing.org/u/specpro)\
**Replies:** 0\
**Last updated:** [February 1, 2019, 10:18am UTC](https://discourse.processing.org/t/p5-audioin-using-more-than-one-audio-channel/8020 "2019-02-01T10:18:51Z")

</div>

My sound card has more than one channel audio source. Is it possible to access the other audio channels? Seems that the “setSource” function always defaults to channel 1 and 2 of the sound card. Anyway to set to chann…

---

## [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…

---

## [Angular object models](https://discourse.processing.org/t/angular-object-models/8028)

<div class="topic-metadata">

**Author:** [@domedisorder](https://discourse.processing.org/u/domedisorder)\
**Replies:** 1\
**Last updated:** [February 3, 2019, 5:54pm UTC](https://discourse.processing.org/t/angular-object-models/8028 "2019-02-03T17:54:43Z")

</div>

I’d like to create a model for the objects I’m drawing but I’m struggling with how to do that in Angular. I know p5 methods aren’t recognized outside of specific functions but that seems to be what I need to do here? I’…

---

## [How to fill with HEX color in p5.js](https://discourse.processing.org/t/how-to-fill-with-hex-color-in-p5-js/8048)

<div class="topic-metadata">

**Author:** [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Replies:** 4\
**Last updated:** [February 3, 2019, 5:31pm UTC](https://discourse.processing.org/t/how-to-fill-with-hex-color-in-p5-js/8048 "2019-02-03T17:31:56Z")

</div>

I intend to fill shape with hex color because I’ll use a GUI to allow users to pick color and dat.gui returns a hex value. The two methods I attempted is either to use red(), green(), blue() on the color or use a hex2tg…

---

## [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…

---

## [How to add/push a new object to array upon mouse click in p5.js](https://discourse.processing.org/t/how-to-add-push-a-new-object-to-array-upon-mouse-click-in-p5-js/8043)

<div class="topic-metadata">

**Author:** [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Replies:** 5\
**Last updated:** [February 2, 2019, 6:29pm UTC](https://discourse.processing.org/t/how-to-add-push-a-new-object-to-array-upon-mouse-click-in-p5-js/8043 "2019-02-02T18:29:36Z")

</div>

I have this code to add a new ball to the array but strangely it doesn’t work. let balls = \[\]; let num\_balls = 1; let w = 800; let h = 600; function setup() { createCanvas(w, h); for (let i = 0; i \< num\_balls; …

---

## [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 …

---

## [Is there any way to use specular light?](https://discourse.processing.org/t/is-there-any-way-to-use-specular-light/7855)

<div class="topic-metadata">

**Author:** [@sanketsingh24](https://discourse.processing.org/u/sanketsingh24)\
**Replies:** 2\
**Last updated:** [January 30, 2019, 12:25pm UTC](https://discourse.processing.org/t/is-there-any-way-to-use-specular-light/7855 "2019-01-30T12:25:22Z")

</div>

I can see there is ambient, directional and point light implemented and documented, but I can’t find specular light, although specular material is there.

---

## [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…

---

## [Function keyPressed problems](https://discourse.processing.org/t/function-keypressed-problems/7924)

<div class="topic-metadata">

**Author:** [@hiitisme](https://discourse.processing.org/u/hiitisme)\
**Replies:** 1\
**Last updated:** [January 29, 2019, 9:19am UTC](https://discourse.processing.org/t/function-keypressed-problems/7924 "2019-01-29T09:19:29Z")

</div>

I am trying to make controls to my game. I am very new to javascript and other programming languages. I have made the controls, but they aren’t that smooth. when you take a sharp turn you just stop. Can someone help me m…

---

## [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…

---

## [Unsupported OpenType signature \<!DO](https://discourse.processing.org/t/unsupported-opentype-signature-do/7459)

<div class="topic-metadata">

**Author:** [@Pyrros](https://discourse.processing.org/u/Pyrros)\
**Replies:** 3\
**Last updated:** [January 28, 2019, 8:10pm UTC](https://discourse.processing.org/t/unsupported-opentype-signature-do/7459 "2019-01-28T20:10:42Z")

</div>

I am working on klimablomst.tk and using Firebase as hosting, database and storage provider. I have successfully implemented the first two, but I am having some trouble with storage. I am unsure if the problem is server-…

---

## [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 do I include p5-dom when importing from npm module/instance mode?](https://discourse.processing.org/t/how-do-i-include-p5-dom-when-importing-from-npm-module-instance-mode/7893)

<div class="topic-metadata">

**Author:** [@davidjj](https://discourse.processing.org/u/davidjj)\
**Replies:** 1\
**Last updated:** [January 28, 2019, 5:26am UTC](https://discourse.processing.org/t/how-do-i-include-p5-dom-when-importing-from-npm-module-instance-mode/7893 "2019-01-28T05:26:46Z")

</div>

The instructions for including p5 libraries just says to include them in the head file. However, I’m using it instance mode, for use with react, like: componentDidMount() { import("p5").then((p5) =\> { …

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

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