# Coding Questions

**URL:** https://discourse.processing.org/c/p5js/p5js-questions/18.md?page=15

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

**Page:** 16

---

## [How to draw a crescent](https://discourse.processing.org/t/how-to-draw-a-crescent/30771)

<div class="topic-metadata">

**Author:** [@Dan](https://discourse.processing.org/u/Dan)\
**Replies:** 26\
**Last updated:** [October 3, 2021, 6:41pm UTC](https://discourse.processing.org/t/how-to-draw-a-crescent/30771 "2021-10-03T18:41:42Z")

</div>

Hello friends, I would like to depict moon phases by laying a dark crescent shape over an image of the moon. I’m able to create a crescent shape using beginShape()/endShape() and generating lots of vertices inside a co…

---

## [Using mousePressed to place different indexes of an array on the canvas](https://discourse.processing.org/t/using-mousepressed-to-place-different-indexes-of-an-array-on-the-canvas/32556)

<div class="topic-metadata">

**Author:** [@Cavemind](https://discourse.processing.org/u/Cavemind)\
**Replies:** 4\
**Last updated:** [October 2, 2021, 7:40pm UTC](https://discourse.processing.org/t/using-mousepressed-to-place-different-indexes-of-an-array-on-the-canvas/32556 "2021-10-02T19:40:28Z")

</div>

Hello Reaching out for some help, What I am trying to do is when I press mouse button a different part of an array is show and placed on the screen, what is happening is that even though the selected array index is the…

---

## [Help with making objects transparent and draggable](https://discourse.processing.org/t/help-with-making-objects-transparent-and-draggable/32545)

<div class="topic-metadata">

**Author:** [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Replies:** 5\
**Last updated:** [October 1, 2021, 7:46pm UTC](https://discourse.processing.org/t/help-with-making-objects-transparent-and-draggable/32545 "2021-10-01T19:46:56Z")

</div>

I need help with changing the opacity(transparency) of the objects and dragging the objects. I can change the opacity(transparency) but when I do the objects are no longer draggable. The image below sheds more light on …

---

## [Running an easing animation to completion every time mouse is clicked](https://discourse.processing.org/t/running-an-easing-animation-to-completion-every-time-mouse-is-clicked/32512)

<div class="topic-metadata">

**Author:** [@miketaco](https://discourse.processing.org/u/miketaco)\
**Replies:** 5\
**Last updated:** [September 30, 2021, 6:32pm UTC](https://discourse.processing.org/t/running-an-easing-animation-to-completion-every-time-mouse-is-clicked/32512 "2021-09-30T18:32:56Z")

</div>

Im trying to get the line to rotate and ease to the target degree (targetX) then stop only when the mouse is clicked once. Subsequent mouse clicks should pick up where the last target degree and rotate the additional amo…

---

## [Splitting a canvas into multiple random areas](https://discourse.processing.org/t/splitting-a-canvas-into-multiple-random-areas/32403)

<div class="topic-metadata">

**Author:** [@goldorak](https://discourse.processing.org/u/goldorak)\
**Replies:** 4\
**Last updated:** [September 30, 2021, 9:20am UTC](https://discourse.processing.org/t/splitting-a-canvas-into-multiple-random-areas/32403 "2021-09-30T09:20:45Z")

</div>

Hi, I’m trying to subdivide my canvas into multiple random areas and then being able to access each area’s width and height to draw patterns inside. Is there a classic algorithm to do this? Would you recommend and not…

---

## [How to avoid image compression using the get() function?](https://discourse.processing.org/t/how-to-avoid-image-compression-using-the-get-function/32477)

<div class="topic-metadata">

**Author:** [@hspencer](https://discourse.processing.org/u/hspencer)\
**Replies:** 3\
**Last updated:** [September 28, 2021, 6:50pm UTC](https://discourse.processing.org/t/how-to-avoid-image-compression-using-the-get-function/32477 "2021-09-28T18:50:33Z")

</div>

Hello! I’m using the get() function repeatedly and the resulting image degrades, apparently due to compression. Is there any way to get around this? Thanks! /\* animator tool \*/ let frames, span, current; function set…

---

## [Help with dragging an object using mousePressed](https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968)

<div class="topic-metadata">

**Author:** [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Replies:** 44\
**Last updated:** [September 28, 2021, 5:32pm UTC](https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968 "2021-09-28T17:32:10Z")

</div>

I created a hexagon by using a function, I intend to mousePress when the cursor is inside the hexagon and drag it around similar to the object shown in this sketch; https://editor.p5js.org/enickles/sketches/H1n19TObz …

---

## [How to position button relative to canvas?](https://discourse.processing.org/t/how-to-position-button-relative-to-canvas/32442)

<div class="topic-metadata">

**Author:** [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Replies:** 2\
**Last updated:** [September 28, 2021, 9:10am UTC](https://discourse.processing.org/t/how-to-position-button-relative-to-canvas/32442 "2021-09-28T09:10:44Z")

</div>

hello all, How can I position button(using createButton()) relative to canvas? with button.position() I can position the button on the canvas area, but I wanted to know whether there is a way to change button position w…

---

## [Show different text depending upon condition](https://discourse.processing.org/t/show-different-text-depending-upon-condition/32447)

<div class="topic-metadata">

**Author:** [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Replies:** 2\
**Last updated:** [September 28, 2021, 6:04am UTC](https://discourse.processing.org/t/show-different-text-depending-upon-condition/32447 "2021-09-28T06:04:25Z")

</div>

hello all, how can I write p5 code that shows different text depending upon if condition? here is an example code that I wrote but the text just shows momentarily and disappears once the mouse click is done… let state;…

---

## [Help with Opacity(Transparency)](https://discourse.processing.org/t/help-with-opacity-transparency/32445)

<div class="topic-metadata">

**Author:** [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Replies:** 6\
**Last updated:** [September 28, 2021, 12:19am UTC](https://discourse.processing.org/t/help-with-opacity-transparency/32445 "2021-09-28T00:19:45Z")

</div>

I need help with how to change the opacity(transparency) of the colours used to fill the hexagons such that when a hexagon is above a number(say 30 as in the image) the number will still be visible? e.g I want the hexa…

---

## [How do I use p5.js's accessibility features?](https://discourse.processing.org/t/how-do-i-use-p5-jss-accessibility-features/32412)

<div class="topic-metadata">

**Author:** [@Kevin](https://discourse.processing.org/u/Kevin)\
**Replies:** 0\
**Last updated:** [September 25, 2021, 6:39pm UTC](https://discourse.processing.org/t/how-do-i-use-p5-jss-accessibility-features/32412 "2021-09-25T18:39:31Z")

</div>

Hey all, long time no see. Hope all is well! Inspired by this tweet, I’ve been trying to learn how to use p5.js’s describe() function and other accessibility features. function setup() { createCanvas(400, 400); } fu…

---

## [SVG Canvas performance](https://discourse.processing.org/t/svg-canvas-performance/32347)

<div class="topic-metadata">

**Author:** [@philspitler](https://discourse.processing.org/u/philspitler)\
**Replies:** 1\
**Last updated:** [September 22, 2021, 10:10pm UTC](https://discourse.processing.org/t/svg-canvas-performance/32347 "2021-09-22T22:10:05Z")

</div>

Hi, I need to save an SVG from my p5 sketch, it works great but as soon as I change my canvas to SVG the performance of my sketch really drops. I have a few sliders to change settings in the sketch and when I use and SV…

---

## [How to stop random color in animation?](https://discourse.processing.org/t/how-to-stop-random-color-in-animation/32355)

<div class="topic-metadata">

**Author:** [@Mica](https://discourse.processing.org/u/Mica)\
**Replies:** 2\
**Last updated:** [September 22, 2021, 9:56pm UTC](https://discourse.processing.org/t/how-to-stop-random-color-in-animation/32355 "2021-09-22T21:56:18Z")

</div>

let colors = \["#ed3441", "#ffb03b", "#36acf5", "#ffd630", "#084e86", "#fcfeff"\]; function setup() { createCanvas(500,500); } function draw() { background(200); let offset = -width / 10; noFill(); let xStep = …

---

## [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?

---

## [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…

---

## [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…

---

## [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

---

## [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 …

---

## [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…

---

## [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…

---

## [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…

---

## [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\]…

---

## [P5.JS 3D Dot Diagram rendering extremely slow](https://discourse.processing.org/t/p5-js-3d-dot-diagram-rendering-extremely-slow/31953)

<div class="topic-metadata">

**Author:** [@salmans911](https://discourse.processing.org/u/salmans911)\
**Replies:** 11\
**Last updated:** [August 31, 2021, 10:50am UTC](https://discourse.processing.org/t/p5-js-3d-dot-diagram-rendering-extremely-slow/31953 "2021-08-31T10:50:16Z")

</div>

I am trying to convert a normal 2D image(a simple JPEG) into a 3D Dot Diagram that the user can move around with. But upon trying to render that dot diagram, the program becomes extremely slow. Can anyone point where I a…

---

## [JSON file not being read correctly](https://discourse.processing.org/t/json-file-not-being-read-correctly/31791)

<div class="topic-metadata">

**Author:** [@fleshcircuit](https://discourse.processing.org/u/fleshcircuit)\
**Replies:** 9\
**Last updated:** [August 30, 2021, 9:37am UTC](https://discourse.processing.org/t/json-file-not-being-read-correctly/31791 "2021-08-30T09:37:39Z")

</div>

Hello, I am trying to read data from a JSON file, but I am having trouble. I would like the background to change based on the level type indicated (deep, light, wake, rem). I followed Dan Shiffman’s Coding train video a…

[Previous page](https://discourse.processing.org/c/p5js/p5js-questions/18.md?page=14)

[Next page](https://discourse.processing.org/c/p5js/p5js-questions/18.md?page=16)