# Coding Questions

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

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

**Page:** 11

---

## [Overlaying webcam input (transparent way )on top of WebGL canvas?](https://discourse.processing.org/t/overlaying-webcam-input-transparent-way-on-top-of-webgl-canvas/36833)

<div class="topic-metadata">

**Author:** [@Timo](https://discourse.processing.org/u/Timo)\
**Replies:** 0\
**Last updated:** [May 11, 2022, 7:54pm UTC](https://discourse.processing.org/t/overlaying-webcam-input-transparent-way-on-top-of-webgl-canvas/36833 "2022-05-11T19:54:47Z")

</div>

Hi, I have been trying to overlay webcam feed on top of a webGL canvas having cube shapes . In the sketch The cube originates from -z value and moves towards the user When i dont have the video/ webcam element overlaid…

---

## [Calling .loadPixels() on a video freezes the feed?](https://discourse.processing.org/t/calling-loadpixels-on-a-video-freezes-the-feed/36822)

<div class="topic-metadata">

**Author:** [@jaschanarveson](https://discourse.processing.org/u/jaschanarveson)\
**Replies:** 1\
**Last updated:** [May 11, 2022, 2:24pm UTC](https://discourse.processing.org/t/calling-loadpixels-on-a-video-freezes-the-feed/36822 "2022-05-11T14:24:56Z")

</div>

I have a sketch where I’m getting a video feed with createCapture(VIDEO), then toggling between states where I either see the straight feed or I pixelate the image. Here’s what’s happening: run the sketch, feed works …

---

## [Logic on making a circle disappear when clicked and drawing another circle at the same time](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066)

<div class="topic-metadata">

**Author:** [@Timo](https://discourse.processing.org/u/Timo)\
**Replies:** 45\
**Last updated:** [May 6, 2022, 2:17pm UTC](https://discourse.processing.org/t/logic-on-making-a-circle-disappear-when-clicked-and-drawing-another-circle-at-the-same-time/35066 "2022-05-06T14:17:00Z")

</div>

Hello, I am currently struggling the way forward regarding the following On a mouse click inside a given circle the circle disappears At the same time another is drawn on the canvas .The same process repeats, that …

---

## [Map one region to another](https://discourse.processing.org/t/map-one-region-to-another/36720)

<div class="topic-metadata">

**Author:** [@guille](https://discourse.processing.org/u/guille)\
**Replies:** 1\
**Last updated:** [May 5, 2022, 10:37pm UTC](https://discourse.processing.org/t/map-one-region-to-another/36720 "2022-05-05T22:37:26Z")

</div>

I am working on a sketch to get Pythagorean dissections from Pythagorean tilings (here). I am having a hard time trying to rotate the region in the black square so that it appears with vertical/horizontal sides (some of …

---

## [PFront results gazillion amount of cache file, how to avoid it?](https://discourse.processing.org/t/pfront-results-gazillion-amount-of-cache-file-how-to-avoid-it/36737)

<div class="topic-metadata">

**Author:** [@psamead](https://discourse.processing.org/u/psamead)\
**Replies:** 2\
**Last updated:** [May 5, 2022, 4:27pm UTC](https://discourse.processing.org/t/pfront-results-gazillion-amount-of-cache-file-how-to-avoid-it/36737 "2022-05-05T16:27:56Z")

</div>

Hi my friends, I am trying to convert the guest tutorial matrix rain from coding train to processing version. But I found that the code will result gazillion amount of cache file to my disk, maybe because I am using PFo…

---

## [P5 sound - connecting filters in series](https://discourse.processing.org/t/p5-sound-connecting-filters-in-series/36728)

<div class="topic-metadata">

**Author:** [@spurge](https://discourse.processing.org/u/spurge)\
**Replies:** 0\
**Last updated:** [May 5, 2022, 11:05am UTC](https://discourse.processing.org/t/p5-sound-connecting-filters-in-series/36728 "2022-05-05T11:05:19Z")

</div>

Hello, I’m a beginner with a question regarding p5 sound. I’m looking for a proper way to cascade filters, that is connecting them in series. For now, I’m using a lowshelf and a highshelf filter. In the example code, r…

---

## [Translating and scaling for better zoom](https://discourse.processing.org/t/translating-and-scaling-for-better-zoom/36689)

<div class="topic-metadata">

**Author:** [@Ckyiu](https://discourse.processing.org/u/Ckyiu)\
**Replies:** 3\
**Last updated:** [May 3, 2022, 2:51pm UTC](https://discourse.processing.org/t/translating-and-scaling-for-better-zoom/36689 "2022-05-03T14:51:49Z")

</div>

In this project I’m working on, I’ve implemented panning and zooming around. Panning works great, and the zoom works, but it’s unnatural, as it zooms in on the origin instead of where your mouse cursor is. I’ve created …

---

## [Change background color when mousePressed](https://discourse.processing.org/t/change-background-color-when-mousepressed/36660)

<div class="topic-metadata">

**Author:** [@luciaromancanivell](https://discourse.processing.org/u/luciaromancanivell)\
**Replies:** 1\
**Last updated:** [April 30, 2022, 7:48pm UTC](https://discourse.processing.org/t/change-background-color-when-mousepressed/36660 "2022-04-30T19:48:11Z")

</div>

Hello, I am trying to make the background change when pressing each circle here, but I cannot get it to work, it is always white, any help? The circles are supposed to grow and be black when rolling over and the backgrou…

---

## [Problem with JSDoc createGraphics() annotation in my sketch](https://discourse.processing.org/t/problem-with-jsdoc-creategraphics-annotation-in-my-sketch/36569)

<div class="topic-metadata">

**Author:** [@SNitaine](https://discourse.processing.org/u/SNitaine)\
**Replies:** 1\
**Last updated:** [April 26, 2022, 6:46pm UTC](https://discourse.processing.org/t/problem-with-jsdoc-creategraphics-annotation-in-my-sketch/36569 "2022-04-26T18:46:50Z")

</div>

When working with createGraphics() how do you set the correct JSDoc comment for the global variable var pg that is declared global outside of setup() and draw(). let say we start with a simple sketch like this: var pg …

---

## [Cube explosion when clicking inside the cube](https://discourse.processing.org/t/cube-explosion-when-clicking-inside-the-cube/36573)

<div class="topic-metadata">

**Author:** [@Timo](https://discourse.processing.org/u/Timo)\
**Replies:** 1\
**Last updated:** [April 26, 2022, 2:13pm UTC](https://discourse.processing.org/t/cube-explosion-when-clicking-inside-the-cube/36573 "2022-04-26T14:13:15Z")

</div>

Hello everyone, in my sketch I am using WEBGL and ScreenPosition js to create a new cube whenever the mouse X , mouseY co-ordinates are inside the cube. I am currently trying to make the cube explode when the above condi…

---

## [Press Button to Dispaly Text on the Screen](https://discourse.processing.org/t/press-button-to-dispaly-text-on-the-screen/36591)

<div class="topic-metadata">

**Author:** [@Kitessa](https://discourse.processing.org/u/Kitessa)\
**Replies:** 1\
**Last updated:** [April 25, 2022, 8:11pm UTC](https://discourse.processing.org/t/press-button-to-dispaly-text-on-the-screen/36591 "2022-04-25T20:11:46Z")

</div>

Hi There, Just trying to make 3 buttons work in P5Js. I am trying to have some text displayed every time you press the button but I am struggling to write this piece of code that will get text displayed. Thast my code s…

---

## [Can't figure out logic for overlapping squares when clicked](https://discourse.processing.org/t/cant-figure-out-logic-for-overlapping-squares-when-clicked/36563)

<div class="topic-metadata">

**Author:** [@Kipe](https://discourse.processing.org/u/Kipe)\
**Replies:** 2\
**Last updated:** [April 24, 2022, 1:10am UTC](https://discourse.processing.org/t/cant-figure-out-logic-for-overlapping-squares-when-clicked/36563 "2022-04-24T01:10:52Z")

</div>

I’m having trouble figuring out how to emulate this with p5.js. My code is below. I’m able to get each box to move individually, even if they’re overlapping… But the moment I try to change the order of the boxes array th…

---

## [Find the color of a pixel](https://discourse.processing.org/t/find-the-color-of-a-pixel/36558)

<div class="topic-metadata">

**Author:** [@hermitdog](https://discourse.processing.org/u/hermitdog)\
**Replies:** 1\
**Last updated:** [April 24, 2022, 12:36am UTC](https://discourse.processing.org/t/find-the-color-of-a-pixel/36558 "2022-04-24T00:36:22Z")

</div>

\</\> button \* homework policy \* asking questions

---

## [Save sketch as js-file with random params at runtime](https://discourse.processing.org/t/save-sketch-as-js-file-with-random-params-at-runtime/36542)

<div class="topic-metadata">

**Author:** [@res56](https://discourse.processing.org/u/res56)\
**Replies:** 3\
**Last updated:** [April 23, 2022, 11:55am UTC](https://discourse.processing.org/t/save-sketch-as-js-file-with-random-params-at-runtime/36542 "2022-04-23T11:55:45Z")

</div>

Hi frens, it is possible to save a sketch as javascript-file with “values” of random function at runtime? Thanks in advance, Res

---

## [Relative Slider position using CSS techniques](https://discourse.processing.org/t/relative-slider-position-using-css-techniques/36515)

<div class="topic-metadata">

**Author:** [@res56](https://discourse.processing.org/u/res56)\
**Replies:** 1\
**Last updated:** [April 22, 2022, 10:08am UTC](https://discourse.processing.org/t/relative-slider-position-using-css-techniques/36515 "2022-04-22T10:08:09Z")

</div>

Hi frens, it is possible to integrate a p5js-slider in react-dom structure: \<Row\> \<Col className="slider-label"\>Movement\</Col\> \<Col className="slider01"\>\*Place for p5js-slider\*\</Col\> …

---

## [Converting coding challenge ‘slide-puzzle-canvas’ from p5.js to Processing (Java)](https://discourse.processing.org/t/converting-coding-challenge-slide-puzzle-canvas-from-p5-js-to-processing-java/36401)

<div class="topic-metadata">

**Author:** [@psamead](https://discourse.processing.org/u/psamead)\
**Replies:** 1\
**Last updated:** [April 19, 2022, 4:58pm UTC](https://discourse.processing.org/t/converting-coding-challenge-slide-puzzle-canvas-from-p5-js-to-processing-java/36401 "2022-04-19T16:58:50Z")

</div>

Hi my friends, I am trying to learn coding challenge Slide-Puzzle, the 'slide- puzzle-canvas" and convert p5js code to processing version. But I am struggling with the PGraphics and the copy function. Here is the code …

---

## [SVG images don't display?](https://discourse.processing.org/t/svg-images-dont-display/36288)

<div class="topic-metadata">

**Author:** [@bluemoon](https://discourse.processing.org/u/bluemoon)\
**Replies:** 3\
**Last updated:** [April 14, 2022, 12:21am UTC](https://discourse.processing.org/t/svg-images-dont-display/36288 "2022-04-14T00:21:48Z")

</div>

Hey Folks, trying to load some SVGs in the p5js - I’m not getting any errors but the images just don’t display I’m using setup code like swords = loadImage('assets/swords/Asset15.svg'); and draw code like image(swords…

---

## [Converting a text file into a multidimensional array of data points](https://discourse.processing.org/t/converting-a-text-file-into-a-multidimensional-array-of-data-points/36007)

<div class="topic-metadata">

**Author:** [@TheSynchronomicon](https://discourse.processing.org/u/TheSynchronomicon)\
**Replies:** 4\
**Last updated:** [April 10, 2022, 7:11pm UTC](https://discourse.processing.org/t/converting-a-text-file-into-a-multidimensional-array-of-data-points/36007 "2022-04-10T19:11:15Z")

</div>

I want to be able to convert the following array from a text file \[\[-7.5,-7.5,-5.0\], \[-2.5,-7.5,0.0\], \[2.5,-7.5,0.0\], \[7.5,-7.5,-5.0\]\], , \[\[-7.5,-2.5,-7.5\], \[-2.5,-2.5,5.0\], \[2.5,-2.5,5.0\], \[7.5,-2.5,-7.5\]\], , \[\[-7.5,…

---

## [Object attributes randomly removed?](https://discourse.processing.org/t/object-attributes-randomly-removed/36214)

<div class="topic-metadata">

**Author:** [@PrincessLeia](https://discourse.processing.org/u/PrincessLeia)\
**Replies:** 2\
**Last updated:** [April 9, 2022, 10:28pm UTC](https://discourse.processing.org/t/object-attributes-randomly-removed/36214 "2022-04-09T22:28:14Z")

</div>

Hi, so I’ve been learning the maths involved with the calculations for the reflection velocity of objects hitting uneven or circular surfaces. In this project: p5.js Web Editor I have the problem where most of my objec…

---

## [Multiple elements on one p5.Geometry()](https://discourse.processing.org/t/multiple-elements-on-one-p5-geometry/36220)

<div class="topic-metadata">

**Author:** [@zjorge](https://discourse.processing.org/u/zjorge)\
**Replies:** 5\
**Last updated:** [April 8, 2022, 8:56pm UTC](https://discourse.processing.org/t/multiple-elements-on-one-p5-geometry/36220 "2022-04-08T20:56:42Z")

</div>

I need to build procedural geometries with p5.Geometry and model() ? I’m doing ok when it is only one element but if I need more than one I can’t model() an array of Geometries or each individually on a for loop. I’m not…

---

## [Sketch in a \<div\>](https://discourse.processing.org/t/sketch-in-a-div/36189)

<div class="topic-metadata">

**Author:** [@CheeseBread](https://discourse.processing.org/u/CheeseBread)\
**Replies:** 2\
**Last updated:** [April 8, 2022, 12:31pm UTC](https://discourse.processing.org/t/sketch-in-a-div/36189 "2022-04-08T12:31:52Z")

</div>

hello, I need to put my sketch (voxel\_view\_canvas3.js) in a div (id=“canvas\_voxel\_colors”) where is write CANVAS, but the sketch doesn’t show. What am I doing wrong? link to the project (p5.js Web Editor)

---

## [P5.js code without stringbuilder](https://discourse.processing.org/t/p5-js-code-without-stringbuilder/36084)

<div class="topic-metadata">

**Author:** [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Replies:** 6\
**Last updated:** [April 5, 2022, 1:51pm UTC](https://discourse.processing.org/t/p5-js-code-without-stringbuilder/36084 "2022-04-05T13:51:29Z")

</div>

how do I rewrite this code without string builder? function setup() { createCanvas(600,600); initializeFields(); var n = 20; } function getAlphaNumericString(n) { // chose a Character random from this St…

---

## [Converting a boundaries function with applyForce from .pde to .p5](https://discourse.processing.org/t/converting-a-boundaries-function-with-applyforce-from-pde-to-p5/35984)

<div class="topic-metadata">

**Author:** [@ZizoMass](https://discourse.processing.org/u/ZizoMass)\
**Replies:** 6\
**Last updated:** [April 4, 2022, 3:27pm UTC](https://discourse.processing.org/t/converting-a-boundaries-function-with-applyforce-from-pde-to-p5/35984 "2022-04-04T15:27:42Z")

</div>

Hi, guys I’m converting an old project that I had done in processing, and I’m having a lot of difficulties converting this function. The function makes a game object float within a pre-limited area, changing the moveme…

---

## [Disable pinch zoom on mobile](https://discourse.processing.org/t/disable-pinch-zoom-on-mobile/36100)

<div class="topic-metadata">

**Author:** [@tristan1](https://discourse.processing.org/u/tristan1)\
**Replies:** 2\
**Last updated:** [April 4, 2022, 11:13am UTC](https://discourse.processing.org/t/disable-pinch-zoom-on-mobile/36100 "2022-04-04T11:13:49Z")

</div>

Hey everyone, I am creating a litte pingpong game with multiple touch so that two player can play with each other on mobile device. While playing the two touches trigger zooming in and out the screen, which strongly …

---

## [Change LIVE capture animation to a gif/moving animation](https://discourse.processing.org/t/change-live-capture-animation-to-a-gif-moving-animation/36102)

<div class="topic-metadata">

**Author:** [@drnturtle](https://discourse.processing.org/u/drnturtle)\
**Replies:** 0\
**Last updated:** [April 4, 2022, 4:14am UTC](https://discourse.processing.org/t/change-live-capture-animation-to-a-gif-moving-animation/36102 "2022-04-04T04:14:52Z")

</div>

So lately I have done some exploration on the camera delay sort of effect on P5.js, and I just couldn’t wrap my head around something— When I try to replace the img source from “createCapture(VIDEO)” to "loadImage(‘XXXX.…

---

## [Loading objs with callbacks](https://discourse.processing.org/t/loading-objs-with-callbacks/36066)

<div class="topic-metadata">

**Author:** [@Damdada](https://discourse.processing.org/u/Damdada)\
**Replies:** 2\
**Last updated:** [April 1, 2022, 7:40pm UTC](https://discourse.processing.org/t/loading-objs-with-callbacks/36066 "2022-04-01T19:40:05Z")

</div>

Hi, im trying to load multiple OBJs and Images with callbacks into my sketch. The loading works fine but the Problem is that the Images and OBJs order is diffrent evreytime i load the sketch. So the images i take for th…

---

## [Help visualizing the Mandelbrot set](https://discourse.processing.org/t/help-visualizing-the-mandelbrot-set/35974)

<div class="topic-metadata">

**Author:** [@TerminatorP](https://discourse.processing.org/u/TerminatorP)\
**Replies:** 7\
**Last updated:** [March 31, 2022, 7:37am UTC](https://discourse.processing.org/t/help-visualizing-the-mandelbrot-set/35974 "2022-03-31T07:37:32Z")

</div>

Hey folks I am trying to create a simple mandelbrot set visualization using p5js library. I read the wikipedia article on the Mandelbrot Set and came up a quick visualization. It seems to have worked correctly, but I did…

---

## [Chromakey with shadertoy example](https://discourse.processing.org/t/chromakey-with-shadertoy-example/17378)

<div class="topic-metadata">

**Author:** [@hbarone](https://discourse.processing.org/u/hbarone)\
**Replies:** 1\
**Last updated:** [March 23, 2022, 4:42pm UTC](https://discourse.processing.org/t/chromakey-with-shadertoy-example/17378 "2022-03-23T16:42:13Z")

</div>

I’m try to addapt the shadertoy chromakey example to p5 with webcam as video source. After many time reading documentations of shaders my code seems not working. I need some help ShaderToy Chroma Key My test

---

## [Infinite loop when using image()](https://discourse.processing.org/t/infinite-loop-when-using-image/35826)

<div class="topic-metadata">

**Author:** [@rustyrobison](https://discourse.processing.org/u/rustyrobison)\
**Replies:** 8\
**Last updated:** [March 19, 2022, 1:28am UTC](https://discourse.processing.org/t/infinite-loop-when-using-image/35826 "2022-03-19T01:28:36Z")

</div>

I made a simple loop, but when the image() function is called inside it, it comes up as an infinite loop. Any ideas? for (let i = 0; i \< 255; i++) { tint(255, i); image(img, 0, 0); }

---

## [Scaling Images on a Custom Axis](https://discourse.processing.org/t/scaling-images-on-a-custom-axis/35801)

<div class="topic-metadata">

**Author:** [@AmethystMoon](https://discourse.processing.org/u/AmethystMoon)\
**Replies:** 1\
**Last updated:** [March 17, 2022, 9:23pm UTC](https://discourse.processing.org/t/scaling-images-on-a-custom-axis/35801 "2022-03-17T21:23:25Z")

</div>

I’m working on a cell-based game where the player walks around a world made of cells. I’m trying to give it an isometric perspective, so instead of just plain squares I rotate the canvas by 45 degrees, then draw the cell…

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

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