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:

2136 questions
18
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
  • 373
  • 1
  • 7
16
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
  • 171
  • 1
  • 1
  • 3
12
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…
Michał Mi
  • 171
  • 12
9
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
  • 546
  • 1
  • 3
  • 22
9
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
  • 161
  • 1
  • 8
9
votes
4 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
  • 327
  • 1
  • 5
  • 11
8
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
  • 81
  • 3
8
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
  • 107
  • 7
8
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
  • 181
  • 1
  • 6
8
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
  • 161
  • 2
  • 3
  • 9
7
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
  • 271
  • 1
  • 15
7
votes
2 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
7
votes
2 answers

How to find a middle point of a beizer curve?

I want to make a 'named' bezier curve. I want it to be one-word named so I don't have to worry about word-wrap. I make bezier curve via P5 bezier(sx,sy,c1x,c1y,c2x,c2y,ex,ey) function and I want a string to be shown in the middle of bezier curve.…
SkillGG
  • 620
  • 3
  • 13
7
votes
2 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
  • 103
  • 1
  • 9
7
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
  • 181
  • 1
  • 9
1
2 3
…
99 100