# p5.js

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

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

**Page:** 89

---

## [Disable Cache for sketch.js](https://discourse.processing.org/t/disable-cache-for-sketch-js/13138)

<div class="topic-metadata">

**Author:** [@mikeA](https://discourse.processing.org/u/mikeA)\
**Replies:** 4\
**Last updated:** [August 2, 2019, 1:00pm UTC](https://discourse.processing.org/t/disable-cache-for-sketch-js/13138 "2019-08-02T13:00:52Z")

</div>

Doing some development work, I am making incremental changes to the sketch.js file which is in the folder TEST on the web site testing.com - together with the other required files such as index.html, assets etc. The pro…

---

## [Good reference for video in p5?](https://discourse.processing.org/t/good-reference-for-video-in-p5/13121)

<div class="topic-metadata">

**Author:** [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Replies:** 2\
**Last updated:** [August 1, 2019, 2:20pm UTC](https://discourse.processing.org/t/good-reference-for-video-in-p5/13121 "2019-08-01T14:20:58Z")

</div>

Hi all, I’ve noticed that there is no reference for video on p5’s main reference page here: http://p5js.org/reference/ And yet if I google it, I find one reference here: https://p5js.org/reference/#/p5/createVideo I…

---

## [P5js website fullScreen on iPad](https://discourse.processing.org/t/p5js-website-fullscreen-on-ipad/13094)

<div class="topic-metadata">

**Author:** [@AndreasRef](https://discourse.processing.org/u/AndreasRef)\
**Replies:** 2\
**Last updated:** [August 1, 2019, 10:31am UTC](https://discourse.processing.org/t/p5js-website-fullscreen-on-ipad/13094 "2019-08-01T10:31:52Z")

</div>

Hi I am gonna set up an installation at a library that runs a p5js website on an iPad. I would like to run the website in full screen so users cannot access the adresse bar. When running the fullScreen example from th…

---

## [Tank Controls Help](https://discourse.processing.org/t/tank-controls-help/13043)

<div class="topic-metadata">

**Author:** [@Samira](https://discourse.processing.org/u/Samira)\
**Replies:** 4\
**Last updated:** [July 29, 2019, 9:17pm UTC](https://discourse.processing.org/t/tank-controls-help/13043 "2019-07-29T21:17:47Z")

</div>

I’m creating a tank for a game I am making. I want the tank to move in the direction it is facing. How can I do that?

---

## [How to get preview in a separate window](https://discourse.processing.org/t/how-to-get-preview-in-a-separate-window/12924)

<div class="topic-metadata">

**Author:** [@Kris1](https://discourse.processing.org/u/Kris1)\
**Replies:** 13\
**Last updated:** [July 29, 2019, 7:52pm UTC](https://discourse.processing.org/t/how-to-get-preview-in-a-separate-window/12924 "2019-07-29T19:52:55Z")

</div>

Hi- Very new user with a basic question- I would like the preview window to open in a separate window from the sketch editor. How do I do this?

---

## [Translation from Processing to p5 not working](https://discourse.processing.org/t/translation-from-processing-to-p5-not-working/13051)

<div class="topic-metadata">

**Author:** [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Replies:** 2\
**Last updated:** [July 29, 2019, 7:22pm UTC](https://discourse.processing.org/t/translation-from-processing-to-p5-not-working/13051 "2019-07-29T19:22:14Z")

</div>

Hi all, I can’t figure out why this isn’t spinning. Any tips? (It works in Processing). var spin; function setup() { createCanvas(400, 400); background(255); } function draw() { } function mouseDragged() { push…

---

## [3D mode creating an offset](https://discourse.processing.org/t/3d-mode-creating-an-offset/13042)

<div class="topic-metadata">

**Author:** [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Replies:** 2\
**Last updated:** [July 29, 2019, 5:24pm UTC](https://discourse.processing.org/t/3d-mode-creating-an-offset/13042 "2019-07-29T17:24:00Z")

</div>

Hello, I’m wondering if anyone can let me know why the rectangle is offset from the mouse by about 300px in the x and y direction? here’s the code: var angle = 0; function setup() { createCanvas(700, 700, WEBGL); …

---

## [Prevent p5.dom.js input widget generating keyPressed() events](https://discourse.processing.org/t/prevent-p5-dom-js-input-widget-generating-keypressed-events/13019)

<div class="topic-metadata">

**Author:** [@grege2](https://discourse.processing.org/u/grege2)\
**Replies:** 3\
**Last updated:** [July 28, 2019, 11:44pm UTC](https://discourse.processing.org/t/prevent-p5-dom-js-input-widget-generating-keypressed-events/13019 "2019-07-28T23:44:35Z")

</div>

Ciao tutti. I’m using a p5.dom.js “input” widget to get some text input, but each character entered generates a call to keyPressed(). I only want to action the input when CR is typed at the end. Example at: https://edito…

---

## [Web Editor says there's an error. I think it fibs!](https://discourse.processing.org/t/web-editor-says-theres-an-error-i-think-it-fibs/13025)

<div class="topic-metadata">

**Author:** [@mbrasseau](https://discourse.processing.org/u/mbrasseau)\
**Replies:** 8\
**Last updated:** [July 28, 2019, 8:49pm UTC](https://discourse.processing.org/t/web-editor-says-theres-an-error-i-think-it-fibs/13025 "2019-07-28T20:49:48Z")

</div>

I’m using the p5.js Web Editor. I wrote this function that draws a star. function star(paintBrush.x, paintBrush.y) { stroke(69, 33, 5); fill(255, 255, 0); ellipse(paintBrush.x, paintBrush.y, 15, 15); line(paint…

---

## [Move inside div and center on div not page](https://discourse.processing.org/t/move-inside-div-and-center-on-div-not-page/13024)

<div class="topic-metadata">

**Author:** [@nicolas\_nqn](https://discourse.processing.org/u/nicolas_nqn)\
**Replies:** 1\
**Last updated:** [July 28, 2019, 5:06pm UTC](https://discourse.processing.org/t/move-inside-div-and-center-on-div-not-page/13024 "2019-07-28T17:06:02Z")

</div>

Hi, i know how to move the canvas inside the div with .parent, but i cant seem to position the canvas centered on the div, when i use .position it uses the page coordinates not the div var offsets = document.getElementB…

---

## [Duplicating a canvas and its state](https://discourse.processing.org/t/duplicating-a-canvas-and-its-state/12902)

<div class="topic-metadata">

**Author:** [@hoticewater](https://discourse.processing.org/u/hoticewater)\
**Replies:** 3\
**Last updated:** [July 28, 2019, 12:47am UTC](https://discourse.processing.org/t/duplicating-a-canvas-and-its-state/12902 "2019-07-28T00:47:02Z")

</div>

I’ve been searching for this answer for longer than I care to admit, and after many google searches and many hours of skipping around The Coding Train’s innumerous videos I’ve felt close but have yet to find the answer. …

---

## [P5.js music and drawing](https://discourse.processing.org/t/p5-js-music-and-drawing/12950)

<div class="topic-metadata">

**Author:** [@amstaff](https://discourse.processing.org/u/amstaff)\
**Replies:** 3\
**Last updated:** [July 28, 2019, 12:10am UTC](https://discourse.processing.org/t/p5-js-music-and-drawing/12950 "2019-07-28T00:10:47Z")

</div>

Is it possible to play music with p5 and the program will draw a picture depending on the beat? Are there any examples how the whole thing should look like?

---

## [Smooth scrollIntoView?](https://discourse.processing.org/t/smooth-scrollintoview/13010)

<div class="topic-metadata">

**Author:** [@pastuh](https://discourse.processing.org/u/pastuh)\
**Replies:** 0\
**Last updated:** [July 26, 2019, 11:20pm UTC](https://discourse.processing.org/t/smooth-scrollintoview/13010 "2019-07-26T23:20:35Z")

</div>

I want to move slowly in to element view. Code: let testSelect = document.getElementById('gridMarked'); testSelect.scrollIntoView({block: 'center'}); But view moves immediately, additional ‘Smooth’ option not works…

---

## [Review / Refactor / Example of p5 UI](https://discourse.processing.org/t/review-refactor-example-of-p5-ui/12838)

<div class="topic-metadata">

**Author:** [@hellonearthis](https://discourse.processing.org/u/hellonearthis)\
**Replies:** 2\
**Last updated:** [July 24, 2019, 8:53am UTC](https://discourse.processing.org/t/review-refactor-example-of-p5-ui/12838 "2019-07-24T08:53:43Z")

</div>

I’m working on a UI using p5.js you can see it here in p5 webeditor. It is rendered from the game loop, but could be even driven using redraw() frunction. But I’m ok with it hogging the game loop for now. No I don’t …

---

## [Sending Values Between Functions](https://discourse.processing.org/t/sending-values-between-functions/12927)

<div class="topic-metadata">

**Author:** [@shodai](https://discourse.processing.org/u/shodai)\
**Replies:** 2\
**Last updated:** [July 23, 2019, 8:13pm UTC](https://discourse.processing.org/t/sending-values-between-functions/12927 "2019-07-23T20:13:19Z")

</div>

I am trying to use the p5js.gui library to collect a simple text input and then just output that input to the screen. I have tried a number of different approaches but keep running into errors. This is what I have so far…

---

## [CLOSED How to get current colorMode](https://discourse.processing.org/t/closed-how-to-get-current-colormode/12812)

<div class="topic-metadata">

**Author:** [@monotone](https://discourse.processing.org/u/monotone)\
**Replies:** 5\
**Last updated:** [July 23, 2019, 3:13pm UTC](https://discourse.processing.org/t/closed-how-to-get-current-colormode/12812 "2019-07-23T15:13:48Z")

</div>

Hi, I try to get the current colorMode to adapt my code behaviour. But I didn’t found anyway to get it ? I try colorMode() without params but nedd at list one. Any idea ? Thanks & regards, Constant

---

## [Alpha not working in fill()](https://discourse.processing.org/t/alpha-not-working-in-fill/12916)

<div class="topic-metadata">

**Author:** [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Replies:** 3\
**Last updated:** [July 23, 2019, 2:31pm UTC](https://discourse.processing.org/t/alpha-not-working-in-fill/12916 "2019-07-23T14:31:28Z")

</div>

Hello, I’m taking a number of Processing sketches and converting them to p5.js. I have converted this sketch from Processing to p5 but I can’t quite figure out why the alpha isn’t working here. Any insights? // Arrays …

---

## [What are the enclosed numbers on the left hand side in the console when I "print"?](https://discourse.processing.org/t/what-are-the-enclosed-numbers-on-the-left-hand-side-in-the-console-when-i-print/12874)

<div class="topic-metadata">

**Author:** [@femke.blanco](https://discourse.processing.org/u/femke.blanco)\
**Replies:** 1\
**Last updated:** [July 22, 2019, 10:22pm UTC](https://discourse.processing.org/t/what-are-the-enclosed-numbers-on-the-left-hand-side-in-the-console-when-i-print/12874 "2019-07-22T22:22:27Z")

</div>

What are the enclosed numbers on the left hand side in the console when I “print”? https://editor.p5js.org/femkeblanco/sketches/GFcm8qZgP Thanks in advance.

---

## [Can't get audio to play when loading](https://discourse.processing.org/t/cant-get-audio-to-play-when-loading/10567)

<div class="topic-metadata">

**Author:** [@Indieminor](https://discourse.processing.org/u/Indieminor)\
**Replies:** 4\
**Last updated:** [July 22, 2019, 7:27pm UTC](https://discourse.processing.org/t/cant-get-audio-to-play-when-loading/10567 "2019-07-22T19:27:21Z")

</div>

Hey all, I would love to use p5.js for my audio/visual project, but I am having a hard time even getting a sound to load on setup. Here is my code: let song; function preload() { song = loadSound('sounds\\Changing i…

---

## [I cannot declare and create an object in one line](https://discourse.processing.org/t/i-cannot-declare-and-create-an-object-in-one-line/12879)

<div class="topic-metadata">

**Author:** [@femke.blanco](https://discourse.processing.org/u/femke.blanco)\
**Replies:** 1\
**Last updated:** [July 22, 2019, 12:25am UTC](https://discourse.processing.org/t/i-cannot-declare-and-create-an-object-in-one-line/12879 "2019-07-22T00:25:59Z")

</div>

I’ve come across two ways of defining classes in p5.js. The first: https://editor.p5js.org/femkeblanco/sketches/Vycw0YkNr The second: https://editor.p5js.org/femkeblanco/sketches/YXi8pCrRQ I presume the second way, …

---

## [Pls critique my code!](https://discourse.processing.org/t/pls-critique-my-code/12855)

<div class="topic-metadata">

**Author:** [@epignosis567](https://discourse.processing.org/u/epignosis567)\
**Replies:** 4\
**Last updated:** [July 21, 2019, 8:06pm UTC](https://discourse.processing.org/t/pls-critique-my-code/12855 "2019-07-21T20:06:21Z")

</div>

Hi. I’m having a lot of problems with things not working the way they should, and things not working the way other people say they should. Can you please critique my code? I’m new to coding and just hacking things togeth…

---

## [When I Retrieve The Amplitudes From An Audio Source - The Data Often Comes Back Different. Whats The Best Way To Regulate The Data So I Get The Same Numbers Consistently?](https://discourse.processing.org/t/when-i-retrieve-the-amplitudes-from-an-audio-source-the-data-often-comes-back-different-whats-the-best-way-to-regulate-the-data-so-i-get-the-same-numbers-consistently/12865)

<div class="topic-metadata">

**Author:** [@JacksonEnnis](https://discourse.processing.org/u/JacksonEnnis)\
**Replies:** 2\
**Last updated:** [July 21, 2019, 7:17pm UTC](https://discourse.processing.org/t/when-i-retrieve-the-amplitudes-from-an-audio-source-the-data-often-comes-back-different-whats-the-best-way-to-regulate-the-data-so-i-get-the-same-numbers-consistently/12865 "2019-07-21T19:17:09Z")

</div>

Hello friendos! I have just finished my first hackathon project and… it was grueling. The official end is tonight. Pretty much, the project takes an audio file, and allows the user to select a “cut” from it. This cut h…

---

## [Dreamweaver preview stuck on loading](https://discourse.processing.org/t/dreamweaver-preview-stuck-on-loading/12833)

<div class="topic-metadata">

**Author:** [@epignosis567](https://discourse.processing.org/u/epignosis567)\
**Replies:** 1\
**Last updated:** [July 21, 2019, 3:51am UTC](https://discourse.processing.org/t/dreamweaver-preview-stuck-on-loading/12833 "2019-07-21T03:51:41Z")

</div>

Hi. Dreamweaver’s preview window seems to work fine for the most to see previews while I’m coding, however if I add a preload() the preview window just hangs on “Loading…” Any idea why that would be?

---

## [Webpage slides around in mobile browser](https://discourse.processing.org/t/webpage-slides-around-in-mobile-browser/12832)

<div class="topic-metadata">

**Author:** [@epignosis567](https://discourse.processing.org/u/epignosis567)\
**Replies:** 5\
**Last updated:** [July 21, 2019, 3:05am UTC](https://discourse.processing.org/t/webpage-slides-around-in-mobile-browser/12832 "2019-07-21T03:05:58Z")

</div>

Hi. I’ve made my first P5 webpage but it slides around a lot. It’s a big problem on the Chrome mobile browser because dragging down causes the page to refresh. I’ve tried researching ways to prevent it from sliding aroun…

---

## [Sound not playing on mouseMoved](https://discourse.processing.org/t/sound-not-playing-on-mousemoved/12802)

<div class="topic-metadata">

**Author:** [@epignosis567](https://discourse.processing.org/u/epignosis567)\
**Replies:** 8\
**Last updated:** [July 19, 2019, 9:41pm UTC](https://discourse.processing.org/t/sound-not-playing-on-mousemoved/12802 "2019-07-19T21:41:21Z")

</div>

Hi. I have the following code that I edited from an example. It worked in the example window but won’t work in dreamweaver or when I upload it to my server. Everything works except the sound effect, it won’t play. Are th…

---

## [AUTO size() not working on createImg](https://discourse.processing.org/t/auto-size-not-working-on-createimg/12776)

<div class="topic-metadata">

**Author:** [@epignosis567](https://discourse.processing.org/u/epignosis567)\
**Replies:** 4\
**Last updated:** [July 18, 2019, 5:08pm UTC](https://discourse.processing.org/t/auto-size-not-working-on-createimg/12776 "2019-07-18T17:08:10Z")

</div>

Hi. I’m still learning coding. As far as I can tell setting one of the values of the size() when applied to createImg doesn’t work, the image just disappears. As in: button = createImg(’…/dumbo.jpg’); button.size(500,…

---

## [How to use 'import' in P5?](https://discourse.processing.org/t/how-to-use-import-in-p5/12774)

<div class="topic-metadata">

**Author:** [@HuXiaoer](https://discourse.processing.org/u/HuXiaoer)\
**Replies:** 1\
**Last updated:** [July 18, 2019, 11:35am UTC](https://discourse.processing.org/t/how-to-use-import-in-p5/12774 "2019-07-18T11:35:01Z")

</div>

In P5.js, how to use ES6’s import in top of sketch.js?

---

## [How to add a tooltip to a p5.dom.js button](https://discourse.processing.org/t/how-to-add-a-tooltip-to-a-p5-dom-js-button/12758)

<div class="topic-metadata">

**Author:** [@grege2](https://discourse.processing.org/u/grege2)\
**Replies:** 5\
**Last updated:** [July 18, 2019, 12:01am UTC](https://discourse.processing.org/t/how-to-add-a-tooltip-to-a-p5-dom-js-button/12758 "2019-07-18T00:01:23Z")

</div>

Hi all. I’d like to add a “tooltip” to a button in a p5.js code. The button is added with createButton() from the p5.dom.js library. There’s a ton of discussion out there, a lot in Stack Overflow, about tooltips … a typi…

---

## [2D Mechanisms examples?](https://discourse.processing.org/t/2d-mechanisms-examples/12752)

<div class="topic-metadata">

**Author:** [@Bird](https://discourse.processing.org/u/Bird)\
**Replies:** 2\
**Last updated:** [July 16, 2019, 10:53pm UTC](https://discourse.processing.org/t/2d-mechanisms-examples/12752 "2019-07-16T22:53:52Z")

</div>

I’m looking for some examples of basic 2D mechanisms in JS. Simple animations showing rotary and linear motors, linkages, pistons, etc. I would love to find some kind of sandbox that allows simple experiments, but just s…

---

## [Loop(), noLoop(), redraw()](https://discourse.processing.org/t/loop-noloop-redraw/12534)

<div class="topic-metadata">

**Author:** [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Replies:** 5\
**Last updated:** [July 16, 2019, 2:11pm UTC](https://discourse.processing.org/t/loop-noloop-redraw/12534 "2019-07-16T14:11:12Z")

</div>

Having read the documentation on the p5.js site, I’m still a little confused as to how to use the redraw() function and the loop function. What I’m trying to achieve is something which allows me to stop the draw function…

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

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