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

How to draw squares between an array of points in p5.js?

I have an array containing 6 sets of random x, y coordinates. I'm able to draw lines connecting the points, like this: But, I'm having trouble figuring out how to draw repeating squares (to achieve a dotted line effect) where the lines are. Right…
Anokhee Jandhyala
  • 183
  • 1
  • 7
4
votes
1 answer

p5.js: How can I make text appear when my mouse hovers over a different element in the sketch in processing?

I have text in my sketch file that appears constantly on the screen. When I hover on that piece of text, I want to display more information on that introductory text on the corner of the browser window, without affecting the rest of the screen. How…
Anushka Jadwani
  • 73
  • 6
4
votes
1 answer

Spritesheet animation disappears p5.js

I want to animate the jewels (see below the code and the jewel). The animation works, but unfortunately at the end of the animation there is a "white pic" shown. I mean that the animation isn't fluent, the pic disappears for a second (or frame). the…
user12304080
4
votes
1 answer

min and max functions with objects

Dear everyone this is my first post here and I've only recently started trying to code at all so please be kind. I'm currently doing a course and on that course they have given us tasks to do. I'm having a problem with my current task. I will post…
James JPN
  • 61
  • 4
4
votes
0 answers

Is it possible to load a whole video in JavaScript in the front end that was dragged and dropped?

I have been trying to create a web app where the user drags and drops a video file into the browser, after which some processing will be done to it with TensorFlow.js and make a prediction. So far, I was able to: Load the video file and play it in…
Imad Eddine Toubal
  • 41
  • 2
4
votes
2 answers

Use image uploaded through HTML DOM file uploader in p5js

I am attempting to allow users to upload their image file through DOM file uploader ( that is ) but after I do that I am unsure how to move the image to JavaScript and process it using p5.js. How do I convert an HTML file…
Vadim Kim
  • 129
  • 12
4
votes
1 answer

How to detect notes from a .mp3 music file and then display a midi time graph

I am a developer but I don't know much about audio and music. I'm trying to detect musical notes in a song file, I'm using p5.sound.js and this script. I create two arrays 1) Midi values, 2) Start time for that midi value. Then I create a third…
omi
  • 41
  • 4
4
votes
2 answers

P5.js not loading sound

I am trying to load an mp3 files (according to the examples) but I am getting Unable to load bg.mp3. The request status was: 0 () The error stack trace includes: loadSound I have referenced my problem to this Github issue…
GodSaveTheDucks
  • 756
  • 5
  • 19
4
votes
0 answers

How can i simulate a rigid body at micro level using p5.js?

I just learned that any particle of a rigid body when viewed from another particle's reference frame (of the same body) performs only circular motion, no matter what chaotic path the body is following! So I tried to simulate the same. I created 100…
Prince Singh
  • 117
  • 11
4
votes
1 answer

Create Zoom effect with p5.js

I know this question has been asked several times, but none of the answers I found worked for me. I need to allow the user to scale the image which works so far, it's simply a scale(factor) call but now I want to scale by the mouse pointer. This…
J-Cake
  • 1,526
  • 1
  • 15
  • 35
4
votes
1 answer

How to rotate text vertically with p5.js?

I'm using p5.js to draw a bottle shape (cylinder) and to put a string on that cylinder. Until now, I could only put the string horizontally and I'm trying to put my string vertically (as if you had to turn your head to be able to read) I searched a…
ParkerIndustries
  • 171
  • 2
  • 15
4
votes
2 answers

How do I save a p5.js canvas as a very large PNG?

I know how to save the canvas using p5.js. However I want to save the canvas as a very large png (for example 8000x8000) so that I can use it in Photoshop and scale down the image to the appropriate size. Is there a simple way of doing this besides…
benwiz
  • 2,167
  • 3
  • 22
  • 33
4
votes
1 answer

How to move square with keys in javascript?

I'm a beginner programmer literally trying to code for the first time after watching some Coding Train videos and I am simply trying to move a square around the screen using the keys. I have what I thought is the right way to do it up oversimplified…
Jagger Denhof
  • 71
  • 3
4
votes
1 answer

Avoid using global scope in p5

I just started a new project in p5, I've already used it directly imported in the browser, but this time, since it's a more complex project, I'm going to use it in webpack. I imported the library and bootstraped it in this way: import * as p5 from…
Christian Vincenzo Traina
  • 9,546
  • 2
  • 40
  • 63
4
votes
1 answer

Rotating objects within a grid in P5.js

I'm trying to use decent OOP approach to getting objects to rotate individually within the cells of a grid. My current result is rotating all objects around the 0, 0 reference point instead of each within it's own cell. Of course, what's needed is…
Chris Amato
  • 135
  • 1
  • 7
1 2 3
…
99 100