# Coding Questions

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

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

**Page:** 7

---

## [P5js trail transparent Background？](https://discourse.processing.org/t/p5js-trail-transparent-background/39864)

<div class="topic-metadata">

**Author:** [@AbleYudada](https://discourse.processing.org/u/AbleYudada)\
**Replies:** 7\
**Last updated:** [December 8, 2022, 2:22am UTC](https://discourse.processing.org/t/p5js-trail-transparent-background/39864 "2022-12-08T02:22:38Z")

</div>

Hello guys! Recently, I have encountered some troubles with p5js. I want to make a raindrop with a track, but the ball moves without a track. Finally, they merge together, but I can’t get a raindrop with a track and a tr…

---

## [Connecting to points with an arc](https://discourse.processing.org/t/connecting-to-points-with-an-arc/40009)

<div class="topic-metadata">

**Author:** [@cristiano\_b](https://discourse.processing.org/u/cristiano_b)\
**Replies:** 6\
**Last updated:** [December 5, 2022, 10:55am UTC](https://discourse.processing.org/t/connecting-to-points-with-an-arc/40009 "2022-12-05T10:55:25Z")

</div>

Ok, this is probably easy but I can’t find a way. How can I connect two random points with an arc? The code below shows the final result, but I’d like to do it calculating the arc starting from any position of the two …

---

## [Concentric Circles Animation doubt](https://discourse.processing.org/t/concentric-circles-animation-doubt/39992)

<div class="topic-metadata">

**Author:** [@JoseRocha](https://discourse.processing.org/u/JoseRocha)\
**Replies:** 6\
**Last updated:** [December 4, 2022, 2:28pm UTC](https://discourse.processing.org/t/concentric-circles-animation-doubt/39992 "2022-12-04T14:28:40Z")

</div>

Hi All. Is it possible to do this kind of animation smoothly with code in p5.js Thanks for any help.

---

## [How can I do this homework?](https://discourse.processing.org/t/how-can-i-do-this-homework/40011)

<div class="topic-metadata">

**Author:** [@add](https://discourse.processing.org/u/add)\
**Replies:** 1\
**Last updated:** [December 3, 2022, 8:39pm UTC](https://discourse.processing.org/t/how-can-i-do-this-homework/40011 "2022-12-03T20:39:17Z")

</div>

Add a rectangle in which the input is entered. Make 5 buttons with the following text operations: - Clear: clear the text in the textbox - Capitals: put the letters in capitals - Last character: show the last character o…

---

## [How can i make my function appear big and small?](https://discourse.processing.org/t/how-can-i-make-my-function-appear-big-and-small/39972)

<div class="topic-metadata">

**Author:** [@Arbriana](https://discourse.processing.org/u/Arbriana)\
**Replies:** 3\
**Last updated:** [December 2, 2022, 3:47pm UTC](https://discourse.processing.org/t/how-can-i-make-my-function-appear-big-and-small/39972 "2022-12-02T15:47:56Z")

</div>

function setup() { createCanvas(1000, 1000); background(‘beige’); noLoop() angleMode(DEGREES); //noStroke(); } //s is my scale factor function draw() { dog(0,0,1); dog(1,3,2); //dog(4,3,3); } //This is my sk…

---

## [Elements self positioning in equilateral triangle arrangement](https://discourse.processing.org/t/elements-self-positioning-in-equilateral-triangle-arrangement/39762)

<div class="topic-metadata">

**Author:** [@cristiano\_b](https://discourse.processing.org/u/cristiano_b)\
**Replies:** 11\
**Last updated:** [December 2, 2022, 12:16pm UTC](https://discourse.processing.org/t/elements-self-positioning-in-equilateral-triangle-arrangement/39762 "2022-12-02T12:16:31Z")

</div>

Hi all, I’m trying to produce a red draggable circle with two other circles dynamically adapting their positions to create equilateral triangle. Could you please suggest a better solution than the one i paste here? Id…

---

## [Mouse position freezes for the beginning of a touch input](https://discourse.processing.org/t/mouse-position-freezes-for-the-beginning-of-a-touch-input/39914)

<div class="topic-metadata">

**Author:** [@s31](https://discourse.processing.org/u/s31)\
**Replies:** 4\
**Last updated:** [November 29, 2022, 2:06pm UTC](https://discourse.processing.org/t/mouse-position-freezes-for-the-beginning-of-a-touch-input/39914 "2022-11-29T14:06:11Z")

</div>

greetings foundation, I’ve been working on an online drawing project with p5js and have had some trouble with touch. I noticed that when drawing a line with touchscreen it takes about a centimeter of movement from the i…

---

## [Line drawing from image beautiful sketch from p5.js to processing 3](https://discourse.processing.org/t/line-drawing-from-image-beautiful-sketch-from-p5-js-to-processing-3/10133)

<div class="topic-metadata">

**Author:** [@dimpapadop](https://discourse.processing.org/u/dimpapadop)\
**Replies:** 3\
**Last updated:** [November 27, 2022, 5:43am UTC](https://discourse.processing.org/t/line-drawing-from-image-beautiful-sketch-from-p5-js-to-processing-3/10133 "2022-11-27T05:43:00Z")

</div>

good afternoon i try to migrate this beautiful sketch https://www.openprocessing.org/sketch/486307 from p5js to processing 3. Till now i have the following code that is “somehow” works but the lines doesn’t seem to be a…

---

## [How to get instance p5 object when clicking on the div container?](https://discourse.processing.org/t/how-to-get-instance-p5-object-when-clicking-on-the-div-container/39831)

<div class="topic-metadata">

**Author:** [@Chris](https://discourse.processing.org/u/Chris)\
**Replies:** 4\
**Last updated:** [November 23, 2022, 4:08pm UTC](https://discourse.processing.org/t/how-to-get-instance-p5-object-when-clicking-on-the-div-container/39831 "2022-11-23T16:08:53Z")

</div>

Hello all ! How to get instance p5 object when clicked on the div which contain this p5 instance canvas ? Actually, I have an array of array {divName,p5Inst} divname + P5 object. When I clic on the div, then I can get …

---

## [Performance issue when drawing on large canvas after loadPixels()](https://discourse.processing.org/t/performance-issue-when-drawing-on-large-canvas-after-loadpixels/39645)

<div class="topic-metadata">

**Author:** [@meezwhite](https://discourse.processing.org/u/meezwhite)\
**Replies:** 1\
**Last updated:** [November 20, 2022, 1:07am UTC](https://discourse.processing.org/t/performance-issue-when-drawing-on-large-canvas-after-loadpixels/39645 "2022-11-20T01:07:47Z")

</div>

I encountered a performance issue (especially on Chrome) when drawing on a large canvas after executing loadPixels(). Here’s an example The example code: const canvasSize = 2048; // try 4096 const density = 1; let dia…

---

## [Bezier curve strength weight points](https://discourse.processing.org/t/bezier-curve-strength-weight-points/39629)

<div class="topic-metadata">

**Author:** [@Tilman](https://discourse.processing.org/u/Tilman)\
**Replies:** 6\
**Last updated:** [November 16, 2022, 3:34pm UTC](https://discourse.processing.org/t/bezier-curve-strength-weight-points/39629 "2022-11-16T15:34:00Z")

</div>

Hi everyone, I have a simple bezier code here and would like to know if it is possible to give the weight point that shapes the line into a curve more weight? Let the curve be pulled closer to the point. Is there a way …

---

## [Makes eyes follow mouse cursor](https://discourse.processing.org/t/makes-eyes-follow-mouse-cursor/13816)

<div class="topic-metadata">

**Author:** [@jimmy5517](https://discourse.processing.org/u/jimmy5517)\
**Replies:** 1\
**Last updated:** [September 5, 2019, 5:53am UTC](https://discourse.processing.org/t/makes-eyes-follow-mouse-cursor/13816 "2019-09-05T05:53:45Z")

</div>

I’m fairly new to coding, but for a project I’m working on, I’m trying to make a pair of eyes that will follow my mouse cursor. I want the eyes to look at roughly where I point my cursor, while also staying inside the e…

---

## [How to remove p5.js in browser extension with message](https://discourse.processing.org/t/how-to-remove-p5-js-in-browser-extension-with-message/39655)

<div class="topic-metadata">

**Author:** [@premier213](https://discourse.processing.org/u/premier213)\
**Replies:** 0\
**Last updated:** [November 10, 2022, 9:03am UTC](https://discourse.processing.org/t/how-to-remove-p5-js-in-browser-extension-with-message/39655 "2022-11-10T09:03:51Z")

</div>

// get message chrome.runtime.onMessage.addListener(gotMessage); function gotMessage(message, sender, sendResponse) { runCanvas(message.val); } function runCanvas(value) { var stage = (p) =\> { if (value === "nn-…

---

## [Can p5 objects have anchor links?](https://discourse.processing.org/t/can-p5-objects-have-anchor-links/39658)

<div class="topic-metadata">

**Author:** [@elle\_C](https://discourse.processing.org/u/elle_C)\
**Replies:** 3\
**Last updated:** [November 11, 2022, 6:22pm UTC](https://discourse.processing.org/t/can-p5-objects-have-anchor-links/39658 "2022-11-11T18:22:15Z")

</div>

Hello, I’m new to p5 DOM manipulation and I’m trying to discover if it’s possible to associate an object with a link. For example I would like to draw a circle and when it is clicked I go to a link. I have experimented …

---

## [Using a Boolean in Constructor Class in p5.js](https://discourse.processing.org/t/using-a-boolean-in-constructor-class-in-p5-js/39546)

<div class="topic-metadata">

**Author:** [@alenmartel](https://discourse.processing.org/u/alenmartel)\
**Replies:** 2\
**Last updated:** [November 11, 2022, 5:55am UTC](https://discourse.processing.org/t/using-a-boolean-in-constructor-class-in-p5-js/39546 "2022-11-11T05:55:43Z")

</div>

Good evening all; I am still new to p5.js so appreciate your patience if I missed a simple thing! As a simple function in p5.js, I’m trying to make it so that when I click in a rectangle that it changes colour as well …

---

## [Coding train 9.8: Random circle with no overlap](https://discourse.processing.org/t/coding-train-9-8-random-circle-with-no-overlap/39653)

<div class="topic-metadata">

**Author:** [@mwr](https://discourse.processing.org/u/mwr)\
**Replies:** 0\
**Last updated:** [November 10, 2022, 5:28am UTC](https://discourse.processing.org/t/coding-train-9-8-random-circle-with-no-overlap/39653 "2022-11-10T05:28:10Z")

</div>

Good morning beautiful processing people, I’ve been following along the coding train random circle with no overlap video trying to recreate the code but using random text characters instead of circles. I’m encountering…

---

## [How to make a card matching game in p5.js (memory)](https://discourse.processing.org/t/how-to-make-a-card-matching-game-in-p5-js-memory/39592)

<div class="topic-metadata">

**Author:** [@yoyo](https://discourse.processing.org/u/yoyo)\
**Replies:** 21\
**Last updated:** [November 9, 2022, 11:46am UTC](https://discourse.processing.org/t/how-to-make-a-card-matching-game-in-p5-js-memory/39592 "2022-11-09T11:46:59Z")

</div>

I am trying to make a card matching game. But I don’t know how I can matching than when they are correct. Maybe I can let the first card and second card . But I don’t really know how to do it. Link: p5.js Web Editor l…

---

## [How do I avoid "blending" or "bleeding" of edges of solidly-colored shapes?](https://discourse.processing.org/t/how-do-i-avoid-blending-or-bleeding-of-edges-of-solidly-colored-shapes/39569)

<div class="topic-metadata">

**Author:** [@sleepingsun](https://discourse.processing.org/u/sleepingsun)\
**Replies:** 8\
**Last updated:** [November 7, 2022, 9:17pm UTC](https://discourse.processing.org/t/how-do-i-avoid-blending-or-bleeding-of-edges-of-solidly-colored-shapes/39569 "2022-11-07T21:17:47Z")

</div>

Hi all Whenever I draw a solid shape of one color, wherever it has an edge meeting up with a different color, it will have a different color along the edge. Not the color of the shape, not the color that is outside the …

---

## [Possible to restrict mouseDragged to canvas in instance mode?](https://discourse.processing.org/t/possible-to-restrict-mousedragged-to-canvas-in-instance-mode/39606)

<div class="topic-metadata">

**Author:** [@res56](https://discourse.processing.org/u/res56)\
**Replies:** 5\
**Last updated:** [November 7, 2022, 6:40pm UTC](https://discourse.processing.org/t/possible-to-restrict-mousedragged-to-canvas-in-instance-mode/39606 "2022-11-07T18:40:34Z")

</div>

Hi frens, I want to register the mouseDragged Function to a canvas in instance mode (within a react component). But mouseDragged is not available (only mousePressed and mouseClicked…). Is there a workaround to check i…

---

## [Problem with delete shader for optimization](https://discourse.processing.org/t/problem-with-delete-shader-for-optimization/39523)

<div class="topic-metadata">

**Author:** [@Omri](https://discourse.processing.org/u/Omri)\
**Replies:** 5\
**Last updated:** [November 6, 2022, 10:43am UTC](https://discourse.processing.org/t/problem-with-delete-shader-for-optimization/39523 "2022-11-06T10:43:23Z")

</div>

hey :slight\_smile: I have a big sketch with a lot of shaders that I use at different times. so for optimizations, I want to delete the PGraphics and the shaders that I don’t want to use anymore. (As recommended here: W…

---

## [Generative terrain customization](https://discourse.processing.org/t/generative-terrain-customization/39396)

<div class="topic-metadata">

**Author:** [@fijthecreator](https://discourse.processing.org/u/fijthecreator)\
**Replies:** 16\
**Last updated:** [November 3, 2022, 12:37pm UTC](https://discourse.processing.org/t/generative-terrain-customization/39396 "2022-11-03T12:37:50Z")

</div>

Hi, after following along some tutorials I created a terrain generator using perlin noise and triangle\_stripes. It is working and it runs. For further iterations I would like to slow down the speed of the generated terr…

---

## [Is it possible to fill color to contour part?](https://discourse.processing.org/t/is-it-possible-to-fill-color-to-contour-part/39544)

<div class="topic-metadata">

**Author:** [@nijatmursali](https://discourse.processing.org/u/nijatmursali)\
**Replies:** 1\
**Last updated:** [November 2, 2022, 11:15am UTC](https://discourse.processing.org/t/is-it-possible-to-fill-color-to-contour-part/39544 "2022-11-02T11:15:52Z")

</div>

Hello, I am working on a project to build the sweater model and I have the functionality to add an image to mask the image in the sweater. I’m using contours for this. I want to change the color of only the contoured pa…

---

## [Processing to P5.js](https://discourse.processing.org/t/processing-to-p5-js/39545)

<div class="topic-metadata">

**Author:** [@sosophia10](https://discourse.processing.org/u/sosophia10)\
**Replies:** 1\
**Last updated:** [November 2, 2022, 7:00am UTC](https://discourse.processing.org/t/processing-to-p5-js/39545 "2022-11-02T07:00:50Z")

</div>

I am trying to convert my Processing project to P5.js, however I’ve run into a bunch of errors with an object not being defined and “unexpected identifiers”. The original Processing code works fine. Would someone please…

---

## [How can i put random images on random position on a grid](https://discourse.processing.org/t/how-can-i-put-random-images-on-random-position-on-a-grid/39525)

<div class="topic-metadata">

**Author:** [@yoyo](https://discourse.processing.org/u/yoyo)\
**Replies:** 1\
**Last updated:** [November 1, 2022, 12:00pm UTC](https://discourse.processing.org/t/how-can-i-put-random-images-on-random-position-on-a-grid/39525 "2022-11-01T12:00:52Z")

</div>

now I have the image on the grid with a sequence. I want to know how to put the image in a random position. Link: p5.js Web Editor let imgs = ; function preload() { for (let i = 1; i \< 10; i++) { imgs\[i\] = loadImag…

---

## [How to erase object's trail without 'background' in function draw](https://discourse.processing.org/t/how-to-erase-objects-trail-without-background-in-function-draw/39458)

<div class="topic-metadata">

**Author:** [@turquoise](https://discourse.processing.org/u/turquoise)\
**Replies:** 1\
**Last updated:** [October 27, 2022, 6:56pm UTC](https://discourse.processing.org/t/how-to-erase-objects-trail-without-background-in-function-draw/39458 "2022-10-27T18:56:21Z")

</div>

Hello! I’ve just started learning p5js coding! Is there any way to erase trail, but without ‘background’? I’m trying to make a scanning line that will make sounds when it collapses with ellipse. If I use the backgrou…

---

## [drawingContext.drawImage causes offset of element on mobile](https://discourse.processing.org/t/drawingcontext-drawimage-causes-offset-of-element-on-mobile/39455)

<div class="topic-metadata">

**Author:** [@PatrckHutchinson](https://discourse.processing.org/u/PatrckHutchinson)\
**Replies:** 0\
**Last updated:** [October 27, 2022, 8:24am UTC](https://discourse.processing.org/t/drawingcontext-drawimage-causes-offset-of-element-on-mobile/39455 "2022-10-27T08:24:49Z")

</div>

Dear all, I’m working on some of Tim Rodenbrökers code involving a copy() function (Processing-Tutorial: Kinetic Typography 1 • tim rodenbröker creative coding), expanding it and making it ready for web. This involves …

---

## [A loadXXX() call inside preload() doesn't delay draw()](https://discourse.processing.org/t/a-loadxxx-call-inside-preload-doesnt-delay-draw/39354)

<div class="topic-metadata">

**Author:** [@ubuntu-in-a-nutshell](https://discourse.processing.org/u/ubuntu-in-a-nutshell)\
**Replies:** 6\
**Last updated:** [October 24, 2022, 8:01am UTC](https://discourse.processing.org/t/a-loadxxx-call-inside-preload-doesnt-delay-draw/39354 "2022-10-24T08:01:01Z")

</div>

Occasionally when my program loads images using loadImage the program fails to load them and then it gets stuck in the loading screen. When I look in the console it says img is undefined. Tracing this back, I find it hap…

---

## [How extract an save subimages from a given image](https://discourse.processing.org/t/how-extract-an-save-subimages-from-a-given-image/39380)

<div class="topic-metadata">

**Author:** [@Coyote35](https://discourse.processing.org/u/Coyote35)\
**Replies:** 6\
**Last updated:** [October 22, 2022, 9:43pm UTC](https://discourse.processing.org/t/how-extract-an-save-subimages-from-a-given-image/39380 "2022-10-22T21:43:19Z")

</div>

Hello everyone, I have an image of 100x100 pixels. I’m looking for a simple code example that allows me to extract the 100 sub-images (for example 10x10 pixels) from the starting image. And for each of these sub-image…

---

## [Interactive 3D balls. Is this even possible in Processing?](https://discourse.processing.org/t/interactive-3d-balls-is-this-even-possible-in-processing/39056)

<div class="topic-metadata">

**Author:** [@fijthecreator](https://discourse.processing.org/u/fijthecreator)\
**Replies:** 14\
**Last updated:** [October 22, 2022, 9:28am UTC](https://discourse.processing.org/t/interactive-3d-balls-is-this-even-possible-in-processing/39056 "2022-10-22T09:28:19Z")

</div>

Hi while I’m fairly new to processing, I was wondering if this is possible and how I would go about it? Example: 3D interactive balls - Webflow I’d like to recreate that effect in Processing 3D to embed the interactive…

---

## [P5JS coding using PORTRAIT](https://discourse.processing.org/t/p5js-coding-using-portrait/39373)

<div class="topic-metadata">

**Author:** [@DaBoyez](https://discourse.processing.org/u/DaBoyez)\
**Replies:** 1\
**Last updated:** [October 20, 2022, 6:05pm UTC](https://discourse.processing.org/t/p5js-coding-using-portrait/39373 "2022-10-20T18:05:13Z")

</div>

I’m trying to create a mobile game (one accessible on the internet), and am trying to code in a portrait orientation lock, so one can turn a device on its side and the screen remains the same instead of trying to awkward…

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

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