# p5.js

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

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

**Page:** 79

---

## [P5 loadJSON from wordpress problem](https://discourse.processing.org/t/p5-loadjson-from-wordpress-problem/17797)

<div class="topic-metadata">

**Author:** [@holby](https://discourse.processing.org/u/holby)\
**Replies:** 1\
**Last updated:** [February 13, 2020, 5:05pm UTC](https://discourse.processing.org/t/p5-loadjson-from-wordpress-problem/17797 "2020-02-13T17:05:31Z")

</div>

Hi Can someone see why I cant load this data to my console? I just get a “problem loading your JSON” Thank you function setup(){ createCanvas(200,200); loadJSON('http://north-berlin.com/wp-json/wp/v2/tags/', gotData…

---

## [Create path from image shape outline](https://discourse.processing.org/t/create-path-from-image-shape-outline/17786)

<div class="topic-metadata">

**Author:** [@Napalm1432](https://discourse.processing.org/u/Napalm1432)\
**Replies:** 0\
**Last updated:** [February 13, 2020, 8:48am UTC](https://discourse.processing.org/t/create-path-from-image-shape-outline/17786 "2020-02-13T08:48:03Z")

</div>

Hi there, I’m working on a project to create toolpaths for a “zen” coffeetable. The goal is to create a pattern, and to be able to follow shapes in an image (black on white image, e.g. logo’s). So far i’m able to crea…

---

## [Two-Dimensional Elastic Collision what am I missing?](https://discourse.processing.org/t/two-dimensional-elastic-collision-what-am-i-missing/17759)

<div class="topic-metadata">

**Author:** [@fragdemented](https://discourse.processing.org/u/fragdemented)\
**Replies:** 3\
**Last updated:** [February 12, 2020, 6:18pm UTC](https://discourse.processing.org/t/two-dimensional-elastic-collision-what-am-i-missing/17759 "2020-02-12T18:18:29Z")

</div>

Hello World! I’m on a long personal journey to recreate classic games from scratch with my own flair to improve my programming skills. My next project is Asteroids, and I would like the asteroids to bounce off each othe…

---

## [Does the p5.js ios app still exist?](https://discourse.processing.org/t/does-the-p5-js-ios-app-still-exist/17262)

<div class="topic-metadata">

**Author:** [@erichM](https://discourse.processing.org/u/erichM)\
**Replies:** 1\
**Last updated:** [February 12, 2020, 2:55pm UTC](https://discourse.processing.org/t/does-the-p5-js-ios-app-still-exist/17262 "2020-02-12T14:55:19Z")

</div>

Does the ios version of p5.js still exist? It seems to have disappeared from the app store.

---

## [Multiple instances of the same p5js sketch?](https://discourse.processing.org/t/multiple-instances-of-the-same-p5js-sketch/17765)

<div class="topic-metadata">

**Author:** [@89apt89](https://discourse.processing.org/u/89apt89)\
**Replies:** 1\
**Last updated:** [February 12, 2020, 6:21am UTC](https://discourse.processing.org/t/multiple-instances-of-the-same-p5js-sketch/17765 "2020-02-12T06:21:32Z")

</div>

Hello. I’m looking for a way to put multiple instances of the same p5js sketch on my site. I know the obvious method is copy-and-pasting my sketch.js and changing the IDs for each, but I want to have a dynamic amount of …

---

## [Erro : Untaught SyntaxError: unexpected token 'var'](https://discourse.processing.org/t/erro-untaught-syntaxerror-unexpected-token-var/17733)

<div class="topic-metadata">

**Author:** [@Leonhard](https://discourse.processing.org/u/Leonhard)\
**Replies:** 6\
**Last updated:** [February 11, 2020, 6:11pm UTC](https://discourse.processing.org/t/erro-untaught-syntaxerror-unexpected-token-var/17733 "2020-02-11T18:11:55Z")

</div>

Hi, I’m trying to convert this code to JavaScript, but this error appears: “Untaught SyntaxError: unexpected token ‘var’”. Converted code: https://www.openprocessing.org/sketch/839422/embed/ Original code: https://www.…

---

## [p5.Speech with Microphone Input](https://discourse.processing.org/t/p5-speech-with-microphone-input/17725)

<div class="topic-metadata">

**Author:** [@yehonatan.cohen](https://discourse.processing.org/u/yehonatan.cohen)\
**Replies:** 0\
**Last updated:** [February 11, 2020, 11:36am UTC](https://discourse.processing.org/t/p5-speech-with-microphone-input/17725 "2020-02-11T11:36:01Z")

</div>

Hey, So I’m trying to make the SpeechRec work with the AudioIn, to adjust the font size according to the volume level. But for some reason I don’t get any data from the AudioIn, I don’t see anything on the console. I’…

---

## [Clickable dropdown menu](https://discourse.processing.org/t/clickable-dropdown-menu/17668)

<div class="topic-metadata">

**Author:** [@rihab](https://discourse.processing.org/u/rihab)\
**Replies:** 2\
**Last updated:** [February 11, 2020, 3:04pm UTC](https://discourse.processing.org/t/clickable-dropdown-menu/17668 "2020-02-11T15:04:27Z")

</div>

Hi I want to make a clickable dropdown menu but I find some problems function setup() { textAlign(CENTER); //background(200); sel = createSelect(); sel.position(11.5, 12 ); sel.size(39, 39) sel.option('A'…

---

## [Multiple Canvases preload()](https://discourse.processing.org/t/multiple-canvases-preload/17702)

<div class="topic-metadata">

**Author:** [@dc527x](https://discourse.processing.org/u/dc527x)\
**Replies:** 3\
**Last updated:** [February 11, 2020, 3:02pm UTC](https://discourse.processing.org/t/multiple-canvases-preload/17702 "2020-02-11T15:02:47Z")

</div>

If I have multiple sketches in my HTML page, what is the best way to ensure that they all load after the preload function? As of now I have three sketches. In sketch3 I have a preload function. The issue is I need to re…

---

## [Vertex color interpolation on shape](https://discourse.processing.org/t/vertex-color-interpolation-on-shape/17614)

<div class="topic-metadata">

**Author:** [@bowersjc](https://discourse.processing.org/u/bowersjc)\
**Replies:** 5\
**Last updated:** [February 8, 2020, 3:21pm UTC](https://discourse.processing.org/t/vertex-color-interpolation-on-shape/17614 "2020-02-08T15:21:30Z")

</div>

Hi, I’m using p5js to draw some 3D triangles. For each triangle I have a color defined at each vertex and I would like to see a smooth interpolation of the color using the typical barycentric interpolation across the tri…

---

## [Problems with "this.x" variable in a class](https://discourse.processing.org/t/problems-with-this-x-variable-in-a-class/17621)

<div class="topic-metadata">

**Author:** [@Rahul](https://discourse.processing.org/u/Rahul)\
**Replies:** 2\
**Last updated:** [February 8, 2020, 1:42am UTC](https://discourse.processing.org/t/problems-with-this-x-variable-in-a-class/17621 "2020-02-08T01:42:07Z")

</div>

Hello, everyone! As practice, I am working on a small sketch that has a black circle appear and move right from a black square if I hit the space bar. So far, everything looks good, but the circle isn’t moving — this.x …

---

## [How to turn off one object and turn on another with one click in an array?](https://discourse.processing.org/t/how-to-turn-off-one-object-and-turn-on-another-with-one-click-in-an-array/17574)

<div class="topic-metadata">

**Author:** [@RynWillDsgn](https://discourse.processing.org/u/RynWillDsgn)\
**Replies:** 4\
**Last updated:** [February 7, 2020, 5:08pm UTC](https://discourse.processing.org/t/how-to-turn-off-one-object-and-turn-on-another-with-one-click-in-an-array/17574 "2020-02-07T17:08:21Z")

</div>

Honestly, the title probably doesn’t make much sense (I’m new to this), but I’m in a tough spot. I’m a student and one of our modules is processing, a quick 2-week stint. I literally had two classes on processing and we …

---

## [Sketch with classes implementation in a Reactjs project](https://discourse.processing.org/t/sketch-with-classes-implementation-in-a-reactjs-project/17358)

<div class="topic-metadata">

**Author:** [@nardove](https://discourse.processing.org/u/nardove)\
**Replies:** 6\
**Last updated:** [February 5, 2020, 8:42am UTC](https://discourse.processing.org/t/sketch-with-classes-implementation-in-a-reactjs-project/17358 "2020-02-05T08:42:15Z")

</div>

I manaje to implement a basic p5 sketch into my react app successfuly but I’m struggling when I have multiple classes and say a third party library like Matterjs. Here is my current Reactjs setup: Sketch.js is a functi…

---

## [P5js pixels not working](https://discourse.processing.org/t/p5js-pixels-not-working/17561)

<div class="topic-metadata">

**Author:** [@thunderball](https://discourse.processing.org/u/thunderball)\
**Replies:** 2\
**Last updated:** [February 5, 2020, 3:46am UTC](https://discourse.processing.org/t/p5js-pixels-not-working/17561 "2020-02-05T03:46:11Z")

</div>

hi all, this program does not work, I am copying a tutorial from The Coding Train which seems to work: https://youtu.be/nMUMZ5YRxHI?t=533 My test has no pixel being displayed, why? \<head\> \<script src="https://cdn.jsdel…

---

## [P5js instance mode running sketches after removing them from DOM](https://discourse.processing.org/t/p5js-instance-mode-running-sketches-after-removing-them-from-dom/17551)

<div class="topic-metadata">

**Author:** [@eli7vh](https://discourse.processing.org/u/eli7vh)\
**Replies:** 1\
**Last updated:** [February 4, 2020, 6:44pm UTC](https://discourse.processing.org/t/p5js-instance-mode-running-sketches-after-removing-them-from-dom/17551 "2020-02-04T18:44:24Z")

</div>

Hello, I am making a sketch browser for myself using p5 instance mode. The sketches seem to continue running after removing them from the DOM. which results in my CPU getting pinned… relevant code is here: const loadS…

---

## [Savetable with P5](https://discourse.processing.org/t/savetable-with-p5/17475)

<div class="topic-metadata">

**Author:** [@jp3001](https://discourse.processing.org/u/jp3001)\
**Replies:** 7\
**Last updated:** [February 4, 2020, 11:27am UTC](https://discourse.processing.org/t/savetable-with-p5/17475 "2020-02-04T11:27:40Z")

</div>

I’ve got a strange error when trying to save a p5.table tablo= new p5.table; saveTable(tablo,‘Memory’,‘csv’); I’ve got the following msg: Exception has occured Error: creaheader is not defined but if I enter ‘html’…

---

## [Infinite Runner Tutorial](https://discourse.processing.org/t/infinite-runner-tutorial/17477)

<div class="topic-metadata">

**Author:** [@shodai](https://discourse.processing.org/u/shodai)\
**Replies:** 3\
**Last updated:** [February 4, 2020, 4:17am UTC](https://discourse.processing.org/t/infinite-runner-tutorial/17477 "2020-02-04T04:17:22Z")

</div>

Just wondering if anyone has or has come across an infinite runner tutorial?

---

## [p5.Play in p5.js editor](https://discourse.processing.org/t/p5-play-in-p5-js-editor/17506)

<div class="topic-metadata">

**Author:** [@shodai](https://discourse.processing.org/u/shodai)\
**Replies:** 2\
**Last updated:** [February 2, 2020, 2:36am UTC](https://discourse.processing.org/t/p5-play-in-p5-js-editor/17506 "2020-02-02T02:36:11Z")

</div>

Does anyone know how to use the P5.Play library in the p5.js editor? I believe that the library has to be referenced in the index.html file, I just do not know how to do that or where to point the reference too.

---

## [P5js sketch as background of 1 div](https://discourse.processing.org/t/p5js-sketch-as-background-of-1-div/17487)

<div class="topic-metadata">

**Author:** [@teddysphotos](https://discourse.processing.org/u/teddysphotos)\
**Replies:** 0\
**Last updated:** [January 31, 2020, 9:01pm UTC](https://discourse.processing.org/t/p5js-sketch-as-background-of-1-div/17487 "2020-01-31T21:01:01Z")

</div>

I have multiple tags in my project, I want to set one of my p5js sketches as the background of a particular . How do I do that? I have set the z-index of the canvas in sketch.js as -1. I just want to know how to set t…

---

## [Perhaps I do not know fill/random works after all](https://discourse.processing.org/t/perhaps-i-do-not-know-fill-random-works-after-all/17424)

<div class="topic-metadata">

**Author:** [@yangs](https://discourse.processing.org/u/yangs)\
**Replies:** 3\
**Last updated:** [January 30, 2020, 10:10pm UTC](https://discourse.processing.org/t/perhaps-i-do-not-know-fill-random-works-after-all/17424 "2020-01-30T22:10:46Z")

</div>

Creating a very rough sketch of a generative rothko – three or two rectangles of random size within a range on a muted background – and I’ve come to the conclusion I don’t understand how fill() and/or random() works. Ho…

---

## [Can't run Grunt server](https://discourse.processing.org/t/cant-run-grunt-server/17016)

<div class="topic-metadata">

**Author:** [@teddysphotos](https://discourse.processing.org/u/teddysphotos)\
**Replies:** 4\
**Last updated:** [January 30, 2020, 6:34pm UTC](https://discourse.processing.org/t/cant-run-grunt-server/17016 "2020-01-30T18:34:48Z")

</div>

Every time I run npm run watch, the server doesn’t run, it does not open the p5js.org website on my system. Instead, it shows the following error in the terminal. npm ERR! code ELIFECYCLE npm ERR! errno 3 npm ERR! p5…

---

## [Why won't my json url work?](https://discourse.processing.org/t/why-wont-my-json-url-work/17425)

<div class="topic-metadata">

**Author:** [@JennyMcCreadie](https://discourse.processing.org/u/JennyMcCreadie)\
**Replies:** 2\
**Last updated:** [January 29, 2020, 7:21pm UTC](https://discourse.processing.org/t/why-wont-my-json-url-work/17425 "2020-01-29T19:21:43Z")

</div>

Nothing I am doing seems to be working, I even used the same json url as used in this tutorial and it still keeps coming up with the error: "\> p5.js says: It looks like there was a problem loading your json. Try checkin…

---

## [P5 web editor repo, some issues unnecessarily still open](https://discourse.processing.org/t/p5-web-editor-repo-some-issues-unnecessarily-still-open/17396)

<div class="topic-metadata">

**Author:** [@mynk](https://discourse.processing.org/u/mynk)\
**Replies:** 0\
**Last updated:** [January 28, 2020, 6:25pm UTC](https://discourse.processing.org/t/p5-web-editor-repo-some-issues-unnecessarily-still-open/17396 "2020-01-28T18:25:58Z")

</div>

I think many issues on p5 web editor github repo are still open unnecessarily, here is an example of such an issue Can something be done to fix this problem, I hope I am not missing something important here …

---

## [Display images randomly by clicking](https://discourse.processing.org/t/display-images-randomly-by-clicking/17380)

<div class="topic-metadata">

**Author:** [@nicolas](https://discourse.processing.org/u/nicolas)\
**Replies:** 10\
**Last updated:** [January 27, 2020, 9:23pm UTC](https://discourse.processing.org/t/display-images-randomly-by-clicking/17380 "2020-01-27T21:23:44Z")

</div>

Hello, I’m trying to display images (10 or more) randomly when you click on the canvas. At the moment there is only one image displayed, and I don’t know how to proceed for the rest. Should I use img(); or createImg(); …

---

## [Drawing constraint](https://discourse.processing.org/t/drawing-constraint/16367)

<div class="topic-metadata">

**Author:** [@nicolas](https://discourse.processing.org/u/nicolas)\
**Replies:** 5\
**Last updated:** [January 27, 2020, 6:05pm UTC](https://discourse.processing.org/t/drawing-constraint/16367 "2020-01-27T18:05:36Z")

</div>

Hi, I want to make “invisible walls” in my sketch so that when you draw a trace with the mouse, it is blocked and the line is drawn around this form of “invisible walls”. I tried with the p5 Play library but it works w…

---

## ['Unable to set input source' p5.AudioIn()](https://discourse.processing.org/t/unable-to-set-input-source-p5-audioin/17373)

<div class="topic-metadata">

**Author:** [@Lucca](https://discourse.processing.org/u/Lucca)\
**Replies:** 0\
**Last updated:** [January 27, 2020, 1:09pm UTC](https://discourse.processing.org/t/unable-to-set-input-source-p5-audioin/17373 "2020-01-27T13:09:40Z")

</div>

I am trying to grab my speakers/headphones audio in a p5 sketch I am writing to analyze the sound playing on my system. I can use the AudioIn.getSources() method to return an array of sources, the first of which is liste…

---

## [Question about using a for loop to execute a function multiple times](https://discourse.processing.org/t/question-about-using-a-for-loop-to-execute-a-function-multiple-times/17369)

<div class="topic-metadata">

**Author:** [@ZachMcMkay](https://discourse.processing.org/u/ZachMcMkay)\
**Replies:** 1\
**Last updated:** [January 27, 2020, 9:22am UTC](https://discourse.processing.org/t/question-about-using-a-for-loop-to-execute-a-function-multiple-times/17369 "2020-01-27T09:22:48Z")

</div>

I have a function that I know is running without errors if called once through the draw loop. In order to increase the “speed” of the function i ran the function in a for loop. Meaning, instead of just calling the func…

---

## [P5.js and arduino using serial.js](https://discourse.processing.org/t/p5-js-and-arduino-using-serial-js/17364)

<div class="topic-metadata">

**Author:** [@ACBRrobotics](https://discourse.processing.org/u/ACBRrobotics)\
**Replies:** 0\
**Last updated:** [January 27, 2020, 8:00am UTC](https://discourse.processing.org/t/p5-js-and-arduino-using-serial-js/17364 "2020-01-27T08:00:00Z")

</div>

Hello! So I have been trying to reverse engineer this great example from the google team about interfacing TensorFlow models created in “teachable machine”, then using a p5.js sketch and the WebUSB library to send seria…

---

## [Reference is Null, p5 load order?](https://discourse.processing.org/t/reference-is-null-p5-load-order/17330)

<div class="topic-metadata">

**Author:** [@Skranker](https://discourse.processing.org/u/Skranker)\
**Replies:** 3\
**Last updated:** [January 26, 2020, 1:22am UTC](https://discourse.processing.org/t/reference-is-null-p5-load-order/17330 "2020-01-26T01:22:05Z")

</div>

Hello, at the moment i am trying to reference a div object from my index.html witin the p5 sketch but i keep getting an object is null error. I think this happens because the script is loaded too early and the object h…

---

## [React P5 loading image question. How do I pass prop values to preload image?](https://discourse.processing.org/t/react-p5-loading-image-question-how-do-i-pass-prop-values-to-preload-image/16961)

<div class="topic-metadata">

**Author:** [@eagle3y3z](https://discourse.processing.org/u/eagle3y3z)\
**Replies:** 4\
**Last updated:** [January 25, 2020, 12:15am UTC](https://discourse.processing.org/t/react-p5-loading-image-question-how-do-i-pass-prop-values-to-preload-image/16961 "2020-01-25T00:15:20Z")

</div>

I am relatively new to P5 and I just don’t quite understand how to load an image using react p5-wrapper and the prop values together. I’m gettting an error that my img variable is not being read and is undefined. The onl…

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

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