# p5.js

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

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

**Page:** 37

---

## [Help with making objects transparent and draggable](https://discourse.processing.org/t/help-with-making-objects-transparent-and-draggable/32545)

<div class="topic-metadata">

**Author:** [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Replies:** 5\
**Last updated:** [October 1, 2021, 7:46pm UTC](https://discourse.processing.org/t/help-with-making-objects-transparent-and-draggable/32545 "2021-10-01T19:46:56Z")

</div>

I need help with changing the opacity(transparency) of the objects and dragging the objects. I can change the opacity(transparency) but when I do the objects are no longer draggable. The image below sheds more light on …

---

## [3D rotation quirk](https://discourse.processing.org/t/3d-rotation-quirk/32500)

<div class="topic-metadata">

**Author:** [@Ariadne](https://discourse.processing.org/u/Ariadne)\
**Replies:** 10\
**Last updated:** [October 1, 2021, 12:58pm UTC](https://discourse.processing.org/t/3d-rotation-quirk/32500 "2021-10-01T12:58:27Z")

</div>

I am currently writing a small library for 3D wireframes, because I have an idea for a 3D wireframe game, and I couldn’t find any libraries for 3D wireframes in p5.js. Right now everything, except rotation, works perfect…

---

## [P5.Js sketch used to work but now it doesn't](https://discourse.processing.org/t/p5-js-sketch-used-to-work-but-now-it-doesnt/32524)

<div class="topic-metadata">

**Author:** [@alsumwas](https://discourse.processing.org/u/alsumwas)\
**Replies:** 2\
**Last updated:** [October 1, 2021, 12:32pm UTC](https://discourse.processing.org/t/p5-js-sketch-used-to-work-but-now-it-doesnt/32524 "2021-10-01T12:32:53Z")

</div>

The sketch below worked a year ago but now when I try to play it it just says loading indefinitely. Any thoughts on what the hangup is? \</var bgcolor; var abutton; var bbutton; var cbutton; var dbutton; var ebutto…

---

## [What would this code be in p5js?](https://discourse.processing.org/t/what-would-this-code-be-in-p5js/32541)

<div class="topic-metadata">

**Author:** [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Replies:** 2\
**Last updated:** [October 1, 2021, 9:16am UTC](https://discourse.processing.org/t/what-would-this-code-be-in-p5js/32541 "2021-10-01T09:16:32Z")

</div>

how to translate this to p5js? OpenVRLibrary openVR; public void setup() { frameRate(90); openVR = new OpenVRLibrary(this); }

---

## [Running an easing animation to completion every time mouse is clicked](https://discourse.processing.org/t/running-an-easing-animation-to-completion-every-time-mouse-is-clicked/32512)

<div class="topic-metadata">

**Author:** [@miketaco](https://discourse.processing.org/u/miketaco)\
**Replies:** 5\
**Last updated:** [September 30, 2021, 6:32pm UTC](https://discourse.processing.org/t/running-an-easing-animation-to-completion-every-time-mouse-is-clicked/32512 "2021-09-30T18:32:56Z")

</div>

Im trying to get the line to rotate and ease to the target degree (targetX) then stop only when the mouse is clicked once. Subsequent mouse clicks should pick up where the last target degree and rotate the additional amo…

---

## [Performance issue between p5.js vs p5.min.js](https://discourse.processing.org/t/performance-issue-between-p5-js-vs-p5-min-js/32522)

<div class="topic-metadata">

**Author:** [@fabieninspiration](https://discourse.processing.org/u/fabieninspiration)\
**Replies:** 1\
**Last updated:** [September 30, 2021, 12:08pm UTC](https://discourse.processing.org/t/performance-issue-between-p5-js-vs-p5-min-js/32522 "2021-09-30T12:08:11Z")

</div>

Hi team! I am playing with P5.js since 2 weeks! I love it! I’ve just turned around many hours to understand why i got performance issue. I just use this simple example examples | p5.js At the end i just change the p5.…

---

## [Splitting a canvas into multiple random areas](https://discourse.processing.org/t/splitting-a-canvas-into-multiple-random-areas/32403)

<div class="topic-metadata">

**Author:** [@goldorak](https://discourse.processing.org/u/goldorak)\
**Replies:** 4\
**Last updated:** [September 30, 2021, 9:20am UTC](https://discourse.processing.org/t/splitting-a-canvas-into-multiple-random-areas/32403 "2021-09-30T09:20:45Z")

</div>

Hi, I’m trying to subdivide my canvas into multiple random areas and then being able to access each area’s width and height to draw patterns inside. Is there a classic algorithm to do this? Would you recommend and not…

---

## [Random Color Gen . Store , Use](https://discourse.processing.org/t/random-color-gen-store-use/32493)

<div class="topic-metadata">

**Author:** [@ADG](https://discourse.processing.org/u/ADG)\
**Replies:** 4\
**Last updated:** [September 29, 2021, 3:46pm UTC](https://discourse.processing.org/t/random-color-gen-store-use/32493 "2021-09-29T15:46:03Z")

</div>

Hi, Very new to programming, and its concepts so I’m trying to create a random color generator that I can call anytime to provide my r,g,b values. This is what I wrote: let x; let y; let col = { r: \[\], g: \[\], b: …

---

## [P5 and InfluxDB](https://discourse.processing.org/t/p5-and-influxdb/32496)

<div class="topic-metadata">

**Author:** [@Jhdgkss](https://discourse.processing.org/u/Jhdgkss)\
**Replies:** 0\
**Last updated:** [September 28, 2021, 10:09pm UTC](https://discourse.processing.org/t/p5-and-influxdb/32496 "2021-09-28T22:09:07Z")

</div>

Hi, all has anyone used P5.js to read data from a time-series database such as InfluxDB. If so is there any example code?

---

## [How to avoid image compression using the get() function?](https://discourse.processing.org/t/how-to-avoid-image-compression-using-the-get-function/32477)

<div class="topic-metadata">

**Author:** [@hspencer](https://discourse.processing.org/u/hspencer)\
**Replies:** 3\
**Last updated:** [September 28, 2021, 6:50pm UTC](https://discourse.processing.org/t/how-to-avoid-image-compression-using-the-get-function/32477 "2021-09-28T18:50:33Z")

</div>

Hello! I’m using the get() function repeatedly and the resulting image degrades, apparently due to compression. Is there any way to get around this? Thanks! /\* animator tool \*/ let frames, span, current; function set…

---

## [Help with dragging an object using mousePressed](https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968)

<div class="topic-metadata">

**Author:** [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Replies:** 44\
**Last updated:** [September 28, 2021, 5:32pm UTC](https://discourse.processing.org/t/help-with-dragging-an-object-using-mousepressed/23968 "2021-09-28T17:32:10Z")

</div>

I created a hexagon by using a function, I intend to mousePress when the cursor is inside the hexagon and drag it around similar to the object shown in this sketch; https://editor.p5js.org/enickles/sketches/H1n19TObz …

---

## [How to position button relative to canvas?](https://discourse.processing.org/t/how-to-position-button-relative-to-canvas/32442)

<div class="topic-metadata">

**Author:** [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Replies:** 2\
**Last updated:** [September 28, 2021, 9:10am UTC](https://discourse.processing.org/t/how-to-position-button-relative-to-canvas/32442 "2021-09-28T09:10:44Z")

</div>

hello all, How can I position button(using createButton()) relative to canvas? with button.position() I can position the button on the canvas area, but I wanted to know whether there is a way to change button position w…

---

## [Show different text depending upon condition](https://discourse.processing.org/t/show-different-text-depending-upon-condition/32447)

<div class="topic-metadata">

**Author:** [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Replies:** 2\
**Last updated:** [September 28, 2021, 6:04am UTC](https://discourse.processing.org/t/show-different-text-depending-upon-condition/32447 "2021-09-28T06:04:25Z")

</div>

hello all, how can I write p5 code that shows different text depending upon if condition? here is an example code that I wrote but the text just shows momentarily and disappears once the mouse click is done… let state;…

---

## [Help with Opacity(Transparency)](https://discourse.processing.org/t/help-with-opacity-transparency/32445)

<div class="topic-metadata">

**Author:** [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Replies:** 6\
**Last updated:** [September 28, 2021, 12:19am UTC](https://discourse.processing.org/t/help-with-opacity-transparency/32445 "2021-09-28T00:19:45Z")

</div>

I need help with how to change the opacity(transparency) of the colours used to fill the hexagons such that when a hexagon is above a number(say 30 as in the image) the number will still be visible? e.g I want the hexa…

---

## [Browser not refreshing](https://discourse.processing.org/t/browser-not-refreshing/32448)

<div class="topic-metadata">

**Author:** [@philspitler](https://discourse.processing.org/u/philspitler)\
**Replies:** 3\
**Last updated:** [September 27, 2021, 7:50pm UTC](https://discourse.processing.org/t/browser-not-refreshing/32448 "2021-09-27T19:50:19Z")

</div>

I am having an issue with a P5 sketch that won’t update in Chrome. If I do my tweaks, re-upload via FTP and refresh my browser, the updates don’t show in Chrome. If I open a new incognito tab I do see the updates as ex…

---

## [How do I use p5.js's accessibility features?](https://discourse.processing.org/t/how-do-i-use-p5-jss-accessibility-features/32412)

<div class="topic-metadata">

**Author:** [@Kevin](https://discourse.processing.org/u/Kevin)\
**Replies:** 0\
**Last updated:** [September 25, 2021, 6:39pm UTC](https://discourse.processing.org/t/how-do-i-use-p5-jss-accessibility-features/32412 "2021-09-25T18:39:31Z")

</div>

Hey all, long time no see. Hope all is well! Inspired by this tweet, I’ve been trying to learn how to use p5.js’s describe() function and other accessibility features. function setup() { createCanvas(400, 400); } fu…

---

## [saveFrames function not working in Firefox](https://discourse.processing.org/t/saveframes-function-not-working-in-firefox/32414)

<div class="topic-metadata">

**Author:** [@neto0291](https://discourse.processing.org/u/neto0291)\
**Replies:** 0\
**Last updated:** [September 25, 2021, 7:08pm UTC](https://discourse.processing.org/t/saveframes-function-not-working-in-firefox/32414 "2021-09-25T19:08:29Z")

</div>

Hello! I’m using the sameframe function to , save the images of a gif animation I have in my website. This is my function: saveFrames('out', 'png', 2, 25, function saveFrames(callbackData){ console.log(callback…

---

## [Visual studio code shows error on new p5 serial instance](https://discourse.processing.org/t/visual-studio-code-shows-error-on-new-p5-serial-instance/32406)

<div class="topic-metadata">

**Author:** [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Replies:** 0\
**Last updated:** [September 25, 2021, 10:57am UTC](https://discourse.processing.org/t/visual-studio-code-shows-error-on-new-p5-serial-instance/32406 "2021-09-25T10:57:54Z")

</div>

hi, while using a working p5 serial library and sketch in VS code ide i get error on the line: serial = new p5.SerialPort(); error being: Property 'SerialPort' does not exist on type '(sketch: object, node: string | …

---

## [Moving an object ( ellipse ball) between two keypoints (from posenet /ml5)?](https://discourse.processing.org/t/moving-an-object-ellipse-ball-between-two-keypoints-from-posenet-ml5/32118)

<div class="topic-metadata">

**Author:** [@Timo](https://discourse.processing.org/u/Timo)\
**Replies:** 5\
**Last updated:** [September 24, 2021, 11:10am UTC](https://discourse.processing.org/t/moving-an-object-ellipse-ball-between-two-keypoints-from-posenet-ml5/32118 "2021-09-24T11:10:36Z")

</div>

Hi , I am trying exploring the ml5 library implementation of posenet. I am trying to implement a animation where a ball is rolling between the left ear and right ear in a straight line. For this I have done the followin…

---

## [P5.js with plotly.js](https://discourse.processing.org/t/p5-js-with-plotly-js/32393)

<div class="topic-metadata">

**Author:** [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Replies:** 2\
**Last updated:** [September 24, 2021, 7:57am UTC](https://discourse.processing.org/t/p5-js-with-plotly-js/32393 "2021-09-24T07:57:31Z")

</div>

hi, how can i draw plotly.js based chart onto p5.js based canvas? for example, https://editor.p5js.org/ronraisch/sketches/SJbUMtYyM thank you

---

## [P5,js Smoothing Not Working?](https://discourse.processing.org/t/p5-js-smoothing-not-working/14585)

<div class="topic-metadata">

**Author:** [@graphicsguy](https://discourse.processing.org/u/graphicsguy)\
**Replies:** 10\
**Last updated:** [September 23, 2021, 8:04pm UTC](https://discourse.processing.org/t/p5-js-smoothing-not-working/14585 "2021-09-23T20:04:43Z")

</div>

Hi All. Is anyone else having problems with no antialiasing now in the Chrome browser? I swear it was working yesterday. I’ve tried forcing it using smooth(); in setup. Any help? Thanks.

---

## [What does it mean to say noise() returns a value between 0.0 and 1.0?](https://discourse.processing.org/t/what-does-it-mean-to-say-noise-returns-a-value-between-0-0-and-1-0/32387)

<div class="topic-metadata">

**Author:** [@norm\_krumpe](https://discourse.processing.org/u/norm_krumpe)\
**Replies:** 2\
**Last updated:** [September 23, 2021, 12:09pm UTC](https://discourse.processing.org/t/what-does-it-mean-to-say-noise-returns-a-value-between-0-0-and-1-0/32387 "2021-09-23T12:09:24Z")

</div>

The documentation for noise() simply says that the function returns a value between 0.0 and 1.0. By contrast, the documentation for random(n) says that the function returns a value between 0.0 (inclusive) and n (exclusi…

---

## [Remove Audio Library](https://discourse.processing.org/t/remove-audio-library/32381)

<div class="topic-metadata">

**Author:** [@philspitler](https://discourse.processing.org/u/philspitler)\
**Replies:** 2\
**Last updated:** [September 23, 2021, 4:06am UTC](https://discourse.processing.org/t/remove-audio-library/32381 "2021-09-23T04:06:43Z")

</div>

Hi, I am getting an audio error when using P5 in chrome. p5 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. I understand why I’m getting the error. I am not…

---

## [SVG Canvas performance](https://discourse.processing.org/t/svg-canvas-performance/32347)

<div class="topic-metadata">

**Author:** [@philspitler](https://discourse.processing.org/u/philspitler)\
**Replies:** 1\
**Last updated:** [September 22, 2021, 10:10pm UTC](https://discourse.processing.org/t/svg-canvas-performance/32347 "2021-09-22T22:10:05Z")

</div>

Hi, I need to save an SVG from my p5 sketch, it works great but as soon as I change my canvas to SVG the performance of my sketch really drops. I have a few sliders to change settings in the sketch and when I use and SV…

---

## [How to stop random color in animation?](https://discourse.processing.org/t/how-to-stop-random-color-in-animation/32355)

<div class="topic-metadata">

**Author:** [@Mica](https://discourse.processing.org/u/Mica)\
**Replies:** 2\
**Last updated:** [September 22, 2021, 9:56pm UTC](https://discourse.processing.org/t/how-to-stop-random-color-in-animation/32355 "2021-09-22T21:56:18Z")

</div>

let colors = \["#ed3441", "#ffb03b", "#36acf5", "#ffd630", "#084e86", "#fcfeff"\]; function setup() { createCanvas(500,500); } function draw() { background(200); let offset = -width / 10; noFill(); let xStep = …

---

## [Hardware solutions for long renders](https://discourse.processing.org/t/hardware-solutions-for-long-renders/32370)

<div class="topic-metadata">

**Author:** [@goldorak](https://discourse.processing.org/u/goldorak)\
**Replies:** 2\
**Last updated:** [September 22, 2021, 8:19pm UTC](https://discourse.processing.org/t/hardware-solutions-for-long-renders/32370 "2021-09-22T20:19:52Z")

</div>

Hi, I’m struggling with some artworks I create which require a very long rendering time. Beyond refactoring and code optimization I’d like to know what would be the best hardware I could use to speed things up? Thanks …

---

## [Upload image to p5 via a dialog box](https://discourse.processing.org/t/upload-image-to-p5-via-a-dialog-box/32291)

<div class="topic-metadata">

**Author:** [@philspitler](https://discourse.processing.org/u/philspitler)\
**Replies:** 8\
**Last updated:** [September 22, 2021, 5:41am UTC](https://discourse.processing.org/t/upload-image-to-p5-via-a-dialog-box/32291 "2021-09-22T05:41:25Z")

</div>

Hi, I am thinking of moving one of my Processing projects over to p5 and would like to have the user upload their own image to get processed. Is there a way to have a dialog box prompt a file upload? Thanks Phil

---

## [P5 serial port not closing](https://discourse.processing.org/t/p5-serial-port-not-closing/32366)

<div class="topic-metadata">

**Author:** [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Replies:** 0\
**Last updated:** [September 22, 2021, 3:49am UTC](https://discourse.processing.org/t/p5-serial-port-not-closing/32366 "2021-09-22T03:49:12Z")

</div>

hi, I am using p5 serial library, everything works fine but the only thing is I am unable to close the port once done using it. The browser once opened will not close the port so I wanted to use keypressed() function to…

---

## [Autocomplete and documentation for "imported" p5js](https://discourse.processing.org/t/autocomplete-and-documentation-for-imported-p5js/31927)

<div class="topic-metadata">

**Author:** [@atcold](https://discourse.processing.org/u/atcold)\
**Replies:** 17\
**Last updated:** [September 20, 2021, 11:57pm UTC](https://discourse.processing.org/t/autocomplete-and-documentation-for-imported-p5js/31927 "2021-09-20T23:57:11Z")

</div>

I spent countless hours to get my editor (VSC) to autocomplete P5JS. This worked only after adding this line to the main script: import "./p5" Now everything is accessible only if prefixed by p5, and the editor autoco…

---

## [Resize Image question](https://discourse.processing.org/t/resize-image-question/32327)

<div class="topic-metadata">

**Author:** [@philspitler](https://discourse.processing.org/u/philspitler)\
**Replies:** 2\
**Last updated:** [September 20, 2021, 6:46pm UTC](https://discourse.processing.org/t/resize-image-question/32327 "2021-09-20T18:46:33Z")

</div>

Hi, I’m using the resize() function to resize my P5 image and want to loop through all the resized pixels, sample them and draw a circle with the color values to basically create a dot pattern style image. It seems like…

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

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