# p5.js

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

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

**Page:** 102

---

## [Collision with curved vertex](https://discourse.processing.org/t/collision-with-curved-vertex/7818)

<div class="topic-metadata">

**Author:** [@animofa](https://discourse.processing.org/u/animofa)\
**Replies:** 4\
**Last updated:** [January 28, 2019, 1:02am UTC](https://discourse.processing.org/t/collision-with-curved-vertex/7818 "2019-01-28T01:02:11Z")

</div>

Hello everyone, I am trying to make a simple game where one object is moving between to curvedVertexes. Now I want to add an event incase the object is colliding with the obstacles aka the curvedVertexes. I have found …

---

## [Ml5 style transfer using p5](https://discourse.processing.org/t/ml5-style-transfer-using-p5/7180)

<div class="topic-metadata">

**Author:** [@byou](https://discourse.processing.org/u/byou)\
**Replies:** 1\
**Last updated:** [January 27, 2019, 9:51pm UTC](https://discourse.processing.org/t/ml5-style-transfer-using-p5/7180 "2019-01-27T21:51:16Z")

</div>

Hello, I’m running into a strange problem when trying out the ml5 style transfer example and wonder if anyone might have any idea why. My models are being loaded and performing the transfer fine, but when I get the styl…

---

## [How to change the color of objects near mouse click location or add a new object on mouseClick in p5.js?](https://discourse.processing.org/t/how-to-change-the-color-of-objects-near-mouse-click-location-or-add-a-new-object-on-mouseclick-in-p5-js/7884)

<div class="topic-metadata">

**Author:** [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Replies:** 0\
**Last updated:** [January 27, 2019, 5:00pm UTC](https://discourse.processing.org/t/how-to-change-the-color-of-objects-near-mouse-click-location-or-add-a-new-object-on-mouseclick-in-p5-js/7884 "2019-01-27T17:00:08Z")

</div>

Hi, I have an array of ellipse object as below, and intend to change the color of ellipses near the mouse click, but the mouseIsPressed portion of code is not working. What could have gone wrong? Thanks in advance for an…

---

## [Use the audiocontext as audio input in p5.js](https://discourse.processing.org/t/use-the-audiocontext-as-audio-input-in-p5-js/7879)

<div class="topic-metadata">

**Author:** [@rob1](https://discourse.processing.org/u/rob1)\
**Replies:** 0\
**Last updated:** [January 27, 2019, 2:20pm UTC](https://discourse.processing.org/t/use-the-audiocontext-as-audio-input-in-p5-js/7879 "2019-01-27T14:20:23Z")

</div>

I am implementing a syntheziser wich uses the nodes of the audio-api to generate sound and my goal is to visualize it using p5. I currently have a script that analyzes audio with fft and visualizes the frequencies with …

---

## [Need review on some pull requests](https://discourse.processing.org/t/need-review-on-some-pull-requests/7857)

<div class="topic-metadata">

**Author:** [@sanketsingh24](https://discourse.processing.org/u/sanketsingh24)\
**Replies:** 0\
**Last updated:** [January 26, 2019, 12:55pm UTC](https://discourse.processing.org/t/need-review-on-some-pull-requests/7857 "2019-01-26T12:55:57Z")

</div>

So, I was just trying to contribute to my favorite library, and submitted two PRs two days ago, one is a simple bugfix, while the other is about a feature which I thought to be missing from p5.js as of now. So, If someon…

---

## [How to use Google fonts in P5JS online editor](https://discourse.processing.org/t/how-to-use-google-fonts-in-p5js-online-editor/6893)

<div class="topic-metadata">

**Author:** [@shlomyli](https://discourse.processing.org/u/shlomyli)\
**Replies:** 9\
**Last updated:** [January 26, 2019, 5:33am UTC](https://discourse.processing.org/t/how-to-use-google-fonts-in-p5js-online-editor/6893 "2019-01-26T05:33:20Z")

</div>

Hi, I have encountered this short video which explains how to manipulate the “index.html” and “style.css” in order to be load use Google fonts. Hope that helps Shlomi

---

## [Gradients on p5.js?](https://discourse.processing.org/t/gradients-on-p5-js/7555)

<div class="topic-metadata">

**Author:** [@davidjj](https://discourse.processing.org/u/davidjj)\
**Replies:** 3\
**Last updated:** [January 26, 2019, 3:58am UTC](https://discourse.processing.org/t/gradients-on-p5-js/7555 "2019-01-26T03:58:13Z")

</div>

Gradients are a pretty standard feature of HTML5 canvas: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient And using straight javascript (actually this example is typescript)…

---

## [Trying to get p5.sound library to work with Observable](https://discourse.processing.org/t/trying-to-get-p5-sound-library-to-work-with-observable/7825)

<div class="topic-metadata">

**Author:** [@Job](https://discourse.processing.org/u/Job)\
**Replies:** 0\
**Last updated:** [January 25, 2019, 12:14am UTC](https://discourse.processing.org/t/trying-to-get-p5-sound-library-to-work-with-observable/7825 "2019-01-25T00:14:59Z")

</div>

So for this weekend’s Global Game Jam, I was thinking of using Observable together with p5.js for an easy developer environment. With a little help from Mike Bostock I now have a neat little notebook template for a basic…

---

## [Getting p5.gif.js working in the p5.js web editor](https://discourse.processing.org/t/getting-p5-gif-js-working-in-the-p5-js-web-editor/7787)

<div class="topic-metadata">

**Author:** [@jgl](https://discourse.processing.org/u/jgl)\
**Replies:** 2\
**Last updated:** [January 24, 2019, 4:44pm UTC](https://discourse.processing.org/t/getting-p5-gif-js-working-in-the-p5-js-web-editor/7787 "2019-01-24T16:44:13Z")

</div>

Hi All, I’m trying to get the example here: Working in the p5.js web editor. You can see it not running here: https://editor.p5js.org/jgl/sketches/xpBHHsWz9 It’s currently erroring with: “InvalidStateError: An att…

---

## [Trimming Audio File Using P5.js](https://discourse.processing.org/t/trimming-audio-file-using-p5-js/7731)

<div class="topic-metadata">

**Author:** [@ahmedali](https://discourse.processing.org/u/ahmedali)\
**Replies:** 3\
**Last updated:** [January 24, 2019, 5:50am UTC](https://discourse.processing.org/t/trimming-audio-file-using-p5-js/7731 "2019-01-24T05:50:46Z")

</div>

Hi I have a question that can I trim the audio file that I recorded using p5.js?. I had to trim the first 3 seconds of my recorded file.May you help me.I will be very thankful to all of you after this act of kindness, Th…

---

## [Getting a sketch to load between two images on a web page](https://discourse.processing.org/t/getting-a-sketch-to-load-between-two-images-on-a-web-page/7734)

<div class="topic-metadata">

**Author:** [@akathewb](https://discourse.processing.org/u/akathewb)\
**Replies:** 2\
**Last updated:** [January 23, 2019, 2:53am UTC](https://discourse.processing.org/t/getting-a-sketch-to-load-between-two-images-on-a-web-page/7734 "2019-01-23T02:53:40Z")

</div>

I’d like the script with the sketch.js to load between the two images, but it keeps loading at the end of the two images. Just learning HTML so any help would be great! Thanks! Web page: http://www.abunchoffailures.com…

---

## [Weird behaviour with loadPixels() and updatePixels()](https://discourse.processing.org/t/weird-behaviour-with-loadpixels-and-updatepixels/7741)

<div class="topic-metadata">

**Author:** [@Kazuya\_Yoshimisu](https://discourse.processing.org/u/Kazuya_Yoshimisu)\
**Replies:** 2\
**Last updated:** [January 22, 2019, 4:20pm UTC](https://discourse.processing.org/t/weird-behaviour-with-loadpixels-and-updatepixels/7741 "2019-01-22T16:20:03Z")

</div>

Hi everyone, I got this very short sample of code where for each pixel of my canvas I draw a shade of grey: function setup() { createCanvas(200,200) background(0) loadPixels() for(var y = 0; y \< height; y++) fo…

---

## [Issue with loadJSON](https://discourse.processing.org/t/issue-with-loadjson/7682)

<div class="topic-metadata">

**Author:** [@aliser](https://discourse.processing.org/u/aliser)\
**Replies:** 3\
**Last updated:** [January 21, 2019, 7:21am UTC](https://discourse.processing.org/t/issue-with-loadjson/7682 "2019-01-21T07:21:20Z")

</div>

How to use it for example with wikipedia api? On the request loadJSON("https://en.wikipedia.org/w/api.php?action=opensearch&search=unicorn, gotData, 'jsonp') I get a response in the form Uncaught (in promise) TypeErro…

---

## [How can the following example be fully written out?](https://discourse.processing.org/t/how-can-the-following-example-be-fully-written-out/7707)

<div class="topic-metadata">

**Author:** [@anon98404100](https://discourse.processing.org/u/anon98404100)\
**Replies:** 3\
**Last updated:** [January 21, 2019, 7:18pm UTC](https://discourse.processing.org/t/how-can-the-following-example-be-fully-written-out/7707 "2019-01-21T19:18:04Z")

</div>

Slight heads-up: The following code was code from earlier in the day and doesn’t work properly, however, there is a small piece of code in there I would like to get some explanation of. Also sorry if the question is kind…

---

## [Function KeyPressed](https://discourse.processing.org/t/function-keypressed/7676)

<div class="topic-metadata">

**Author:** [@Awazez](https://discourse.processing.org/u/Awazez)\
**Replies:** 4\
**Last updated:** [January 20, 2019, 2:40pm UTC](https://discourse.processing.org/t/function-keypressed/7676 "2019-01-20T14:40:54Z")

</div>

Hi ! I’m quite new in javascript and I tried to program a Flappy bird with the coding train video. I did a function named KeyPressed function KeyPressed () { if (key == "") { console.log("SPACE"); } } But it’…

---

## [Can't use line() and loadPixels()](https://discourse.processing.org/t/cant-use-line-and-loadpixels/7620)

<div class="topic-metadata">

**Author:** [@NirDafnai](https://discourse.processing.org/u/NirDafnai)\
**Replies:** 5\
**Last updated:** [January 19, 2019, 5:16pm UTC](https://discourse.processing.org/t/cant-use-line-and-loadpixels/7620 "2019-01-19T17:16:44Z")

</div>

function setup() { let c = createCanvas(600, 600); c.parent('canvasParent'); pixelDensity(1); background(255); loadPixels(); } function mouseDragged() { if(mouseButton == LEFT) { strokeWeight(30); stroke(200,…

---

## [video.loadPixels() does not seem to work](https://discourse.processing.org/t/video-loadpixels-does-not-seem-to-work/7225)

<div class="topic-metadata">

**Author:** [@rjsan](https://discourse.processing.org/u/rjsan)\
**Replies:** 3\
**Last updated:** [January 19, 2019, 4:37pm UTC](https://discourse.processing.org/t/video-loadpixels-does-not-seem-to-work/7225 "2019-01-19T16:37:20Z")

</div>

Hi all! I did a lot of code dabbling on this video capture tutorial sometime around 2017 : https://www.youtube.com/watch?v=rNqaw8LT2ZU using p5js version v0.5.11 . All seem to work even around early 2018 but when i rev…

---

## [Problem camera when running on Windows](https://discourse.processing.org/t/problem-camera-when-running-on-windows/7417)

<div class="topic-metadata">

**Author:** [@codnpix](https://discourse.processing.org/u/codnpix)\
**Replies:** 3\
**Last updated:** [January 19, 2019, 1:59pm UTC](https://discourse.processing.org/t/problem-camera-when-running-on-windows/7417 "2019-01-19T13:59:14Z")

</div>

Hello, I developed this little game at school with p5js and P5playJS libraries. The game works globally fine but I got many bug reports from people trying to running it with a Windows computer : The camera doesn’t follo…

---

## [Sliders in For Loops](https://discourse.processing.org/t/sliders-in-for-loops/7629)

<div class="topic-metadata">

**Author:** [@PringleCanMan](https://discourse.processing.org/u/PringleCanMan)\
**Replies:** 1\
**Last updated:** [January 18, 2019, 11:08pm UTC](https://discourse.processing.org/t/sliders-in-for-loops/7629 "2019-01-18T23:08:28Z")

</div>

Hello, I am currently working on a small idea here. It involves ellipses that move across the canvas and are put in an array. A constructor function makes the ellipses with random x, y, and speed. I am trying to adjust t…

---

## [How to make objects interact-able?](https://discourse.processing.org/t/how-to-make-objects-interact-able/7574)

<div class="topic-metadata">

**Author:** [@Trey](https://discourse.processing.org/u/Trey)\
**Replies:** 1\
**Last updated:** [January 17, 2019, 5:25pm UTC](https://discourse.processing.org/t/how-to-make-objects-interact-able/7574 "2019-01-17T17:25:20Z")

</div>

So I’m making a escape room style game for a school class but i have no real idea how to make it work properly. I have a ton of classes for different objects that i can place in different parts of the room, but i need t…

---

## [Muting p5 sound, while still receiving data](https://discourse.processing.org/t/muting-p5-sound-while-still-receiving-data/3475)

<div class="topic-metadata">

**Author:** [@elginskye](https://discourse.processing.org/u/elginskye)\
**Replies:** 1\
**Last updated:** [January 17, 2019, 3:13pm UTC](https://discourse.processing.org/t/muting-p5-sound-while-still-receiving-data/3475 "2019-01-17T15:13:35Z")

</div>

Hi, I’m wondering if it’s possible using the p5 sound library to get data from an mp3 file, using fft.analyze();, but then prevent the actual audio file from being output through the computer speakers. The reason: I …

---

## [Need to connect IP cam with p5.js](https://discourse.processing.org/t/need-to-connect-ip-cam-with-p5-js/7587)

<div class="topic-metadata">

**Author:** [@Cheshta](https://discourse.processing.org/u/Cheshta)\
**Replies:** 0\
**Last updated:** [January 17, 2019, 10:20am UTC](https://discourse.processing.org/t/need-to-connect-ip-cam-with-p5-js/7587 "2019-01-17T10:20:42Z")

</div>

Hi everyone. I’m trying to connect the IP camera instead of droidcam/webcam in sketch.js (posenet-webcam) How can I use the same ?

---

## [Save Images and Train them and get results](https://discourse.processing.org/t/save-images-and-train-them-and-get-results/7581)

<div class="topic-metadata">

**Author:** [@ankit](https://discourse.processing.org/u/ankit)\
**Replies:** 0\
**Last updated:** [January 17, 2019, 7:14am UTC](https://discourse.processing.org/t/save-images-and-train-them-and-get-results/7581 "2019-01-17T07:14:43Z")

</div>

We are using ‘imageClassifier’ and ‘featureExtractor’ methods to recognize images using ml5-library and p5.js. We have successfully recognized the images with your Pre-trained model. We are successfully implemented feat…

---

## [JSON - generating a random value from a certain section with mousePressed()](https://discourse.processing.org/t/json-generating-a-random-value-from-a-certain-section-with-mousepressed/7558)

<div class="topic-metadata">

**Author:** [@anon98404100](https://discourse.processing.org/u/anon98404100)\
**Replies:** 4\
**Last updated:** [January 16, 2019, 11:53am UTC](https://discourse.processing.org/t/json-generating-a-random-value-from-a-certain-section-with-mousepressed/7558 "2019-01-16T11:53:53Z")

</div>

Working with JSON files - I have to recall a certain value with mousePressed() in a specific category. In my code you have the following code : var chuckData; function setup () { createCanvas (displayWidth, 500); …

---

## [First Time Contributing to some open source](https://discourse.processing.org/t/first-time-contributing-to-some-open-source/7539)

<div class="topic-metadata">

**Author:** [@mynk](https://discourse.processing.org/u/mynk)\
**Replies:** 2\
**Last updated:** [January 15, 2019, 8:00pm UTC](https://discourse.processing.org/t/first-time-contributing-to-some-open-source/7539 "2019-01-15T20:00:30Z")

</div>

Hi wonderful people, I have never contributed to an Open Source project, i cloned the p5.js repo, looking at the code and i was kind of confused, I got overwhelmed looking at the huge (at least from my point of view) cod…

---

## [Custom fonts slowing down my program](https://discourse.processing.org/t/custom-fonts-slowing-down-my-program/7081)

<div class="topic-metadata">

**Author:** [@Kazuya\_Yoshimisu](https://discourse.processing.org/u/Kazuya_Yoshimisu)\
**Replies:** 4\
**Last updated:** [January 15, 2019, 7:57pm UTC](https://discourse.processing.org/t/custom-fonts-slowing-down-my-program/7081 "2019-01-15T19:57:05Z")

</div>

Hello everyone, So I’m making a project in p5.js which aim to reproduce the Matrix rain code effect. It ran pretty smooth until I decided to load a custom font. When I did, my framerate dropped considerably. And it’s …

---

## [Platformer game screen is constantly moving down](https://discourse.processing.org/t/platformer-game-screen-is-constantly-moving-down/7548)

<div class="topic-metadata">

**Author:** [@Timpupk](https://discourse.processing.org/u/Timpupk)\
**Replies:** 2\
**Last updated:** [January 15, 2019, 6:44pm UTC](https://discourse.processing.org/t/platformer-game-screen-is-constantly-moving-down/7548 "2019-01-15T18:44:19Z")

</div>

The screen is constantly moving down anybody see any way to fix it? https://editor.p5js.org/Timpupk/sketches/Hy1vHJFy4

---

## [Can we use image instead of video in createCapture() to add Images in dataset](https://discourse.processing.org/t/can-we-use-image-instead-of-video-in-createcapture-to-add-images-in-dataset/7515)

<div class="topic-metadata">

**Author:** [@ankit](https://discourse.processing.org/u/ankit)\
**Replies:** 0\
**Last updated:** [January 14, 2019, 6:03pm UTC](https://discourse.processing.org/t/can-we-use-image-instead-of-video-in-createcapture-to-add-images-in-dataset/7515 "2019-01-14T18:03:23Z")

</div>

Hi, We are using FeatureExtraction to get classification and regression since it using video = createCapture(VIDEO); so can we use images in place of video to add our images in the dataset and also want to train that i…

---

## [My p5 script takes a lot of time to start on server](https://discourse.processing.org/t/my-p5-script-takes-a-lot-of-time-to-start-on-server/7502)

<div class="topic-metadata">

**Author:** [@sr\_ciruelo](https://discourse.processing.org/u/sr_ciruelo)\
**Replies:** 0\
**Last updated:** [January 14, 2019, 1:01pm UTC](https://discourse.processing.org/t/my-p5-script-takes-a-lot-of-time-to-start-on-server/7502 "2019-01-14T13:01:05Z")

</div>

So the problem is that when I run my web page with p5 sketch in my PC it takes no time to run and when I try to get into my web page it takes a lot of time. I’m using defer parsing to load p5 scripts and they are the fir…

---

## [Equivalent to PGraphics g in p5.js?](https://discourse.processing.org/t/equivalent-to-pgraphics-g-in-p5-js/7463)

<div class="topic-metadata">

**Author:** [@figraham](https://discourse.processing.org/u/figraham)\
**Replies:** 4\
**Last updated:** [January 13, 2019, 5:24pm UTC](https://discourse.processing.org/t/equivalent-to-pgraphics-g-in-p5-js/7463 "2019-01-13T17:24:55Z")

</div>

Something I’ve done in Processing is create a function that has an optional PGraphics argument by utilizing the g PGraphics in PApplet. Like: void showEllipse() { showEllipse(g); // when in PApplet // showEllipse(ap…

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

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