# Coding Questions

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

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

**Page:** 19

---

## [Get coordinate of character on canvas](https://discourse.processing.org/t/get-coordinate-of-character-on-canvas/30749)

<div class="topic-metadata">

**Author:** [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Replies:** 5\
**Last updated:** [June 17, 2021, 12:09am UTC](https://discourse.processing.org/t/get-coordinate-of-character-on-canvas/30749 "2021-06-17T00:09:16Z")

</div>

Is there a method or some way of getting the coordinate (or coordinate range ) of a character or portion of a string in a string drawn to canvas using text()? Say I draw text('hello p5', 100,100); … what are the coordin…

---

## [Convert processing Sketch to p5.js](https://discourse.processing.org/t/convert-processing-sketch-to-p5-js/30726)

<div class="topic-metadata">

**Author:** [@momo](https://discourse.processing.org/u/momo)\
**Replies:** 1\
**Last updated:** [June 15, 2021, 6:47pm UTC](https://discourse.processing.org/t/convert-processing-sketch-to-p5-js/30726 "2021-06-15T18:47:30Z")

</div>

Hi all, I’m a coding beginner. I was trying to convert a processing sketch into p5. I guess it is a dumb question. But please help me with this. This is the sketch I want to convert (processing) class A{ float r = r…

---

## [Am i using equation of circle right?](https://discourse.processing.org/t/am-i-using-equation-of-circle-right/22318)

<div class="topic-metadata">

**Author:** [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)\
**Replies:** 17\
**Last updated:** [June 14, 2021, 4:54am UTC](https://discourse.processing.org/t/am-i-using-equation-of-circle-right/22318 "2021-06-14T04:54:03Z")

</div>

I want to move an object around a circle therefore, am using equation of circle to every quadrant… I wrote this: if(keyDown(“up”) && this.guy.x \<= 600 && this.guy.x \<= 400){ //using equation of a circle \> …

---

## [Slider programmatic update](https://discourse.processing.org/t/slider-programmatic-update/30651)

<div class="topic-metadata">

**Author:** [@AndyP5](https://discourse.processing.org/u/AndyP5)\
**Replies:** 1\
**Last updated:** [June 11, 2021, 2:30pm UTC](https://discourse.processing.org/t/slider-programmatic-update/30651 "2021-06-11T14:30:51Z")

</div>

Hi there, I am looking to programmatically update position of a slider. I would like to have the slider manual user action, but also step the slider in response to a button press. Is this possible or do I need to re-…

---

## [How to destroy sliders?](https://discourse.processing.org/t/how-to-destroy-sliders/30629)

<div class="topic-metadata">

**Author:** [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Replies:** 3\
**Last updated:** [June 10, 2021, 5:57pm UTC](https://discourse.processing.org/t/how-to-destroy-sliders/30629 "2021-06-10T17:57:05Z")

</div>

I have a slider that makes other sliders, and whenever I change the value of the first slider I create that amount of them. For example, the main slider is set to 3 then I make three sliders below, but whenever I change …

---

## [Vectors and classes](https://discourse.processing.org/t/vectors-and-classes/30061)

<div class="topic-metadata">

**Author:** [@AnnaJo21](https://discourse.processing.org/u/AnnaJo21)\
**Replies:** 5\
**Last updated:** [June 9, 2021, 8:56pm UTC](https://discourse.processing.org/t/vectors-and-classes/30061 "2021-06-09T20:56:57Z")

</div>

Hello I'm trying to simplify some very clunky code in this example \[Vector grid\](https://editor.p5js.org/Anna21/sketches/bESH6Jgj1) by using classes. I'm very new to this and I'm sure there's a simple explanation but it…

---

## [Webcam interaction (colour component)](https://discourse.processing.org/t/webcam-interaction-colour-component/30577)

<div class="topic-metadata">

**Author:** [@Sarahjjt](https://discourse.processing.org/u/Sarahjjt)\
**Replies:** 2\
**Last updated:** [June 9, 2021, 7:57am UTC](https://discourse.processing.org/t/webcam-interaction-colour-component/30577 "2021-06-09T07:57:20Z")

</div>

Hi there, I’m working on an interactive webcam design, everything seems to be working okay except I’m stuck on how to get the local colours to reflect what’s on the camera. I’d really appreciate your help! let video; …

---

## [Activate webcam x seconds after mouse is pressed (frameCount)](https://discourse.processing.org/t/activate-webcam-x-seconds-after-mouse-is-pressed-framecount/30585)

<div class="topic-metadata">

**Author:** [@saskia\_NL](https://discourse.processing.org/u/saskia_NL)\
**Replies:** 1\
**Last updated:** [June 8, 2021, 9:03pm UTC](https://discourse.processing.org/t/activate-webcam-x-seconds-after-mouse-is-pressed-framecount/30585 "2021-06-08T21:03:32Z")

</div>

Hi all, I want to play a video and a few seconds into the video, I want the webcam to activate for 5 seconds and disappear again. I got it working to the point where the video plays and the webcam activates after 600 fr…

---

## [Alternative to get() for faster performance?](https://discourse.processing.org/t/alternative-to-get-for-faster-performance/30228)

<div class="topic-metadata">

**Author:** [@codestruggles](https://discourse.processing.org/u/codestruggles)\
**Replies:** 8\
**Last updated:** [June 8, 2021, 5:41pm UTC](https://discourse.processing.org/t/alternative-to-get-for-faster-performance/30228 "2021-06-08T17:41:18Z")

</div>

Hello, i was wondering how it would be possible to replace the get(x,y,w,h) function with something else to enhance performance… i’m currently working on a project where i have to “degrade the quality” of a webcam image …

---

## [Normalize and center coordinate system](https://discourse.processing.org/t/normalize-and-center-coordinate-system/30553)

<div class="topic-metadata">

**Author:** [@blakec](https://discourse.processing.org/u/blakec)\
**Replies:** 3\
**Last updated:** [June 8, 2021, 8:11am UTC](https://discourse.processing.org/t/normalize-and-center-coordinate-system/30553 "2021-06-08T08:11:39Z")

</div>

In my drawings, I’d like to set the xy axis centred in the middle of the screen and rescaled between -0.5 and 0.5 instead of using screen coordinates. That makes the drawing independent of screen resolution. I tried: f…

---

## [Is there a way to change the thickness/width of line without using stroke weight?](https://discourse.processing.org/t/is-there-a-way-to-change-the-thickness-width-of-line-without-using-stroke-weight/30539)

<div class="topic-metadata">

**Author:** [@uniqueNoSpaces](https://discourse.processing.org/u/uniqueNoSpaces)\
**Replies:** 4\
**Last updated:** [June 7, 2021, 1:27am UTC](https://discourse.processing.org/t/is-there-a-way-to-change-the-thickness-width-of-line-without-using-stroke-weight/30539 "2021-06-07T01:27:31Z")

</div>

Hello i’m looking for a way to change the thickness of line(x1,y1,x2,y2) without using stroke weight, because stroke weight affects all shapes on canvas while i just want it to affect the line itself. is there a way to…

---

## [Suggestions for Randomizing Placement and Colors](https://discourse.processing.org/t/suggestions-for-randomizing-placement-and-colors/30449)

<div class="topic-metadata">

**Author:** [@cottonchipper](https://discourse.processing.org/u/cottonchipper)\
**Replies:** 3\
**Last updated:** [June 3, 2021, 4:14pm UTC](https://discourse.processing.org/t/suggestions-for-randomizing-placement-and-colors/30449 "2021-06-03T16:14:44Z")

</div>

please format code with \</\> button \* homework policy \* asking questions I’m working on a sketch that has 16 ellipses as shown in the image below. Each ellipse is filled with a different color and then various lin…

---

## [Locking the document in the safari browser](https://discourse.processing.org/t/locking-the-document-in-the-safari-browser/30122)

<div class="topic-metadata">

**Author:** [@Michal8705](https://discourse.processing.org/u/Michal8705)\
**Replies:** 3\
**Last updated:** [June 3, 2021, 10:02am UTC](https://discourse.processing.org/t/locking-the-document-in-the-safari-browser/30122 "2021-06-03T10:02:56Z")

</div>

Hi I ran into a problem in the simple code below, which I display on my iPhone iOS 13.7 https://editor.p5js.org/Michal8705/sketches/tjf-AEwVs When I open a window in chrome and try to lower the pages with a touch, the…

---

## [WEBGL and background images](https://discourse.processing.org/t/webgl-and-background-images/30416)

<div class="topic-metadata">

**Author:** [@geor1812](https://discourse.processing.org/u/geor1812)\
**Replies:** 4\
**Last updated:** [June 1, 2021, 8:12pm UTC](https://discourse.processing.org/t/webgl-and-background-images/30416 "2021-06-01T20:12:24Z")

</div>

Hello! I am doing a project using WEBGL, and I am trying to set the background to an image which I can’t seem to figure out. The project itself is a bit complex, with a server and an input of type file where users can s…

---

## [Drawing and orbiting a shape with many vertices](https://discourse.processing.org/t/drawing-and-orbiting-a-shape-with-many-vertices/30375)

<div class="topic-metadata">

**Author:** [@hardwhere](https://discourse.processing.org/u/hardwhere)\
**Replies:** 5\
**Last updated:** [June 1, 2021, 8:11pm UTC](https://discourse.processing.org/t/drawing-and-orbiting-a-shape-with-many-vertices/30375 "2021-06-01T20:11:24Z")

</div>

Hello! I’m drawing a shape with thousands of vertices in my draw() function; it’s just a line drawing connecting many vertices. I’d like to then orbit around this shape with e.g. the easycam library. I’m able to do this,…

---

## [Need help: Animating grid with gradient rectangles](https://discourse.processing.org/t/need-help-animating-grid-with-gradient-rectangles/30376)

<div class="topic-metadata">

**Author:** [@abk](https://discourse.processing.org/u/abk)\
**Replies:** 6\
**Last updated:** [June 1, 2021, 7:24am UTC](https://discourse.processing.org/t/need-help-animating-grid-with-gradient-rectangles/30376 "2021-06-01T07:24:52Z")

</div>

Hi I’m trying to achieve this kind of noise based movement on my sketch: https://www.instagram.com/p/CMxHVO\_hmUa/ I’ve built my grid by creating for loops which works fine if I wanted it to be static, but if I should a…

---

## [Canvas.elt.toDataURL saving blank images](https://discourse.processing.org/t/canvas-elt-todataurl-saving-blank-images/30371)

<div class="topic-metadata">

**Author:** [@sameeh](https://discourse.processing.org/u/sameeh)\
**Replies:** 1\
**Last updated:** [May 31, 2021, 6:33pm UTC](https://discourse.processing.org/t/canvas-elt-todataurl-saving-blank-images/30371 "2021-05-31T18:33:59Z")

</div>

This is my nextjs (reactjs) code, I’m using the p5 library, everything is fine until I try to view the saved base64 image, the image is saved as blank. Any idea what I might be doing wrong? or is it a bug in the p5 react…

---

## [Find/calculate all points that lay on a border of shape?](https://discourse.processing.org/t/find-calculate-all-points-that-lay-on-a-border-of-shape/30354)

<div class="topic-metadata">

**Author:** [@uniqueNoSpaces](https://discourse.processing.org/u/uniqueNoSpaces)\
**Replies:** 3\
**Last updated:** [May 29, 2021, 9:57pm UTC](https://discourse.processing.org/t/find-calculate-all-points-that-lay-on-a-border-of-shape/30354 "2021-05-29T21:57:57Z")

</div>

Hello is there a way to find all the points (x,y) that lay on the border of the shape that i’ve drawn? say i have drawn a simple ellipse: ellipse(x,y,width,height)…given that i know the centre point and the dimensions …

---

## [I don't know how to make the shapes appear alternately. Tic tac toe](https://discourse.processing.org/t/i-dont-know-how-to-make-the-shapes-appear-alternately-tic-tac-toe/30273)

<div class="topic-metadata">

**Author:** [@Wiktorpers](https://discourse.processing.org/u/Wiktorpers)\
**Replies:** 2\
**Last updated:** [May 29, 2021, 10:31am UTC](https://discourse.processing.org/t/i-dont-know-how-to-make-the-shapes-appear-alternately-tic-tac-toe/30273 "2021-05-29T10:31:18Z")

</div>

I program tic-tac-toe but I don’t know how to make the shapes appear alternately. that is: the player has bet X is the next time he clicks on a field, O will appear it’s about the mouseClicked function. the one at the …

---

## [Starting ellipse w/ Perlin Noise in Canvas Center on mousePressed()](https://discourse.processing.org/t/starting-ellipse-w-perlin-noise-in-canvas-center-on-mousepressed/30323)

<div class="topic-metadata">

**Author:** [@refchef](https://discourse.processing.org/u/refchef)\
**Replies:** 1\
**Last updated:** [May 27, 2021, 2:19pm UTC](https://discourse.processing.org/t/starting-ellipse-w-perlin-noise-in-canvas-center-on-mousepressed/30323 "2021-05-27T14:19:02Z")

</div>

Hi everyone First time posting here! I hope somebody is able to help. My goal is to start animating on function mousePressed an ellipse with perlin noise. The ellipse needs to be centered on the canvas and start from t…

---

## [Video not syncing to audio correctly when playing in Firefox](https://discourse.processing.org/t/video-not-syncing-to-audio-correctly-when-playing-in-firefox/30339)

<div class="topic-metadata">

**Author:** [@karenmani](https://discourse.processing.org/u/karenmani)\
**Replies:** 5\
**Last updated:** [May 28, 2021, 5:44pm UTC](https://discourse.processing.org/t/video-not-syncing-to-audio-correctly-when-playing-in-firefox/30339 "2021-05-28T17:44:34Z")

</div>

Hi! I’m trying to create a video player using p5 that a user can hit “start video” on and then can pan audio using a slider. I used the video tag in html to source the vids in multiple formats from my directory and then…

---

## [P5 and DOM file types](https://discourse.processing.org/t/p5-and-dom-file-types/30336)

<div class="topic-metadata">

**Author:** [@karenmani](https://discourse.processing.org/u/karenmani)\
**Replies:** 1\
**Last updated:** [May 28, 2021, 4:52pm UTC](https://discourse.processing.org/t/p5-and-dom-file-types/30336 "2021-05-28T16:52:26Z")

</div>

I’m trying to create a video player using DOM and video files to createVideo() in p5. When I’m setting my program to support multiple file types, I have to include each format of the file in the repository or file direct…

---

## [Drawing new shapes is causing the older shapes to disappear](https://discourse.processing.org/t/drawing-new-shapes-is-causing-the-older-shapes-to-disappear/30309)

<div class="topic-metadata">

**Author:** [@uniqueNoSpaces](https://discourse.processing.org/u/uniqueNoSpaces)\
**Replies:** 3\
**Last updated:** [May 27, 2021, 9:17am UTC](https://discourse.processing.org/t/drawing-new-shapes-is-causing-the-older-shapes-to-disappear/30309 "2021-05-27T09:17:16Z")

</div>

Hello i’m working on a complex visualisation project, using p5.js i want to create multiple clusters of shapes to visualise all sorts of data, so i’m looping through the data, checking the objects specified by user and …

---

## [Displaying text from an API inside the canvas](https://discourse.processing.org/t/displaying-text-from-an-api-inside-the-canvas/30244)

<div class="topic-metadata">

**Author:** [@Blomer478](https://discourse.processing.org/u/Blomer478)\
**Replies:** 10\
**Last updated:** [May 24, 2021, 10:49pm UTC](https://discourse.processing.org/t/displaying-text-from-an-api-inside-the-canvas/30244 "2021-05-24T22:49:08Z")

</div>

Hi, I’m having trouble getting the text from an API to display on my canvas, I can get it outside of it but I can’t find the way to put it in. I have the API key in my code and I know the variable names are kinda weird.…

---

## [dragOver and dragLeave do not work](https://discourse.processing.org/t/dragover-and-dragleave-do-not-work/4208)

<div class="topic-metadata">

**Author:** [@jituibuchipi](https://discourse.processing.org/u/jituibuchipi)\
**Replies:** 7\
**Last updated:** [May 18, 2021, 12:18pm UTC](https://discourse.processing.org/t/dragover-and-dragleave-do-not-work/4208 "2021-05-18T12:18:41Z")

</div>

I wanna write a board which hilight when users drag files upon it, When i run the code the drop() function did work, However the dragOver() and dragLeave() function just do not work,anything wrong with my code? I edit a…

---

## [Read property 'width' undefined](https://discourse.processing.org/t/read-property-width-undefined/30117)

<div class="topic-metadata">

**Author:** [@deardanagrace](https://discourse.processing.org/u/deardanagrace)\
**Replies:** 2\
**Last updated:** [May 17, 2021, 5:11am UTC](https://discourse.processing.org/t/read-property-width-undefined/30117 "2021-05-17T05:11:20Z")

</div>

Hi, I am somewhat of an intro coder for p5.js. Anyways, I am working on some code that changes a drawFunction I made on an index of images and I keep getting: "Uncaught TypeError: Cannot read property ‘width’ of undefin…

---

## [P5.js copy() issue in Safari](https://discourse.processing.org/t/p5-js-copy-issue-in-safari/16289)

<div class="topic-metadata">

**Author:** [@5f5f5f](https://discourse.processing.org/u/5f5f5f)\
**Replies:** 3\
**Last updated:** [May 16, 2021, 5:20pm UTC](https://discourse.processing.org/t/p5-js-copy-issue-in-safari/16289 "2021-05-16T17:20:15Z")

</div>

Hi everyone! Need help :exploding\_head: I’m trying to make an animation like this using p5.js, and faced a really weird issue that is reproduced only in Safari browser, and i really don’t understand why it is happening …

---

## [P5 canvas position on device orientation change](https://discourse.processing.org/t/p5-canvas-position-on-device-orientation-change/23398)

<div class="topic-metadata">

**Author:** [@odotdotdot](https://discourse.processing.org/u/odotdotdot)\
**Replies:** 1\
**Last updated:** [May 16, 2021, 9:57am UTC](https://discourse.processing.org/t/p5-canvas-position-on-device-orientation-change/23398 "2021-05-16T09:57:35Z")

</div>

Hi, I’m working on a browser game and I’ve just extended functionality to mobile browsers. I’m having some trouble reigning in the canvas position after a device orientation change (i.e. flipping your phone from portra…

---

## [Vertex Command Issues](https://discourse.processing.org/t/vertex-command-issues/30087)

<div class="topic-metadata">

**Author:** [@willreichling12](https://discourse.processing.org/u/willreichling12)\
**Replies:** 3\
**Last updated:** [May 15, 2021, 10:18pm UTC](https://discourse.processing.org/t/vertex-command-issues/30087 "2021-05-15T22:18:19Z")

</div>

We are trying to build a curve based off control points in multiple segments. We have a beginning segment for the first three control points, an end segment for the last three, and an entire middle with multiple segments…

---

## [Loading multiple videos, fails/works randomly](https://discourse.processing.org/t/loading-multiple-videos-fails-works-randomly/27555)

<div class="topic-metadata">

**Author:** [@sandersturing](https://discourse.processing.org/u/sandersturing)\
**Replies:** 8\
**Last updated:** [May 13, 2021, 10:51pm UTC](https://discourse.processing.org/t/loading-multiple-videos-fails-works-randomly/27555 "2021-05-13T22:51:35Z")

</div>

Hello all, I really can’t figure out the right way of loading multiple videos (really small in filesize: \< 200kb) and play them. I’m currently loading a couple in an array and playing them randomly in a grid. The thing…

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

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