# p5.js

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

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

**Page:** 13

---

## [SDF outline - draw](https://discourse.processing.org/t/sdf-outline-draw/42130)

<div class="topic-metadata">

**Author:** [@v360](https://discourse.processing.org/u/v360)\
**Replies:** 2\
**Last updated:** [June 3, 2023, 4:08am UTC](https://discourse.processing.org/t/sdf-outline-draw/42130 "2023-06-03T04:08:42Z")

</div>

Hello Folks! I was studying SDF from some resources like this: youtube.com/watch?v=KRB57wyo8\_4 openprocessing.org/sketch/1898567 What I want is to try to understand a little more how SDFs work. What I want to do it to…

---

## [Why I get \`undefined\` when I console.log \`image(img, x, y)\` but get a p5 object when i console.log \`text(text, x, y)\`?](https://discourse.processing.org/t/why-i-get-undefined-when-i-console-log-image-img-x-y-but-get-a-p5-object-when-i-console-log-text-text-x-y/42073)

<div class="topic-metadata">

**Author:** [@WaningJupiter](https://discourse.processing.org/u/WaningJupiter)\
**Replies:** 3\
**Last updated:** [May 26, 2023, 1:25pm UTC](https://discourse.processing.org/t/why-i-get-undefined-when-i-console-log-image-img-x-y-but-get-a-p5-object-when-i-console-log-text-text-x-y/42073 "2023-05-26T13:25:35Z")

</div>

Hello community, my question is described in the title let img; function preload(){ img = loadImage('https://placehold.co/600x400'); } function setup() { createCanvas(600, 400); background(220); let word = t…

---

## [P5.js Simple Timeline](https://discourse.processing.org/t/p5-js-simple-timeline/23212)

<div class="topic-metadata">

**Author:** [@Felipe](https://discourse.processing.org/u/Felipe)\
**Replies:** 1\
**Last updated:** [May 25, 2023, 2:41am UTC](https://discourse.processing.org/t/p5-js-simple-timeline/23212 "2023-05-25T02:41:06Z")

</div>

Hello Guys, I’m trying to develop an application using p5 and i need a timeline similar to the timeline of the adobe premiere/ video editing software, but more basic in many (one track for video and another for keyframe…

---

## [How to keep audio running when screen is locked](https://discourse.processing.org/t/how-to-keep-audio-running-when-screen-is-locked/42051)

<div class="topic-metadata">

**Author:** [@mahatGma](https://discourse.processing.org/u/mahatGma)\
**Replies:** 1\
**Last updated:** [May 24, 2023, 2:35am UTC](https://discourse.processing.org/t/how-to-keep-audio-running-when-screen-is-locked/42051 "2023-05-24T02:35:10Z")

</div>

when the p5.js project runs on a mobile device and the screen dims, audio stops. how can we solve this problem? Is the answer using WakeLock and keep the screen awake? Or is there any other workaround to keep audio run…

---

## [Linking classes between files outside of p5js web editor](https://discourse.processing.org/t/linking-classes-between-files-outside-of-p5js-web-editor/42048)

<div class="topic-metadata">

**Author:** [@hifilo](https://discourse.processing.org/u/hifilo)\
**Replies:** 4\
**Last updated:** [May 22, 2023, 6:21pm UTC](https://discourse.processing.org/t/linking-classes-between-files-outside-of-p5js-web-editor/42048 "2023-05-22T18:21:57Z")

</div>

Hello, in the p5js web editor I noticed you can separate classes with files, by linking the class.js inside index.html. Is this specific to the p5js web editor or can I link classes the same way in another IDE?

---

## [Introducing the p5.cljs web editor!](https://discourse.processing.org/t/introducing-the-p5-cljs-web-editor/42040)

<div class="topic-metadata">

**Author:** [@samtsao](https://discourse.processing.org/u/samtsao)\
**Replies:** 2\
**Last updated:** [May 22, 2023, 7:12am UTC](https://discourse.processing.org/t/introducing-the-p5-cljs-web-editor/42040 "2023-05-22T07:12:07Z")

</div>

Hi everyone! I’m not sure if this belongs to the gallery topic or here, but since it’s more related to p5js, I’m posting it here. In the past few days, inspired by the wonderful p5 web editor and my experience with Cloj…

---

## [How do I make this image using loops but the circle does not have to be included](https://discourse.processing.org/t/how-do-i-make-this-image-using-loops-but-the-circle-does-not-have-to-be-included/41980)

<div class="topic-metadata">

**Author:** [@Computerscience](https://discourse.processing.org/u/Computerscience)\
**Replies:** 2\
**Last updated:** [May 12, 2023, 11:53pm UTC](https://discourse.processing.org/t/how-do-i-make-this-image-using-loops-but-the-circle-does-not-have-to-be-included/41980 "2023-05-12T23:53:33Z")

</div>

function setup() { createCanvas(400, 400); } function draw() { background(220); ellipse(200,200,50,50) for (let count = 25; count \< 10; count++) { line(50,200,200,20) } } image needed to make:

---

## [How do I make it so that the rollover also exists for the right circle and not just the left circle](https://discourse.processing.org/t/how-do-i-make-it-so-that-the-rollover-also-exists-for-the-right-circle-and-not-just-the-left-circle/41954)

<div class="topic-metadata">

**Author:** [@Computerscience](https://discourse.processing.org/u/Computerscience)\
**Replies:** 1\
**Last updated:** [May 9, 2023, 5:38pm UTC](https://discourse.processing.org/t/how-do-i-make-it-so-that-the-rollover-also-exists-for-the-right-circle-and-not-just-the-left-circle/41954 "2023-05-09T17:38:07Z")

</div>

var x = 150; var y = 200; var d = 200; var e= 250; function setup() { createCanvas(400, 400); } function draw() { background(255,0,0) if (dist(mouseX, mouseY, x, y) \< d/2) { background(0,255,0); } else { …

---

## [Move around the perimeter of a rectangle (using maths)](https://discourse.processing.org/t/move-around-the-perimeter-of-a-rectangle-using-maths/41905)

<div class="topic-metadata">

**Author:** [@vjjv](https://discourse.processing.org/u/vjjv)\
**Replies:** 1\
**Last updated:** [May 4, 2023, 5:37am UTC](https://discourse.processing.org/t/move-around-the-perimeter-of-a-rectangle-using-maths/41905 "2023-05-04T05:37:33Z")

</div>

Hello, im here, learning maths, or trying… so, i want to move around the perimeter of a rectangle using trigonometrics function like sin or cos, it is possible? In the example i using the regular if else stament. I know…

---

## [Homework help with loops](https://discourse.processing.org/t/homework-help-with-loops/41903)

<div class="topic-metadata">

**Author:** [@Computerscience](https://discourse.processing.org/u/Computerscience)\
**Replies:** 6\
**Last updated:** [May 3, 2023, 7:13pm UTC](https://discourse.processing.org/t/homework-help-with-loops/41903 "2023-05-03T19:13:56Z")

</div>

Question: Draw a character that would fit within a 40×40 pixel box. Once you have this working, use for loops to “tile” the image 100 times on a 400×400 pixel canvas. Hint: can you do this using only 2 for loops? proble…

---

## [Most efficient way of incrementing the entire sketches pixels saturation values?](https://discourse.processing.org/t/most-efficient-way-of-incrementing-the-entire-sketches-pixels-saturation-values/41886)

<div class="topic-metadata">

**Author:** [@jgl](https://discourse.processing.org/u/jgl)\
**Replies:** 4\
**Last updated:** [May 3, 2023, 2:41pm UTC](https://discourse.processing.org/t/most-efficient-way-of-incrementing-the-entire-sketches-pixels-saturation-values/41886 "2023-05-03T14:41:11Z")

</div>

Hi All, I’m currently trying to develop a sketch where you can rub out a colour from the screen, but it keeps fading back from black to the colour. You can see an index of experiments here: Sketches here The sketch i…

---

## [Drag and drop images to canvas p5.js in classification program](https://discourse.processing.org/t/drag-and-drop-images-to-canvas-p5-js-in-classification-program/41795)

<div class="topic-metadata">

**Author:** [@Lillbre](https://discourse.processing.org/u/Lillbre)\
**Replies:** 1\
**Last updated:** [May 2, 2023, 4:30pm UTC](https://discourse.processing.org/t/drag-and-drop-images-to-canvas-p5-js-in-classification-program/41795 "2023-05-02T16:30:49Z")

</div>

I made a \[program\] (p5.js Web Editor) where I used Image classification using MobileNet and p5.js in p5,js editor. Sometimes I have to drop my images twice for them to show up on the canvas. The classification works dir…

---

## [Need help with applying proportional stroke to randomly sized text](https://discourse.processing.org/t/need-help-with-applying-proportional-stroke-to-randomly-sized-text/41497)

<div class="topic-metadata">

**Author:** [@optimystery](https://discourse.processing.org/u/optimystery)\
**Replies:** 4\
**Last updated:** [May 2, 2023, 10:41am UTC](https://discourse.processing.org/t/need-help-with-applying-proportional-stroke-to-randomly-sized-text/41497 "2023-05-02T10:41:21Z")

</div>

I have a sketch at: testing outline width - OpenProcessing A phrase is output with random size and color. Some proportion of the time, an outline is added, but rather than hardcoding a value, I want stroke to be propor…

---

## [ML5 Neural Net Image Classifier CNN bounding box input output options](https://discourse.processing.org/t/ml5-neural-net-image-classifier-cnn-bounding-box-input-output-options/41360)

<div class="topic-metadata">

**Author:** [@j3n](https://discourse.processing.org/u/j3n)\
**Replies:** 1\
**Last updated:** [May 1, 2023, 8:48pm UTC](https://discourse.processing.org/t/ml5-neural-net-image-classifier-cnn-bounding-box-input-output-options/41360 "2023-05-01T20:48:59Z")

</div>

Hello, I am currently using the ML5 Neural Net to train my own image classifier and CNN. On the reference page for this method I see the inputs are image width, height and channels. Can anymore inputs be added and/or can…

---

## [How do I make it that my object (robot) moves in random directions across the screen each time I run the program?](https://discourse.processing.org/t/how-do-i-make-it-that-my-object-robot-moves-in-random-directions-across-the-screen-each-time-i-run-the-program/41812)

<div class="topic-metadata">

**Author:** [@Computerscience](https://discourse.processing.org/u/Computerscience)\
**Replies:** 2\
**Last updated:** [May 1, 2023, 4:10pm UTC](https://discourse.processing.org/t/how-do-i-make-it-that-my-object-robot-moves-in-random-directions-across-the-screen-each-time-i-run-the-program/41812 "2023-05-01T16:10:31Z")

</div>

Question: How do I make it that my object (robot) moves in random directions across the screen each time I run the program? Code: //head var x = 200; //body var e = 400; //arms var x1= 280; var y1 = 120; //legs var…

---

## [Can I use p5.js to create playable ads for Google, Facebook and Unity ads?](https://discourse.processing.org/t/can-i-use-p5-js-to-create-playable-ads-for-google-facebook-and-unity-ads/41797)

<div class="topic-metadata">

**Author:** [@salmaan25](https://discourse.processing.org/u/salmaan25)\
**Replies:** 4\
**Last updated:** [May 1, 2023, 9:33am UTC](https://discourse.processing.org/t/can-i-use-p5-js-to-create-playable-ads-for-google-facebook-and-unity-ads/41797 "2023-05-01T09:33:22Z")

</div>

I am currently working on building a 2D playable ad for a game and p5.js looks like the perfect library for my use case. In order to check whether it would work, I wrote a very simple inline code (using p5.min.js) to tes…

---

## [Why is splice() not working in the web editor?](https://discourse.processing.org/t/why-is-splice-not-working-in-the-web-editor/41870)

<div class="topic-metadata">

**Author:** [@swenzel](https://discourse.processing.org/u/swenzel)\
**Replies:** 3\
**Last updated:** [April 29, 2023, 6:06pm UTC](https://discourse.processing.org/t/why-is-splice-not-working-in-the-web-editor/41870 "2023-04-29T18:06:43Z")

</div>

I may be missing something very simple here. I am trying to use splice to add 0 onto the front of this array. However, the result of both console logs are \[0,1,2,3,4,5\]. It’s like it is retroactively adding the zero to t…

---

## [Javascript email validation](https://discourse.processing.org/t/javascript-email-validation/41861)

<div class="topic-metadata">

**Author:** [@jonathan22](https://discourse.processing.org/u/jonathan22)\
**Replies:** 0\
**Last updated:** [April 28, 2023, 11:35am UTC](https://discourse.processing.org/t/javascript-email-validation/41861 "2023-04-28T11:35:08Z")

</div>

Why does Google prefix its (private) JSON answers with while(1);? For example, here’s a response from Google Calendar when turning a calendar on and off: while (1); \[ \['u', \[ \['smsSentFlag', 'false'\], \['hideI…

---

## [Q: Make connected objects, e.g. mobiles, chain, seesaw, using physics engine?](https://discourse.processing.org/t/q-make-connected-objects-e-g-mobiles-chain-seesaw-using-physics-engine/41848)

<div class="topic-metadata">

**Author:** [@Raj](https://discourse.processing.org/u/Raj)\
**Replies:** 0\
**Last updated:** [April 27, 2023, 10:11am UTC](https://discourse.processing.org/t/q-make-connected-objects-e-g-mobiles-chain-seesaw-using-physics-engine/41848 "2023-04-27T10:11:39Z")

</div>

Dear Processing folks, I’m a math teacher, and am playing around with trying to make math games in p5js and p5.play. Here’s what I’ve got so far: a math version of Candy Crush: https://rajeevraizada.github.io/rajmathg…

---

## [Multiple polygons loaded, user selects polygon of interest, user edits selected polygon nodes, user saves polygon](https://discourse.processing.org/t/multiple-polygons-loaded-user-selects-polygon-of-interest-user-edits-selected-polygon-nodes-user-saves-polygon/41774)

<div class="topic-metadata">

**Author:** [@andyhill](https://discourse.processing.org/u/andyhill)\
**Replies:** 18\
**Last updated:** [April 26, 2023, 10:17pm UTC](https://discourse.processing.org/t/multiple-polygons-loaded-user-selects-polygon-of-interest-user-edits-selected-polygon-nodes-user-saves-polygon/41774 "2023-04-26T22:17:56Z")

</div>

I want to load several polygons, user selects a polygon of interest, selected polygon nodes are visually drawn, user optionally drags polygon node to a new position, adjusted polygon is then saved. I would appreciate a …

---

## [Question About color() function and colorMode()](https://discourse.processing.org/t/question-about-color-function-and-colormode/41815)

<div class="topic-metadata">

**Author:** [@AnthonyMG](https://discourse.processing.org/u/AnthonyMG)\
**Replies:** 1\
**Last updated:** [April 24, 2023, 8:17pm UTC](https://discourse.processing.org/t/question-about-color-function-and-colormode/41815 "2023-04-24T20:17:07Z")

</div>

The color() function does not seem to work as I would have assumed. When executing the code below I get the following output: "rgba(255,255,255,1) levels c1: 255,255,255,255 rgba(0,0,0,1) levels c1: 0,0,0,255 " I woul…

---

## [Odd behavior from directional lights with webgl](https://discourse.processing.org/t/odd-behavior-from-directional-lights-with-webgl/41791)

<div class="topic-metadata">

**Author:** [@bluemoon](https://discourse.processing.org/u/bluemoon)\
**Replies:** 3\
**Last updated:** [April 22, 2023, 3:51pm UTC](https://discourse.processing.org/t/odd-behavior-from-directional-lights-with-webgl/41791 "2023-04-22T15:51:40Z")

</div>

Hi Folks, I’m getting what I think is some really weird behavior from directional lights when using webgl. Here’s the example sketch. What I can’t figure out is: Quads appear to reflect light opposite to boxes and o…

---

## [Dom create statements / functions](https://discourse.processing.org/t/dom-create-statements-functions/41745)

<div class="topic-metadata">

**Author:** [@jarlook](https://discourse.processing.org/u/jarlook)\
**Replies:** 2\
**Last updated:** [April 17, 2023, 8:55pm UTC](https://discourse.processing.org/t/dom-create-statements-functions/41745 "2023-04-17T20:55:39Z")

</div>

Beginning to use some of the p5.js Dom “create” statements (e.g. createButton). I see from the documentation and earlier topics that there are a variety of methods (e.g., position and style), but I’d like to look at the…

---

## [P5js loads everything black](https://discourse.processing.org/t/p5js-loads-everything-black/41723)

<div class="topic-metadata">

**Author:** [@SGTMM](https://discourse.processing.org/u/SGTMM)\
**Replies:** 1\
**Last updated:** [April 17, 2023, 9:08am UTC](https://discourse.processing.org/t/p5js-loads-everything-black/41723 "2023-04-17T09:08:01Z")

</div>

So I was making a game with the p5js library and another one which is mostly unknown but which I am sure is not problem. Code as simple as this: \<\> var button; var player; var x = 0, y = 0.5, z = 0 function setup() …

---

## [Sound library -\> get 2 different audio Inputs](https://discourse.processing.org/t/sound-library-get-2-different-audio-inputs/41705)

<div class="topic-metadata">

**Author:** [@carlesgutierrez](https://discourse.processing.org/u/carlesgutierrez)\
**Replies:** 5\
**Last updated:** [April 16, 2023, 12:59pm UTC](https://discourse.processing.org/t/sound-library-get-2-different-audio-inputs/41705 "2023-04-16T12:59:21Z")

</div>

Hi dears, I’ve been using sound library to capture audio and check & visualize the FFT of an audio Input. I’m using windows10 and selecting my audio input from sound properties as is explained in this post -\>getting-liv…

---

## [How to make an drawing sketch of the Godzilla heat beam, without leaving a trace of the beam line?](https://discourse.processing.org/t/how-to-make-an-drawing-sketch-of-the-godzilla-heat-beam-without-leaving-a-trace-of-the-beam-line/41681)

<div class="topic-metadata">

**Author:** [@Gittoo](https://discourse.processing.org/u/Gittoo)\
**Replies:** 5\
**Last updated:** [April 14, 2023, 10:26am UTC](https://discourse.processing.org/t/how-to-make-an-drawing-sketch-of-the-godzilla-heat-beam-without-leaving-a-trace-of-the-beam-line/41681 "2023-04-14T10:26:02Z")

</div>

let drawing = \[\]; let city; function preload() { city = loadImage("city.jpg"); } function setup() { createCanvas(city.width, city.height); } function mouseDragged() { drawing.push({ mouseX: mouseX, mouse…

---

## [How to implement adobe font into p5.js canvas by using textFont()](https://discourse.processing.org/t/how-to-implement-adobe-font-into-p5-js-canvas-by-using-textfont/41710)

<div class="topic-metadata">

**Author:** [@WaningJupiter](https://discourse.processing.org/u/WaningJupiter)\
**Replies:** 1\
**Last updated:** [April 13, 2023, 6:59pm UTC](https://discourse.processing.org/t/how-to-implement-adobe-font-into-p5-js-canvas-by-using-textfont/41710 "2023-04-13T18:59:38Z")

</div>

Hello, friends, I searched the forum, while there were several discussions around the topic, I was unable to find the answer I was looking for. Is it possible to use Typekit or Adobe fonts at the canvas level inside of…

---

## [How to add a text input for a TextToPoints project](https://discourse.processing.org/t/how-to-add-a-text-input-for-a-texttopoints-project/41686)

<div class="topic-metadata">

**Author:** [@qmartial](https://discourse.processing.org/u/qmartial)\
**Replies:** 2\
**Last updated:** [April 13, 2023, 2:22pm UTC](https://discourse.processing.org/t/how-to-add-a-text-input-for-a-texttopoints-project/41686 "2023-04-13T14:22:29Z")

</div>

Hello everyone ! I am still very new to P5js, and i’m trying to experiment generative/interactive typography for an art school project ; i followed a tutorial by Jeff Thompson about experimenting the TextToPoints effect…

---

## [P5.js Editor wrong p5.js says: p5 had problems creating the global function "createElement"](https://discourse.processing.org/t/p5-js-editor-wrong-p5-js-says-p5-had-problems-creating-the-global-function-createelement/41596)

<div class="topic-metadata">

**Author:** [@Zwaan](https://discourse.processing.org/u/Zwaan)\
**Replies:** 5\
**Last updated:** [April 13, 2023, 8:05am UTC](https://discourse.processing.org/t/p5-js-editor-wrong-p5-js-says-p5-had-problems-creating-the-global-function-createelement/41596 "2023-04-13T08:05:44Z")

</div>

Hello, I have problem with P5.js Editor all the time. error message. there is not right. I get caught. Chrome and Edge same error message. "p5.js says: p5 had problems creating the global function “createElement”, possib…

---

## [Random walker on certain part of the canvas](https://discourse.processing.org/t/random-walker-on-certain-part-of-the-canvas/41696)

<div class="topic-metadata">

**Author:** [@Alesk1969](https://discourse.processing.org/u/Alesk1969)\
**Replies:** 9\
**Last updated:** [April 12, 2023, 9:26pm UTC](https://discourse.processing.org/t/random-walker-on-certain-part-of-the-canvas/41696 "2023-04-12T21:26:56Z")

</div>

Hi! I’m playing around with a Random Walker code. How can I make the Walker to be displayed only at the bottom half of the screen with the following code? And also not disapearing from the canvas ? Thanks in advance fo…

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

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