# p5.js

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

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

**Page:** 17

---

## [Masking with vertex()](https://discourse.processing.org/t/masking-with-vertex/40095)

<div class="topic-metadata">

**Author:** [@Gecko](https://discourse.processing.org/u/Gecko)\
**Replies:** 2\
**Last updated:** [December 11, 2022, 5:13pm UTC](https://discourse.processing.org/t/masking-with-vertex/40095 "2022-12-11T17:13:24Z")

</div>

Hi there, I’m struggling to mask an image with a shape drawn with beginShape(); vertex(); endShape(); Here’s the code (shorted to highlight the key issue): mskGraphics.image(ink, 100, 100, ink.width / 2, ink.height …

---

## [Audio does not come up in the browser after build p5js into github](https://discourse.processing.org/t/audio-does-not-come-up-in-the-browser-after-build-p5js-into-github/39967)

<div class="topic-metadata">

**Author:** [@vrtx](https://discourse.processing.org/u/vrtx)\
**Replies:** 4\
**Last updated:** [December 10, 2022, 12:25am UTC](https://discourse.processing.org/t/audio-does-not-come-up-in-the-browser-after-build-p5js-into-github/39967 "2022-12-10T00:25:37Z")

</div>

Hi there… I did a sketch in processing and worked very well. Then i finally translate to p5js and uploaded to github. In the very end, the sound do not come up in the browsers. Here is the Processing code (now a bit b…

---

## [Processing code into p5.js code](https://discourse.processing.org/t/processing-code-into-p5-js-code/40105)

<div class="topic-metadata">

**Author:** [@vrtx](https://discourse.processing.org/u/vrtx)\
**Replies:** 4\
**Last updated:** [December 10, 2022, 11:22am UTC](https://discourse.processing.org/t/processing-code-into-p5-js-code/40105 "2022-12-10T11:22:36Z")

</div>

hi guys! I am having the same problem but otherway around. From java processing to p5js. (accutaly in both ways with different projects lol) But here goes my latest… From Processing to p5js. please have a go on java…

---

## [Pj.5s code into Processing code](https://discourse.processing.org/t/pj-5s-code-into-processing-code/40088)

<div class="topic-metadata">

**Author:** [@asymmetric](https://discourse.processing.org/u/asymmetric)\
**Replies:** 2\
**Last updated:** [December 10, 2022, 11:05am UTC](https://discourse.processing.org/t/pj-5s-code-into-processing-code/40088 "2022-12-10T11:05:48Z")

</div>

How do I translate the following code into processing from pj.5s? let y let pins = \[\] //////////////////////////////////////////////////////////////////////////////////////////////////// OPC.slider("pins\_num", 30, 1, 10…

---

## [Strange access to data class](https://discourse.processing.org/t/strange-access-to-data-class/40063)

<div class="topic-metadata">

**Author:** [@gaspard](https://discourse.processing.org/u/gaspard)\
**Replies:** 6\
**Last updated:** [December 8, 2022, 12:48pm UTC](https://discourse.processing.org/t/strange-access-to-data-class/40063 "2022-12-08T12:48:09Z")

</div>

Hi, I’ve noticed a strange behavior through the setup() et draw() method in a classical p5.js sketch. here is a brief example : file classTest.js : class classTest{ constructor(c1, c2, c3){ this.groupe = \[c1, c2, c…

---

## [No audio comes up in the browser after uploaded to github page, work fine P5js](https://discourse.processing.org/t/no-audio-comes-up-in-the-browser-after-uploaded-to-github-page-work-fine-p5js/40058)

<div class="topic-metadata">

**Author:** [@vrtx](https://discourse.processing.org/u/vrtx)\
**Replies:** 0\
**Last updated:** [December 8, 2022, 2:31am UTC](https://discourse.processing.org/t/no-audio-comes-up-in-the-browser-after-uploaded-to-github-page-work-fine-p5js/40058 "2022-12-08T02:31:12Z")

</div>

Hi there! 1# i was with no internet, its made using only my knoledge and some PDF. to whrite java processing and turn it into p5js.BUT It works fine on processing java but if i paste the p5js dont show up images on bro…

---

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

---

## [Gifs generated with saveGif() only contain a single color](https://discourse.processing.org/t/gifs-generated-with-savegif-only-contain-a-single-color/39954)

<div class="topic-metadata">

**Author:** [@Kevin](https://discourse.processing.org/u/Kevin)\
**Replies:** 9\
**Last updated:** [December 5, 2022, 1:14am UTC](https://discourse.processing.org/t/gifs-generated-with-savegif-only-contain-a-single-color/39954 "2022-12-05T01:14:33Z")

</div>

Hey friends, long time no see! I’ve been pretty excited about the saveGif() function, but I’m having trouble getting it to work as expected. Here’s some code I’m trying: let colors = \['red', 'yellow', 'orange', 'green…

---

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

---

## [Why is my p5js code is too slow after I upload it](https://discourse.processing.org/t/why-is-my-p5js-code-is-too-slow-after-i-upload-it/39936)

<div class="topic-metadata">

**Author:** [@vrtx](https://discourse.processing.org/u/vrtx)\
**Replies:** 5\
**Last updated:** [December 1, 2022, 1:14pm UTC](https://discourse.processing.org/t/why-is-my-p5js-code-is-too-slow-after-i-upload-it/39936 "2022-12-01T13:14:53Z")

</div>

Hello, i am just learning about these things, processing and p5… I made a sketch on Processing and transfer it to p5.js. What happend is that the resolution of my codes turned too slow, both of them. As o Processing as…

---

## ['Scaling' the canvas?](https://discourse.processing.org/t/scaling-the-canvas/39909)

<div class="topic-metadata">

**Author:** [@PaulR](https://discourse.processing.org/u/PaulR)\
**Replies:** 7\
**Last updated:** [November 29, 2022, 11:06am UTC](https://discourse.processing.org/t/scaling-the-canvas/39909 "2022-11-29T11:06:35Z")

</div>

Hello Is it possible to scale/change the resolution of the canvas in p5.js to create pixel type games? For example, to create a canvas which is 640x640 but will only display 160x160 ‘pixels’ (each being 4x4 actual pixel…

---

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

---

## [Canvas2D: Multiple readback operations](https://discourse.processing.org/t/canvas2d-multiple-readback-operations/39804)

<div class="topic-metadata">

**Author:** [@mattobject](https://discourse.processing.org/u/mattobject)\
**Replies:** 2\
**Last updated:** [November 20, 2022, 10:53pm UTC](https://discourse.processing.org/t/canvas2d-multiple-readback-operations/39804 "2022-11-20T22:53:20Z")

</div>

I’ve noticed in the past few months a new warning in the console when a sketch loads image files: p5.js:80807 Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set…

---

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

---

## [How to create a 3D star?](https://discourse.processing.org/t/how-to-create-a-3d-star/39754)

<div class="topic-metadata">

**Author:** [@timob256](https://discourse.processing.org/u/timob256)\
**Replies:** 10\
**Last updated:** [November 19, 2022, 6:28pm UTC](https://discourse.processing.org/t/how-to-create-a-3d-star/39754 "2022-11-19T18:28:06Z")

</div>

please format code with \</\> button \* homework policy \* asking questions I trying create 3d star but this not good wraiting cone :disappointed: // звезда 3д модель function zvezda ( per\_x, per\_y, per\_z) { …

---

## [p5.Vector functions in instance mode with Angular 8](https://discourse.processing.org/t/p5-vector-functions-in-instance-mode-with-angular-8/12415)

<div class="topic-metadata">

**Author:** [@thonpy](https://discourse.processing.org/u/thonpy)\
**Replies:** 10\
**Last updated:** [November 19, 2022, 5:22pm UTC](https://discourse.processing.org/t/p5-vector-functions-in-instance-mode-with-angular-8/12415 "2022-11-19T17:22:04Z")

</div>

I have never used p5 as instance in a web app before and p5.vector functions are not working. All other p5 functions are working, but when I use a datatype from p5 like p5.Vector, the setMag or setLimit functions are not…

---

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

---

## [How to get 'get()' working on image created by 'createImg()'?](https://discourse.processing.org/t/how-to-get-get-working-on-image-created-by-createimg/39701)

<div class="topic-metadata">

**Author:** [@kkouch](https://discourse.processing.org/u/kkouch)\
**Replies:** 2\
**Last updated:** [November 15, 2022, 7:10am UTC](https://discourse.processing.org/t/how-to-get-get-working-on-image-created-by-createimg/39701 "2022-11-15T07:10:43Z")

</div>

Hello. I’m currently making a program where I need to get a section of an image and save it to a given variable. The problem is that ‘get()’ only works on p5.Image objects and when I try to use it on an image created by …

---

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

---

## [\[P5\] Is there a default font provided by WEB?](https://discourse.processing.org/t/p5-is-there-a-default-font-provided-by-web/39668)

<div class="topic-metadata">

**Author:** [@GWAK](https://discourse.processing.org/u/GWAK)\
**Replies:** 4\
**Last updated:** [November 13, 2022, 3:40am UTC](https://discourse.processing.org/t/p5-is-there-a-default-font-provided-by-web/39668 "2022-11-13T03:40:53Z")

</div>

\[P5\] Is there a default font provided by WEB? In ‘Processing-P5’, you can load a font with ‘loadFont’. Example source code: let myFont; function preload() { myFont = loadFont('assets/inconsolata.otf'); } H…

---

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

[Previous page](https://discourse.processing.org/c/p5js/10.md?page=15)

[Next page](https://discourse.processing.org/c/p5js/10.md?page=17)