# p5.js

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

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

**Page:** 112

---

## [Guidance on releasing new Processing-like library](https://discourse.processing.org/t/guidance-on-releasing-new-processing-like-library/1629)

<div class="topic-metadata">

**Author:** [@Crazyinfin8](https://discourse.processing.org/u/Crazyinfin8)\
**Replies:** 2\
**Last updated:** [July 10, 2018, 1:42am UTC](https://discourse.processing.org/t/guidance-on-releasing-new-processing-like-library/1629 "2018-07-10T01:42:42Z")

</div>

Recently I thought it would be a cool idea to create a library based on Processing for the Haxe programming language. So far its actually going quite smoothly! Anyway… I was wondering what may be the best approach to re…

---

## [Multitouch sound keyboard](https://discourse.processing.org/t/multitouch-sound-keyboard/1612)

<div class="topic-metadata">

**Author:** [@Carpece](https://discourse.processing.org/u/Carpece)\
**Replies:** 1\
**Last updated:** [July 9, 2018, 10:06am UTC](https://discourse.processing.org/t/multitouch-sound-keyboard/1612 "2018-07-09T10:06:34Z")

</div>

Hi, I’m trying to create a keyboard to play some oscillators, but I thought it could managed multitouch (in case I open the URL on a mobile device, for example), but no… Any suggestion? Thanks in advance var song, est…

---

## [P5js change checkbox size](https://discourse.processing.org/t/p5js-change-checkbox-size/1567)

<div class="topic-metadata">

**Author:** [@Grimtin10](https://discourse.processing.org/u/Grimtin10)\
**Replies:** 1\
**Last updated:** [July 7, 2018, 11:26am UTC](https://discourse.processing.org/t/p5js-change-checkbox-size/1567 "2018-07-07T11:26:41Z")

</div>

I’m using the .size() function but it isn’t doing anything. I need my checkbox to be bigger, any help? -Grim

---

## [Zooming in p5.play](https://discourse.processing.org/t/zooming-in-p5-play/1464)

<div class="topic-metadata">

**Author:** [@codingking03](https://discourse.processing.org/u/codingking03)\
**Replies:** 3\
**Last updated:** [July 6, 2018, 8:05pm UTC](https://discourse.processing.org/t/zooming-in-p5-play/1464 "2018-07-06T20:05:42Z")

</div>

See p5.play In p5.play there is a camera function that allows the user to move around what part of the sketch they are looking at. I figured out that even when the camera is moved the mouseX/mouseY are still relative to…

---

## [P5.sound with external soundcard input?](https://discourse.processing.org/t/p5-sound-with-external-soundcard-input/1558)

<div class="topic-metadata">

**Author:** [@MrsGolfShorts](https://discourse.processing.org/u/MrsGolfShorts)\
**Replies:** 1\
**Last updated:** [July 6, 2018, 7:20pm UTC](https://discourse.processing.org/t/p5-sound-with-external-soundcard-input/1558 "2018-07-06T19:20:50Z")

</div>

Is it possible to use p5.js with an external soundcard input? The only option I see if for built-in mic input.

---

## [Loading data from JSON without arrays](https://discourse.processing.org/t/loading-data-from-json-without-arrays/1557)

<div class="topic-metadata">

**Author:** [@Olygamy](https://discourse.processing.org/u/Olygamy)\
**Replies:** 1\
**Last updated:** [July 6, 2018, 6:50pm UTC](https://discourse.processing.org/t/loading-data-from-json-without-arrays/1557 "2018-07-06T18:50:51Z")

</div>

Hi there, I am working with API which give me JSON in this format: {“OBJECT NAME”: {“OBJECT.NAME#VAR112” : { “data01”: “BJECT.NAME#VAR112”, “data02”: “T-9F50. Serial Number: PI040298AA3I003620”, “data03”: “Grow.Thin…

---

## [External input for microphone record](https://discourse.processing.org/t/external-input-for-microphone-record/1356)

<div class="topic-metadata">

**Author:** [@Adiraek](https://discourse.processing.org/u/Adiraek)\
**Replies:** 7\
**Last updated:** [July 6, 2018, 9:21am UTC](https://discourse.processing.org/t/external-input-for-microphone-record/1356 "2018-07-06T09:21:09Z")

</div>

Hi, I am currently implementing a central raspberry pi 3B that collects acoustic noise data from another device which has a mic via BLE. I am currently using node.js, noble to retreive the data. Currently the sound info…

---

## [Demo with gameLibZeroJS por p5.js](https://discourse.processing.org/t/demo-with-gamelibzerojs-por-p5-js/1537)

<div class="topic-metadata">

**Author:** [@erkosone](https://discourse.processing.org/u/erkosone)\
**Replies:** 0\
**Last updated:** [July 6, 2018, 4:57am UTC](https://discourse.processing.org/t/demo-with-gamelibzerojs-por-p5-js/1537 "2018-07-06T04:57:43Z")

</div>

Hi people, y decide to share a Sonic example made with p5.js and gameLibZeroJS for p5. Enjoy :wink: Open example with brackets and enjoy it!, In a short time I will publish the complete library with examples

---

## [Rita.js kwic - get keyword HTML (meta)info](https://discourse.processing.org/t/rita-js-kwic-get-keyword-html-meta-info/774)

<div class="topic-metadata">

**Author:** [@catarinalee](https://discourse.processing.org/u/catarinalee)\
**Replies:** 0\
**Last updated:** [June 7, 2018, 3:44pm UTC](https://discourse.processing.org/t/rita-js-kwic-get-keyword-html-meta-info/774 "2018-06-07T15:44:25Z")

</div>

This problem is resolved

---

## [Running p5.js sketch error](https://discourse.processing.org/t/running-p5-js-sketch-error/1492)

<div class="topic-metadata">

**Author:** [@ville2008](https://discourse.processing.org/u/ville2008)\
**Replies:** 3\
**Last updated:** [July 4, 2018, 2:27pm UTC](https://discourse.processing.org/t/running-p5-js-sketch-error/1492 "2018-07-04T14:27:45Z")

</div>

when i try to launch my sketch (P5.JS libarary used) i get this error in the console: java.lang.NullPointerException at processing.mode.p5js.p5jsBuild.updateHtml(p5jsBuild.java:103) at processing.mode.p5js.p5jsEditor.…

---

## [Want to replace text with new element instead of adding a new element](https://discourse.processing.org/t/want-to-replace-text-with-new-element-instead-of-adding-a-new-element/1458)

<div class="topic-metadata">

**Author:** [@LWoodall](https://discourse.processing.org/u/LWoodall)\
**Replies:** 2\
**Last updated:** [July 3, 2018, 12:16pm UTC](https://discourse.processing.org/t/want-to-replace-text-with-new-element-instead-of-adding-a-new-element/1458 "2018-07-03T12:16:16Z")

</div>

Hi i’m trying to make a random message generator using data from a JSON file https://github.com/dariusk/corpora/blob/master/data/games/dark\_souls\_iii\_messages.json Here’s what i’ve got so far. I can get the buttons to a…

---

## [Frame grabbing from youtube video source](https://discourse.processing.org/t/frame-grabbing-from-youtube-video-source/1394)

<div class="topic-metadata">

**Author:** [@blakec](https://discourse.processing.org/u/blakec)\
**Replies:** 1\
**Last updated:** [July 1, 2018, 4:04am UTC](https://discourse.processing.org/t/frame-grabbing-from-youtube-video-source/1394 "2018-07-01T04:04:06Z")

</div>

Hi there, Is there a way to use a Youtube streaming video in p5.js? I’d like to grab the video frame by frame, do a bit of processing on each frame and draw them on screen. Many thanks, Blake

---

## [Ellipse from foci](https://discourse.processing.org/t/ellipse-from-foci/1386)

<div class="topic-metadata">

**Author:** [@codingking03](https://discourse.processing.org/u/codingking03)\
**Replies:** 2\
**Last updated:** [June 30, 2018, 4:33pm UTC](https://discourse.processing.org/t/ellipse-from-foci/1386 "2018-06-30T16:33:36Z")

</div>

Is there any way to draw an ellipse from its foci? in the processing/p5.js library?

---

## [HashMap nodejs p5js](https://discourse.processing.org/t/hashmap-nodejs-p5js/1381)

<div class="topic-metadata">

**Author:** [@lmccandless](https://discourse.processing.org/u/lmccandless)\
**Replies:** 1\
**Last updated:** [June 30, 2018, 2:11pm UTC](https://discourse.processing.org/t/hashmap-nodejs-p5js/1381 "2018-06-30T14:11:47Z")

</div>

I’m coming from processing to p5js and looking for HashMap functionality. I’m using node.js and did npm install hashmap in my test sketch, doing var hm = new HashMap(); inside setup() prevents my sketch from working. N…

---

## [Question regarding beginShape() and endShape()](https://discourse.processing.org/t/question-regarding-beginshape-and-endshape/1374)

<div class="topic-metadata">

**Author:** [@Doodle\_Noodle](https://discourse.processing.org/u/Doodle_Noodle)\
**Replies:** 2\
**Last updated:** [June 30, 2018, 12:22am UTC](https://discourse.processing.org/t/question-regarding-beginshape-and-endshape/1374 "2018-06-30T00:22:01Z")

</div>

So, this is kind of strange to ask, but I’m relatively new to programming in general, and I was curious how it would be possible to translate a shape created using the beginShape() and endShape() functions. I’m working o…

---

## [Show Webcam Stream](https://discourse.processing.org/t/show-webcam-stream/1337)

<div class="topic-metadata">

**Author:** [@oligor77](https://discourse.processing.org/u/oligor77)\
**Replies:** 6\
**Last updated:** [June 29, 2018, 11:39pm UTC](https://discourse.processing.org/t/show-webcam-stream/1337 "2018-06-29T23:39:41Z")

</div>

Hi there, is there any way to display a webcam stream? The Video Element in the example shows only a way to display video files. Thanks a lot for a hint.

---

## [Hello P5 Video Volunteers Wanted!](https://discourse.processing.org/t/hello-p5-video-volunteers-wanted/1369)

<div class="topic-metadata">

**Author:** [@elginskye](https://discourse.processing.org/u/elginskye)\
**Replies:** 0\
**Last updated:** [June 29, 2018, 6:38pm UTC](https://discourse.processing.org/t/hello-p5-video-volunteers-wanted/1369 "2018-06-29T18:38:14Z")

</div>

Hello P5 Community! We are looking for a handful of volunteers for our new hello p5 trailer. Taking part is easy - you just have to video record yourself saying a few lines from a script using your phone camera/webcam.…

---

## [Can i use p5.js on my website?](https://discourse.processing.org/t/can-i-use-p5-js-on-my-website/1344)

<div class="topic-metadata">

**Author:** [@matosustak](https://discourse.processing.org/u/matosustak)\
**Replies:** 2\
**Last updated:** [June 28, 2018, 6:27pm UTC](https://discourse.processing.org/t/can-i-use-p5-js-on-my-website/1344 "2018-06-28T18:27:37Z")

</div>

Hello, I have a website where I want to use p5.js but the website has ads on it, and if yes please how I need to correctly credit it? Thanks for every reply.

---

## [Help with rotation stuff](https://discourse.processing.org/t/help-with-rotation-stuff/1173)

<div class="topic-metadata">

**Author:** [@CrispyCabot](https://discourse.processing.org/u/CrispyCabot)\
**Replies:** 6\
**Last updated:** [June 27, 2018, 7:31pm UTC](https://discourse.processing.org/t/help-with-rotation-stuff/1173 "2018-06-27T19:31:25Z")

</div>

I’ve been working on this a while and I just can’t figure it out. Bare bones, I am trying to detect if a point is inside a rotated rectangle. The starting values that I have is: Rotation amount in degrees Center point …

---

## [How draw a tiled image in p5.js?](https://discourse.processing.org/t/how-draw-a-tiled-image-in-p5-js/1255)

<div class="topic-metadata">

**Author:** [@erkosone](https://discourse.processing.org/u/erkosone)\
**Replies:** 4\
**Last updated:** [June 27, 2018, 4:50pm UTC](https://discourse.processing.org/t/how-draw-a-tiled-image-in-p5-js/1255 "2018-06-27T16:50:10Z")

</div>

Hi! I have a simple question… How i draw a cyclic y axis image on canvas?

---

## [To change the object shape characteristics](https://discourse.processing.org/t/to-change-the-object-shape-characteristics/1259)

<div class="topic-metadata">

**Author:** [@online](https://discourse.processing.org/u/online)\
**Replies:** 4\
**Last updated:** [June 27, 2018, 4:50am UTC](https://discourse.processing.org/t/to-change-the-object-shape-characteristics/1259 "2018-06-27T04:50:59Z")

</div>

Hi. Please tell me how to make the figure of the object and clicking on it with the mouse to change its characteristics ? In the documentation there is an example, but there is a mouse click focused on the position of th…

---

## [Updating a text file](https://discourse.processing.org/t/updating-a-text-file/1265)

<div class="topic-metadata">

**Author:** [@CrispyCabot](https://discourse.processing.org/u/CrispyCabot)\
**Replies:** 2\
**Last updated:** [June 26, 2018, 2:09pm UTC](https://discourse.processing.org/t/updating-a-text-file/1265 "2018-06-26T14:09:28Z")

</div>

So I am trying to make a scoreboard. I have done it before in regular processing, but I have just now realized that with p5js, it downloads the file rather than saving it to a folder, which I guess makes sense. So is the…

---

## [Drop() function working randomly](https://discourse.processing.org/t/drop-function-working-randomly/1244)

<div class="topic-metadata">

**Author:** [@colin](https://discourse.processing.org/u/colin)\
**Replies:** 6\
**Last updated:** [June 26, 2018, 9:08am UTC](https://discourse.processing.org/t/drop-function-working-randomly/1244 "2018-06-26T09:08:42Z")

</div>

Hi. I’m definitely having trouble to make my drag and drop function working. The sketch below grabs the image from the user but don’t manage to save it as a p5 image every time. I’m around 33% successful drops. Any idea…

---

## [Getting raspberry pi sensors to talk to p5.js](https://discourse.processing.org/t/getting-raspberry-pi-sensors-to-talk-to-p5-js/1156)

<div class="topic-metadata">

**Author:** [@alphydan](https://discourse.processing.org/u/alphydan)\
**Replies:** 4\
**Last updated:** [June 25, 2018, 9:29pm UTC](https://discourse.processing.org/t/getting-raspberry-pi-sensors-to-talk-to-p5-js/1156 "2018-06-25T21:29:42Z")

</div>

Question: What is the best way to get real time data from the Raspberry to influence a p5.js drawing? Context: I am running a coding + art project as a school teacher (With students aged 11 - 15). We have a couple of r…

---

## [P5.js communicating bubbles](https://discourse.processing.org/t/p5-js-communicating-bubbles/1201)

<div class="topic-metadata">

**Author:** [@anand](https://discourse.processing.org/u/anand)\
**Replies:** 8\
**Last updated:** [June 25, 2018, 3:51pm UTC](https://discourse.processing.org/t/p5-js-communicating-bubbles/1201 "2018-06-25T15:51:09Z")

</div>

I am rewriting my question on P5.js. The same I had asked on this video\[https://youtu.be/5Q9cA0REztY\] and Dan suggested me to post here. I tried to do the same example myself. I was able to achieve many things except on…

---

## [P5.js not displayed in my web site](https://discourse.processing.org/t/p5-js-not-displayed-in-my-web-site/1204)

<div class="topic-metadata">

**Author:** [@eli94](https://discourse.processing.org/u/eli94)\
**Replies:** 4\
**Last updated:** [June 24, 2018, 10:27pm UTC](https://discourse.processing.org/t/p5-js-not-displayed-in-my-web-site/1204 "2018-06-24T22:27:32Z")

</div>

Hi everybody, my professor chosen a p5.js from internet to do exercises with p5.js. This p5.js sketch is not displayed in my website but it is displayed and work very well separate from the website. I want to be more cl…

---

## [Trying to do fractal tree](https://discourse.processing.org/t/trying-to-do-fractal-tree/1207)

<div class="topic-metadata">

**Author:** [@Nanonnien](https://discourse.processing.org/u/Nanonnien)\
**Replies:** 0\
**Last updated:** [June 24, 2018, 4:18pm UTC](https://discourse.processing.org/t/trying-to-do-fractal-tree/1207 "2018-06-24T16:18:05Z")

</div>

Good morning, I started watching videos from The coding train channel and I’m trying to replicate his fractal tree. But in a slightly different way: Sketch.js var tree; var width\_canvas = 640; var height\_canvas = 400;…

---

## [How to get a folder fileList?](https://discourse.processing.org/t/how-to-get-a-folder-filelist/913)

<div class="topic-metadata">

**Author:** [@erkosone](https://discourse.processing.org/u/erkosone)\
**Replies:** 6\
**Last updated:** [June 24, 2018, 5:16am UTC](https://discourse.processing.org/t/how-to-get-a-folder-filelist/913 "2018-06-24T05:16:38Z")

</div>

Hi! I try to get a folder filelist for load images in batch with function… but don´t work… Any suggestion? function getDirectories(path) { var fs = require('fs'); var files = fs.readdirSync(path); console.…

---

## [P5js keywords/functions Syntax highlighting](https://discourse.processing.org/t/p5js-keywords-functions-syntax-highlighting/1160)

<div class="topic-metadata">

**Author:** [@CrispyCabot](https://discourse.processing.org/u/CrispyCabot)\
**Replies:** 13\
**Last updated:** [June 22, 2018, 8:18pm UTC](https://discourse.processing.org/t/p5js-keywords-functions-syntax-highlighting/1160 "2018-06-22T20:18:24Z")

</div>

So I have been using p5js in the desktop editor, but it is starting to annoy me that a lot of the p5js keywords and functions show up as just regular text. Is there any way I can manually add these keywords or is there a…

---

## [How to create p5 image from local user file?](https://discourse.processing.org/t/how-to-create-p5-image-from-local-user-file/1165)

<div class="topic-metadata">

**Author:** [@colin](https://discourse.processing.org/u/colin)\
**Replies:** 1\
**Last updated:** [June 22, 2018, 5:07pm UTC](https://discourse.processing.org/t/how-to-create-p5-image-from-local-user-file/1165 "2018-06-22T17:07:16Z")

</div>

Hi there, I’m working on a drag and drop p5 sketch, and it isn’t working so well. So far I managed to make the drag and drop function, but I cant’ manage to transform the image it get into p5.image objet. Anyone knows…

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

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