# p5.js

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

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

**Page:** 38

---

## [Has createCheckbox() always made a checkbox with a div or is it a bug?](https://discourse.processing.org/t/has-createcheckbox-always-made-a-checkbox-with-a-div-or-is-it-a-bug/24610)

<div class="topic-metadata">

**Author:** [@toad](https://discourse.processing.org/u/toad)\
**Replies:** 4\
**Last updated:** [September 20, 2021, 8:24am UTC](https://discourse.processing.org/t/has-createcheckbox-always-made-a-checkbox-with-a-div-or-is-it-a-bug/24610 "2021-09-20T08:24:11Z")

</div>

i have a for loop that creates 20 checkboxes, however they are all in there own individual divs, which makes them all display: block which is not what i want. any suggestions?

---

## [What's the equivalent of using cos() and sin() to find points on the edge of a circle to find points on a sphere?](https://discourse.processing.org/t/whats-the-equivalent-of-using-cos-and-sin-to-find-points-on-the-edge-of-a-circle-to-find-points-on-a-sphere/31407)

<div class="topic-metadata">

**Author:** [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Replies:** 10\
**Last updated:** [September 20, 2021, 5:33am UTC](https://discourse.processing.org/t/whats-the-equivalent-of-using-cos-and-sin-to-find-points-on-the-edge-of-a-circle-to-find-points-on-a-sphere/31407 "2021-09-20T05:33:25Z")

</div>

When putting points on the edge of a 2D circle you can do the following. let r = 50; for(i = 0; i \< 360; i ++){ ellipse(cos(i) \* r, sin(i) \* r,3); } There has to be an equivalent for spheres without cheating it right?

---

## [How do I import p5 via npm?](https://discourse.processing.org/t/how-do-i-import-p5-via-npm/11543)

<div class="topic-metadata">

**Author:** [@lion9](https://discourse.processing.org/u/lion9)\
**Replies:** 6\
**Last updated:** [September 18, 2021, 8:53pm UTC](https://discourse.processing.org/t/how-do-i-import-p5-via-npm/11543 "2021-09-18T20:53:07Z")

</div>

I have tried to import p5 into my project using webpack (you can see the code here GitHub - lion9/p5-npm), but to no avail. Everything seems to be built into the app.bundle.js file, but the canvas is not appering at all. …

---

## [SVG image doesn't work](https://discourse.processing.org/t/svg-image-doesnt-work/32115)

<div class="topic-metadata">

**Author:** [@Quorum](https://discourse.processing.org/u/Quorum)\
**Replies:** 1\
**Last updated:** [September 18, 2021, 8:42pm UTC](https://discourse.processing.org/t/svg-image-doesnt-work/32115 "2021-09-18T20:42:06Z")

</div>

I created a grid where the squares have a color assigned by the URL constant. const URL = \[ "https://coolors.co/283d3b-197278-edddd4-c44536-772e25" \]; Inside the squares I place individual images. In two squares I …

---

## [I could use some help to reverse engineer this artwork :)](https://discourse.processing.org/t/i-could-use-some-help-to-reverse-engineer-this-artwork/32181)

<div class="topic-metadata">

**Author:** [@goldorak](https://discourse.processing.org/u/goldorak)\
**Replies:** 2\
**Last updated:** [September 18, 2021, 6:30pm UTC](https://discourse.processing.org/t/i-could-use-some-help-to-reverse-engineer-this-artwork/32181 "2021-09-18T18:30:28Z")

</div>

Hello, I came across a couple of artworks that I really appreciate. I’m very intrigued by these results, and I’m absolutely struggling to reverse engineer the way it has been done. One of the most beautiful example I …

---

## [Get same X and Y positions relative to screen resolution](https://discourse.processing.org/t/get-same-x-and-y-positions-relative-to-screen-resolution/32252)

<div class="topic-metadata">

**Author:** [@QwertySamyak](https://discourse.processing.org/u/QwertySamyak)\
**Replies:** 15\
**Last updated:** [September 18, 2021, 8:08pm UTC](https://discourse.processing.org/t/get-same-x-and-y-positions-relative-to-screen-resolution/32252 "2021-09-18T20:08:53Z")

</div>

Hi, So I need to get a x and y position relative to the screen resolution that I am working with. For example: I need the y coord 760 in a resolution of 1920x1080 to be at the same spot in the resolution 1280x720 I do…

---

## [Load .obj Model with mtl file and jpg texture](https://discourse.processing.org/t/load-obj-model-with-mtl-file-and-jpg-texture/4634)

<div class="topic-metadata">

**Author:** [@rtalexLL](https://discourse.processing.org/u/rtalexLL)\
**Replies:** 8\
**Last updated:** [September 6, 2021, 5:04pm UTC](https://discourse.processing.org/t/load-obj-model-with-mtl-file-and-jpg-texture/4634 "2021-09-06T17:04:50Z")

</div>

Hey Guys, i need some help with loading and 3D Model stored as .obj with an .mtl File and an jpg texture. With loadModel() I only get the mesh loaded and displayed, but the texture isn’t loaded. If I also load the Tex…

---

## [p5.Vector.div() doesnt work for 2D vectors](https://discourse.processing.org/t/p5-vector-div-doesnt-work-for-2d-vectors/32202)

<div class="topic-metadata">

**Author:** [@Kentucky](https://discourse.processing.org/u/Kentucky)\
**Replies:** 2\
**Last updated:** [September 18, 2021, 5:46pm UTC](https://discourse.processing.org/t/p5-vector-div-doesnt-work-for-2d-vectors/32202 "2021-09-18T17:46:37Z")

</div>

The div method doesn’t work with 2D vectors because the z component of the divisor is set automatically to 0. This should be fixed so the z component is ignored.

---

## [2d screen / world transformations for buttons (p5 2d Scene Graph?)](https://discourse.processing.org/t/2d-screen-world-transformations-for-buttons-p5-2d-scene-graph/32222)

<div class="topic-metadata">

**Author:** [@DCsan](https://discourse.processing.org/u/DCsan)\
**Replies:** 2\
**Last updated:** [September 18, 2021, 4:43pm UTC](https://discourse.processing.org/t/2d-screen-world-transformations-for-buttons-p5-2d-scene-graph/32222 "2021-09-18T16:43:23Z")

</div>

wondering how people deal with nested transforms and trying to detect what a user clicked on. I have something like the below with nested elements that all do their own push/transform/pop and the nested elements need to…

---

## [Pause / stop / \`noLoop()\` p5 sketch when not actively seen by the user (e.g. after scrolling out of window)](https://discourse.processing.org/t/pause-stop-noloop-p5-sketch-when-not-actively-seen-by-the-user-e-g-after-scrolling-out-of-window/32294)

<div class="topic-metadata">

**Author:** [@janmaltel](https://discourse.processing.org/u/janmaltel)\
**Replies:** 1\
**Last updated:** [September 18, 2021, 3:51am UTC](https://discourse.processing.org/t/pause-stop-noloop-p5-sketch-when-not-actively-seen-by-the-user-e-g-after-scrolling-out-of-window/32294 "2021-09-18T03:51:18Z")

</div>

Hi everyone, is there a setting that would automatically pause my sketch when the user cannot currently see it? For example, I got this blog post here where there’s one sketch at the very top and another sketch at the …

---

## [Drawing a skeleton for the movenet p5js sketch](https://discourse.processing.org/t/drawing-a-skeleton-for-the-movenet-p5js-sketch/31346)

<div class="topic-metadata">

**Author:** [@basicvisual](https://discourse.processing.org/u/basicvisual)\
**Replies:** 13\
**Last updated:** [September 17, 2021, 12:44pm UTC](https://discourse.processing.org/t/drawing-a-skeleton-for-the-movenet-p5js-sketch/31346 "2021-09-17T12:44:54Z")

</div>

Hi, I have been trying to run movenet with p5js. I have managed to get the detector working and can log out the poses. However , I am trying to draw a skeleton on top of the connected circle for vizualization purposes. I…

---

## [Variable Fonts on p5.js Canvas](https://discourse.processing.org/t/variable-fonts-on-p5-js-canvas/32268)

<div class="topic-metadata">

**Author:** [@DennisM](https://discourse.processing.org/u/DennisM)\
**Replies:** 2\
**Last updated:** [September 16, 2021, 6:26pm UTC](https://discourse.processing.org/t/variable-fonts-on-p5-js-canvas/32268 "2021-09-16T18:26:50Z")

</div>

Hi Everyone, i want to work with a variable font on the canvas. I’m wondering, if there is any method to access and modify the variable-font parameters of a text on the canvas. Cheers Dennis

---

## [Bizarre Hard-to-Diagnose Javascript Bug While Using P5.js in Firebase App](https://discourse.processing.org/t/bizarre-hard-to-diagnose-javascript-bug-while-using-p5-js-in-firebase-app/32240)

<div class="topic-metadata">

**Author:** [@nguzman](https://discourse.processing.org/u/nguzman)\
**Replies:** 1\
**Last updated:** [September 15, 2021, 7:38pm UTC](https://discourse.processing.org/t/bizarre-hard-to-diagnose-javascript-bug-while-using-p5-js-in-firebase-app/32240 "2021-09-15T19:38:29Z")

</div>

Edit, Update: I can now reproduce the error 100% of the time across all browsers in any context. By much trial and error, I discovered that by rapidly clicking the right arrow key on the first instruction screen (where t…

---

## [「Processing」「P5.js」Matrix arrangement calculation difference](https://discourse.processing.org/t/processing-p5-js-matrix-arrangement-calculation-difference/32265)

<div class="topic-metadata">

**Author:** [@niuuin](https://discourse.processing.org/u/niuuin)\
**Replies:** 2\
**Last updated:** [September 15, 2021, 10:47am UTC](https://discourse.processing.org/t/processing-p5-js-matrix-arrangement-calculation-difference/32265 "2021-09-15T10:47:10Z")

</div>

The same calculation method gets different results in 「processing」 and 「P5.js」. Processing: int total; float itemSize; void setup() { size(400, 400); total = 6; itemSize = width/total; } void draw() { clear()…

---

## [Uncaught TypeError: t is undefined (p5.min.js:4604:988), when trying to use button.mousePressed](https://discourse.processing.org/t/uncaught-typeerror-t-is-undefined-p5-min-js988-when-trying-to-use-button-mousepressed/32243)

<div class="topic-metadata">

**Author:** [@kewyj](https://discourse.processing.org/u/kewyj)\
**Replies:** 1\
**Last updated:** [September 14, 2021, 9:47pm UTC](https://discourse.processing.org/t/uncaught-typeerror-t-is-undefined-p5-min-js988-when-trying-to-use-button-mousepressed/32243 "2021-09-14T21:47:24Z")

</div>

I’m making a generator for rooms, and it takes in 3 arguments - number of rooms, min size, and max size of the rooms generated. The code works fine when I try to hard code it: function setup() { createCanvas(1…

---

## [Issue loading xml-feed in p5js](https://discourse.processing.org/t/issue-loading-xml-feed-in-p5js/8212)

<div class="topic-metadata">

**Author:** [@AndreasRef](https://discourse.processing.org/u/AndreasRef)\
**Replies:** 12\
**Last updated:** [September 14, 2021, 10:18am UTC](https://discourse.processing.org/t/issue-loading-xml-feed-in-p5js/8212 "2021-09-14T10:18:29Z")

</div>

Hi I am wondering how to correctly get load an xml file from an external website in p5js. In Processing it is no issue using loadXML on the url, but in p5js it seems more complicated, and just calling loadXML with the r…

---

## [\[valid reason\] Loading image outside Preload (p5js)](https://discourse.processing.org/t/valid-reason-loading-image-outside-preload-p5js/32234)

<div class="topic-metadata">

**Author:** [@Guy\_Yome](https://discourse.processing.org/u/Guy_Yome)\
**Replies:** 2\
**Last updated:** [September 13, 2021, 3:46pm UTC](https://discourse.processing.org/t/valid-reason-loading-image-outside-preload-p5js/32234 "2021-09-13T15:46:34Z")

</div>

Hello! I want to know if there was a way to make sure an image was loaded when loading it outside Preload. I sometimes get “Uncaught ReferenceError: loadImage is not defined” and sometimes it loads. It doesnt seem to be …

---

## [How to get this texture?](https://discourse.processing.org/t/how-to-get-this-texture/32157)

<div class="topic-metadata">

**Author:** [@goldorak](https://discourse.processing.org/u/goldorak)\
**Replies:** 5\
**Last updated:** [September 12, 2021, 10:00am UTC](https://discourse.processing.org/t/how-to-get-this-texture/32157 "2021-09-12T10:00:28Z")

</div>

Hello, I’m trying to work on adding more textures to my work. I’d like to understand how this type of texture can be achieved. Thanks for your help.

---

## [Full rotation using pointLight();](https://discourse.processing.org/t/full-rotation-using-pointlight/32185)

<div class="topic-metadata">

**Author:** [@achip30](https://discourse.processing.org/u/achip30)\
**Replies:** 4\
**Last updated:** [September 12, 2021, 12:04am UTC](https://discourse.processing.org/t/full-rotation-using-pointlight/32185 "2021-09-12T00:04:27Z")

</div>

Hello, my brain hurts. I am using the pointLight method on this sphere. I want the light to rotate around the sphere, but I can’t figure out how to do a complete rotation. I am incrementing the z position, but it stops w…

---

## [P5.js on the web](https://discourse.processing.org/t/p5-js-on-the-web/32206)

<div class="topic-metadata">

**Author:** [@bcabc](https://discourse.processing.org/u/bcabc)\
**Replies:** 1\
**Last updated:** [September 12, 2021, 2:29am UTC](https://discourse.processing.org/t/p5-js-on-the-web/32206 "2021-09-12T02:29:13Z")

</div>

I have been working on some P5.js code and I’d like to share it on the internet. I know that it’s quite easy to load it onto the P5.js editor site and get a hyperlink - but I’m wondering if there is guide or tutorial for…

---

## [Bezier Glitch in certain point combinations](https://discourse.processing.org/t/bezier-glitch-in-certain-point-combinations/32169)

<div class="topic-metadata">

**Author:** [@andreiantonescu](https://discourse.processing.org/u/andreiantonescu)\
**Replies:** 4\
**Last updated:** [September 10, 2021, 3:54pm UTC](https://discourse.processing.org/t/bezier-glitch-in-certain-point-combinations/32169 "2021-09-10T15:54:01Z")

</div>

Hi, I’ve reached some weird behaviour for bezier curves between browsers. There are some combinations of anchors and control points that produce a glitch like this: (right is the correct curve) If I slightly change t…

---

## [Individualize functions in P5.js](https://discourse.processing.org/t/individualize-functions-in-p5-js/32051)

<div class="topic-metadata">

**Author:** [@Kevincroos](https://discourse.processing.org/u/Kevincroos)\
**Replies:** 5\
**Last updated:** [September 9, 2021, 2:46pm UTC](https://discourse.processing.org/t/individualize-functions-in-p5-js/32051 "2021-09-09T14:46:15Z")

</div>

homework policy \* asking questions Hello programmers i have a question about my program, i created a program who draw a ball, add animation to her and a text. I only need call one function to make all it. But now, i n…

---

## [Would like help with Chrome](https://discourse.processing.org/t/would-like-help-with-chrome/32147)

<div class="topic-metadata">

**Author:** [@BigBigRed](https://discourse.processing.org/u/BigBigRed)\
**Replies:** 2\
**Last updated:** [September 8, 2021, 1:24pm UTC](https://discourse.processing.org/t/would-like-help-with-chrome/32147 "2021-09-08T13:24:36Z")

</div>

I know that this not a p5js problem but … over weeks, days, and months the Print Preview Window on my p5js Editor has gotten smaller and smaller. When I first started with p5js, the Print Preview Window would go 650…

---

## [Separating effects](https://discourse.processing.org/t/separating-effects/32139)

<div class="topic-metadata">

**Author:** [@achip30](https://discourse.processing.org/u/achip30)\
**Replies:** 5\
**Last updated:** [September 8, 2021, 7:47am UTC](https://discourse.processing.org/t/separating-effects/32139 "2021-09-08T07:47:39Z")

</div>

This is a snippet from my main code. I have two separate ellipses. I only want the central ellipse to have a shadowing effect. How do I limit the shadowing effect specifically to the central ellipse, and not to the small…

---

## [P5.js not working in blogger](https://discourse.processing.org/t/p5-js-not-working-in-blogger/32086)

<div class="topic-metadata">

**Author:** [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Replies:** 12\
**Last updated:** [September 5, 2021, 5:31pm UTC](https://discourse.processing.org/t/p5-js-not-working-in-blogger/32086 "2021-09-05T17:31:02Z")

</div>

Hi, Does p5.js work on blogger.com platform? It is not working for me. Tried with simple p5.js with canvas and included the cdn link but does not work. Has anyone tried p5.js on blogger?

---

## [My code for selectable resolution does not work](https://discourse.processing.org/t/my-code-for-selectable-resolution-does-not-work/32045)

<div class="topic-metadata">

**Author:** [@Quorum](https://discourse.processing.org/u/Quorum)\
**Replies:** 2\
**Last updated:** [September 5, 2021, 4:37pm UTC](https://discourse.processing.org/t/my-code-for-selectable-resolution-does-not-work/32045 "2021-09-05T16:37:49Z")

</div>

I want to change the canvas between some resolutions that I have preset. But my solution doesn’t work completely. It works with the first two, but when I select one of the other four, a resolution equal to one of the fi…

---

## [Mobile performance different between "present" and "full screen"](https://discourse.processing.org/t/mobile-performance-different-between-present-and-full-screen/31455)

<div class="topic-metadata">

**Author:** [@Miguelac](https://discourse.processing.org/u/Miguelac)\
**Replies:** 3\
**Last updated:** [September 4, 2021, 7:40pm UTC](https://discourse.processing.org/t/mobile-performance-different-between-present-and-full-screen/31455 "2021-09-04T19:40:50Z")

</div>

Hi, I made a checkers game in p5 and it is working well, but I noticed a really strange behavior when using the share links. When I use “full screen” in my mobile (or mobile emulation with inspect mode in chrome) I get …

---

## [Using Shapes in p5.js](https://discourse.processing.org/t/using-shapes-in-p5-js/32058)

<div class="topic-metadata">

**Author:** [@bcabc](https://discourse.processing.org/u/bcabc)\
**Replies:** 1\
**Last updated:** [September 2, 2021, 8:06am UTC](https://discourse.processing.org/t/using-shapes-in-p5-js/32058 "2021-09-02T08:06:26Z")

</div>

Hi there - I’m newish to Processing and looking to get a sketch up and running. Using Example 03: Objects Array from the Examples Folder, I’d like to replace the “ellipse” with a tailored “createShape” - but it doesn’t…

---

## [Sketch stuck in WEBGL mode and cannot switch back to P2D mode](https://discourse.processing.org/t/sketch-stuck-in-webgl-mode-and-cannot-switch-back-to-p2d-mode/32048)

<div class="topic-metadata">

**Author:** [@salmans911](https://discourse.processing.org/u/salmans911)\
**Replies:** 1\
**Last updated:** [September 1, 2021, 2:08pm UTC](https://discourse.processing.org/t/sketch-stuck-in-webgl-mode-and-cannot-switch-back-to-p2d-mode/32048 "2021-09-01T14:08:30Z")

</div>

Hello everyone, how do I programmatically switch the sketch from WEBGL mode back to P2D mode, it switches fine from P2D mode to WEBGL mode, but not back. I tried manually changing \_renderer with the P2D Object, but it st…

---

## [Dynamic Text size (responsive)](https://discourse.processing.org/t/dynamic-text-size-responsive/31491)

<div class="topic-metadata">

**Author:** [@Quorum](https://discourse.processing.org/u/Quorum)\
**Replies:** 2\
**Last updated:** [September 1, 2021, 6:02am UTC](https://discourse.processing.org/t/dynamic-text-size-responsive/31491 "2021-09-01T06:02:18Z")

</div>

Hello, everyone, I would like the text to change size according to the choice of window size. But my code doesn’t work. Can you explain me why please? let titleSize = floor(createNumberDict(12, setLayout\[layoutMode\]\[0\]…

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

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