# Coding Questions

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

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

**Page:** 13

---

## [Rotate canvas around its center](https://discourse.processing.org/t/rotate-canvas-around-its-center/34990)

<div class="topic-metadata">

**Author:** [@res56](https://discourse.processing.org/u/res56)\
**Replies:** 8\
**Last updated:** [February 12, 2022, 10:28pm UTC](https://discourse.processing.org/t/rotate-canvas-around-its-center/34990 "2022-02-12T22:28:49Z")

</div>

Hi frens, I use the draw function to display objects of the class Mover. After the objects are displayed I want to rotate the result around the center. function draw() { if(frameCount \< 600){ for (var i…

---

## [imageMode works not in Safari and Opera](https://discourse.processing.org/t/imagemode-works-not-in-safari-and-opera/35163)

<div class="topic-metadata">

**Author:** [@res56](https://discourse.processing.org/u/res56)\
**Replies:** 0\
**Last updated:** [February 14, 2022, 2:51pm UTC](https://discourse.processing.org/t/imagemode-works-not-in-safari-and-opera/35163 "2022-02-14T14:51:17Z")

</div>

Hey frens, when I use imageMode(CENTER) my script does not run in Safari and Opera.(Script Error). Without this command it works (but the output is not placed correct…) Is this a known issue? thanks in advance There…

---

## [How to use BLENDMODE masking to make graphical images fill black or white regions of the image?](https://discourse.processing.org/t/how-to-use-blendmode-masking-to-make-graphical-images-fill-black-or-white-regions-of-the-image/35153)

<div class="topic-metadata">

**Author:** [@ongo](https://discourse.processing.org/u/ongo)\
**Replies:** 0\
**Last updated:** [February 13, 2022, 6:51pm UTC](https://discourse.processing.org/t/how-to-use-blendmode-masking-to-make-graphical-images-fill-black-or-white-regions-of-the-image/35153 "2022-02-13T18:51:05Z")

</div>

I am using P5JS to draw multiple ellipse locations in an image. The background is black and all circles drawn are white. I’d like to figure out how to use image1 to replace all black areas and image2 to replace all whit…

---

## [Masking shader with alpha blending](https://discourse.processing.org/t/masking-shader-with-alpha-blending/35132)

<div class="topic-metadata">

**Author:** [@AndreasRef](https://discourse.processing.org/u/AndreasRef)\
**Replies:** 2\
**Last updated:** [February 13, 2022, 1:28pm UTC](https://discourse.processing.org/t/masking-shader-with-alpha-blending/35132 "2022-02-13T13:28:00Z")

</div>

Hi I have a working example in the p5js online editor (adapted from GitHub - b2renger/p5js-shaders) using shaders for masking, but I would like to add alpha blending to the sketch allowing me to more smoothly blend the …

---

## [How to make a dotted or dashed ellipse in p5.js?](https://discourse.processing.org/t/how-to-make-a-dotted-or-dashed-ellipse-in-p5-js/35137)

<div class="topic-metadata">

**Author:** [@ongo](https://discourse.processing.org/u/ongo)\
**Replies:** 1\
**Last updated:** [February 13, 2022, 10:29am UTC](https://discourse.processing.org/t/how-to-make-a-dotted-or-dashed-ellipse-in-p5-js/35137 "2022-02-13T10:29:55Z")

</div>

I have no code example to provide, this is just a general question on how to do this. Are there any external libraries that could help with this? Any code examples would be much appreciated!

---

## [My p5.js -2nd timed setInterval(); rolling ball flickers](https://discourse.processing.org/t/my-p5-js-2nd-timed-setinterval-rolling-ball-flickers/23218)

<div class="topic-metadata">

**Author:** [@HFredrickson](https://discourse.processing.org/u/HFredrickson)\
**Replies:** 5\
**Last updated:** [February 12, 2022, 2:48am UTC](https://discourse.processing.org/t/my-p5-js-2nd-timed-setinterval-rolling-ball-flickers/23218 "2022-02-12T02:48:57Z")

</div>

This p5.js code works in my local server Chrome browser. The problem is the 2nd moving circle created flickers as it moves. I tried: setTimeout(); instead of setInterval();-no change window.fill(51) to try to solve a…

---

## [Save & Redraw Pixels (quickly)](https://discourse.processing.org/t/save-redraw-pixels-quickly/34968)

<div class="topic-metadata">

**Author:** [@mosacrafts](https://discourse.processing.org/u/mosacrafts)\
**Replies:** 3\
**Last updated:** [February 12, 2022, 12:02am UTC](https://discourse.processing.org/t/save-redraw-pixels-quickly/34968 "2022-02-12T00:02:28Z")

</div>

Is there a way to redraw or save pixels in near constant time? Currently Im creating a grain overlay by drawing thousands of randomly placed rectangles. I have to draw this grain for every single frame. My issue is that…

---

## [Use of "F1" KEY in p5.js](https://discourse.processing.org/t/use-of-f1-key-in-p5-js/35055)

<div class="topic-metadata">

**Author:** [@Rolembeek](https://discourse.processing.org/u/Rolembeek)\
**Replies:** 4\
**Last updated:** [February 10, 2022, 2:39pm UTC](https://discourse.processing.org/t/use-of-f1-key-in-p5-js/35055 "2022-02-10T14:39:39Z")

</div>

Hi all, In my program I use the “h” key to bring up a kind of “Help Menu”. This works very well but I would like to replace it by a more “standard” use of the “F1” key (keyCode = 112). Whenever I use the F1 key the “nor…

---

## [beginShape and custom shaders](https://discourse.processing.org/t/beginshape-and-custom-shaders/35021)

<div class="topic-metadata">

**Author:** [@matthewortega](https://discourse.processing.org/u/matthewortega)\
**Replies:** 3\
**Last updated:** [February 8, 2022, 10:58am UTC](https://discourse.processing.org/t/beginshape-and-custom-shaders/35021 "2022-02-08T10:58:16Z")

</div>

I have written a custom shader to be applied to shapes, and is applying correctly. For some reason, if I create custom shape using beginShape() the shader is not applied even though it hasn’t been reset. Any pointers on …

---

## [Adding an image as "mask" to existing code](https://discourse.processing.org/t/adding-an-image-as-mask-to-existing-code/34824)

<div class="topic-metadata">

**Author:** [@marieeiko](https://discourse.processing.org/u/marieeiko)\
**Replies:** 0\
**Last updated:** [January 24, 2022, 3:33pm UTC](https://discourse.processing.org/t/adding-an-image-as-mask-to-existing-code/34824 "2022-01-24T15:33:06Z")

</div>

Hello ! I’m having issues to add in image as background : I created a light on a sphere, following my mouse, but I would like it to be all over an image background, not on the sphere as in P5js references… How can I ad…

---

## [screenX screenY equivalent in p5.js](https://discourse.processing.org/t/screenx-screeny-equivalent-in-p5-js/10581)

<div class="topic-metadata">

**Author:** [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Replies:** 6\
**Last updated:** [February 2, 2022, 1:03pm UTC](https://discourse.processing.org/t/screenx-screeny-equivalent-in-p5-js/10581 "2022-02-02T13:03:36Z")

</div>

Wow, p5.js is awesome I just look for a screenX screenY equivalent together with orbitControl() Thanks for a great language! Chrisir

---

## [Filling in a triangle with points](https://discourse.processing.org/t/filling-in-a-triangle-with-points/34765)

<div class="topic-metadata">

**Author:** [@goldorak](https://discourse.processing.org/u/goldorak)\
**Replies:** 3\
**Last updated:** [January 21, 2022, 10:51pm UTC](https://discourse.processing.org/t/filling-in-a-triangle-with-points/34765 "2022-01-21T22:51:17Z")

</div>

Hello, I’m drawing triangles. I’d like to fill in these triangles with lots of points. I believe in order to do so I’d need to know the coordinates of each point belonging within the triangle. I could find solutions …

---

## [Buttons and input boxes](https://discourse.processing.org/t/buttons-and-input-boxes/34711)

<div class="topic-metadata">

**Author:** [@parichko](https://discourse.processing.org/u/parichko)\
**Replies:** 2\
**Last updated:** [January 18, 2022, 8:59am UTC](https://discourse.processing.org/t/buttons-and-input-boxes/34711 "2022-01-18T08:59:26Z")

</div>

I am not really sure how buttons and input boxes functions work. I know for each button you have to create a function but I don’t know how to make them work. If someone can give a simple example of a button that changes …

---

## [createVector error : Cannot set properties of undefined](https://discourse.processing.org/t/createvector-error-cannot-set-properties-of-undefined/34702)

<div class="topic-metadata">

**Author:** [@Ruimao96](https://discourse.processing.org/u/Ruimao96)\
**Replies:** 2\
**Last updated:** [January 18, 2022, 3:18am UTC](https://discourse.processing.org/t/createvector-error-cannot-set-properties-of-undefined/34702 "2022-01-18T03:18:35Z")

</div>

a really simple script trying to use createvector to make a sliding box. let b; function setup() { createCanvas(800, 800); b=new box(); b.startp(200,500,400,700) b.slided(20,100,40,80) } function draw() { backgr…

---

## [How to have multiple drawingcontext clip](https://discourse.processing.org/t/how-to-have-multiple-drawingcontext-clip/34696)

<div class="topic-metadata">

**Author:** [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Replies:** 0\
**Last updated:** [January 17, 2022, 9:41pm UTC](https://discourse.processing.org/t/how-to-have-multiple-drawingcontext-clip/34696 "2022-01-17T21:41:54Z")

</div>

I’m trying to have multiple shapes on the canvas clip other shapes. I tried two methods that don’t work: First is to put the multiple shape masks on the canvas into a function. the result is only the last shape will ac…

---

## [Allowed to remove background in p5.js iframe embeds?](https://discourse.processing.org/t/allowed-to-remove-background-in-p5-js-iframe-embeds/34675)

<div class="topic-metadata">

**Author:** [@pinto](https://discourse.processing.org/u/pinto)\
**Replies:** 0\
**Last updated:** [January 16, 2022, 5:18pm UTC](https://discourse.processing.org/t/allowed-to-remove-background-in-p5-js-iframe-embeds/34675 "2022-01-16T17:18:47Z")

</div>

Hi there! I was wondering if it’s possible to remove the gray background + p5.js bar, and embed only our p5.js canvas as an iframe on another site. My sketch also does not react to mouse movement when embedded in an ifr…

---

## [Simple trajectory calculating](https://discourse.processing.org/t/simple-trajectory-calculating/34413)

<div class="topic-metadata">

**Author:** [@Coyote35](https://discourse.processing.org/u/Coyote35)\
**Replies:** 5\
**Last updated:** [January 12, 2022, 10:40pm UTC](https://discourse.processing.org/t/simple-trajectory-calculating/34413 "2022-01-12T22:40:53Z")

</div>

Hi, I’m trying to develop a little sketch that manages the trajectory of balls that fall from the top of the canvas, as shown on this diagram. I want each ball thrown from the top of the canvas to have a trajectory tha…

---

## [The function UP\_ARROW and DOWN\_ARROW dosen't work at p5.js web](https://discourse.processing.org/t/the-function-up-arrow-and-down-arrow-dosent-work-at-p5-js-web/34584)

<div class="topic-metadata">

**Author:** [@MrPrumucena](https://discourse.processing.org/u/MrPrumucena)\
**Replies:** 2\
**Last updated:** [January 11, 2022, 8:05pm UTC](https://discourse.processing.org/t/the-function-up-arrow-and-down-arrow-dosent-work-at-p5-js-web/34584 "2022-01-11T20:05:53Z")

</div>

I’m making the game Pong on p5.js and i’m trying to move the racket using the function: function (keyIsDown(UP\_ARROW)){ yRacket -= 10; } function (keyIsDown(DOWN\_ARROW)){ yRacket += 10; } But it dosen’t work, the …

---

## [3D rotation changes shape of object?](https://discourse.processing.org/t/3d-rotation-changes-shape-of-object/34550)

<div class="topic-metadata">

**Author:** [@kenjones](https://discourse.processing.org/u/kenjones)\
**Replies:** 2\
**Last updated:** [January 10, 2022, 4:39am UTC](https://discourse.processing.org/t/3d-rotation-changes-shape-of-object/34550 "2022-01-10T04:39:13Z")

</div>

I am developing a WebGL sketch on openprocessing.org and I’ve run into a problem. When I apply a specific sequence of rotations my object retains its shape until I get to one rotation. Applying that rotation causes a dra…

---

## [ReferenceError: path is not defined](https://discourse.processing.org/t/referenceerror-path-is-not-defined/34519)

<div class="topic-metadata">

**Author:** [@Errorbot1122](https://discourse.processing.org/u/Errorbot1122)\
**Replies:** 2\
**Last updated:** [January 10, 2022, 4:18am UTC](https://discourse.processing.org/t/referenceerror-path-is-not-defined/34519 "2022-01-10T04:18:14Z")

</div>

Whenever I run my code I get this error ReferenceError: path is not defined at https://365155ea-fe08-466f-b1bf-6d6d9500167a.id.repl.co/loading.js:122:67 at new Promise (\<anonymous\>) at https://365155ea-fe08-…

---

## [rotationX on Android](https://discourse.processing.org/t/rotationx-on-android/34479)

<div class="topic-metadata">

**Author:** [@Katarzyna](https://discourse.processing.org/u/Katarzyna)\
**Replies:** 7\
**Last updated:** [January 8, 2022, 11:25pm UTC](https://discourse.processing.org/t/rotationx-on-android/34479 "2022-01-08T23:25:24Z")

</div>

I try with Accelerometer data on Android device. In script function setup() { createCanvas(100, 100); } function draw() { background(200); console.log(rotationX) } there is only a null. Why should I do to get va…

---

## [I don't get what's wrong with my code (move rect)](https://discourse.processing.org/t/i-dont-get-whats-wrong-with-my-code-move-rect/34509)

<div class="topic-metadata">

**Author:** [@Alexandre\_Normandin](https://discourse.processing.org/u/Alexandre_Normandin)\
**Replies:** 4\
**Last updated:** [January 8, 2022, 12:50am UTC](https://discourse.processing.org/t/i-dont-get-whats-wrong-with-my-code-move-rect/34509 "2022-01-08T00:50:04Z")

</div>

hi, I’m just tarting to learn to code and I want my initial rectangle to move right when my mouse is clicked and I can’t seem to get the code right and I just can’t figure out why. If someone could please run it and tel…

---

## [Jumping mechanic](https://discourse.processing.org/t/jumping-mechanic/34499)

<div class="topic-metadata">

**Author:** [@parichko](https://discourse.processing.org/u/parichko)\
**Replies:** 1\
**Last updated:** [January 7, 2022, 10:27am UTC](https://discourse.processing.org/t/jumping-mechanic/34499 "2022-01-07T10:27:07Z")

</div>

What is the best way to add a jumping mechanic to a shape in p5js

---

## [Put letters from input in array](https://discourse.processing.org/t/put-letters-from-input-in-array/34486)

<div class="topic-metadata">

**Author:** [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Replies:** 2\
**Last updated:** [January 6, 2022, 3:55pm UTC](https://discourse.processing.org/t/put-letters-from-input-in-array/34486 "2022-01-06T15:55:34Z")

</div>

How do I break “text” apart and put it into an array? let input, button, greeting; function setup() { // create canvas createCanvas(710, 400); input = createInput(); input.position(20, 65); button = createB…

---

## [Save in vectorial + background aspect](https://discourse.processing.org/t/save-in-vectorial-background-aspect/34457)

<div class="topic-metadata">

**Author:** [@jdelaro](https://discourse.processing.org/u/jdelaro)\
**Replies:** 0\
**Last updated:** [January 4, 2022, 8:36am UTC](https://discourse.processing.org/t/save-in-vectorial-background-aspect/34457 "2022-01-04T08:36:33Z")

</div>

Hello, I hope I am in the right place to post my question. I am using this code created by Manoylov AC : var blockSize = 150; var countBorder = 2; var wdt = blockSize \* countBorder; var hgt = blockSize \* countBorder; v…

---

## [How to load my canvas so I can do pixel manipulation](https://discourse.processing.org/t/how-to-load-my-canvas-so-i-can-do-pixel-manipulation/34406)

<div class="topic-metadata">

**Author:** [@goldorak](https://discourse.processing.org/u/goldorak)\
**Replies:** 2\
**Last updated:** [January 1, 2022, 5:10pm UTC](https://discourse.processing.org/t/how-to-load-my-canvas-so-i-can-do-pixel-manipulation/34406 "2022-01-01T17:10:55Z")

</div>

Hi, I’d like to play around with an existing sketch which uses: function preload() { img = loadImage(url + str(windowWidth) + random(keywords)); } Excepted that I don’t want to use an external image, I would like …

---

## [How to dynamically change API search parameters?](https://discourse.processing.org/t/how-to-dynamically-change-api-search-parameters/26321)

<div class="topic-metadata">

**Author:** [@epignosis567](https://discourse.processing.org/u/epignosis567)\
**Replies:** 7\
**Last updated:** [December 31, 2021, 6:26pm UTC](https://discourse.processing.org/t/how-to-dynamically-change-api-search-parameters/26321 "2021-12-31T18:26:50Z")

</div>

This is the first complex bit of code I’ve written on my own! :partying\_face: I access the API, search for any image with “hand” in the title, download the data, and then display an image and it’s title from an array. A…

---

## [Trying to generate a sphere using an array of circles](https://discourse.processing.org/t/trying-to-generate-a-sphere-using-an-array-of-circles/34321)

<div class="topic-metadata">

**Author:** [@lucienfradet](https://discourse.processing.org/u/lucienfradet)\
**Replies:** 6\
**Last updated:** [December 28, 2021, 8:36pm UTC](https://discourse.processing.org/t/trying-to-generate-a-sphere-using-an-array-of-circles/34321 "2021-12-28T20:36:57Z")

</div>

Hello! I’m trying to generate a sphere using circles of different sizes. I want it to be adapt if I change the NUM\_RING variable. Right now, the my code creates overlapping circles, and I don’t get why. Maybe it’s somthi…

---

## [Unable to apply shader to PGraphics in p5js](https://discourse.processing.org/t/unable-to-apply-shader-to-pgraphics-in-p5js/34322)

<div class="topic-metadata">

**Author:** [@urotas](https://discourse.processing.org/u/urotas)\
**Replies:** 4\
**Last updated:** [December 28, 2021, 3:03am UTC](https://discourse.processing.org/t/unable-to-apply-shader-to-pgraphics-in-p5js/34322 "2021-12-28T03:03:30Z")

</div>

Hi. I’m trying to apply a shader to PGraphics. I was able to apply a shader to a canvas. But, when I tried to apply a shader to PGraphics as well, I could not. Should I add something? This is what I’m applying to the c…

---

## [Processing X P5JS (image quality on canvas)](https://discourse.processing.org/t/processing-x-p5js-image-quality-on-canvas/34272)

<div class="topic-metadata">

**Author:** [@vargas](https://discourse.processing.org/u/vargas)\
**Replies:** 7\
**Last updated:** [December 26, 2021, 11:44pm UTC](https://discourse.processing.org/t/processing-x-p5js-image-quality-on-canvas/34272 "2021-12-26T23:44:06Z")

</div>

I have transferred a processing code to P5JS. In it I use an image with rotation and all axes. But image quality on P5JS canvas is not the same as on processing. Does anybody know how to solve this?

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

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