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
5
votes
2 answers

Draw a line of varying width in p5.js

I wish to draw lines on my canvas with width that gradually vary from start to end. That is, say the line starts at (0, 0) with width = 1 (equivalently, strokeWeight) and ends at (50, 50) with width = 3, and the width must (linearly) increase from 1…
amzon-ex
  • 1,645
  • 1
  • 6
  • 28
5
votes
1 answer

How to make a nested for loop for cylinders around a sphere(coronavirus) in p5.js?

I'm pretty new and learning p5.js, and I am trying to make a 3D coronavirus in p5.js with a sphere and a bunch of cylinders.. You can see my sketch here: https://editor.p5js.org/zzzzzij/sketches/frE9-37R var sketch = function (p) { …
zzzzziji
  • 51
  • 1
5
votes
1 answer

transforming coordinates while drawing in p5.js

I'm trying to figure out how to make a track for this car game I'm working on. The current issue is that when I'm drawing the track, the coordinates of the drawing get transformed relative to the coordinates of the car. Sorry, it's kind of hard to…
BlackCoffee
  • 159
  • 1
  • 10
5
votes
1 answer

Trim an audio file using javascript (first 3 seconds)

I have a question that can I trim my audio file that is recorded via javascript? Like I want to trim the first 3 seconds. I recorded the audio file using p5.js and merged the recorded file with karaoke audio with AudioContext() and I want to trim it…
Ahmed Ali
  • 1,908
  • 14
  • 28
5
votes
1 answer

Is it possible to import a p5js file into another file?

I was wondering if it is possible to important a p5js file into another file. I am creating a non linear adventure game. If the player presses on a certain button, I want that button to activate a mini game that I have in another p5js file. function…
metrocode
  • 99
  • 6
5
votes
2 answers

P5.js createCapture failure callback

Is there a callback function for p5.js’ createCapture function fails? (i.e. when user permission is denied or video camera stream is unsupported by user browser). I notice in the src there is a success callback, but can’t seem to find one for…
Ryan Achten
  • 495
  • 4
  • 21
5
votes
2 answers

P5.js - Is there a way to cut out an image area?

Is there a way to "cut out" a piece of image and use it with the P5.js library? Example: Lets say I have a image of the size 100x100 but need to get a 10x10 pixel cutout that starts at pixel 50,50 I want to take the resulting 10x10 image and…
Oliver Goossens
  • 1,903
  • 3
  • 20
  • 26
5
votes
2 answers

p5-js map() function in python

Is there a function like the map() of p5-js in python? the map() in python isn't the same at all, as I understood it, in python it apply same function to all the iterable in a sequence but I need something that does what the map() function in p5-js…
Tissuebox
  • 1,016
  • 3
  • 14
  • 36
5
votes
1 answer

Javascript disable space scrolling

How do I disable space scrolling? I am making a canvas game (like agar.io) and I don't want the user to scroll down when he presses the space key, but I still want the canvas to recognize it as the user pressing space down. I am using p5.js as the…
Big Ben GamerGuyKSPMC
  • 139
  • 2
  • 13
5
votes
2 answers

p5js button.mousePressed calls function + arguments?

probably silly question but is this possible or not in p5js? function setup() { myButton.mousePressed(toggleVideo(1)); //This toggleVideo works well without argument } function toggleVideo(v) { blablabla[v].loop(); } Many thanks!
Afzhal
  • 51
  • 1
  • 2
5
votes
1 answer

Function arc() doesn't render right in p5.js

I am just making a little program with p5.js, but I found something weird. The arc() function doesn't seem to render correctly when the size is quite big. Here is my code: var ellipseSize = 200; var strokeSize = 60; for(var j=0;…
Art2B
  • 185
  • 1
  • 17
5
votes
1 answer

Using gradient orientations to direct brush stroke effect in Javascript

I'm trying to recreate in Javascript (specifically with p5.js) an effect others seem to have successfully accomplished using the Mathematica suite, as seen here https://mathematica.stackexchange.com/a/39049. I'm 100% ignorant about Mathematica, but…
Francesco Frapporti
  • 5,195
  • 4
  • 32
  • 39
4
votes
1 answer

Loading data drawn to HTML canvas from API into p5js

I have a project where there are two canvases that need to be combined, one inside p5 and one outside. The first is a p5js sketch (created via createCanvas that is essentially a drawing application) and the second is auto-created via an API call to…
erik
  • 3,810
  • 6
  • 32
  • 63
4
votes
1 answer

P5JS make sure the setup is not cleared but the draw function is on every frame

I'm trying to create a wobbly circle with multiple ellipses in the background, however I can't add the for loop to the draw function otherwise it will be running in every frame, and if I add it to setup then the wobbly circle leaves a trace. And if…
tmmbt
  • 45
  • 4
4
votes
1 answer

pixel/sandbox simulator optimizations

I've been working on this project for a few days now, it's a pixel simulator, and the only element I have right now is sand. I'm in the process of fine tuning the physics for sand as a base for other elements. I've noticed something though, the…
bread
  • 160
  • 1
  • 10
1 2 3
…
99 100