Stack Overflow
Stack Overflow

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
4
votes
0 answers

How to get bounding shape for wrapped text in p5.js

I'm creating a p5 project in which I create text from a string, wrap it using the 'WORD' option and add it to the canvas. As an example: let font; function preload() { font = loadFont('SomeFont.otf'); } function setup() { createCanvas(400,…
Sapir
  • 41
  • 2
4
votes
3 answers

keyIsDown running when key isn't down?

I'm working on a basic first person camera controller in p5.JS, and I'm using the move function inside of an if statement (uses keyIsDown) and it still moves the camera when the key isn't pressed (I mean like its down for a second then no longer…
yesimaperson55665
  • 85
  • 1
  • 9
4
votes
1 answer

How to create an afterimage for some objects in JavaScript

I'm working on a firework display with the p5.js library (although I doubt this will effect answers). My current program uses the p5.js background function with can create an afterimage for the entire project. You can view the project here:…
KoderM
  • 382
  • 2
  • 15
4
votes
1 answer

Why does this undo logic not work in p5.js?

My logic is simple, create a state array and a stateIndex, when the user interacts with the drawing, save the current state as an entry in the array and increment the stateIndex. When the user presses "undo" (for this sketch press any key),…
mranonymous101
  • 113
  • 1
  • 6
4
votes
2 answers

Ball-Triangle Collision

Goal: I have a ball in a triangle. The ball has an initial position and velocity. I'm trying to figure out which side of the triangle the ball will hit. What I've Tried: I derived a formula that outputs which side the ball will hit, by parametrizing…
rb3652
  • 425
  • 2
  • 12
4
votes
1 answer

Why does changing state (useState) break my p5.js code? (React + p5.js application)

I created an Audio visualizer using p5.js and React and i need some help. I am trying to change the state of my button input text from Play to Stop when the song starts playing & from Stop back to Play when the user decides to stop the song at that…
Poyraz Akay
  • 61
  • 4
4
votes
1 answer

How to penetrate or cut holes through a 2D foreground

I'm currently making a 2D game in Javascript, but I want to the game to have different lighting levels, for example, if I were to create a day and night cycle. However, I want to be able to cut holes in the lighting/foreground, or do something so…
Scollier
  • 575
  • 6
  • 19
4
votes
2 answers

How to smooth out the trails of the particles in a p5js simulation

I want to turn this halting, discontinuous trails in the particle on this simulation to something worth staring at as in this beautiful field flow in here (not my work, but I don't remember where I got it from). I have tried different permutations…
JAP
  • 405
  • 2
  • 11
4
votes
1 answer

Using reduce to sum array of p5.Vector objects

The following code throws an error in the line with reduce: let vectors function setup() { createCanvas(400,400); vectors = []; vectors.push(createVector(100,100)); vectors.push(createVector(100,0)); …
John Coleman
  • 51,337
  • 7
  • 54
  • 119
4
votes
2 answers

p5.js particles behavior under the influence of a 2D vector field showing poor response

I got half-way through what I wanted in the representation of physics vector fields in 2D with p5js here. The other half is to get random particles to dynamically follow the forces of the vector field, and I am having a lot of problems with it. I…
JAP
  • 405
  • 2
  • 11
4
votes
1 answer

Rotating Image between 2 angles in Javascript using p5.js

I want to rotate my image between cos(20) and -cos(20) with a smooth animation. The tree is done recursively with branch() function. I can't figure out how to do it with loops. Is there a built in function or a specific algorithm to do so? let…
Yassine Mrabet
  • 67
  • 5
4
votes
1 answer

p5.js and React: how to update a sketch inside a component when one of the component's props is updated

I’m working on a project that integrates p5.js and React. My project consists of App.js and two child components: View1.js and View2.js. I want to pass information from View1 to View2 and have that changing information reflected in the sketch of…
elo
  • 295
  • 2
  • 8
4
votes
1 answer

javaScript bubble class example using P5.js lib, code crashes after a while. how can I circumvent and overcome this?

Been following along with Dan Shiffmans videos, trying to brush up on my Object orientated programing using classes. Ive wrote some code that generates bubbles with random diameters at random positions, using p5's noise function to give the bubbles…
Offt_madone
  • 69
  • 4
4
votes
1 answer

Rotating and drawing on a p5.js canvas

I am trying to draw on a rotating p5.js canvas, where the canvas element is being rotated via its transform CSS attribute. The user should be able to draw points on the canvas with the cursor, even while the canvas element is actively rotating. The…
ari
  • 43
  • 3
4
votes
2 answers

If object rotated, other objects vanishing! p5.js

I'm a beginner in p5.js. This is my code till now: function setup() { createCanvas(600, 600); } function draw() { background(50, 168, 82); road(); sidepath(); truck(); house(); tree(); } function road() { fill(66, 62, 61); noStroke(); …
Abhirajshri Winsome
  • 165
  • 1
  • 13
1 2 3
…
99 100