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

How to put p5.js canvas in a html div

I am trying to add p5.js to the background of one section in my webpage. I am new to javascript and can't figure out how to bind the two parts together.
Meghan Rose
  • 301
  • 1
  • 3
  • 3
20
votes
1 answer

Slow performance, using p5 in react

I am trying to use p5 (https://p5js.org/) in a react application and the performance of some sketches is really bad (same in development as after building the app). I'm using create-react-app for the project scaffold, without any changes to the…
au.re
  • 393
  • 1
  • 8
13
votes
1 answer

draggable backgroun

I want to achieve something like an infinite drag like the one in Konva js Can anyone help me with this. I try varius things but non of them were ok. Im new in p5js and javascript. Please for any hints. Only this element prevents me from completing…
Michael
  • 168
  • 2
  • 18
13
votes
3 answers

Exporting canvas as GIF/PNG in p5js

I use Atom Editor. I want to make 20 seconds GIF with my canvas. saveFrames() has a limitation(I guess). It enables to save .png files to short gifs(3-5 seconds), even if I type saveFrames("aa","png",15,22); I discovered CCapture.js but I could not…
Zeki Akyol
  • 193
  • 1
  • 1
  • 10
13
votes
3 answers

Exporting a video in p5.js

I am creating a simple animation program in p5.js. When a user clicks the save button, I want to download a video of the animation. I have an object called frames where each key is labelled frame_1, frame_2 and so on. The value associated with each…
Siunami
  • 417
  • 2
  • 6
  • 13
12
votes
2 answers

Changing the coordinate system in P5.js

As you know P5 coordinate system doesn't start from the middle of the canvas plus the y axis is flipped My question is how to change the coordinates of p5 so it became the same as the Cartesian coordinate system
steve
  • 311
  • 3
  • 10
12
votes
3 answers

P5js SVG Export

I have a P5js sketch which creates a font that users can type anything they want. I want to allow the user to download an svg/pdf (vector) version of their result. As of now I succeeded to have them download a .jpg version using the save order and…
Naty
  • 221
  • 2
  • 7
12
votes
3 answers

How do you get p5.js into a website?

I have searched nearly all over the internet, and i've gotten pretty close to an answer, but I still can't figure out how to use p5.js in a website. To be more specific, i want to be able to perhaps create a weebly, and have it display p5 code. i…
ei1
  • 301
  • 3
  • 4
  • 10
11
votes
3 answers

How to use React with p5.js

I really like p5.js and react.js so i wondered how to combine these two together, and i was unable to do it so I need your help. I cant really provide you with some code samples because I have no clue how to start. So what I want to do : 1.…
user11114318
11
votes
4 answers

How to use p5.js in angular 5 application

I have done npm install p5 --save I edited the .angular.cli.json "scripts": [ "../node_modules/p5/lib/p5.min.js", "../node_modules/p5/lib/addons/p5.sound.js", "../node_modules/p5/lib/addons/p5.dom.js" ] and imported as import…
Nityananda Gohain
  • 311
  • 1
  • 3
  • 10
10
votes
3 answers

Visualization of the Recaman Sequence

I saw a video about the Recaman Sequence by Numberphile. If you don't know the algorithm you can look at this link: https://www.youtube.com/watch?v=FGC5TdIiT9U or this one:…
Stefan
  • 1,122
  • 3
  • 14
  • 38
9
votes
1 answer

Earth orbit simulation has incorrect speed

I'm very new to programming and I've gotten a school assignment for which I have to create a simulation of the earths orbit around the sun in p5.js . We were offered a simplified way to compute the gravitational pull but I wanted to use the actual…
Gijsfwb
  • 91
  • 3
9
votes
3 answers

Is it possible to make canvas with background with lines or canvas that isn't a rectangle?

I'm trying to make this one https://massmoca.org/event/walldrawing340/ in Javascript code, using p5.js, but I have no clue how to fill these shapes with lines. Is there any other possibility, like making canvas that is circle or something like…
Drunken Janna
  • 146
  • 1
  • 10
9
votes
1 answer

How to add a bounce compression animation to a ball in P5?

my simple game created with P5.js consists in a ball that falls affected by a gravity force and bounces on the ground. I would like to add a "compression" animation to the ball when it touches the ground so that it should look more realistic. How…
Sad Hyena
  • 291
  • 3
  • 16
9
votes
3 answers

Using p5.sound.js in instance mode: 'p5.Amplitude() not a constructor'

I am using an npm, webpack, babel environment to write an application with p5.js. To be able to have the sketch as a module, I have the sketch in instance mode and import the library and add-ons as modules: import p5 from 'p5'; import…
Julio Gudiño
  • 320
  • 2
  • 10
1
2 3
…
99 100