Questions tagged [p5.js]

p5.js is a JavaScript library that starts with the original goal of processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today’s web.

p5.js is a JavaScript library that starts with the original goal of processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today’s web. p5.js has a full set of drawing functionality too.

See also:

3071 questions
1
vote
2 answers

Add p5js to Ember application

I'm trying to incorporate the p5js javascript library into my Ember.js app. I want the following p5js example to appear on the template: https://p5js.org/examples/sound-record-save-audio.html I've included the cdn script in my index.html file: I…
1
vote
1 answer

Affecting one object in array p5.js - Javascript

Using p5 libraries, with p5 editor. I'm trying to change the colour of a 'bubble' in an array of 'bubbles' however, when I click on a bubble it changes all of the bubbles colours. The glow() function is the one that changes the colour and the…
Kai Harris
  • 21
  • 1
1
vote
2 answers

Accessing a class function with array of objects

I was coding in p5.js, and I noticed a problem that I couldn't pass. I have a class named "Boxes". I am already using the functions that "Boxes" have. But while I tried to use that functions apply to an array of objects, It didn't work. How can I…
fighg
  • 81
  • 1
  • 8
1
vote
1 answer

2Dimensional Arrays with javascript (p5js)

I have the following arrays that a want to display as a stacked bar chart with p5js (javascript). Below you can see an arrayOfMonths (month1, month2,...) that is going to be displayed on the X Axis of the Stacked Bar Chart. Now, Each month has a…
1
vote
1 answer

Is it possible to create an array list of objects in p5JavaScript?

I'm currently working on a Stacked Bar Chart Demo using p5JavaScript as you can see in the Code Snippet Below. Basically, I want to have 2 series of data on X&Y Axis : 1) An array of numbers (var) and 2) An Array-List of variables…
Loizos Vasileiou
  • 674
  • 10
  • 37
1
vote
1 answer

How can I make backgrounds in p5.js transparent but continue to hide elements drawn on top of them?

I'm asking this as a follow-up to this question. I want to create a drawing app where the mouse is replaced by an ellipse that resizes to fit the brush size. The problem was that there was no way to draw the ellipse without leaving a mark on the…
Skylar Kennedy
  • 357
  • 1
  • 8
  • 18
1
vote
0 answers

Low performance with Chrome, but not other browsers

I have an performance issue with P5.js when rendered in Chrome, but not other browsers. I get around 10-15 fps in Chrome, even when tested with a simple moving ellipse. I've tried restarting my computer, doing a clean install of Chrome, updating the…
cegMo
  • 11
  • 2
1
vote
1 answer

React.js with createCapture with p5 got Error

I'm trying to use react-p5-wrapper and use createCapture() for video capture but got errors: TypeError: Cannot read property 'push' of undefined Here is my code. What should I do? import p5 from "p5"; import "p5/lib/addons/p5.dom"; export…
1
vote
1 answer

p5.js collision between array elements

I am learning p5.js and I have come upon a problem that I cannot yet solve. So I'm making this little game in which you have to shoot the enemies and dodge their skills. This is how to looks: On the right side we have the player, in the middle the…
Ballo Adam
  • 105
  • 1
  • 8
1
vote
1 answer

Fading trailing stroke in p5.js

How to effectively create curveVertex with an array of p5.Vector points which fades (decreases opacity) the trail after the mouse position? So far the following code removes the trailing points after a certain amount of time, creating the effect of…
Pandemonium
  • 7,724
  • 3
  • 32
  • 51
1
vote
0 answers

The line move with position in clmtrackr. How to create line with not moving by p5.js

I'm new to p5.js and I'm trying to create a horizontal line by using p5.js with the position 21 clmtrackr.js. But the line is moving. I want to create the line with not moving. Here my code. var ctracker; var trigHeight = 0; var ypos = 0; var…
1
vote
1 answer

Getting Status Code 499 on GET requests from my AWS Cloud9 runner

I've been adjusting my workflow to the new AWS version of Cloud9 for a few weeks now, it's been going mostly smooth, but I hit a strange issue that I can't find any documentation on. Whenever I try to send a GET request from the client side…
1
vote
1 answer

P5 Drag and Drop not loading

I have been trying to implement a load canvas function using the drag and drop method explained in the P5 reference below. However on the first instance of dragging an image to the canvas, the image will not load. The second attempt will load the…
David
  • 27
  • 4
1
vote
1 answer

hyperlink to GitHub project HTML as preview with parameters

P5 JavaScript was integrated with HTML and posted on GitHub. Normally, two parameters could be passed into the code by adding them to the HTML URL. This works when the code is tested locally. This fails when attempting to do this with the HTML…
TMWP
  • 1,545
  • 1
  • 17
  • 31
1
vote
1 answer

completing calculations in background using javascript callbacks

I am attempting to use a callback to create an asynchronous function that does calculations behind a draw loop without slowing it down. I have read many callback examples and am clearly doing something wrong. I have created a simplified version of…
Murenrb
  • 367
  • 2
  • 12