3,162 questions
1
vote
0
answers
25
views
Tone.js Sampler throwing "url keys must be the note's pitch" with correct keys [closed]
I'm trying to use a tone.js sampler object within p5.js to play notes. I've tested out my environment with basic tone.js synths, but now I want to create a sampler using custom samples. The issue is, ...
- 11
0
votes
0
answers
19
views
problem modifying the Y coordinates of a plane in p5.js
I'm trying to modify the positions of the points of a plane object in P5.js. The coordinates are modified in a vertex-shader.
The sketh.js part :
shader(postShader);
postShader.setUniform('time', ...
1
vote
0
answers
18
views
using a preshader before the p5.js phongshader
I'd like to be able to modify the vertex positions in a vertex shader BEFORE using phongmaterial.
I can think of two solutions:
apply a shader that modifies the coordinates before the phongShader ...
1
vote
1
answer
63
views
Trying to Create a P5.js Screensaver
I'm new to P5.js and JavaScript programming in general, but I've taken a few lessons and am trying to make a few interesting images with what I know. However, I reached a few roadblocks while trying ...
- 13
0
votes
0
answers
57
views
Why is my game's lag get more worse when I play it further?
This is a prototype game about a goose who has to keep the temperature right or else the world ends. I'm trying to add in more mechanics in but I really can't move on because the lag gets worse the ...
1
vote
2
answers
119
views
Rotating 3D object using JavaScript
I am working with WebGL 3D objects within p5.js (JavaScript). I have four somewhat complicated "separate" 3D objects which, when working as planned, will be manipulated with a mouseOver ...
- 11
1
vote
0
answers
26
views
in p5.js, how to display information of a datapoint when the mouse is hovered over it
Adding function for hover and changing draw function
I want to display the information of the datapoint when the mouse is hovered over the point. I tried adding a function and updated my draw function....
1
vote
1
answer
69
views
How to Change the Default Background of bodySegmentation-mask-body-parts in p5.js?
I'm trying to change the background behind the detected body segment, but I can't get it to work. Even though I'm modifying the background(...) function, it keeps defaulting to white. Can anyone ...
- 11
3
votes
0
answers
37
views
Fractal Nested Transformation off by a few points P5JS
Note: I am not 100% sure if this question belongs here, as I dont know if the error is in the programming or in the math, please excuse me and direct me to where to post it
Hi, I am trying to make an ...
- 2,239
2
votes
2
answers
41
views
p5 sketch freezing every 2ish seconds
My p5.js sketch is freezing for a couple of frames every 2-3 seconds. I know p5 is not performant, but I feel like my sketch is optimized enough to not warrant this.
I think it may have to do with how ...
3
votes
1
answer
45
views
p5js Image width always returning 1
I have a very basic p5js script where I need to resize an image taken from the user via an input. I need to resize it by a percentage, so I need to know the original dimentions. For some reason, both ...
- 2,239
1
vote
1
answer
38
views
Can you change the line ending on p5js
Im working on a project were I need to draw some thick lines. I noticed that by default p5js lines are rounded at the ends. Is there a way to change this behavior?
strokeWeight(50);
line(150,150,300,...
- 2,239
1
vote
0
answers
63
views
Why can't I apply this specific invert clip to a shape?
I’m trying to apply an invert clip to a shape, but, for this specific clip shape, the clip is not being applied to the shape.
It works if the clip is not inverted, and it works with other clips, such ...
0
votes
0
answers
65
views
Trying to have a p5.js sketch in a Cargo 3 website?
Trying two ways to have a p5.js element in my Cargo 3 site and I seem to keep hitting a different set of problems either way I set it up.
Way 1 is placing it directly in the html editor –
Way 2 is ...
0
votes
1
answer
76
views
How not to re-render the canvas once state changes?
I have couple of states where I change on different parts of the project:
which are:
const [sketchDimensions, setSketchDimensions] = useState(SHOE_DIMENSIONS);
const [selectedSegment, ...
- 1,911
0
votes
1
answer
63
views
Dropdown Menu For Images P5js
I am trying to make a drop down menu in p5js that displays images. I keep running into an error with loading images. When I attempted to troubleshoot and loaded an image in another sketch I did not ...
- 51
2
votes
1
answer
57
views
Why does p5.js render colors differently when using point() in a loop vs rect()?
I'm working with p5.js to explore color rendering by creating a dynamic color gradient using the point() function. However, I've noticed that when I use point() to draw colors, they appear lighter or ...
- 21
0
votes
0
answers
42
views
Toggling audio in React without re-rendering component
I have built a game using React (and Matter JS and p5.js). It mainly has 2 variables, score (increments everytime goal is hit) and timer (decrements every second).
I want music to play in the ...
- 143
2
votes
1
answer
75
views
Creating a flat shadow effect from a circle
I've tried a bit of trig and playing with polar to cartesian coordinates but ultimately getting a bit lost on how to achieve an effect in JS. At the moment I've been using p5.js but open to other ...
- 41
2
votes
1
answer
172
views
How does p5.js instance mode work where the argument to instantiate the object is a function?
I’m having issues understanding how the P5.js instance mode works. The syntax of creating the object seems so different from anything else I’ve seen.
We’re instantiating a new object with the ‘new p5(...
- 23
1
vote
0
answers
34
views
p5 perlin noise field can't get streaking
I know that if you have an opaque background, the previous frame appears. My goal is that the previous dots from previous frames will appear to give a streaking effect. However, setting the background ...
- 49
0
votes
0
answers
62
views
Reaction diffusion with shaders on WEBGL
I'm writing a reaction diffusion simulation with p5js based on a video and this tutorial. The code so far is this:
var vertSrc = `
#ifdef GL_ES
precision mediump float;
#endif
attribute vec3 ...
- 104
0
votes
1
answer
45
views
I can't make collisions work in p5js with circles
I have followed the instructions of a "TheCodingTrain" tutorial, it describes how to calculate the distance between two circles to emulate collisions. I have a lot more, but this is the code ...
0
votes
1
answer
43
views
I am having trouble figuring out how to round a number to the nearest ones place in p5.js
I have a game I'm making in p5.js and I am having trouble rounding my health varible to the nearest ones place.
I tried using p5.js's round() function (https://p5js.org/reference/p5/round/) and it isn'...
1
vote
0
answers
38
views
p5.js on OpenProcessing, sketch using audio works on desktop but not on mobile
Good afternoon all;
Forgive me as I am very much a 'bodger' when it comes to coding so would appreciate your patience with my noviceness! I have made a rough sketch oppr.org/s/twgjO43M on ...
- 33
-3
votes
1
answer
35
views
How to find how many parameters of a conditional statement are met?
I am dealing with an issue where I have to return the number of parameters in a conditional statement that are met. Further, I can only use more conditional statements and the return function.
The ...
- 7
0
votes
1
answer
42
views
How to correctly convert images and attach to canvas in p5js?
Currently I'm working on a big project where I'm drawing the shoe model in canvas and using some functions to divide them into segments. Those segments are clickable in order to change the images ...
- 1,911
0
votes
0
answers
42
views
Can't access element's properties using DOM in p5.js
I am trying to expand on The Coding Train's Monty Hall Problem demonstration using p5.js, and I am stuck in trying to implement an automatic mode.
Everything works fine, except that the background of ...
- 35
0
votes
1
answer
72
views
Trouble with reading a noise texture in GLSL
I'm writing a Perlin noise terrain generator with p5js, following this tutorial. The app ran poorly so I decided to rewrite it with shaders, something i've never used before. I started by generating a ...
- 104
0
votes
0
answers
31
views
in p5 How to change scalling but keep text size in pixel
I change the scaling to print a geometrical shape. Next to it, I print its name. I use the scaling to make the geometrical shape smaller or bigger. I want the text to follow the geometrical shape. ...
- 1,813
0
votes
0
answers
26
views
How to change the coordinate system for all p5 objects (including the slider)
With this code I make a frame with x going from -25 to 25, y going from -25 to 25. x is pointing rightwards and y upwards.
type gridRange={
xrange:{
min: number,
max: number,
},...
- 1,813
0
votes
2
answers
31
views
How to write text on the right side in an inverted geometric reference frame with p5
In p5, axis y points downwards. This code make it point upwads (and make the 0,0 the center)
type gridRange={
xrange:{
min: number,
max: number,
},
yrange:{
min: ...
- 1,813
2
votes
1
answer
48
views
How to use bezierVertex with UV coordinates in p5js?
I'm working on a project which I need to map the UV coordinates to the custom shape. I checked the reference where vertex can hold u and v parameters, but bezierVertex does not have it in ...
- 1,911
1
vote
1
answer
87
views
How can I prevent dragging body beyond specific area with MatterJS?
TLDR; How do I make a body draggable only in the bottom half of the screen and release it if user tries to go beyond that specified area?
I'm making a simple game using p5.js for rendering and Matter ...
- 143
1
vote
1
answer
79
views
p5 using WEBGL mode creates too many canvas in React
I'm having a problem with my code where I am using P5-wrapper/react to show the 2D model I created. However, whenever React states changes it re-creates the canvas again and again it gives warning ...
- 1,911
0
votes
0
answers
117
views
Error loading images in a React + p5.js project
THE ERROR: This error appears if I use loadImage() function, even if I didn't use the image loaded anywhere else. In this case it is the background image, but even loading images I just want to use on ...
- 143
1
vote
1
answer
75
views
How to reset ball position if it goes out of bounds, using p5.js and matter.js?
I want to reset the ball back to its initial position if it flies off the screen, or if its position.y < 0 (I'll add in other boundary conditions once this is figured out).
I tried simulating that ...
- 143
0
votes
0
answers
47
views
Having trouble getting p5.SoundRecorder to work
I have a p5.js sketch that integrates some Tone.js music functions adapted from @mattdesl
I have added a p5.SoundRecorder from https://p5js.org/reference/#/p5.SoundRecorder
following is the p5.js ...
2
votes
1
answer
76
views
Flashing and flickering in p5js
I have the following code for a p5js project where I draw 10 eccentric squares and set the blend mode to DIFFERENCE. But the screen starts aggressively flashing and flickering.
let size = 50;
let c = [...
- 150
0
votes
1
answer
98
views
p5.js - Module not found: Can't resolve '@p5-wrapper/react'
I'm trying to get setup with @p5-wrapper/react using the very minimal example in the readme.
I've attempted using both @p5-wrapper/next and @p5-wrapper/react.
While it's of course installed, I'm ...
- 41
0
votes
0
answers
30
views
Why the collisions in this p5library game don't ajust to the sprite?
I'm starting to use this library and I'm not quite sure how things work. I got the base from a YouTube video and then tried adding things myself. The problem is that the frog sprite sinks into the ...
- 1
0
votes
0
answers
61
views
Responsive p5play Sprites based on screen scroll/resize
I am making a portfolio website, and am trying to use p5play, a library of p5js, to create a background where balls fall down to the bottom of the screen. There is also walls on the sides that make ...
- 45
0
votes
2
answers
59
views
Vue keeps p5 components alive after navigating
I have build a creativ coding website using vue and p5. In my app i display different p5 components depending on the current route. The problem is that somehow vue or p5 (idk which) keeps the ...
- 30
1
vote
1
answer
131
views
How do I change the size of a custom shape using vertexes in p5.js, without changing the placement of my shape?
I am making a game project in JavaScript using p5.js. I made a star shape using the beginShape() function, where vertexes are singular point on the screen that are connected using lines. Currently, I ...
- 7
2
votes
1
answer
122
views
Download p5.js sketch canvas as PDF using jsPDF addImage JPEG
Trying to get a minimal script running to download a p5.js sketch canvas element as a PDF using jsPDF -- specifically the jsPDF addImage method, after converting the canvas to a JPEG using the JS ...
- 23
0
votes
0
answers
69
views
How do I update the numbers in this clock in p5js?
I'm attempting to make a clock using p5js with 3 continuously rotating rings which have the current hour/minute/second at the top of each ring. At the moment I'm just trying to figure out the seconds ...
- 23
0
votes
0
answers
59
views
p5js stretching image by four corners
Using the p5js javascript library, is there any way that I can take four points in 2D space and stretch the image's corners to fit those points? I can not use the texture function because it requires ...
0
votes
1
answer
62
views
display(){} Method p5.js not displaying image
I working on a school project. I created a class for an image. It seemed to be working when the class was embedded in the draw function. My professor said that I should move the class outside of the ...
- 51
0
votes
0
answers
76
views
Extensive sound playing causing memory leaks in P5.js
I've recently made a topdown shooter in P5.js (still new). However, this function seems to cause a memory leak, making all audio sound glitchy and slightly decreasing the FPS. The sounds play normally ...
- 1
0
votes
0
answers
90
views
P5.js svg export
I'm trying to implement an SVG export button onto my p5.js sketch. The button is visible, clickable and saves a file but the created file then says:
"This page contains the following errors:
...
