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
1 answer

I have been trying to make this ball bounce for a day. Why doesnt it work?

I am making a ball class, and in that class i want to make the ball bounce off the wall, but it remains stuck. I have tried making the ball bounce in the draw function, but then it didnt even stopped at the wall. I tried setting the this.x and…
1
vote
1 answer

How to import model in p5.js?

I'm currently working on a project with using p5.js. Until now, I could display 3D primitives shapes like boxes, spheres or cylinders. I searched on the Internet and found that p5.js only accepts .obj files as models. So I tried with following The…
ParkerIndustries
  • 171
  • 2
  • 15
1
vote
0 answers

How to check for a nearby target in Javascript?

I made a function called CheckForTarget() to check the closest target to an object. I used the p5.jsfunction dist() to calculate the distance but the answer to this calculation results as NaN. checkForTarget() { let closest; let index = 0; …
1
vote
1 answer

p5.js Canvas doesn't show anything when an input element is added through JavaScript

For a bit of background, here's a super simplified version of the problem: function setup() { createCanvas(window.innerWidth, window.innerHeight); document.body.innerHTML += ""; } function draw() { background(255, 0, 0); } What…
simplexshotz
  • 139
  • 12
1
vote
1 answer

trouble using JSON data from Datamuse API in p5.js

So I want to build a very simple web app where the user enters some text and a paragraph is then created from the same text. Each word in the paragraph is inside a span tag so when the user hovers over it, synonyms of that word are displayed on the…
rain1
  • 27
  • 7
1
vote
2 answers

How to access objects in array inside two loops?

I'm using p5.js in this project, I wanted to make rectangles that will fill the entire canvas, so I coded this: for (let x = 0; x < cols; x++) { for (let y = 0; y < rows; y++) { cx = w + x * w - w; cy = w + y * w - w; …
user11114318
1
vote
1 answer

How to convert p5.Something() to fit react

In my file sketch.js before shifting to combined p5 and react, I had a command amp = new p5.Amplitude(); after shifting to react, the 'p5' method is not defined anymore. p.Amplitude()/song.Amplitude() isn't doing the job and returns (TypeError: ...…
Hagai Harari
  • 2,767
  • 3
  • 11
  • 23
1
vote
1 answer

Restarting my draw function does not work

I have a game in which there si a rocket. When rockets health is 0 the game over screen should appear and when any key is pressed the game should restart. I tried using redraw and loop keywords in p5.js let x = 240; let x1 = 258; let score = 0; let…
Lime
  • 37
  • 3
1
vote
1 answer

How do I check collision between 2 square objects on x and y? (p5.js)

How do I test collisions between 2 square objects? I have a player, and a block object, and i want to check if they are colliding whit each other. I've tried to use a lot of collision detections algos, but they seem to not work in my project, or i…
SonicAsF
  • 17
  • 7
1
vote
1 answer

Changing aspect of single object in an array, indicies not lining up

Objective: When the red candles are clicked, they should turn green. At the moment, when a candle is clicked, the next candle in the array is changed, instead of the candle that was clicked. When the last candle is clicked, the first candle changes…
konar
  • 23
  • 3
1
vote
1 answer

P5.js fluid Rainbow Effect

I am a just beginning with P5.js and i would like to create the effect shown in the image below. I am not sure how to begin this. I would appreciate any assistance on achieving this effect.
VickTree
  • 889
  • 11
  • 26
1
vote
1 answer

I have a meteor a randomly falling meteor an I want to make more of them

I have a meteor and when there is only one meteor the collision works, but when I add more meteors the collision stops working, which prevents health form from getting subtracted. I tried to search on the internet, but I did not get any good…
Lime
  • 37
  • 3
1
vote
3 answers

How to fix random subtraction of players health when collision happens?

I am making a small spaceship game in which the space ship has to move around in order to not get hit by a meteor. When the meteor hits the ship the player is supposed to lose on point of health, but n my example a player always loses a number which…
Lime
  • 37
  • 3
1
vote
1 answer

Why is the white box appearing?

The first box the loop outputs is a white box with a black outline. I don't understand where it's coming from... https://editor.p5js.org/matranson/present/6fNelJM8_ function setup() { colorMode(HSB,360,100,100); createCanvas(400, 400); …
matski
  • 541
  • 6
  • 19
1
vote
2 answers

p5js - Animating lines with 3 different positions

In my project i have 2 lines. Each line changes position when you click on the screen. The position of each line always falls randomly in thirds of the screen width. I accomplished the clicks and the random position in thirds. Now i would like the…