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

Rect Collisions

I am working on a game in Javascript in which I have a player try to collect coins. Both are currently rects() with different dimensions, and I am trying to incorporate a function that alerts the user when they have gotten a coin. Currently, this is…
Bubbly
  • 301
  • 3
  • 11
4
votes
2 answers

Background image in p5.js 3D sketch

I have a p5.js 3D sketch. I have to set its background image. I know that we can easily implement it with same background() function in a 2D sketch, but it is not possible in a 3D sketch. I googled for some hacks and found that I can have a plane…
Praneet Dixit
  • 1,393
  • 9
  • 25
4
votes
1 answer

How does p5.js make function setup() work like this?

In p5.js, to call the setup function you simply write: function setup() { } How did they make it so you call function and then the name, instead of just saying the following? setup();
Crazy Frog
  • 43
  • 2
4
votes
1 answer

How to make my drawing of an exponential function to grow within the canvas?

I have an exponential curve made using p5.js that draws itself over time as follow : However I am trying to have it responsive in such a way that as the curve grows, it would always be fully visible inside the canvas. Here are screenshots of what I…
Monstar
  • 795
  • 1
  • 5
  • 23
4
votes
2 answers

Referencing different objects in a class depending on user input

I'm trying to create a very basic physics simulation in p5.js and I am using a class to create multiple instances of the shapes (which are currently all circles), I have a function that checks if the user clicks inside the area of a circle and if so…
Darcy Power
  • 195
  • 12
4
votes
1 answer

Recuperating pixel data from fragment shader results in unexpected behavior

I'm currently trying to use a fragment shader to transport some particle position data (and in the future, modify it). I have no problem sending the data to the shader using a sampler2D texture, but when I try to recuperate the data, My 20 particles…
Kaspie
  • 187
  • 11
4
votes
1 answer

Rotating triangle around a center point like a wheel

I want to create a function rotating where my triangle can pivot on itself like a wheel but I have a conflict with a part of my code which moves my triangle and I tried many solutions without success, maybe if one of you have a clue it will be…
Quentin Serda
  • 105
  • 7
4
votes
1 answer

How to reset animation in p5.js

In p5.js I have an animation of 3 characters on an ongoing loop, but I want them to go to their origin positions after, let's say, 5 seconds. I'd also like to make them return to their initial position by pressing a key no matter how much time has…
asdfg1234
  • 41
  • 1
4
votes
1 answer

Creating game in JavaScript and P5 - few fundamental questions

I am currently working on a game that needs to be done using HTML, JavaScript, CSS and P5. Idea is to have the standard 2d game where the character needs to enter the exit door on the map. Main features are rotating the "map" or "canvas" by 90…
mnn
  • 175
  • 7
4
votes
0 answers

P5JS instance mode with sound library is throwing error

Here is my codepen. I was trying to write simple music player using instance mode in p5js but sound extension of p5js causing problems. I don't know how to fix it. Is it a bug in the latest version of p5js? Also, my devtool is keep freezing when I…
Greyfrog
  • 926
  • 1
  • 8
  • 19
4
votes
1 answer

How to draw all emojis using p5.js

I'm try to draw emoji on p5.js canvas. But on windows platform, some emoji are displayed only them outline.(e.g. ☀) When I using, I could display on html element but couldn't on p5.js canvas. Is there good and simple method for displaying emojis…
nomo
  • 63
  • 3
4
votes
2 answers

P5 array intersection

I'm trying to extract the values from one array from the index of another. I'm loading two text files using loadStrings, which is working fine. I'm loading that data into two separate arrays. The two text files are different lengths, the first…
StudioProjects
  • 139
  • 8
4
votes
1 answer

How to programmatically draw a thick line JavaScript?

I'm trying to define racecourse with a dynamic line that user can draw on a canvas element. So when line has been drawn, program should add sidelines for it as shown in the picture below: I have managed to mimic the idea already by using line…
lazydistribution
  • 49
  • 2
4
votes
0 answers

How to display beautiful math equations in p5.js?

Is there an easy way of rendering LaTeX equations in p5.js? I naively tried to use KaTeX by including their auto-render starting template in the index.html of a p5.js editor template and then writing an "equation" like text("$$\\epsilon = 0.4$$",…
Malte
  • 556
  • 5
  • 11
4
votes
1 answer

noisy gradient in p5.js

The Goal An often seen effect in illustrations and other graphic works is a gradient between two colors, which is provided with a grain/noise and thus gets a very special effect. (especially example 3.) My research has shown many solutions how to…
iamrobin.
  • 1,554
  • 3
  • 19
  • 31
1 2 3
…
99 100