# p5.js

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

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

**Page:** 56

---

## [How do I load and image in p5js for html?](https://discourse.processing.org/t/how-do-i-load-and-image-in-p5js-for-html/26120)

<div class="topic-metadata">

**Author:** [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Replies:** 10\
**Last updated:** [December 10, 2020, 10:07pm UTC](https://discourse.processing.org/t/how-do-i-load-and-image-in-p5js-for-html/26120 "2020-12-10T22:07:12Z")

</div>

It’s hard to explain but basically, I have a project which includes an image and I want to make an Html website that runs the p5js code. I already got the website set up and the code, but when I run it the image doesn’t …

---

## [p5js有没有离线版？Is there an offline version？](https://discourse.processing.org/t/p5js-is-there-an-offline-version/26075)

<div class="topic-metadata">

**Author:** [@hellop5](https://discourse.processing.org/u/hellop5)\
**Replies:** 1\
**Last updated:** [December 9, 2020, 11:02am UTC](https://discourse.processing.org/t/p5js-is-there-an-offline-version/26075 "2020-12-09T11:02:47Z")

</div>

有没有像processing那样的离线版？ 不知道是不是网络原因，访问p5js官网太费劲了，网页无响应。求助

---

## [How to split string into words but saving the initial word position](https://discourse.processing.org/t/how-to-split-string-into-words-but-saving-the-initial-word-position/26045)

<div class="topic-metadata">

**Author:** [@jgsantos](https://discourse.processing.org/u/jgsantos)\
**Replies:** 4\
**Last updated:** [December 8, 2020, 7:03pm UTC](https://discourse.processing.org/t/how-to-split-string-into-words-but-saving-the-initial-word-position/26045 "2020-12-08T19:03:11Z")

</div>

Hi! I want to build a sketch where I draw text to the screen as it normally works, as a block of text, but then I want each word to behave separately. At first, I thought it would be easy, just using the spliString funct…

---

## [Why is my result stretched?](https://discourse.processing.org/t/why-is-my-result-stretched/26051)

<div class="topic-metadata">

**Author:** [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Replies:** 2\
**Last updated:** [December 8, 2020, 5:33pm UTC](https://discourse.processing.org/t/why-is-my-result-stretched/26051 "2020-12-08T17:33:57Z")

</div>

https://www.openprocessing.org/sketch/1037242 here is my code and this is the tutorial I followed https://www.youtube.com/watch?v=rNqaw8LT2ZU and this is the original image

---

## [How do I resize a loaded image file like you can with video capture?](https://discourse.processing.org/t/how-do-i-resize-a-loaded-image-file-like-you-can-with-video-capture/26047)

<div class="topic-metadata">

**Author:** [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Replies:** 1\
**Last updated:** [December 8, 2020, 1:30pm UTC](https://discourse.processing.org/t/how-do-i-resize-a-loaded-image-file-like-you-can-with-video-capture/26047 "2020-12-08T13:30:31Z")

</div>

How do I change the size of an image like a video capture. I want to do the same as in this video by the coding train but instead, load an image, not a video capture.

---

## [Is it possible to access html elements contained in an iframe?](https://discourse.processing.org/t/is-it-possible-to-access-html-elements-contained-in-an-iframe/26030)

<div class="topic-metadata">

**Author:** [@Bassam](https://discourse.processing.org/u/Bassam)\
**Replies:** 1\
**Last updated:** [December 8, 2020, 3:10am UTC](https://discourse.processing.org/t/is-it-possible-to-access-html-elements-contained-in-an-iframe/26030 "2020-12-08T03:10:04Z")

</div>

I want to access the form data of an html page that is displayed in an iframe from within sketch.js. Is this possible? Fullscreen view https://editor.p5js.org/Bassam/full/mwQs-ReOk Code https://editor.p5js.org/Bassam/…

---

## [Image to sine waves](https://discourse.processing.org/t/image-to-sine-waves/25938)

<div class="topic-metadata">

**Author:** [@blaueblume](https://discourse.processing.org/u/blaueblume)\
**Replies:** 6\
**Last updated:** [December 6, 2020, 8:24pm UTC](https://discourse.processing.org/t/image-to-sine-waves/25938 "2020-12-06T20:24:33Z")

</div>

Hello lovely community! I’m working on an p5.js algorithm to transform an image to sine waves, where the amplitude should visualize the grey level of the respective pixel. In my current solution I’m iterating over ever…

---

## [How to use Sound in P5.js Instance Mode](https://discourse.processing.org/t/how-to-use-sound-in-p5-js-instance-mode/25999)

<div class="topic-metadata">

**Author:** [@jgsantos](https://discourse.processing.org/u/jgsantos)\
**Replies:** 3\
**Last updated:** [December 6, 2020, 7:54pm UTC](https://discourse.processing.org/t/how-to-use-sound-in-p5-js-instance-mode/25999 "2020-12-06T19:54:05Z")

</div>

Hi! I’m trying to make a website with multiple p5 canvases on the same page, so, after a lot of research, I came to the conclusion that the most adequate way to do that is by using instance mode. I spent the whole day tr…

---

## [How do I make variations of variables?](https://discourse.processing.org/t/how-do-i-make-variations-of-variables/25936)

<div class="topic-metadata">

**Author:** [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Replies:** 19\
**Last updated:** [December 5, 2020, 4:47pm UTC](https://discourse.processing.org/t/how-do-i-make-variations-of-variables/25936 "2020-12-05T16:47:20Z")

</div>

stay with me but u know these brackets \[\] sometimes in other’s code I see it before the variable and idk what it does but I think it means you can have many variables that mean are the same in value but not exactly the s…

---

## [Text input division](https://discourse.processing.org/t/text-input-division/25942)

<div class="topic-metadata">

**Author:** [@Hamsoon22](https://discourse.processing.org/u/Hamsoon22)\
**Replies:** 2\
**Last updated:** [December 5, 2020, 10:13am UTC](https://discourse.processing.org/t/text-input-division/25942 "2020-12-05T10:13:41Z")

</div>

Hi! I am new here. I am now creating a text input and output. I could show the text input on the screen but I don’t know how can I divide the text and just go to the next line automatically. (Because the text input wil…

---

## [Drawing with text to points](https://discourse.processing.org/t/drawing-with-text-to-points/24210)

<div class="topic-metadata">

**Author:** [@GreenCell](https://discourse.processing.org/u/GreenCell)\
**Replies:** 2\
**Last updated:** [December 5, 2020, 12:27am UTC](https://discourse.processing.org/t/drawing-with-text-to-points/24210 "2020-12-05T00:27:26Z")

</div>

Hi! I’m using font’s textToPoints method so later on I can manipulate the points the deform the text, but I have 3 issues. I’m absolutely not asking for complete code here, just ideas that I can try out. I sort of so…

---

## [P5.js highPass is not working as expected](https://discourse.processing.org/t/p5-js-highpass-is-not-working-as-expected/25950)

<div class="topic-metadata">

**Author:** [@exactspace](https://discourse.processing.org/u/exactspace)\
**Replies:** 0\
**Last updated:** [December 4, 2020, 6:46pm UTC](https://discourse.processing.org/t/p5-js-highpass-is-not-working-as-expected/25950 "2020-12-04T18:46:53Z")

</div>

I thought highPass would only let frequencies pass above a set frequency. For example, if I have a tone at 1000 Hz, and I set the high pass 18000, I still hear frequencies well below 18000 Hz. It changes the sound overa…

---

## [Fixed position with createGraphics](https://discourse.processing.org/t/fixed-position-with-creategraphics/25887)

<div class="topic-metadata">

**Author:** [@juju](https://discourse.processing.org/u/juju)\
**Replies:** 12\
**Last updated:** [December 4, 2020, 10:22am UTC](https://discourse.processing.org/t/fixed-position-with-creategraphics/25887 "2020-12-04T10:22:15Z")

</div>

wanna create an always on top fixed position ellipse with createGraphics without being scrolled out of screen, tried position(0,0,'fixed'); but doesn’t work, code below, ideas? thanks. let dot; function setup() { cre…

---

## [How to put github dependencyob p5.js](https://discourse.processing.org/t/how-to-put-github-dependencyob-p5-js/25915)

<div class="topic-metadata">

**Author:** [@jumbleview](https://discourse.processing.org/u/jumbleview)\
**Replies:** 2\
**Last updated:** [December 3, 2020, 8:11pm UTC](https://discourse.processing.org/t/how-to-put-github-dependencyob-p5-js/25915 "2020-12-03T20:11:15Z")

</div>

I am new to p5.js (my experience with JavaScript is very limited as well). I am going to create public guthub repository with sketch and I would like that anybody who clone it will have the ability to run it. That would…

---

## [How do I make a 2 dimensional array?](https://discourse.processing.org/t/how-do-i-make-a-2-dimensional-array/25934)

<div class="topic-metadata">

**Author:** [@MisledWater079](https://discourse.processing.org/u/MisledWater079)\
**Replies:** 3\
**Last updated:** [December 3, 2020, 5:05pm UTC](https://discourse.processing.org/t/how-do-i-make-a-2-dimensional-array/25934 "2020-12-03T17:05:46Z")

</div>

I’m watching a Coding Train video “ Coding Challenge #11: 3D Terrain Generation with Perlin Noise in Processing” and he uses float\[\]\[\]; and it doesn’t work on p5.js and I was wondering if they changed it and what I can u…

---

## [Why do I get the min can only expected only 2 argument but received 4 even though it works like a dream?](https://discourse.processing.org/t/why-do-i-get-the-min-can-only-expected-only-2-argument-but-received-4-even-though-it-works-like-a-dream/25896)

<div class="topic-metadata">

**Author:** [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Replies:** 3\
**Last updated:** [December 2, 2020, 8:01pm UTC](https://discourse.processing.org/t/why-do-i-get-the-min-can-only-expected-only-2-argument-but-received-4-even-though-it-works-like-a-dream/25896 "2020-12-02T20:01:01Z")

</div>

I made a function that rounds numbers to the nearest number of your choice using dist and min, whenever the program does the min math it tells me that min can only receive 2 arguments, but it still works? It’s not a prob…

---

## [P5 node server with socket.io and websocket protocoll](https://discourse.processing.org/t/p5-node-server-with-socket-io-and-websocket-protocoll/25871)

<div class="topic-metadata">

**Author:** [@Theo68](https://discourse.processing.org/u/Theo68)\
**Replies:** 0\
**Last updated:** [December 1, 2020, 6:48pm UTC](https://discourse.processing.org/t/p5-node-server-with-socket-io-and-websocket-protocoll/25871 "2020-12-01T18:48:12Z")

</div>

I have created a P5 server node with socket.io. at locahost: 4000. I can also connect to it from the wifi network of my devices ( laptop, mobile). Can I integrate websocket protocol for communication with esp32 device i…

---

## [Applying Specific Colors to Grid Array](https://discourse.processing.org/t/applying-specific-colors-to-grid-array/25852)

<div class="topic-metadata">

**Author:** [@NeatCoder47](https://discourse.processing.org/u/NeatCoder47)\
**Replies:** 4\
**Last updated:** [December 1, 2020, 11:18am UTC](https://discourse.processing.org/t/applying-specific-colors-to-grid-array/25852 "2020-12-01T11:18:54Z")

</div>

Hi! I’m brand new to coding with P5JS and I need some help. I’m currently taking a class for it and I’ve been watching a bunch of The Coding Train videos. For my specific project I’m trying to implement 30 unique colors …

---

## [Live Input from Multiple Computers?](https://discourse.processing.org/t/live-input-from-multiple-computers/24110)

<div class="topic-metadata">

**Author:** [@alsumwas](https://discourse.processing.org/u/alsumwas)\
**Replies:** 2\
**Last updated:** [December 1, 2020, 3:23am UTC](https://discourse.processing.org/t/live-input-from-multiple-computers/24110 "2020-12-01T03:23:16Z")

</div>

I am wondering if it is possible to have mic input from multiple users at the same time? Also is there an official name for the thing that I am trying to do? Here is a little sketch that I made from some examples on th…

---

## [Use a live video stream (from WebRTC) in P5?](https://discourse.processing.org/t/use-a-live-video-stream-from-webrtc-in-p5/23018)

<div class="topic-metadata">

**Author:** [@banggeul](https://discourse.processing.org/u/banggeul)\
**Replies:** 2\
**Last updated:** [December 1, 2020, 3:22am UTC](https://discourse.processing.org/t/use-a-live-video-stream-from-webrtc-in-p5/23018 "2020-12-01T03:22:29Z")

</div>

Hello, I’d like to run this WebRTC example (https://github.com/webrtc/apprtc) and manipulate the videos (local as well as remote) using P5. How do I work with the live stream video that’s not created by createCapture()? …

---

## [General javascript question re: p5 tutorial](https://discourse.processing.org/t/general-javascript-question-re-p5-tutorial/25471)

<div class="topic-metadata">

**Author:** [@epignosis567](https://discourse.processing.org/u/epignosis567)\
**Replies:** 10\
**Last updated:** [November 30, 2020, 10:46pm UTC](https://discourse.processing.org/t/general-javascript-question-re-p5-tutorial/25471 "2020-11-30T22:46:40Z")

</div>

Hi. I’m following a p5.js tutorial and have the below code. Would anyone be able to help me understand how could add a second image to this fetch? Thanks! \` displayMyImg() .then(function (respons…

---

## [Smile TV project with p5.js](https://discourse.processing.org/t/smile-tv-project-with-p5-js/25738)

<div class="topic-metadata">

**Author:** [@Vero](https://discourse.processing.org/u/Vero)\
**Replies:** 2\
**Last updated:** [November 30, 2020, 8:41pm UTC](https://discourse.processing.org/t/smile-tv-project-with-p5-js/25738 "2020-11-30T20:41:34Z")

</div>

Hi! I’m a student and a beginner in p5.js. I would like to question if someone can help me with a project that I will like to do it. So I saw this interactive installation called “Smile TV”, and I’d love to do it with p…

---

## [Fatal error: Protocol error (Runtime.callFunctionOn): Object reference chain is too long](https://discourse.processing.org/t/fatal-error-protocol-error-runtime-callfunctionon-object-reference-chain-is-too-long/25591)

<div class="topic-metadata">

**Author:** [@ankit1029](https://discourse.processing.org/u/ankit1029)\
**Replies:** 4\
**Last updated:** [November 30, 2020, 3:23am UTC](https://discourse.processing.org/t/fatal-error-protocol-error-runtime-callfunctionon-object-reference-chain-is-too-long/25591 "2020-11-30T03:23:34Z")

</div>

i was trying to set up the dev environement for p5.js i followed the instructions on this site https://p5js.org/contributor-docs/#/ after navigating into the p5.js folder ,npm ci worked fine but when i tried to run th…

---

## [How to get a P5 image into the DOM?](https://discourse.processing.org/t/how-to-get-a-p5-image-into-the-dom/25726)

<div class="topic-metadata">

**Author:** [@zenglenn](https://discourse.processing.org/u/zenglenn)\
**Replies:** 9\
**Last updated:** [November 28, 2020, 7:08am UTC](https://discourse.processing.org/t/how-to-get-a-p5-image-into-the-dom/25726 "2020-11-28T07:08:07Z")

</div>

Hi I want to get an internally created image file (not loaded or from a url) into the DOM. I’m sure it’s really simple, but have no idea, thanks.

---

## [Custom 3d shapes in p5.js](https://discourse.processing.org/t/custom-3d-shapes-in-p5-js/25662)

<div class="topic-metadata">

**Author:** [@sarath.jasrin](https://discourse.processing.org/u/sarath.jasrin)\
**Replies:** 5\
**Last updated:** [November 26, 2020, 11:06pm UTC](https://discourse.processing.org/t/custom-3d-shapes-in-p5-js/25662 "2020-11-26T23:06:30Z")

</div>

I tried to create custom 3d shape using beginShape method. I have successfully created 2d view and added orbitControl. Now I can move around the shape but it looks flat. I tried to use z value but it’s looks different th…

---

## [Error on loadXML(URL) within P5js](https://discourse.processing.org/t/error-on-loadxml-url-within-p5js/25709)

<div class="topic-metadata">

**Author:** [@CAVUCO](https://discourse.processing.org/u/CAVUCO)\
**Replies:** 7\
**Last updated:** [November 26, 2020, 10:37pm UTC](https://discourse.processing.org/t/error-on-loadxml-url-within-p5js/25709 "2020-11-26T22:37:29Z")

</div>

var url ='https://www.aviationweather.gov/adds/dataserver\_current/httpparam?dataSource=metars&requestType=retrieve&format=xml&minLat=25&minLon=-125&maxLat=50&maxLon=-66&hoursBeforeNow=1&stationstring=K\*&fields=station\_id…

---

## [How can I put html text on top of a 5pjs sketch in html?](https://discourse.processing.org/t/how-can-i-put-html-text-on-top-of-a-5pjs-sketch-in-html/24895)

<div class="topic-metadata">

**Author:** [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Replies:** 1\
**Last updated:** [November 26, 2020, 5:41pm UTC](https://discourse.processing.org/t/how-can-i-put-html-text-on-top-of-a-5pjs-sketch-in-html/24895 "2020-11-26T17:41:56Z")

</div>

I have a project I want to put as my background on a website I’m making in HTML, and I want some text to be on top of the project, how do I do that?

---

## [How do I tint at 2D shape?](https://discourse.processing.org/t/how-do-i-tint-at-2d-shape/25727)

<div class="topic-metadata">

**Author:** [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Replies:** 2\
**Last updated:** [November 26, 2020, 5:11pm UTC](https://discourse.processing.org/t/how-do-i-tint-at-2d-shape/25727 "2020-11-26T17:11:08Z")

</div>

I tried tinting with tint(); but that only works with images, what should I do?

---

## [processPeaks() not returning in p5.Sound](https://discourse.processing.org/t/processpeaks-not-returning-in-p5-sound/25649)

<div class="topic-metadata">

**Author:** [@koopakondra](https://discourse.processing.org/u/koopakondra)\
**Replies:** 0\
**Last updated:** [November 23, 2020, 11:38pm UTC](https://discourse.processing.org/t/processpeaks-not-returning-in-p5-sound/25649 "2020-11-23T23:38:15Z")

</div>

I’m trying to get the processPeaks() method in the Sound library to return the Array it says it should in documentation. None of the examples provided in the p5 github/website work either. I’ve tried the sketches in both…

---

## [Cannot read property of split() undefined](https://discourse.processing.org/t/cannot-read-property-of-split-undefined/25652)

<div class="topic-metadata">

**Author:** [@MattC0des](https://discourse.processing.org/u/MattC0des)\
**Replies:** 2\
**Last updated:** [November 24, 2020, 1:33pm UTC](https://discourse.processing.org/t/cannot-read-property-of-split-undefined/25652 "2020-11-24T13:33:51Z")

</div>

Hello, I am quite new to p5js (on and off for the past few months) but as of recently, I have run into a problem that myself nor my peers or teacher can solve. We are working on an application that is like a word per min…

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

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