# p5.js

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

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

**Page:** 34

---

## [Use Webgl2 in p5js](https://discourse.processing.org/t/use-webgl2-in-p5js/33695)

<div class="topic-metadata">

**Author:** [@clankill3r](https://discourse.processing.org/u/clankill3r)\
**Replies:** 1\
**Last updated:** [November 23, 2021, 5:45pm UTC](https://discourse.processing.org/t/use-webgl2-in-p5js/33695 "2021-11-23T17:45:54Z")

</div>

Is there any way (with example prefered), to use WEBGL2? I have to make quite advanced shaders, that at this point I would prefer to move to three.js then missing out on certain shader features.

---

## [Sharing just the sketch?](https://discourse.processing.org/t/sharing-just-the-sketch/33667)

<div class="topic-metadata">

**Author:** [@Timo](https://discourse.processing.org/u/Timo)\
**Replies:** 4\
**Last updated:** [November 23, 2021, 11:02am UTC](https://discourse.processing.org/t/sharing-just-the-sketch/33667 "2021-11-23T11:02:20Z")

</div>

Hi , this is a very basic question. I was using p5js web editor to experiment on my sketches . However there is a lot of code written on a trial or error basis . Is there a way to just share the sketch ? I think with the…

---

## [Transitioning from scalar to vector](https://discourse.processing.org/t/transitioning-from-scalar-to-vector/33680)

<div class="topic-metadata">

**Author:** [@ADG](https://discourse.processing.org/u/ADG)\
**Replies:** 3\
**Last updated:** [November 23, 2021, 4:25am UTC](https://discourse.processing.org/t/transitioning-from-scalar-to-vector/33680 "2021-11-23T04:25:44Z")

</div>

Hello, I’m trying to rewrite my programs & classes to use vectors. vectors themselves are easy, but going about the operations in p5.js has me getting lost in the syntax. As a simple example I make 2 vectors to create…

---

## [Adding to documentation](https://discourse.processing.org/t/adding-to-documentation/33673)

<div class="topic-metadata">

**Author:** [@Reeju\_Bhattacharya](https://discourse.processing.org/u/Reeju_Bhattacharya)\
**Replies:** 0\
**Last updated:** [November 22, 2021, 8:20pm UTC](https://discourse.processing.org/t/adding-to-documentation/33673 "2021-11-22T20:20:06Z")

</div>

Hi, I was looking to work on an issue in the p5.js issues page which requires me to add to the documentation. However, the issue is on the main p5.js github page, while It looks to me, I have to work on the p5.js-website…

---

## [Uploading P5.js sketch from P3 IDE](https://discourse.processing.org/t/uploading-p5-js-sketch-from-p3-ide/27447)

<div class="topic-metadata">

**Author:** [@geo3geo](https://discourse.processing.org/u/geo3geo)\
**Replies:** 8\
**Last updated:** [November 22, 2021, 9:39am UTC](https://discourse.processing.org/t/uploading-p5-js-sketch-from-p3-ide/27447 "2021-11-22T09:39:38Z")

</div>

I’ve created a program using P3 IDE in P5.js mode. Runs well on my Chrome web server so now I want to share it on the P5js.org web site. I foolishly assumed I would be able to upload my project like I used to do with Ja…

---

## [Control the order of returning callbacks](https://discourse.processing.org/t/control-the-order-of-returning-callbacks/33657)

<div class="topic-metadata">

**Author:** [@SMD](https://discourse.processing.org/u/SMD)\
**Replies:** 2\
**Last updated:** [November 22, 2021, 5:55am UTC](https://discourse.processing.org/t/control-the-order-of-returning-callbacks/33657 "2021-11-22T05:55:50Z")

</div>

Hi all I’m trying to load multiple large images (3600x1800) into a p5 sketch. I can’t use preload because there are over 300 of them and memory issues are crashing the browser. Speed isn’t important though so I’m using …

---

## [Check is coordinates are within a shape boundaries](https://discourse.processing.org/t/check-is-coordinates-are-within-a-shape-boundaries/33292)

<div class="topic-metadata">

**Author:** [@zjorge](https://discourse.processing.org/u/zjorge)\
**Replies:** 3\
**Last updated:** [November 21, 2021, 5:56pm UTC](https://discourse.processing.org/t/check-is-coordinates-are-within-a-shape-boundaries/33292 "2021-11-21T17:56:04Z")

</div>

I have previously managed to check or detect if a click is inside a circle or a rectangle. Now I want to fill a shape with dots using Poisson-Disc algorithm. How can I detect if the current dot is within the bounds of …

---

## [Pressing the 0 key while holding control and shift doesn't cause keyPressed to be called](https://discourse.processing.org/t/pressing-the-0-key-while-holding-control-and-shift-doesnt-cause-keypressed-to-be-called/33578)

<div class="topic-metadata">

**Author:** [@modusponens](https://discourse.processing.org/u/modusponens)\
**Replies:** 2\
**Last updated:** [November 20, 2021, 7:53am UTC](https://discourse.processing.org/t/pressing-the-0-key-while-holding-control-and-shift-doesnt-cause-keypressed-to-be-called/33578 "2021-11-20T07:53:07Z")

</div>

Just as the topic title says, the 0 (zero) key doesn’t seem to cause keyPressed to be called while you’re holding the control and shift keys. It does get called if you press 0 while you’re holding either control or shift…

---

## [How to use P5.js in H5p](https://discourse.processing.org/t/how-to-use-p5-js-in-h5p/33612)

<div class="topic-metadata">

**Author:** [@ViCh](https://discourse.processing.org/u/ViCh)\
**Replies:** 2\
**Last updated:** [November 20, 2021, 4:51am UTC](https://discourse.processing.org/t/how-to-use-p5-js-in-h5p/33612 "2021-11-20T04:51:50Z")

</div>

I am trying to create distributable packages(H5p) for the game that I have created using P5.js and Blockly. Basically in this game output is generated on-screen(P5.js, HTML Canvas) taking the instructions from the Blockl…

---

## [Interactive sketches](https://discourse.processing.org/t/interactive-sketches/33602)

<div class="topic-metadata">

**Author:** [@jarlook](https://discourse.processing.org/u/jarlook)\
**Replies:** 0\
**Last updated:** [November 19, 2021, 1:03am UTC](https://discourse.processing.org/t/interactive-sketches/33602 "2021-11-19T01:03:33Z")

</div>

Several years ago I used Processing to create sketches for my chess visualization project. I created videos of the sketches and stored them on Vimeo, for viewing on a website. I am returning to that project, but now wa…

---

## [OrbitControl embeded conflict with scroll on page](https://discourse.processing.org/t/orbitcontrol-embeded-conflict-with-scroll-on-page/32547)

<div class="topic-metadata">

**Author:** [@Sophie1000](https://discourse.processing.org/u/Sophie1000)\
**Replies:** 2\
**Last updated:** [November 18, 2021, 5:40pm UTC](https://discourse.processing.org/t/orbitcontrol-embeded-conflict-with-scroll-on-page/32547 "2021-11-18T17:40:11Z")

</div>

Hello, I’m working on that project : https://sophie1000.com/F360D/F360D/index.html Each 3D object is in a canvas with OrbitControl, then embedded in iframe. On the global page, there is a horizontal scroll that works …

---

## [Reset orbitControl()](https://discourse.processing.org/t/reset-orbitcontrol/33576)

<div class="topic-metadata">

**Author:** [@thesandrobrito](https://discourse.processing.org/u/thesandrobrito)\
**Replies:** 2\
**Last updated:** [November 18, 2021, 9:18am UTC](https://discourse.processing.org/t/reset-orbitcontrol/33576 "2021-11-18T09:18:23Z")

</div>

Hello everyone, I am working on an application where if I press a button I enable orbitControl, if I press another one it should reset to a automatic rotation. Is there anyway to reset orbitControl to 0 so the environm…

---

## [JavaScript w/ p5.js Editor: Figuring out how to modify my code for mouse over hover box and API display](https://discourse.processing.org/t/javascript-w-p5-js-editor-figuring-out-how-to-modify-my-code-for-mouse-over-hover-box-and-api-display/33566)

<div class="topic-metadata">

**Author:** [@cartopher](https://discourse.processing.org/u/cartopher)\
**Replies:** 1\
**Last updated:** [November 18, 2021, 12:07am UTC](https://discourse.processing.org/t/javascript-w-p5-js-editor-figuring-out-how-to-modify-my-code-for-mouse-over-hover-box-and-api-display/33566 "2021-11-18T00:07:53Z")

</div>

p5.js Web Editor I’m having difficulty figuring out how to modify my code so that when you hover over a point on the map, a box appears displaying the location’s name, in addition to displaying weather data from the wea…

---

## [Save the canvas at a frequency keeping all the images](https://discourse.processing.org/t/save-the-canvas-at-a-frequency-keeping-all-the-images/33559)

<div class="topic-metadata">

**Author:** [@Hiram-Belgium](https://discourse.processing.org/u/Hiram-Belgium)\
**Replies:** 7\
**Last updated:** [November 17, 2021, 4:11pm UTC](https://discourse.processing.org/t/save-the-canvas-at-a-frequency-keeping-all-the-images/33559 "2021-11-17T16:11:07Z")

</div>

Hello, I am a beginner who knows very little about programming. I would like to know how to save the canvas at regular intervals, for example every 5 seconds … But also obviously keep all the images. Example image1-5sec…

---

## [textureWrap() doesn't work?](https://discourse.processing.org/t/texturewrap-doesnt-work/33563)

<div class="topic-metadata">

**Author:** [@hinken](https://discourse.processing.org/u/hinken)\
**Replies:** 1\
**Last updated:** [November 17, 2021, 8:01am UTC](https://discourse.processing.org/t/texturewrap-doesnt-work/33563 "2021-11-17T08:01:36Z")

</div>

Hi, I’ve been trying to use textureWrap(MIRROR) to tile a texture and no matter what I do it doesn’t seem to do anything - the texture just resizes to the full size of the surface. I’ve put textureWrap() in both draw and…

---

## [Sound does not play](https://discourse.processing.org/t/sound-does-not-play/33546)

<div class="topic-metadata">

**Author:** [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Replies:** 1\
**Last updated:** [November 16, 2021, 8:24pm UTC](https://discourse.processing.org/t/sound-does-not-play/33546 "2021-11-16T20:24:52Z")

</div>

I tried to write a program that works on mobile (apple) devices. Everything works except for the sound. This is my code: // A sound file object var dingdong; function preload() { // Load the sound file. // We hav…

---

## [Downloading images from server in the background, while script is running](https://discourse.processing.org/t/downloading-images-from-server-in-the-background-while-script-is-running/33556)

<div class="topic-metadata">

**Author:** [@user101](https://discourse.processing.org/u/user101)\
**Replies:** 1\
**Last updated:** [November 16, 2021, 8:15pm UTC](https://discourse.processing.org/t/downloading-images-from-server-in-the-background-while-script-is-running/33556 "2021-11-16T20:15:59Z")

</div>

I want to create a website with many, many images on the frontpage. However, not all of these images are visiable from the start of the script on, instead they should be downloaded from the server in the background, whil…

---

## [Editor.p5js.org present mode disappeared?](https://discourse.processing.org/t/editor-p5js-org-present-mode-disappeared/33495)

<div class="topic-metadata">

**Author:** [@bakercp](https://discourse.processing.org/u/bakercp)\
**Replies:** 7\
**Last updated:** [November 15, 2021, 7:03pm UTC](https://discourse.processing.org/t/editor-p5js-org-present-mode-disappeared/33495 "2021-11-15T19:03:55Z")

</div>

Hi there, I’m working with a student who is using the web bluetooth api in https://editor.p5js.org. Previously we got around iframe cross-origin security errors by running the sketch in full-screen present mode. Now it …

---

## [Text is added twice](https://discourse.processing.org/t/text-is-added-twice/33527)

<div class="topic-metadata">

**Author:** [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Replies:** 1\
**Last updated:** [November 15, 2021, 10:29am UTC](https://discourse.processing.org/t/text-is-added-twice/33527 "2021-11-15T10:29:25Z")

</div>

in the kill screen, there is a textbox. when you click on it you can type, but the letters you type show up twice. how do i fix this?

---

## [Difference between directionalLight() and pointLight() on basic 3D shapes and P5.Geometry shapes](https://discourse.processing.org/t/difference-between-directionallight-and-pointlight-on-basic-3d-shapes-and-p5-geometry-shapes/33419)

<div class="topic-metadata">

**Author:** [@J\_Silva](https://discourse.processing.org/u/J_Silva)\
**Replies:** 8\
**Last updated:** [November 15, 2021, 6:09am UTC](https://discourse.processing.org/t/difference-between-directionallight-and-pointlight-on-basic-3d-shapes-and-p5-geometry-shapes/33419 "2021-11-15T06:09:31Z")

</div>

Hi. When using directionalLight() I need to give a negative z value to actually see the light. If I understand it well the z value is positive towards the ‘viewer’, and that’s what happens when I use a positive z value…

---

## [Anti-aliased edges in WEBGL mode in p5js](https://discourse.processing.org/t/anti-aliased-edges-in-webgl-mode-in-p5js/33524)

<div class="topic-metadata">

**Author:** [@ippsketch](https://discourse.processing.org/u/ippsketch)\
**Replies:** 0\
**Last updated:** [November 15, 2021, 5:19am UTC](https://discourse.processing.org/t/anti-aliased-edges-in-webgl-mode-in-p5js/33524 "2021-11-15T05:19:35Z")

</div>

Shape edges are jagged in p5js WEBGL mode compared to the default 2D mode. smooth() and setAttributes(‘antialias’,true) did not work or improve this. Does anyone know how to achieve clean anti-aliased edges for p5js WE…

---

## [Needs help scaling my project to the correct size](https://discourse.processing.org/t/needs-help-scaling-my-project-to-the-correct-size/33414)

<div class="topic-metadata">

**Author:** [@timtam198](https://discourse.processing.org/u/timtam198)\
**Replies:** 1\
**Last updated:** [November 13, 2021, 9:44am UTC](https://discourse.processing.org/t/needs-help-scaling-my-project-to-the-correct-size/33414 "2021-11-13T09:44:49Z")

</div>

Hello, does anyone know how to make my object stay the same size even when the canvas size changes? I am currently using windowWidth/Height for my canvas size and while it look great like this, my shapes distorts we…

---

## [How to add library from github to openprocessing p5js sketch?](https://discourse.processing.org/t/how-to-add-library-from-github-to-openprocessing-p5js-sketch/33468)

<div class="topic-metadata">

**Author:** [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Replies:** 4\
**Last updated:** [November 12, 2021, 3:42pm UTC](https://discourse.processing.org/t/how-to-add-library-from-github-to-openprocessing-p5js-sketch/33468 "2021-11-12T15:42:00Z")

</div>

I want to add this library to this sketch but I cant figure out how to do it. how to I do this?

---

## [Is the pixels offset calculation correct in the p5.js reference?](https://discourse.processing.org/t/is-the-pixels-offset-calculation-correct-in-the-p5-js-reference/33460)

<div class="topic-metadata">

**Author:** [@hamoid](https://discourse.processing.org/u/hamoid)\
**Replies:** 2\
**Last updated:** [November 12, 2021, 8:24am UTC](https://discourse.processing.org/t/is-the-pixels-offset-calculation-correct-in-the-p5-js-reference/33460 "2021-11-12T08:24:55Z")

</div>

Hi hi, I’m using the webcam on a high dpi tablet, showing the webcam image and overlaying a few rectangles matching the webcam pixel color below. I based my code on the reference: // From https://p5js.org/reference/#/p…

---

## [Help translating p3 to p5js](https://discourse.processing.org/t/help-translating-p3-to-p5js/33199)

<div class="topic-metadata">

**Author:** [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Replies:** 10\
**Last updated:** [November 10, 2021, 4:16pm UTC](https://discourse.processing.org/t/help-translating-p3-to-p5js/33199 "2021-11-10T16:16:26Z")

</div>

i tried translating my processing 3 code into p5js code but it doesn’t work. what did i do wrong? p5js code: var trashX; var trashY; var boatX; var boatY; var ropelenght = 0; var movingspeed = 10; var time; var sc…

---

## [P5 js editor blocked by Avast- new problem](https://discourse.processing.org/t/p5-js-editor-blocked-by-avast-new-problem/33417)

<div class="topic-metadata">

**Author:** [@Kris1](https://discourse.processing.org/u/Kris1)\
**Replies:** 4\
**Last updated:** [November 9, 2021, 11:46pm UTC](https://discourse.processing.org/t/p5-js-editor-blocked-by-avast-new-problem/33417 "2021-11-09T23:46:10Z")

</div>

Hi Folks- yesterday I was working on a project. There were no isssues with the P5 editor. I came back a few hours later and a warning message from Avast came up. This has never happened to me before using P5 JS. Has …

---

## [How do i create a program to loop through videos in p5.js](https://discourse.processing.org/t/how-do-i-create-a-program-to-loop-through-videos-in-p5-js/33401)

<div class="topic-metadata">

**Author:** [@iade2021](https://discourse.processing.org/u/iade2021)\
**Replies:** 8\
**Last updated:** [November 9, 2021, 7:11pm UTC](https://discourse.processing.org/t/how-do-i-create-a-program-to-loop-through-videos-in-p5-js/33401 "2021-11-09T19:11:04Z")

</div>

\< I am pretty new to coding, I am trying to apply different seriously.js effects on different arrays of videos, I am not even able to make the program loop through the videos in the array …

---

## [Esri/Leaflet : converting between pixel coordinates and latitude/longitude coordinates](https://discourse.processing.org/t/esri-leaflet-converting-between-pixel-coordinates-and-latitude-longitude-coordinates/33418)

<div class="topic-metadata">

**Author:** [@cartopher](https://discourse.processing.org/u/cartopher)\
**Replies:** 1\
**Last updated:** [November 9, 2021, 4:43pm UTC](https://discourse.processing.org/t/esri-leaflet-converting-between-pixel-coordinates-and-latitude-longitude-coordinates/33418 "2021-11-09T16:43:57Z")

</div>

I’m currently working on an interactive map using p5.js. Having said that, I’m on a mission to figure out how to communicate between a p5.js sketch and the leaflet map’s geographic coordinates, i.e., converting between p…

---

## [Setting random image texture on randomized number of torus from image array](https://discourse.processing.org/t/setting-random-image-texture-on-randomized-number-of-torus-from-image-array/33031)

<div class="topic-metadata">

**Author:** [@repeaterblues](https://discourse.processing.org/u/repeaterblues)\
**Replies:** 5\
**Last updated:** [November 9, 2021, 4:46am UTC](https://discourse.processing.org/t/setting-random-image-texture-on-randomized-number-of-torus-from-image-array/33031 "2021-11-09T04:46:52Z")

</div>

Hello, I am working on a code in webgl in the p5js web editor that calls in a random number of spinning torus, spinning at different speeds and angles, which are all defined. I have set the texture to pull from an array …

---

## [Methods bound to p5 "canvas" vs. offscreen p5 "graphics"](https://discourse.processing.org/t/methods-bound-to-p5-canvas-vs-offscreen-p5-graphics/14079)

<div class="topic-metadata">

**Author:** [@grege2](https://discourse.processing.org/u/grege2)\
**Replies:** 5\
**Last updated:** [November 7, 2021, 4:23am UTC](https://discourse.processing.org/t/methods-bound-to-p5-canvas-vs-offscreen-p5-graphics/14079 "2021-11-07T04:23:30Z")

</div>

Hi folks, I’m finding that some everyday p5.js methods are not bound to a p5 canvas in the way that I expected. But they are all bound ok to a p5.Graphics created with createGraphics(). So, if I create a canvas, with …

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

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