# p5.js

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

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

**Page:** 14

---

## [How to make an image tint while displaying another image, when I release the mouse? {P5js}](https://discourse.processing.org/t/how-to-make-an-image-tint-while-displaying-another-image-when-i-release-the-mouse-p5js/41677)

<div class="topic-metadata">

**Author:** [@Gittoo](https://discourse.processing.org/u/Gittoo)\
**Replies:** 2\
**Last updated:** [April 11, 2023, 11:12am UTC](https://discourse.processing.org/t/how-to-make-an-image-tint-while-displaying-another-image-when-i-release-the-mouse-p5js/41677 "2023-04-11T11:12:22Z")

</div>

let house; let ghost; let tinted = false; function preload() { house = loadImage('Haunted House.jpg'); } function setup() { createCanvas(house.width, house.height); ghost= loadImage('ghost.png'); tint(255, 3…

---

## [If statement in the for loop: how to control behaviour of element based on its index number](https://discourse.processing.org/t/if-statement-in-the-for-loop-how-to-control-behaviour-of-element-based-on-its-index-number/41637)

<div class="topic-metadata">

**Author:** [@WaningJupiter](https://discourse.processing.org/u/WaningJupiter)\
**Replies:** 9\
**Last updated:** [April 9, 2023, 8:45pm UTC](https://discourse.processing.org/t/if-statement-in-the-for-loop-how-to-control-behaviour-of-element-based-on-its-index-number/41637 "2023-04-09T20:45:36Z")

</div>

Hi Here’s my situation : I have 3 lines of text, displayed like this : line1. Hello line2. Hello line3. Hello I want the first line to move towards the right direction, the second to the left, the third to the righ…

---

## [Matters.js - Obstacles not working](https://discourse.processing.org/t/matters-js-obstacles-not-working/41646)

<div class="topic-metadata">

**Author:** [@Alesk1969](https://discourse.processing.org/u/Alesk1969)\
**Replies:** 1\
**Last updated:** [April 8, 2023, 4:17am UTC](https://discourse.processing.org/t/matters-js-obstacles-not-working/41646 "2023-04-08T04:17:11Z")

</div>

Hi! I’m following the matter.js for P5.js 'Coding Train tutorials (I’m at the second video) and I’m completely stuck with a bug. I don’t know if some of you are familiar with this library and could help me? I’m sett…

---

## [Trouble with homework](https://discourse.processing.org/t/trouble-with-homework/41647)

<div class="topic-metadata">

**Author:** [@Computerscience](https://discourse.processing.org/u/Computerscience)\
**Replies:** 5\
**Last updated:** [April 8, 2023, 2:38am UTC](https://discourse.processing.org/t/trouble-with-homework/41647 "2023-04-08T02:38:57Z")

</div>

Question: Modify your solution to Q1 such that the diameter of the circle grows and shrinks depending on the distance of the mouse pointer to the center of the circle. Hints: You’ll need the dist() function and the multi…

---

## [Access single object in an array](https://discourse.processing.org/t/access-single-object-in-an-array/41514)

<div class="topic-metadata">

**Author:** [@Alesk1969](https://discourse.processing.org/u/Alesk1969)\
**Replies:** 9\
**Last updated:** [April 5, 2023, 10:11pm UTC](https://discourse.processing.org/t/access-single-object-in-an-array/41514 "2023-04-05T22:11:27Z")

</div>

Hi! I’m struggling with something I guess is pretty simple. I’m building a sketch with an array of objects made of boxes. I’m looping through the array to display the boxes on the screen & to make the boxes spin. But I…

---

## [Accessibility for students with dyslexia/visual processing disorders?](https://discourse.processing.org/t/accessibility-for-students-with-dyslexia-visual-processing-disorders/41588)

<div class="topic-metadata">

**Author:** [@rainbowlazer](https://discourse.processing.org/u/rainbowlazer)\
**Replies:** 0\
**Last updated:** [April 3, 2023, 8:22pm UTC](https://discourse.processing.org/t/accessibility-for-students-with-dyslexia-visual-processing-disorders/41588 "2023-04-03T20:22:14Z")

</div>

Hello! I’m working with a couple of coding students this term who have some form of dyslexia/visual processing disorder that makes seeing numbers difficult. So far we’ve tried the OpenDyslexic for Chrome plugin, as well…

---

## [I have an idea of converting the languages appearing in the p5js.org/contributor-docs/#/es/ website into dropdown section](https://discourse.processing.org/t/i-have-an-idea-of-converting-the-languages-appearing-in-the-p5js-org-contributor-docs-es-website-into-dropdown-section/41554)

<div class="topic-metadata">

**Author:** [@lavanya09](https://discourse.processing.org/u/lavanya09)\
**Replies:** 0\
**Last updated:** [April 1, 2023, 8:54am UTC](https://discourse.processing.org/t/i-have-an-idea-of-converting-the-languages-appearing-in-the-p5js-org-contributor-docs-es-website-into-dropdown-section/41554 "2023-04-01T08:54:02Z")

</div>

I have an idea of creating a drop down for languages to choose it allows the website look decent it also minimizes the space @Claire Kearney-Volpe

---

## [Problem with cursor()](https://discourse.processing.org/t/problem-with-cursor/41558)

<div class="topic-metadata">

**Author:** [@ggultt](https://discourse.processing.org/u/ggultt)\
**Replies:** 6\
**Last updated:** [April 2, 2023, 10:53pm UTC](https://discourse.processing.org/t/problem-with-cursor/41558 "2023-04-02T22:53:46Z")

</div>

Hello! I’m struggling with the cursor function, I was wondering the reason why the cursor didn’t change. I thought p5.js allows the file extension including .png; Is there anything I did wrong? Thank you so much! le…

---

## [Using p5.js via npm](https://discourse.processing.org/t/using-p5-js-via-npm/35914)

<div class="topic-metadata">

**Author:** [@JaPatProccesingDis](https://discourse.processing.org/u/JaPatProccesingDis)\
**Replies:** 9\
**Last updated:** [April 1, 2023, 8:29am UTC](https://discourse.processing.org/t/using-p5-js-via-npm/35914 "2023-04-01T08:29:58Z")

</div>

Hey there! I downloaded p5 via npm locally in one of my projects. Now how do I import it to the index.html file? Is doing this worth it? Or should I rather abandon this idea and use the CDN instead?

---

## [\[p5 WEB\] Is there a library capable of CCTV Mjpeg?](https://discourse.processing.org/t/p5-web-is-there-a-library-capable-of-cctv-mjpeg/41486)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 2\
**Last updated:** [March 28, 2023, 10:49pm UTC](https://discourse.processing.org/t/p5-web-is-there-a-library-capable-of-cctv-mjpeg/41486 "2023-03-28T22:49:23Z")

</div>

\[p5 WEB\] Is there a library capable of CCTV Mjpeg? Hello. Nice to meet you. I want to express real-time streaming video of CCTV on ‘p5 WEB’. In ‘JAVA Mode’ Library-IPCature: Mjpeg executable url exam : http:// \[\[i…

---

## [Brightness Range](https://discourse.processing.org/t/brightness-range/41483)

<div class="topic-metadata">

**Author:** [@linz](https://discourse.processing.org/u/linz)\
**Replies:** 2\
**Last updated:** [March 28, 2023, 7:25pm UTC](https://discourse.processing.org/t/brightness-range/41483 "2023-03-28T19:25:47Z")

</div>

Hi, I’m doing a homework on recreating an artwork using p5.js. For some reason, the brightness is going from 0-100 instead of 0-255, not sure why. let fontArray = ; let Obama; function preload() { fontArray\[0\] = load…

---

## [Code being displayed in Browser instead of sketch](https://discourse.processing.org/t/code-being-displayed-in-browser-instead-of-sketch/41405)

<div class="topic-metadata">

**Author:** [@Alesk1969](https://discourse.processing.org/u/Alesk1969)\
**Replies:** 7\
**Last updated:** [March 24, 2023, 8:50am UTC](https://discourse.processing.org/t/code-being-displayed-in-browser-instead-of-sketch/41405 "2023-03-24T08:50:44Z")

</div>

Hi there! I have a very newbie question. I recently installed the P5.js library within Sublime and installed as well the Browser Sync add-on. I’ve created a subfolder called Sketches which contains the index.html file …

---

## [Fatal error When running npm test on fresh github clone](https://discourse.processing.org/t/fatal-error-when-running-npm-test-on-fresh-github-clone/41413)

<div class="topic-metadata">

**Author:** [@AdityaShrivastav](https://discourse.processing.org/u/AdityaShrivastav)\
**Replies:** 0\
**Last updated:** [March 23, 2023, 10:54am UTC](https://discourse.processing.org/t/fatal-error-when-running-npm-test-on-fresh-github-clone/41413 "2023-03-23T10:54:20Z")

</div>

I am not able to run test locally, I’ve discribed my problem in the given issue.

---

## [How to extract value from an array of multiple JSON urls?](https://discourse.processing.org/t/how-to-extract-value-from-an-array-of-multiple-json-urls/41398)

<div class="topic-metadata">

**Author:** [@nitrocaphane](https://discourse.processing.org/u/nitrocaphane)\
**Replies:** 13\
**Last updated:** [March 22, 2023, 5:18am UTC](https://discourse.processing.org/t/how-to-extract-value-from-an-array-of-multiple-json-urls/41398 "2023-03-22T05:18:58Z")

</div>

Hi, I’m trying to write a sketch that replaces all the nouns in the user input content with the dictionary definition of the noun. I’m using RiTa.js to detect the nouns (that part is successful), and Wordnik API for the…

---

## ['p5 WEB' sometimes does not show](https://discourse.processing.org/t/p5-web-sometimes-does-not-show/41373)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 0\
**Last updated:** [March 21, 2023, 1:28am UTC](https://discourse.processing.org/t/p5-web-sometimes-does-not-show/41373 "2023-03-21T01:28:54Z")

</div>

‘p5 WEB’ sometimes does not show. //-\> setup var cbox; cbox = select('#map\_div'); cbox.position(10,160); cbox.hide(); //-\> button event cbox.show(); When the ‘cbox.show()’ operation is performed, the map should be v…

---

## [Displaying p5.js sketches on a Wordpress site](https://discourse.processing.org/t/displaying-p5-js-sketches-on-a-wordpress-site/41306)

<div class="topic-metadata">

**Author:** [@Liz](https://discourse.processing.org/u/Liz)\
**Replies:** 2\
**Last updated:** [March 21, 2023, 7:51am UTC](https://discourse.processing.org/t/displaying-p5-js-sketches-on-a-wordpress-site/41306 "2023-03-21T07:51:48Z")

</div>

Could anyone tell me in an idiot-proof way, how I can display p5.js sketches on a Wordpress site. I’ve worked out how to embed the web editor, but I’d prefer to upload the files to the site. I’d also prefer not to rely o…

---

## [When releasing the WEB through 'p5', what are the security problems?](https://discourse.processing.org/t/when-releasing-the-web-through-p5-what-are-the-security-problems/41241)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 8\
**Last updated:** [March 19, 2023, 10:21am UTC](https://discourse.processing.org/t/when-releasing-the-web-through-p5-what-are-the-security-problems/41241 "2023-03-19T10:21:47Z")

</div>

When releasing the WEB through ‘p5’, what are the security problems? For example, there were no security problems when released in ‘JAVA Mode’ of ‘Processing’. (When the exe file is released, the source code is trans…

---

## [How to distinguish 'p5 WEB' smartphone computer?](https://discourse.processing.org/t/how-to-distinguish-p5-web-smartphone-computer/41334)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 4\
**Last updated:** [March 18, 2023, 11:49am UTC](https://discourse.processing.org/t/how-to-distinguish-p5-web-smartphone-computer/41334 "2023-03-18T11:49:45Z")

</div>

How to distinguish ‘p5 WEB’ smartphone computer? What you are currently using is a computer or mobile. Can I get device information? If it’s mobile, I want it to be fixed in portrait.

---

## [Problem with 3D and fill](https://discourse.processing.org/t/problem-with-3d-and-fill/41317)

<div class="topic-metadata">

**Author:** [@haapjou](https://discourse.processing.org/u/haapjou)\
**Replies:** 4\
**Last updated:** [March 17, 2023, 8:20am UTC](https://discourse.processing.org/t/problem-with-3d-and-fill/41317 "2023-03-17T08:20:44Z")

</div>

Hi, I’ve been trying to do boxes inside boxes, but for some reason can’t get the fill to work the way I want. (transparent fill with the stroke color). What am I missing??

---

## [Find the correct order of drawing a box in perspective](https://discourse.processing.org/t/find-the-correct-order-of-drawing-a-box-in-perspective/41271)

<div class="topic-metadata">

**Author:** [@vjjv](https://discourse.processing.org/u/vjjv)\
**Replies:** 5\
**Last updated:** [March 16, 2023, 6:32pm UTC](https://discourse.processing.org/t/find-the-correct-order-of-drawing-a-box-in-perspective/41271 "2023-03-16T18:32:13Z")

</div>

Hello! Im trying to learn about perspective using code and create my own drawing system. I have this piece of code and my problem is that i dont know how to sort the sides of the cube to draw them correctly according to…

---

## [GameLibZeroWEB WEBGL](https://discourse.processing.org/t/gamelibzeroweb-webgl/40693)

<div class="topic-metadata">

**Author:** [@erkosone](https://discourse.processing.org/u/erkosone)\
**Replies:** 11\
**Last updated:** [March 16, 2023, 1:38pm UTC](https://discourse.processing.org/t/gamelibzeroweb-webgl/40693 "2023-03-16T13:38:47Z")

</div>

EDIT: Example pack: Dropbox - glz\_web\_p5\_examples.zip - Simplify your life Hello community, I am pleased to announce that I finally have a “decent” and “clean” version of the GameLibZero code that I have been using com…

---

## ["Guide to contributing p5.js tutorials" link broken](https://discourse.processing.org/t/guide-to-contributing-p5-js-tutorials-link-broken/41298)

<div class="topic-metadata">

**Author:** [@ashley](https://discourse.processing.org/u/ashley)\
**Replies:** 0\
**Last updated:** [March 15, 2023, 2:56pm UTC](https://discourse.processing.org/t/guide-to-contributing-p5-js-tutorials-link-broken/41298 "2023-03-15T14:56:34Z")

</div>

It seems like the first link in the Guide to contributing p5.js tutorials leads to a spreadsheet that has been deleted. This spreadsheet was intended to outline in-progress tutorials. Would someone be able to re-link thi…

---

## [Physics engine looks like not working but dunno how to test](https://discourse.processing.org/t/physics-engine-looks-like-not-working-but-dunno-how-to-test/41229)

<div class="topic-metadata">

**Author:** [@jounce](https://discourse.processing.org/u/jounce)\
**Replies:** 14\
**Last updated:** [March 13, 2023, 10:01pm UTC](https://discourse.processing.org/t/physics-engine-looks-like-not-working-but-dunno-how-to-test/41229 "2023-03-13T22:01:37Z")

</div>

https://replit.com/@imcute-aaaa/physics-lib#script.js (im not asking about p5,but i used p5,so i can ask,right?)

---

## [Wrong item in the list is triggered, which is weird and not what is intended + contribution](https://discourse.processing.org/t/wrong-item-in-the-list-is-triggered-which-is-weird-and-not-what-is-intended-contribution/41136)

<div class="topic-metadata">

**Author:** [@woshibide](https://discourse.processing.org/u/woshibide)\
**Replies:** 4\
**Last updated:** [March 4, 2023, 6:46pm UTC](https://discourse.processing.org/t/wrong-item-in-the-list-is-triggered-which-is-weird-and-not-what-is-intended-contribution/41136 "2023-03-04T18:46:29Z")

</div>

I’m trying to build a basic sound sampler, where on each key pressed sound is played And I have everything working, but with 1 annoying bug: Whenever item N is pressed, on the screen it triggers N+1, and this bit of…

---

## [\[WARNING: Flickering images\] saveGif() inserting blank (black) frame when triggering in setup()](https://discourse.processing.org/t/warning-flickering-images-savegif-inserting-blank-black-frame-when-triggering-in-setup/41131)

<div class="topic-metadata">

**Author:** [@jernwerber](https://discourse.processing.org/u/jernwerber)\
**Replies:** 4\
**Last updated:** [March 4, 2023, 3:03am UTC](https://discourse.processing.org/t/warning-flickering-images-savegif-inserting-blank-black-frame-when-triggering-in-setup/41131 "2023-03-04T03:03:48Z")

</div>

Hey folks, The reference documentation says that you can call saveGif() during setup() or in an event function. I’m having an issue with a black frame when calling it during setup() and I’m trying to figure out if this …

---

## [P5.js drum machine](https://discourse.processing.org/t/p5-js-drum-machine/39843)

<div class="topic-metadata">

**Author:** [@alenmartel](https://discourse.processing.org/u/alenmartel)\
**Replies:** 2\
**Last updated:** [March 3, 2023, 2:47am UTC](https://discourse.processing.org/t/p5-js-drum-machine/39843 "2023-03-03T02:47:22Z")

</div>

Good evening all; I am continuing working on a project, which is essentially a drum machine whose tempo you can adjust in real time using a slider. That is, you can set up the drum machine and play it and as it’s playin…

---

## [Optimizing collision detection and resolution between shapes](https://discourse.processing.org/t/optimizing-collision-detection-and-resolution-between-shapes/41104)

<div class="topic-metadata">

**Author:** [@bdooley](https://discourse.processing.org/u/bdooley)\
**Replies:** 0\
**Last updated:** [March 1, 2023, 2:39pm UTC](https://discourse.processing.org/t/optimizing-collision-detection-and-resolution-between-shapes/41104 "2023-03-01T14:39:21Z")

</div>

Hi all, I am working on a sketch with falling rectangles and circles that collide with each other, the left and right walls, and ground. https://editor.p5js.org/bdooley7/sketches/WXa5AQgKD The collision detection seem…

---

## [Showing my P5 sketch with a projector](https://discourse.processing.org/t/showing-my-p5-sketch-with-a-projector/40954)

<div class="topic-metadata">

**Author:** [@Omri](https://discourse.processing.org/u/Omri)\
**Replies:** 4\
**Last updated:** [February 26, 2023, 1:28pm UTC](https://discourse.processing.org/t/showing-my-p5-sketch-with-a-projector/40954 "2023-02-26T13:28:59Z")

</div>

Hey, I have a p5 project that is in a square format (800X800) I want to project it on a wall. How can I do that that it will be only shown the sketch? (without my browser tool Bar or something) Thanks :smile:

---

## [Sketch runs slow in P5.js WEBGL, (SOLVED by using P5.Geometry)](https://discourse.processing.org/t/sketch-runs-slow-in-p5-js-webgl-solved-by-using-p5-geometry/31990)

<div class="topic-metadata">

**Author:** [@J\_Silva](https://discourse.processing.org/u/J_Silva)\
**Replies:** 22\
**Last updated:** [February 23, 2023, 11:56pm UTC](https://discourse.processing.org/t/sketch-runs-slow-in-p5-js-webgl-solved-by-using-p5-geometry/31990 "2023-02-23T23:56:02Z")

</div>

Hi. I am translating a sketch from P5.java to P5.js. In java, it runs nice and smooth at a frameRate near 60. In p5.js the frameRate drops to around 4 f/s and a lot of details are missing. How can I improve this, or is…

---

## [Short guide about sending data from iframe embeded p5 sketches to a host webpage](https://discourse.processing.org/t/short-guide-about-sending-data-from-iframe-embeded-p5-sketches-to-a-host-webpage/41029)

<div class="topic-metadata">

**Author:** [@guidoschmidt](https://discourse.processing.org/u/guidoschmidt)\
**Replies:** 0\
**Last updated:** [February 23, 2023, 4:46pm UTC](https://discourse.processing.org/t/short-guide-about-sending-data-from-iframe-embeded-p5-sketches-to-a-host-webpage/41029 "2023-02-23T16:46:03Z")

</div>

Hey everyone :v: just wanted to share this short blog post I recently wrote about sending data from p5 sketches embeded via \<iframe/\> on a host web page. Initially I stumbled upon this, when a student asked me for help …

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

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