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

p5 canvas static after being cloned

Following instructions from this question, I have a div which is being cloned that has a p5 canvas inside it. When it is cloned the canvas is not responsive to mouse coordinates. How do I make the p5 canvas still active after cloning? …
Kelly van der Hurk
  • 39
  • 6
1
vote
2 answers

jQuery: How do I clone a div containing a p5 canvas?

Using jQuery to clone a div: $(document).ready(function() { // clicking the buttton $(".showcanvas").click(function() { // cloning and appending the div $(".canvas").first().clone(true).appendTo("article").fadeIn("1200"); }); }); with a…
Kelly van der Hurk
  • 39
  • 6
1
vote
1 answer

P5 for loop doesnt stop

I want to create a map like this. My code is done and works BUT the server limits me to 40 requests/minute, so I need to slow my requests down. I found out that I reach the server limit with even one City in my .csv list (it should just send one…
foliran
  • 75
  • 6
1
vote
1 answer

Is there a way to analyze the amplitude from a spotify song using p5.js in browser?

I am attempting to make a Spotify visualizer as a personal project, but can't seem to find a way to analyze the sound before it is played through the browser. I have the Spotify player playing music through the browser, and the visualizer is working…
Revircs
  • 1,312
  • 3
  • 12
  • 23
1
vote
1 answer

p5 JS 3D box getting cut off

I am trying to make a 3D game using p5.js. I have used the 3d version before, and every time I run into this issue. If the camera gets too close to any objects I am rendering, it will get cut off by a little. This is my camera code: camera(x, y, z,…
oriont
  • 684
  • 2
  • 10
  • 25
1
vote
2 answers

Trying to figure out 2D arrays by creating a 3x3 board and then visualizing it, however, I'm meeting some hurdles

What I'm trying to achieve is this - creating 2 dimensional array like this one: var board = [ [1, 0, 1], [0, 0, 0], [1, 1, 1] ]; and then create a 300px canvas in which there will be 3x3 rectangles with 100px width and height each…
Onyx
  • 5,186
  • 8
  • 39
  • 86
1
vote
2 answers

While Loop Not Working In Function For P5.js

I am experienced in python but completely new to java. I am using p5 and want to set up a simple function that, depending on what number the user inputs, it draws that many circles. I'm not sure why it is not working. var numProton; function…
reisnern21
  • 107
  • 2
  • 9
1
vote
1 answer

P5.JS: Collisions?

I have an idea of getting a circle grow in size if anywhere in the circle's area there is this object called "food". Though I have no idea how to implement it on my code. I have tried but of course the whole concept of my idea was off in trying to…
Nafiz Hisham
  • 79
  • 5
1
vote
1 answer

p5js - can't create more than 1 object in draw()

I'm trying to create a series of objects that are groups of ellipses to form a line. I can create 1 line ok; however, when I try to introduce a second, it does not show. If I then proceed to remove the instances of string1 from the draw() method,…
Joe
  • 85
  • 8
1
vote
1 answer

two canvases with same GUI Controls

How do we link two canvases (one showing 2d drawing and other 3d) on a webpage using JavaScript and P5.js so that if one shape is modified then it also affects the other canvas shapes? Yeah, thank you. How they can be linked/interactive? If we…
F Jay
  • 11
  • 3
1
vote
1 answer

p5.js: change text color in for a single word in a sentence

I want to change the color of a single word in a string that I am drawing to the canvas, without having to manually fiddle with text locations and have multiple "text()" function calls. Is this possible in p5? Example: textAlign(CENTER); text("I…
Alex Brodersen
  • 73
  • 1
  • 7
1
vote
1 answer

Why do radial gradients appear like this when overlaid?

I have a p5.js sketch that draws radial gradients on the canvas in the browser window. They appear as they should, except when two or more overlap, when it looks like this: . This is the class that is called to draw a radial gradient: function…
samuset
  • 275
  • 1
  • 2
  • 13
1
vote
4 answers

How to convert a converted string back into an array?

As far as I know, you can only save strings to local storage. So, I had to write a function so that I could save arrays. If I call console.log(fixA(["string1", [5, [false]], "string2"])); I get an output of "'string1',[5,[false]],'string2'". Here it…
simplexshotz
  • 139
  • 12
1
vote
3 answers

Get div's width for p5.js

I'm learning on my own JavaScript so I'm doing something like a website using p5.js The thing is that a div holding my canvas for p5.js and I want it to be responsive. In this canvas, I do have an object that needs the div width and height to be…
OgL0C
  • 33
  • 1
  • 4
1
vote
2 answers

p5.js not drawing a 3d box

I am creating a simulator using P5.js. Within the simulator, I need a green box, however it does not seem to be appearing. The code is below: var outputs = []; function setup() { createCanvas(600, 400, WEBGL); background(200); for (var i =…
Jonathan Leeming
  • 25
  • 1
  • 5
1 2 3
…
99 100