# p5.js

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

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

**Page:** 55

---

## [Getting the error Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0](https://discourse.processing.org/t/getting-the-error-uncaught-domexception-failed-to-execute-drawimage-on-canvasrenderingcontext2d-the-image-argument-is-a-canvas-element-with-a-width-or-height-of-0/26419)

<div class="topic-metadata">

**Author:** [@EliteDaMyth](https://discourse.processing.org/u/EliteDaMyth)\
**Replies:** 1\
**Last updated:** [December 22, 2020, 8:45am UTC](https://discourse.processing.org/t/getting-the-error-uncaught-domexception-failed-to-execute-drawimage-on-canvasrenderingcontext2d-the-image-argument-is-a-canvas-element-with-a-width-or-height-of-0/26419 "2020-12-22T08:45:58Z")

</div>

I am trying to make a Delaunay triangulation sketch in p5. i have successfully made it to work with an image url. i want to allow the user to upload some images too, but when i am trying to do so, i get the following err…

---

## [Error (: line 0)](https://discourse.processing.org/t/error-line-0/26427)

<div class="topic-metadata">

**Author:** [@iris.go](https://discourse.processing.org/u/iris.go)\
**Replies:** 5\
**Last updated:** [December 21, 2020, 10:56pm UTC](https://discourse.processing.org/t/error-line-0/26427 "2020-12-21T22:56:07Z")

</div>

Good day, I am new to this forum and would like to have your advice concerning an error which I am not able to solve. When I run the code below (tree simulation) in p5js, it gives me this error : Script error. (: line …

---

## [Why do I get this error message? Ellipse was expecting Number](https://discourse.processing.org/t/why-do-i-get-this-error-message-ellipse-was-expecting-number/26428)

<div class="topic-metadata">

**Author:** [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Replies:** 2\
**Last updated:** [December 21, 2020, 9:06pm UTC](https://discourse.processing.org/t/why-do-i-get-this-error-message-ellipse-was-expecting-number/26428 "2020-12-21T21:06:50Z")

</div>

This is my code https://www.openprocessing.org/sketch/1048449# if you’re wondering what the image I’m using is it’s my gf.

---

## [EndShape call inside mouseDragged doesn't work in instanciated mode](https://discourse.processing.org/t/endshape-call-inside-mousedragged-doesnt-work-in-instanciated-mode/26413)

<div class="topic-metadata">

**Author:** [@nahiko](https://discourse.processing.org/u/nahiko)\
**Replies:** 3\
**Last updated:** [December 21, 2020, 3:26pm UTC](https://discourse.processing.org/t/endshape-call-inside-mousedragged-doesnt-work-in-instanciated-mode/26413 "2020-12-21T15:26:39Z")

</div>

Hi guys, It’s all in the title, here is an example of the code: var s1 = function( sketch ) { sketch.setup = function() { let canvas1 = sketch.createCanvas(400, 400, sketch.WEBGL); canvas1.position(0,0); canvas1.ba…

---

## [P5.js not working on Google Chrome nor Opera ( Cannot read property 'addModule' )](https://discourse.processing.org/t/p5-js-not-working-on-google-chrome-nor-opera-cannot-read-property-addmodule/26299)

<div class="topic-metadata">

**Author:** [@cublidouble](https://discourse.processing.org/u/cublidouble)\
**Replies:** 1\
**Last updated:** [December 18, 2020, 1:12pm UTC](https://discourse.processing.org/t/p5-js-not-working-on-google-chrome-nor-opera-cannot-read-property-addmodule/26299 "2020-12-18T13:12:46Z")

</div>

Hey, I am pretty new to this, but ive been dealing with this problem of my p5.js not showing up on Chrome or Opera. It works on Windows IE and Safari totally fine. Got any suggestions or is there a fix? Thanks a lot, l…

---

## [Issues Regarding Building p5.js 1.1.9 on local System](https://discourse.processing.org/t/issues-regarding-building-p5-js-1-1-9-on-local-system/26333)

<div class="topic-metadata">

**Author:** [@ganimtron\_10](https://discourse.processing.org/u/ganimtron_10)\
**Replies:** 4\
**Last updated:** [December 18, 2020, 12:54pm UTC](https://discourse.processing.org/t/issues-regarding-building-p5-js-1-1-9-on-local-system/26333 "2020-12-18T12:54:39Z")

</div>

I am starting to learn Contributing to opensource and choose p5.js to start with as I am familiar with Javascriptand p5.js both. I have Successfully Installed the p5 repo and while trying to build with no changes. I enco…

---

## [Wondering if anyone would wanna pair up to help?](https://discourse.processing.org/t/wondering-if-anyone-would-wanna-pair-up-to-help/26360)

<div class="topic-metadata">

**Author:** [@Duckablo](https://discourse.processing.org/u/Duckablo)\
**Replies:** 2\
**Last updated:** [December 18, 2020, 9:56am UTC](https://discourse.processing.org/t/wondering-if-anyone-would-wanna-pair-up-to-help/26360 "2020-12-18T09:56:42Z")

</div>

I’ve just go into coding and wrestled myself on a language to start with. I finally decided JavaScript because p5.js is looks so fun and very nice to learn. I have this idea for visualization for music and it seems sorta…

---

## [My variables will log to the console but not write to a div](https://discourse.processing.org/t/my-variables-will-log-to-the-console-but-not-write-to-a-div/25843)

<div class="topic-metadata">

**Author:** [@epignosis567](https://discourse.processing.org/u/epignosis567)\
**Replies:** 11\
**Last updated:** [December 17, 2020, 12:50am UTC](https://discourse.processing.org/t/my-variables-will-log-to-the-console-but-not-write-to-a-div/25843 "2020-12-17T00:50:21Z")

</div>

Hi. So I’ve again been following a p5 tutorial on youtube (coding train woowoo!) and I’ve adapted it to use my own data to map Covid statistics by state. And everything works in terms of the data showing up in the consol…

---

## [Game with arrow key](https://discourse.processing.org/t/game-with-arrow-key/26314)

<div class="topic-metadata">

**Author:** [@Jayda](https://discourse.processing.org/u/Jayda)\
**Replies:** 5\
**Last updated:** [December 17, 2020, 3:27pm UTC](https://discourse.processing.org/t/game-with-arrow-key/26314 "2020-12-17T15:27:19Z")

</div>

Here is three things I want to do Keep the red ball remain in the canvas when it meets the boundary. (the whole interface disappears when it meets the boundary) Create a random “Green” target, and the goal is to u…

---

## [Making use of the GPU to render huge amount of objects](https://discourse.processing.org/t/making-use-of-the-gpu-to-render-huge-amount-of-objects/26267)

<div class="topic-metadata">

**Author:** [@lettuceburrito](https://discourse.processing.org/u/lettuceburrito)\
**Replies:** 10\
**Last updated:** [December 17, 2020, 12:56pm UTC](https://discourse.processing.org/t/making-use-of-the-gpu-to-render-huge-amount-of-objects/26267 "2020-12-17T12:56:11Z")

</div>

Hi, I’m new to p5.js and WebGL, so I’m not sure if I’m using the right terminology. Let’s start with the problem: We’re currently displaying a map of objects (simple rectangles with text in them, plus some single line…

---

## [Using millimeters (mm), centimeters (cm), inches and zoom/pan with p5.js](https://discourse.processing.org/t/using-millimeters-mm-centimeters-cm-inches-and-zoom-pan-with-p5-js/13824)

<div class="topic-metadata">

**Author:** [@Kris](https://discourse.processing.org/u/Kris)\
**Replies:** 4\
**Last updated:** [December 17, 2020, 9:24am UTC](https://discourse.processing.org/t/using-millimeters-mm-centimeters-cm-inches-and-zoom-pan-with-p5-js/13824 "2020-12-17T09:24:21Z")

</div>

The first thing I wanted to do when I started using p5.js was to use dimensions in millimeters. I couldn’t find anything about this topic on the internet. So, I wrote a small extension myself (use p5.js with mm, cm, inch…

---

## [Radio Button's option() method works weird.](https://discourse.processing.org/t/radio-buttons-option-method-works-weird/26303)

<div class="topic-metadata">

**Author:** [@javalab](https://discourse.processing.org/u/javalab)\
**Replies:** 1\
**Last updated:** [December 16, 2020, 4:31pm UTC](https://discourse.processing.org/t/radio-buttons-option-method-works-weird/26303 "2020-12-16T16:31:48Z")

</div>

In the case of radio buttons, the parameters of the option() method are applied interchangeably. This error is occurring in the latest version of p5.js. To see what the error occurs, refer to the url below. https://p5…

---

## [Visualize data from API in p5.js](https://discourse.processing.org/t/visualize-data-from-api-in-p5-js/26246)

<div class="topic-metadata">

**Author:** [@fullmotion](https://discourse.processing.org/u/fullmotion)\
**Replies:** 4\
**Last updated:** [December 16, 2020, 3:07pm UTC](https://discourse.processing.org/t/visualize-data-from-api-in-p5-js/26246 "2020-12-16T15:07:25Z")

</div>

Hello, I am trying to create a data visualization from data form an API. I would like to visualize every point in the array on the sketch and include the type of the incident (i.e: theft). what’s the best way or path to …

---

## [Running Camera with buttons in p5.js](https://discourse.processing.org/t/running-camera-with-buttons-in-p5-js/26281)

<div class="topic-metadata">

**Author:** [@fullmotion](https://discourse.processing.org/u/fullmotion)\
**Replies:** 3\
**Last updated:** [December 16, 2020, 11:20am UTC](https://discourse.processing.org/t/running-camera-with-buttons-in-p5-js/26281 "2020-12-16T11:20:11Z")

</div>

Hello, debugging the camera option in this sketch. 1) Why isn’t camera opening inside the canvas? 2) How can I make the buttons disappear when the camera opens on the canvas? https://editor.p5js.org/fullmotion/sketches/…

---

## [Unexpected code behaviour: nested loops vs manual](https://discourse.processing.org/t/unexpected-code-behaviour-nested-loops-vs-manual/26266)

<div class="topic-metadata">

**Author:** [@Chudroy](https://discourse.processing.org/u/Chudroy)\
**Replies:** 2\
**Last updated:** [December 15, 2020, 12:10pm UTC](https://discourse.processing.org/t/unexpected-code-behaviour-nested-loops-vs-manual/26266 "2020-12-15T12:10:06Z")

</div>

Hi guys, new to the forum here, let me know if I’m doing anything obviously wrong. I made this sketch: My question is: why does the nested loop variation have a cross going through the middle? When I manually draw in…

---

## [Create playlist with p5js](https://discourse.processing.org/t/create-playlist-with-p5js/26235)

<div class="topic-metadata">

**Author:** [@ari01](https://discourse.processing.org/u/ari01)\
**Replies:** 1\
**Last updated:** [December 15, 2020, 2:02am UTC](https://discourse.processing.org/t/create-playlist-with-p5js/26235 "2020-12-15T02:02:52Z")

</div>

Hello! Can someone guide me on creating a music player with p5js? this is the code I have so far: var files = \[ ‘7rings.mp3’, ‘antisocial.mp3’, ‘badguy.mp3’, ‘badguyjb.mp3’, ‘beautifulpeople.mp3’, ‘boyfriend.mp3’, ‘cr…

---

## [P5 image and class](https://discourse.processing.org/t/p5-image-and-class/26105)

<div class="topic-metadata">

**Author:** [@vlafortune](https://discourse.processing.org/u/vlafortune)\
**Replies:** 4\
**Last updated:** [December 14, 2020, 3:56pm UTC](https://discourse.processing.org/t/p5-image-and-class/26105 "2020-12-14T15:56:54Z")

</div>

Hi! I’m having trouble with the image function in p5. I’m following Dan Shiffman tutorial: https://youtu.be/i2C1hrJMwz0 I keep getting the following friendly message : :cherry\_blossom: p5.js says: image() was expectin…

---

## [P5.js and FMOD integration](https://discourse.processing.org/t/p5-js-and-fmod-integration/22200)

<div class="topic-metadata">

**Author:** [@spencerbambrick](https://discourse.processing.org/u/spencerbambrick)\
**Replies:** 3\
**Last updated:** [December 14, 2020, 2:02pm UTC](https://discourse.processing.org/t/p5-js-and-fmod-integration/22200 "2020-12-14T14:02:46Z")

</div>

I’m curious if anyone here has successfully used the audio middleware FMOD for a project made in P5.js. It seems it’s compatible but is a bit beyond my understanding of how to execute: https://fmod.com/resources/documen…

---

## [3D orienting particles using velocity and position vectors in p5js](https://discourse.processing.org/t/3d-orienting-particles-using-velocity-and-position-vectors-in-p5js/26188)

<div class="topic-metadata">

**Author:** [@kaspar.wtf](https://discourse.processing.org/u/kaspar.wtf)\
**Replies:** 0\
**Last updated:** [December 13, 2020, 11:42am UTC](https://discourse.processing.org/t/3d-orienting-particles-using-velocity-and-position-vectors-in-p5js/26188 "2020-12-13T11:42:26Z")

</div>

I’m currently writting a 3D implementation of the boids algorithm in P5.js but I’m having trouble orienting my boids according to their direction (velocity). I’m having a very hard time understand what rotation matrix wo…

---

## [How can I get sound data?](https://discourse.processing.org/t/how-can-i-get-sound-data/26160)

<div class="topic-metadata">

**Author:** [@kokosic](https://discourse.processing.org/u/kokosic)\
**Replies:** 1\
**Last updated:** [December 13, 2020, 8:55am UTC](https://discourse.processing.org/t/how-can-i-get-sound-data/26160 "2020-12-13T08:55:20Z")

</div>

I have this library and this code var context = new AudioContext(); var fileInput = document.getElementById("fileInput"); fileInput.onchange = function () { var files = fileInput.files; if (files.length == 0) ret…

---

## [Loading a .obj file into P5](https://discourse.processing.org/t/loading-a-obj-file-into-p5/26181)

<div class="topic-metadata">

**Author:** [@davidhurwich](https://discourse.processing.org/u/davidhurwich)\
**Replies:** 1\
**Last updated:** [December 13, 2020, 8:46am UTC](https://discourse.processing.org/t/loading-a-obj-file-into-p5/26181 "2020-12-13T08:46:38Z")

</div>

Im a teacher at a school who is teaching P5.js to my students. A student of mine exported a model from the 3D program Blender as a .obj file and had trouble using the loadModel() function when previewing it. Upon inspe…

---

## [saveStrings Reference Error](https://discourse.processing.org/t/savestrings-reference-error/26036)

<div class="topic-metadata">

**Author:** [@CND](https://discourse.processing.org/u/CND)\
**Replies:** 3\
**Last updated:** [December 13, 2020, 7:13am UTC](https://discourse.processing.org/t/savestrings-reference-error/26036 "2020-12-13T07:13:26Z")

</div>

The p5.js “saveStrings” Reference says: let words = ‘apple bear cat dog’; let list = split(words, ’ '); \< \< ! ! This is wrong iI needs to be… let list = words.split(’ '); This threw me for a while before I looked ha…

---

## [saveStrings again](https://discourse.processing.org/t/savestrings-again/26037)

<div class="topic-metadata">

**Author:** [@CND](https://discourse.processing.org/u/CND)\
**Replies:** 3\
**Last updated:** [December 12, 2020, 11:26pm UTC](https://discourse.processing.org/t/savestrings-again/26037 "2020-12-12T23:26:31Z")

</div>

I can not get the example to work. I have tried it with & without an existing target file in the home folder. Does this have to be done on a server?

---

## [Fixed backgroud in webpage](https://discourse.processing.org/t/fixed-backgroud-in-webpage/25962)

<div class="topic-metadata">

**Author:** [@Axxel](https://discourse.processing.org/u/Axxel)\
**Replies:** 2\
**Last updated:** [December 12, 2020, 8:02am UTC](https://discourse.processing.org/t/fixed-backgroud-in-webpage/25962 "2020-12-12T08:02:58Z")

</div>

Hi friends! I’m trying to add a p5js script as a background on a wordpress page. I did it but the problem I have is when I scroll the page the p5 is moving too and I want to get it fix. I tried by a CSS way using back…

---

## [P5js: play a song when selecting an item from a dropdown list](https://discourse.processing.org/t/p5js-play-a-song-when-selecting-an-item-from-a-dropdown-list/26152)

<div class="topic-metadata">

**Author:** [@ari01](https://discourse.processing.org/u/ari01)\
**Replies:** 0\
**Last updated:** [December 12, 2020, 6:11am UTC](https://discourse.processing.org/t/p5js-play-a-song-when-selecting-an-item-from-a-dropdown-list/26152 "2020-12-12T06:11:09Z")

</div>

Hello! I want to use p5js to play songs when I select an item from a dropdown list. When an item is selected it should play a song allocated to it. And, also, the song needs to start playing after reCaptcha verification…

---

## [How can I get bpm from an audio file using p5.js?](https://discourse.processing.org/t/how-can-i-get-bpm-from-an-audio-file-using-p5-js/26121)

<div class="topic-metadata">

**Author:** [@kokosic](https://discourse.processing.org/u/kokosic)\
**Replies:** 2\
**Last updated:** [December 12, 2020, 3:12am UTC](https://discourse.processing.org/t/how-can-i-get-bpm-from-an-audio-file-using-p5-js/26121 "2020-12-12T03:12:16Z")

</div>

Hello everybody! How can I get bpm from an audio file using p5.js? I have not been able to figure out all this

---

## [How to get full text tweets with the codebird?](https://discourse.processing.org/t/how-to-get-full-text-tweets-with-the-codebird/26086)

<div class="topic-metadata">

**Author:** [@kokopo](https://discourse.processing.org/u/kokopo)\
**Replies:** 1\
**Last updated:** [December 12, 2020, 12:23am UTC](https://discourse.processing.org/t/how-to-get-full-text-tweets-with-the-codebird/26086 "2020-12-12T00:23:46Z")

</div>

I want to use a twitter api to search tweets in P5, and came across this codebird api but the tweets returned are truncated, is there a way to get full text? Thank you :slight\_smile:

---

## [P5js and database](https://discourse.processing.org/t/p5js-and-database/26088)

<div class="topic-metadata">

**Author:** [@ari01](https://discourse.processing.org/u/ari01)\
**Replies:** 2\
**Last updated:** [December 11, 2020, 3:24pm UTC](https://discourse.processing.org/t/p5js-and-database/26088 "2020-12-11T15:24:00Z")

</div>

Hello! I am new to p5js and I would like to make a creative project using it but I do not know how… I created a MySQL database and I would like its content to be displayed in ‘bubbles’ using the bubbles p5js library. Thi…

---

## [Radio Buttons (Multiple Possible)](https://discourse.processing.org/t/radio-buttons-multiple-possible/25068)

<div class="topic-metadata">

**Author:** [@BigBigRed](https://discourse.processing.org/u/BigBigRed)\
**Replies:** 1\
**Last updated:** [December 11, 2020, 12:34am UTC](https://discourse.processing.org/t/radio-buttons-multiple-possible/25068 "2020-12-11T00:34:26Z")

</div>

On my sketch, I would like to have multiple groups of radio buttons. So group 1 would be ‘Feature 1 - turn On, turn Off’, group 2 would be ‘Feature 2 - turn On, turn Off’, group 3 would be ’ Feature 3 - either 0, 1, 2…

---

## [Pointer-Event: None like property for p5.js?](https://discourse.processing.org/t/pointer-event-none-like-property-for-p5-js/24339)

<div class="topic-metadata">

**Author:** [@hugoromo](https://discourse.processing.org/u/hugoromo)\
**Replies:** 1\
**Last updated:** [December 11, 2020, 12:13am UTC](https://discourse.processing.org/t/pointer-event-none-like-property-for-p5-js/24339 "2020-12-11T00:13:04Z")

</div>

Hello, So I was wondering if there is any way of making a click pass through from an object at front to an object behind, I’m in a 3D canvas I have a cube made of boxes, and would like to show the stroke of boxes aroun…

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

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