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

how do i make the canvas perfectly fit to the window size in p5

i want to make the p5 canvas fit perfectly to the window size, but whenever I use windowWidth and windowHeight , the canvas seems to be bigger: is there any way to fix this?
PineInDisguise
  • 103
  • 1
  • 7
8
votes
1 answer

Points on a Quadratic Curve using Processing (p5.js)

I am using this formula to calculate the points on a quadratic curve: cPx2 = (1-t)*(1-t)* x1+2 * (1-t)*t*qcX + t*t*x2; cPy2 = (1-t)*(1-t)* y1+2 * (1-t)*t*qcY + t*t*y2; When I set t = 10 and iterate through the curves, I get this: It looks like…
glaemart
  • 129
  • 1
  • 10
8
votes
1 answer

How can I fill a shape with a gradient on p5.js?

First, I do know how to make gradients when it's formed within a square shape as its' a default shape when making manual gradients with for loops and lerpColor. I am trying to create ideally any shape, in this case an ellipse that will have a linear…
wardrobefanatic
  • 101
  • 1
  • 3
8
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
  • 647
  • 4
  • 18
8
votes
2 answers

P5.js Get current fill/stroke color?

I'm developing a addon library for p5.js and I need to setup several fill/stroke colors in certain functions. Is there a way to get the current fill/stroke value so I can ensure that when the user calls said functions he doesn't have to worry about…
Dozed12
  • 85
  • 1
  • 7
7
votes
2 answers

Generating the same 2 random colors for 2 different objects

Basically, I have to generate the same color, chosen randomly, for 2 different bodies. Does anyone have any tip on how I could link the two objects to have the same random colour? Evertime a condition happens, the colour should refresh and both…
Jason Nieman
  • 91
  • 1
7
votes
2 answers

How can i import p5.js into TypeScript?

I'm trying to start a project in typescript and wanted to use the p5.js library. Is there any way to "import" the library into my index.ts file, so that I don't need to put in the HTML. I'm new to modules. Thanks in…
Carlos Daniel
  • 449
  • 4
  • 14
7
votes
2 answers

Can i make my p5.js draw() function run only once, and then only on a button click?

I have this snippet of p5.js code: let x = 10; let y = Math.floor(Math.random()*201); let x2 = 190; let y2 = 200 - Math.floor(Math.random()*201); function setup() { createCanvas(200, 200); } function draw() { clear(); y =…
Infinity
  • 73
  • 1
  • 3
7
votes
2 answers

How to enable right click in p5.js?

I'm making a minesweeper clone, left click reveals the cell and right click is supposed to flag the cell. I'm using the function mouseClicked() - this allows me to reveal on left click and also reveal on right click. I tried using if(mouseIsPressed)…
ObamoDank
  • 141
  • 1
  • 2
  • 5
7
votes
1 answer

Importing/Using p5.Sound into React

I'm trying to get p5.sound into my React app, after having successfully gotten p5.js canvas functionality working. I have a p5Wrapper for my p5 sketch. And as I said the canvas functionality works great(ish). But, I'm unable to get the sound…
ErikK
  • 169
  • 2
  • 13
7
votes
1 answer

how to get frequency value in javascript?

I’m an italian student, and I’m using p5’s libraries to create a web guitar tuner. I would like to know if there is a way to get the frequency of the microphone input. library link: https://p5js.org/reference/#/libraries/p5.sound Different solution…
Strimply
  • 73
  • 1
  • 5
7
votes
3 answers

How to rotate image in p5.js

I need to rotate image, but my code doesn't rotate it around center and I don't understand why. When I run it I cannot see it, so I suspect it draws it outside of screen. push(); rotate(PI / 2 * rotation); imageMode(CENTER); image(this.texture,…
FCin
  • 3,804
  • 4
  • 20
  • 49
7
votes
1 answer

Zooming in at mouse position p5.js (jsfiddle included)

I'm trying to zoom at mouse position, like say on google maps. It kind of works but it shifts the point i want to zoom in on wherever it matches up with the original.Then when i zoom at that point it works fine. I think I need to translate the point…
Kys Plox
  • 774
  • 2
  • 10
  • 23
7
votes
1 answer

Using p5's functions without the setup/draw format

I'm relatively new to Javascript, and i was tinkering around with the p5 library. In Python i can import a single function from a library using the from x import y statement: from subprocess import check_output My question is, there is a way to do…
g_rmz
  • 721
  • 2
  • 8
  • 20
7
votes
3 answers

How do I get the screen coordinates of origin after a bunch of transforms P5.js

I'm trying to track the position of an object so I can draw a trail behind it in p5.js. I'm moving the object around the screen with the translate() and rotate() functions, and in order to draw a trail I was going to store the object's position…
Aaron Greig
  • 73
  • 1
  • 5
1
2
3
…
99 100