# p5.js

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

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

**Page:** 69

---

## [How can I read this json file?](https://discourse.processing.org/t/how-can-i-read-this-json-file/21623)

<div class="topic-metadata">

**Author:** [@sasaKDH](https://discourse.processing.org/u/sasaKDH)\
**Replies:** 5\
**Last updated:** [June 6, 2020, 5:11pm UTC](https://discourse.processing.org/t/how-can-i-read-this-json-file/21623 "2020-06-06T17:11:50Z")

</div>

sppo works right but, spid doesn’t I think they have same structure so, I can’t understand. Here is the structure of spid function setup() { createCanvas(300, 300); sppo = loadJSON("../jsons/spposition.json"); …

---

## [Siri style waveform design with p5 sound](https://discourse.processing.org/t/siri-style-waveform-design-with-p5-sound/21529)

<div class="topic-metadata">

**Author:** [@eurobob](https://discourse.processing.org/u/eurobob)\
**Replies:** 8\
**Last updated:** [June 5, 2020, 5:04pm UTC](https://discourse.processing.org/t/siri-style-waveform-design-with-p5-sound/21529 "2020-06-05T17:04:06Z")

</div>

How would I go about creating an animation similar to this?: https://dribbble.com/shots/5401314-Voice-interface-design

---

## [Does write() not work in the web editor?](https://discourse.processing.org/t/does-write-not-work-in-the-web-editor/21594)

<div class="topic-metadata">

**Author:** [@inmc](https://discourse.processing.org/u/inmc)\
**Replies:** 1\
**Last updated:** [June 5, 2020, 3:09pm UTC](https://discourse.processing.org/t/does-write-not-work-in-the-web-editor/21594 "2020-06-05T15:09:23Z")

</div>

In my project I’m basically trying to make a string of text and save it to my computer in a .txt file. https://p5js.org/reference/#/p5.PrintWriter/write So in the reference for write(), you call the function and it aut…

---

## [Tiling / repeating shader image texture](https://discourse.processing.org/t/tiling-repeating-shader-image-texture/21591)

<div class="topic-metadata">

**Author:** [@andypurbrick](https://discourse.processing.org/u/andypurbrick)\
**Replies:** 2\
**Last updated:** [June 5, 2020, 12:58pm UTC](https://discourse.processing.org/t/tiling-repeating-shader-image-texture/21591 "2020-06-05T12:58:46Z")

</div>

Hi, I’m new to p5.js and I’ve just ported a shader from shadertoy. It works fine, however, the image that I’m using as a texture is defaulting to CLAMP when I want it to REPEAT. I’ve tried to use textureWrap(REPEAT) …

---

## [Duplicate index file with a sketch](https://discourse.processing.org/t/duplicate-index-file-with-a-sketch/21589)

<div class="topic-metadata">

**Author:** [@dcipollo](https://discourse.processing.org/u/dcipollo)\
**Replies:** 1\
**Last updated:** [June 5, 2020, 11:53am UTC](https://discourse.processing.org/t/duplicate-index-file-with-a-sketch/21589 "2020-06-05T11:53:28Z")

</div>

Is it possible to duplicate the index.html file in a sketch. The only options in the pop-up menu are rename or delete. Or do I need to copy/paste the code into a blank new file? Thanks

---

## [Beginner Question: About Flow](https://discourse.processing.org/t/beginner-question-about-flow/21180)

<div class="topic-metadata">

**Author:** [@katjs](https://discourse.processing.org/u/katjs)\
**Replies:** 12\
**Last updated:** [June 5, 2020, 11:09am UTC](https://discourse.processing.org/t/beginner-question-about-flow/21180 "2020-06-05T11:09:23Z")

</div>

Hello people, I’m new here and I really want some help. I’ve a bit of a problem using P5. My JS is quite poor and I’m using P5 to get a better understanding from the ground up. So I’m just trying to mess around with va…

---

## [Advice on crime data](https://discourse.processing.org/t/advice-on-crime-data/21573)

<div class="topic-metadata">

**Author:** [@mcintyre](https://discourse.processing.org/u/mcintyre)\
**Replies:** 1\
**Last updated:** [June 5, 2020, 5:20am UTC](https://discourse.processing.org/t/advice-on-crime-data/21573 "2020-06-05T05:20:59Z")

</div>

I’m teaching a 5-week machine learning course to high school students this summer using p5.js and ml5.js. We’ll cover classification and regression during the final week, so I’d like to motivate the material through a co…

---

## [How do I move an object in 3d space?](https://discourse.processing.org/t/how-do-i-move-an-object-in-3d-space/938)

<div class="topic-metadata">

**Author:** [@xxxlaf](https://discourse.processing.org/u/xxxlaf)\
**Replies:** 1\
**Last updated:** [June 14, 2018, 3:00am UTC](https://discourse.processing.org/t/how-do-i-move-an-object-in-3d-space/938 "2018-06-14T03:00:46Z")

</div>

My code is… function setup() { createCanvas(500, 500, WEBGL); } function draw() { background(200); orbitControl(); // Objects box(75, 100, 50); sphere(50) } How would I change the x and y p…

---

## [Polysynth notes stop](https://discourse.processing.org/t/polysynth-notes-stop/21526)

<div class="topic-metadata">

**Author:** [@b\_and\_z](https://discourse.processing.org/u/b_and_z)\
**Replies:** 2\
**Last updated:** [June 4, 2020, 9:20am UTC](https://discourse.processing.org/t/polysynth-notes-stop/21526 "2020-06-04T09:20:29Z")

</div>

Hello all I am creating a tool to translate image to sound, specifically get brightness of certain pixels and use these as a trigger for a polyphonic synth. As long as a certain pixel has a certain brightness, the synth…

---

## [Getting Z coordinate in WEBGL with mouse](https://discourse.processing.org/t/getting-z-coordinate-in-webgl-with-mouse/21476)

<div class="topic-metadata">

**Author:** [@Nis](https://discourse.processing.org/u/Nis)\
**Replies:** 2\
**Last updated:** [June 3, 2020, 9:40pm UTC](https://discourse.processing.org/t/getting-z-coordinate-in-webgl-with-mouse/21476 "2020-06-03T21:40:17Z")

</div>

Like we have mouseX and mouseY for x and y coordinate by mouse click. How can I get for the Z coordinate. I need to add a box in the 3d blank space, wherever I click on that 3d blank.

---

## [P5 soundfile addCue is called multiple times](https://discourse.processing.org/t/p5-soundfile-addcue-is-called-multiple-times/21521)

<div class="topic-metadata">

**Author:** [@casperleerink](https://discourse.processing.org/u/casperleerink)\
**Replies:** 3\
**Last updated:** [June 3, 2020, 8:08pm UTC](https://discourse.processing.org/t/p5-soundfile-addcue-is-called-multiple-times/21521 "2020-06-03T20:08:46Z")

</div>

Hi everyone! I am using the addCue method on a p5.soundFile. I invoke this method in the setup function. The callback function i provide is called multiple times (around 170) instead of just 1 time (which I expected). D…

---

## [Rotation of cell phone in landscape](https://discourse.processing.org/t/rotation-of-cell-phone-in-landscape/21494)

<div class="topic-metadata">

**Author:** [@JoeMcKay](https://discourse.processing.org/u/JoeMcKay)\
**Replies:** 5\
**Last updated:** [June 3, 2020, 6:09pm UTC](https://discourse.processing.org/t/rotation-of-cell-phone-in-landscape/21494 "2020-06-03T18:09:32Z")

</div>

Question. I am using rotationY to get the rotation of the phone. In portrait, rotationY gives a value between 0 and 360 which is awesome, but when the phone is in landscape the Y values are between 90 to 0, 0 to 90, -…

---

## [Interactive tutorials using p5](https://discourse.processing.org/t/interactive-tutorials-using-p5/17091)

<div class="topic-metadata">

**Author:** [@stixan](https://discourse.processing.org/u/stixan)\
**Replies:** 6\
**Last updated:** [June 3, 2020, 10:39am UTC](https://discourse.processing.org/t/interactive-tutorials-using-p5/17091 "2020-06-03T10:39:59Z")

</div>

I am very inspired by Tim Holman’s Tutorial Markdown project. It allows you to create interactive tutorials by injecting and running code into a canvas as you scroll down the page. Here’s a live demo. For a research pro…

---

## [How to make a Noisy Grain Gradient](https://discourse.processing.org/t/how-to-make-a-noisy-grain-gradient/21522)

<div class="topic-metadata">

**Author:** [@antoniofrom1984](https://discourse.processing.org/u/antoniofrom1984)\
**Replies:** 1\
**Last updated:** [June 3, 2020, 10:13am UTC](https://discourse.processing.org/t/how-to-make-a-noisy-grain-gradient/21522 "2020-06-03T10:13:05Z")

</div>

Hello all, i am aware of lerp color, but i’m wondering if it’s possible to do a noisy gradient like the image, and apply to several elements, say a wall of shapes. i wondered if Pixels function was the way to do it, but…

---

## [createCapture() produces getUserMedia error on iOS Chrome even on HTTPS](https://discourse.processing.org/t/createcapture-produces-getusermedia-error-on-ios-chrome-even-on-https/21509)

<div class="topic-metadata">

**Author:** [@crafah](https://discourse.processing.org/u/crafah)\
**Replies:** 3\
**Last updated:** [June 2, 2020, 7:58pm UTC](https://discourse.processing.org/t/createcapture-produces-getusermedia-error-on-ios-chrome-even-on-https/21509 "2020-06-02T19:58:23Z")

</div>

I have noticed that a sketch I’m working on, which uses createCapture() to access the webcam, hasn’t been working on Chrome on my iPhone (version 83.0,4103.88). I noticed this issue on GitHub that addresses the problem. …

---

## [For loop is not being called](https://discourse.processing.org/t/for-loop-is-not-being-called/21493)

<div class="topic-metadata">

**Author:** [@shodai](https://discourse.processing.org/u/shodai)\
**Replies:** 6\
**Last updated:** [June 2, 2020, 4:43pm UTC](https://discourse.processing.org/t/for-loop-is-not-being-called/21493 "2020-06-02T16:43:25Z")

</div>

I am working through a snake game program and have run into a really odd problem. Everything works except that the snake does not crash into itself. When the snake runs into itself the screen should turn red temporarily.…

---

## [Ellipse with large StrokeWeight not displaying correctly on mobile](https://discourse.processing.org/t/ellipse-with-large-strokeweight-not-displaying-correctly-on-mobile/21450)

<div class="topic-metadata">

**Author:** [@ella\_d](https://discourse.processing.org/u/ella_d)\
**Replies:** 4\
**Last updated:** [June 2, 2020, 4:16pm UTC](https://discourse.processing.org/t/ellipse-with-large-strokeweight-not-displaying-correctly-on-mobile/21450 "2020-06-02T16:16:27Z")

</div>

please format code with \</\> button \* homework policy \* asking questions Hi, I’ve got the following very basic code: function setup() { createCanvas(windowWidth, windowHeight); } function draw() { background(25…

---

## [Getting amplitude of multiple p5.Oscillators without using multiple p5.Amplitudes](https://discourse.processing.org/t/getting-amplitude-of-multiple-p5-oscillators-without-using-multiple-p5-amplitudes/21503)

<div class="topic-metadata">

**Author:** [@umutreldem](https://discourse.processing.org/u/umutreldem)\
**Replies:** 0\
**Last updated:** [June 2, 2020, 3:02pm UTC](https://discourse.processing.org/t/getting-amplitude-of-multiple-p5-oscillators-without-using-multiple-p5-amplitudes/21503 "2020-06-02T15:02:46Z")

</div>

I would like to create multiple oscillators, and tie the current amplitude of each to a color dimension. Oscillator 1’s amplitude is scaled to 0-255 Red value, 2 to Green, and so on. The problem is, setting multiple p5.…

---

## [Background hides circles inside the for loop](https://discourse.processing.org/t/background-hides-circles-inside-the-for-loop/21377)

<div class="topic-metadata">

**Author:** [@dumash](https://discourse.processing.org/u/dumash)\
**Replies:** 3\
**Last updated:** [June 2, 2020, 7:29am UTC](https://discourse.processing.org/t/background-hides-circles-inside-the-for-loop/21377 "2020-06-02T07:29:14Z")

</div>

Hi, I am trying to draw a set of circles using the for loop. It works just fine, the problem is that the background (also inside the draw() function) makes the circle disappear. When I move the background to the setup…

---

## [Slowdown in Game of Life with Objects - Why?](https://discourse.processing.org/t/slowdown-in-game-of-life-with-objects-why/21481)

<div class="topic-metadata">

**Author:** [@umutreldem](https://discourse.processing.org/u/umutreldem)\
**Replies:** 2\
**Last updated:** [June 1, 2020, 9:19pm UTC](https://discourse.processing.org/t/slowdown-in-game-of-life-with-objects-why/21481 "2020-06-01T21:19:12Z")

</div>

I am working on recreating Game of Life in different ways, taking Coding Train’s video as the starting point. What I am trying to add is ‘color inheritance’: A newborn cell ‘inheriting’ the color from the average of the …

---

## [createFileInput function](https://discourse.processing.org/t/createfileinput-function/21478)

<div class="topic-metadata">

**Author:** [@RbRB](https://discourse.processing.org/u/RbRB)\
**Replies:** 1\
**Last updated:** [June 1, 2020, 3:33pm UTC](https://discourse.processing.org/t/createfileinput-function/21478 "2020-06-01T15:33:10Z")

</div>

I create the code like this but the error keeps popping up. what’s should I do? let song; let input; function setup() { input = createFileInput(handleFile); input.position(0, 0); createCanvas(720, 200); backgrou…

---

## [Another question re prototpytes](https://discourse.processing.org/t/another-question-re-prototpytes/21475)

<div class="topic-metadata">

**Author:** [@femke.blanco](https://discourse.processing.org/u/femke.blanco)\
**Replies:** 1\
**Last updated:** [June 1, 2020, 2:39pm UTC](https://discourse.processing.org/t/another-question-re-prototpytes/21475 "2020-06-01T14:39:09Z")

</div>

(Please excuse the old technique.) I am able to add a function to a constructor’s prototype after I create an object, and use the function: function Thing() { this.prop1 = 1; this.prop2 = 2; } var thing1 = new …

---

## [Random to initialize variables](https://discourse.processing.org/t/random-to-initialize-variables/21466)

<div class="topic-metadata">

**Author:** [@davidhurwich](https://discourse.processing.org/u/davidhurwich)\
**Replies:** 2\
**Last updated:** [June 1, 2020, 10:46am UTC](https://discourse.processing.org/t/random-to-initialize-variables/21466 "2020-06-01T10:46:08Z")

</div>

I have a question. I’ve noticed that when I initialize variables with a value before setup(); or draw(); that it works for a string, boolean, number. However, if I try to set that value to a random number using random()…

---

## [How can i save a small canvas with high resolution 8k image file](https://discourse.processing.org/t/how-can-i-save-a-small-canvas-with-high-resolution-8k-image-file/21422)

<div class="topic-metadata">

**Author:** [@biard](https://discourse.processing.org/u/biard)\
**Replies:** 4\
**Last updated:** [May 31, 2020, 11:15pm UTC](https://discourse.processing.org/t/how-can-i-save-a-small-canvas-with-high-resolution-8k-image-file/21422 "2020-05-31T23:15:21Z")

</div>

please format code with \</\> button \* homework policy \* asking questions i have a canvas of 500x500 .and i want to save the canvas as a super high resolution image. but i don’t know how to do it. i don’t wanna to incr…

---

## [RotationX, RotationY and RotationZ not working on some servers?](https://discourse.processing.org/t/rotationx-rotationy-and-rotationz-not-working-on-some-servers/21460)

<div class="topic-metadata">

**Author:** [@JoeMcKay](https://discourse.processing.org/u/JoeMcKay)\
**Replies:** 4\
**Last updated:** [May 31, 2020, 5:41pm UTC](https://discourse.processing.org/t/rotationx-rotationy-and-rotationz-not-working-on-some-servers/21460 "2020-05-31T17:41:31Z")

</div>

Hello P5 folks, I’m working on a WEBGL project that uses phone accelerometers. I’m finding that sketches hosted by the p5 servers work great. But when I host a project on my own server the site not longer responds to th…

---

## [Loading Large Sound Files- problem with loading SOLVED!](https://discourse.processing.org/t/loading-large-sound-files-problem-with-loading-solved/21351)

<div class="topic-metadata">

**Author:** [@Kris1](https://discourse.processing.org/u/Kris1)\
**Replies:** 7\
**Last updated:** [May 31, 2020, 12:26pm UTC](https://discourse.processing.org/t/loading-large-sound-files-problem-with-loading-solved/21351 "2020-05-31T12:26:43Z")

</div>

I am having problems loading a large sound file. It is too large to be uploaded directly to the P5js editor. I have tried linking it to my dropbox, this has failed. I have tried both load sound, and new p5.SoundFile (…

---

## [Video preload Property](https://discourse.processing.org/t/video-preload-property/21419)

<div class="topic-metadata">

**Author:** [@stephanschulz](https://discourse.processing.org/u/stephanschulz)\
**Replies:** 3\
**Last updated:** [May 30, 2020, 11:32am UTC](https://discourse.processing.org/t/video-preload-property/21419 "2020-05-30T11:32:38Z")

</div>

Is there a way to force a dynamically loaded video to preload? I do not want to use the preload() function mentioned in the reference page. But rather the HTML DOM element, as described here: https://www.w3schools.com…

---

## [Use youtube live stream in p5.js](https://discourse.processing.org/t/use-youtube-live-stream-in-p5-js/21417)

<div class="topic-metadata">

**Author:** [@Andrew387](https://discourse.processing.org/u/Andrew387)\
**Replies:** 2\
**Last updated:** [May 30, 2020, 11:18am UTC](https://discourse.processing.org/t/use-youtube-live-stream-in-p5-js/21417 "2020-05-30T11:18:49Z")

</div>

Hello all, I am interested in working with a live stream video from youtube in p5.js. Is there a specific way to access the video content? I have only managed to embed the video using Javascript for now, but I would want…

---

## [Issue with a texture from createGraphics()](https://discourse.processing.org/t/issue-with-a-texture-from-creategraphics/21421)

<div class="topic-metadata">

**Author:** [@d128](https://discourse.processing.org/u/d128)\
**Replies:** 1\
**Last updated:** [May 30, 2020, 10:38am UTC](https://discourse.processing.org/t/issue-with-a-texture-from-creategraphics/21421 "2020-05-30T10:38:48Z")

</div>

Hi everyone, I’m applying a texture in a box from a createGraphics() with a rotating sphere. When I’m doing this, the sphere on the texture starts to ‘dissapear’ (something similar when the background isn’t updated). I’…

---

## [Sound Popping/Crackling While Panning with p5.sound](https://discourse.processing.org/t/sound-popping-crackling-while-panning-with-p5-sound/21375)

<div class="topic-metadata">

**Author:** [@umutreldem](https://discourse.processing.org/u/umutreldem)\
**Replies:** 9\
**Last updated:** [May 29, 2020, 10:06pm UTC](https://discourse.processing.org/t/sound-popping-crackling-while-panning-with-p5-sound/21375 "2020-05-29T22:06:03Z")

</div>

I am trying to learn p5.sound by loading a sound, and panning it with a slider. When I move the slider, especially if I move it too far too suddenly, the sound begins to crackle. Crackling while panning does not happen …

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

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