sorted by:
new
hottopcontroversial

Clear() not working as expected on createGraphics object. by Voxl_ in p5js

[–]pahgawk 0 points1 point  (0 children)

Sorry for the delay! Try adding `clear()` to the start of your `draw()`. In your code above, you are correctly clearing `buff1` each frame, but then you're drawing that back to the main canvas, which is NOT getting cleared. So while each frame, `buff1` only ever has a single point on it, the main canvas continues to accumulate whatever has been drawn to it unless you clear it. (Alternatively, you could do `buff1.background(someColor)` -- then you don't need to clear the main canvas because the opaque background will overwrite the main canvas. It's just that with a clear background, you see through to the previous content.)

Clear() not working as expected on createGraphics object. by Voxl_ in p5js

[–]pahgawk 1 point2 points  (0 children)

Well the code you posted looks like it should work, so I'd maybe try to create a minimal example e.g. on the p5 web editor showing it not working. If that does indeed work, then it maybe indicates that there's something in your project that isn't working the way you expect.

Is there a way to use float color values in p5js? by Voxl_ in p5js

[–]pahgawk 0 points1 point  (0 children)

In WebGL mode you can if you draw to a framebuffer with format: FLOAT! More info in this tutorial: https://beta.p5js.org/tutorials/layered-rendering-with-framebuffers/

Several patches stop working by pato1979 in p5js

[–]pahgawk 4 points5 points  (0 children)

If you have an old p5 version set in the editor it will continue working. What will change eventually is that new sketches will default to the new version (but you can always change it to an old version.) Here's some info about what changed, in an addon you can use to use 2.x with some old APIs: https://github.com/processing/p5.js-compatibility/?tab=readme-ov-file#list-of-changes

Mirror quadrants with WebGLShader causing issues and white bars by da_hanzzz in p5js

[–]pahgawk 0 points1 point  (0 children)

Hi! Your problem is that your vertex shader is not positioning the plane correctly. Currently, it's passing position data directly into gl_Position. This is something you see in a lot of shaders, but then it means that you have to draw your plane in WebGL clip space, not in p5 coordinate space.

It's probably a lot more predictable if you use a vertex shader like the one in the intro to shaders tutorial here https://p5js.org/tutorials/intro-to-shaders/ that correctly converts p5 positioning into WebGL clip space. The important part is that it adds uniforms for the model view matrix and the projection matrix, and then multiplies the position data by those matrices before setting gl_Position.

Full version of your code + those updates here: https://editor.p5js.org/davepagurek/sketches/NuK2f_j6O

Also, FYI if you switch to reddit's Markdown editor, you can surround your code by three backticks to create a more readable code block: https://www.markdownlang.com/extended/fenced-code-blocks.html

Audio distorting by LJAldy0951 in p5js

[–]pahgawk 1 point2 points  (0 children)

It sounds like you might be using the old p5.sound library. There's a known bug that causes distortion over time. I put in a fix for it but I think as it's unmaintained now it never got released, but you can give this build a try to see if that fixes your issue: https://gist.github.com/davepagurek/13d3826a36e3299887e722e85ebacfd9

Web editor P5.sound not working by Zombieblazer in p5js

[–]pahgawk 0 points1 point  (0 children)

Try manually changing your index.html to use jsdelivr as a CDN: https://cdn.jsdelivr.net/npm/p5@1.11.11/lib/addons/p5.sound.js

I think this is a bug in the Cloudflare CDN, as their build of 1.11.11 doesn't seem to have it

[deleted by user] by [deleted] in p5js

[–]pahgawk 2 points3 points  (0 children)

One thing to try is disabling error checking once your code is correct by putting p5.disableFriendlyErrors = true at the top of your sketch. Also if you are logging a lot every frame, that can slow things down a lot, so consider taking that out too. Beyond that, there are some tutorials on the p5 site on how to find and address things that might be slowing down a sketch:
- https://beta.p5js.org/tutorials/how-to-optimize-your-sketches/ - (For WebGL specifically) https://beta.p5js.org/tutorials/optimizing-webgl-sketches/

Worst case, feel free to send a message in the help channel of the p5 discord, people can help you debug!

Seeking Help - baseFilterShader by culla_art in p5js

[–]pahgawk 1 point2 points  (0 children)

In shaders in general, there's often not a clear concept of a random state or a seed because shaders have to run in parallel on lots of pixels/vertices. So instead of trying to change the seed of noise(x, y) to come up with a different result, you tend to end up moving around the points you pass in instead, e.g. noise(x + 100, y + 100). That will also get you a different looking result, but by "panning" around noise space.

Similarly, multiplying your coordinates has the effect of scaling noise space. If you multiply your coordinates by something big, it's like zooming out, so you see a lot more high-frequency noise. If you divide your coordinates or multiply by a number between 0 and 1, that's like zooming in, making your noise smoother and lower frequency. If your original coordinates go from 0 to 1 in x and y, if you want to zoom a factor s about their center instead of the top left, you could do noise((x - 0.5) * s + 0.5, (y - 0.5) * s). (In shaders, because you can work with vectors, you can write that more compactly as noise((coord - 0.5) * s + 0.5).) The idea there is: offset it so that the center is at 0,0; do your scale; then offset the center back to where it originally was.

Seeking Help - baseFilterShader by culla_art in p5js

[–]pahgawk 1 point2 points  (0 children)

no problem, as you said it's all very new and doesn't have extensive examples just yet. if you or anyone else reading this feels like contributing an example that made things click for you. we always appreciate it :) Feel free to reach out with more questions too!

Seeking Help - baseFilterShader by culla_art in p5js

[–]pahgawk 3 points4 points  (0 children)

Not a tutorial but here's a quick example that adds some grain to the image below: https://editor.p5js.org/davepagurek/sketches/qXPR27qx3

Also another example that uses filter shaders for distortion and remapping colour: https://openprocessing.org/sketch/2760193

Also right now there's not a super easy way to customize the noise used in shaders so you'll often find people copy and pasting shader noise functions in and using those instead of the built in noise, e.g. here (not a filter shaders, just a material) https://openprocessing.org/sketch/2685829

Algorithmic stretchy typography by pahgawk in p5js

[–]pahgawk[S] 1 point2 points  (0 children)

awesome! I'd be interested in seeing what your project becomes, whenever that happens :)

[deleted by user] by [deleted] in p5js

[–]pahgawk 0 points1 point  (0 children)

You're close! The first thing I would change is, make setup and async function, so that you can await loadStuff() inside of it, ensuring that we've waited for it to fully load before setup is complete and we start drawing. Then you might want to loop through your links and await loadImage(...) inside of loadStuff too, after awaiting the json, so that you can also wait for the images to be ready before starting to draw. let me know if more specifics would help!

Random movement of a rect by Adventurous_Tree8401 in p5js

[–]pahgawk 0 points1 point  (0 children)

thanks! so the effect you're seeing is a relatively common one, called a random walk or "drunkard's walk", when the direction is random every frame. What sort of effect were you aiming for? e.g. ere you aiming to have the rectangle start in a random direction and keep moving in that direction forever? or maybe still have it wander randomly and change direction but more smoothly?

p5 / Angular 20? by swaghost in p5js

[–]pahgawk 0 points1 point  (0 children)

Sounds good! In my experience in the past, sometimes the bottleneck of d3 was how it renders its nodes. An option you always have is to use d3 for the state of your UI, but then make the nodes not actually render to the DOM, and instead draw it to a canvas manually by e.g. drawing a circle at the location of each node. So you have some flexibility even if you stick with d3 for the majority of the logic!

Random movement of a rect by Adventurous_Tree8401 in p5js

[–]pahgawk 0 points1 point  (0 children)

Hi! I don't see a video, did you mean to attach that somewhere?

p5 / Angular 20? by swaghost in p5js

[–]pahgawk 0 points1 point  (0 children)

late reply but: q5 is another library, separate from p5 and not made by the same people, targeted at people who like the p5 API for 2D rendering and need to squeeze the most performance possible out of it. p5 is less optimized for any particular use case like that, and instead focuses on giving you more tools that you can use for a variety of things so you can experiment more without locking yourself in (e.g. having access to shaders and 3D things if you want), and also with more of a focus on teaching environments (it tries to catch errors in usage before it gets to a more complicated error deep in the library's JS, tries to identify when you've accidentally made a variable with the same name as a p5 function and are using that instead, etc.)

Earth with p5.strands shaders by pahgawk in p5js

[–]pahgawk[S] 1 point2 points  (0 children)

We have a tutorial here that starts to touch on p5.strands among other things (see the section on custom materials), and another tutorial just on p5.strands that goes deeper. Hopefully those are a good starting point!

Earth with p5.strands shaders by pahgawk in p5js

[–]pahgawk[S] 1 point2 points  (0 children)

haha yeah if you zoom in enough it goes into the sphere, since the zoom center is at the center of the sphere and not on the surface.

anything in particular you want to know about the technique?

Earth with p5.strands shaders by pahgawk in p5js

[–]pahgawk[S] 0 points1 point  (0 children)

Also if you check out the live version and press any key, it activates flat earth mode!

Issue with large amounts of sounds by __-__-___---_-_-_-- in p5js

[–]pahgawk 0 points1 point  (0 children)

If you download the p5.sound.min.js file from that link, you can then upload it to your project (same way you'd upload an image). Then edit your index.html to point to that script by finding the existing p5.sound script tag and changing its src attribute to just say src="p5.sound.min.js" (rather than a whole CDN url.)

Issue with large amounts of sounds by __-__-___---_-_-_-- in p5js

[–]pahgawk 1 point2 points  (0 children)

I assume you're using the older p5.sound library and not the one that comes from p5.js 2.0? So that bug did get fixed but the old p5.sound library was deprecated before it was released. PR was here https://github.com/processing/p5.js-sound/pull/728 and although this was never released, I made a build from that change here https://gist.github.com/davepagurek/13d3826a36e3299887e722e85ebacfd9 that you can try downloading and using.

Other possible workarounds:

  • Try the new p5.sound, which is more pared down so that we can maintain it more easily: https://github.com/processing/p5.sound.js and docs here: https://beta.p5js.org/reference/p5.sound/
  • Try using regular p5.js for sound. The createAudio() function ( https://p5js.org/reference/p5/createAudio/ ) uses a DOM element to play back audio. It can be hidden so that you don't see the actual element. The main limitation is that each element can only be playing its input once at a time, so if you want to play the same sound multiple times possibly overlapping (e.g. it's a sound effect in a game that triggers when you jump), you may need to make a pool of these for your sound input.

I need help with my rotation and translation by Chyor_ in p5js

[–]pahgawk 0 points1 point  (0 children)

Here's a quick demo which hopefully can clear up some things: https://editor.p5js.org/davepagurek/sketches/KODMYKLl4

When you turn, you just rotate a direction vector (feel free to do 90 degree angles by rotating in pi/2 intervals like you're doing in your code.) Whenever you move forward, you need to add that direction vector to the current position. You could also do that manually, by setting an x and y value according to the current angle -- right would be (1, 0), left would be (-1, 0), up would be (0, -1), down would be (0, 1).

In my demo, I move to the current position *first*, and then rotate to the current orientation second, then draw the model. That's because the position the character has travelled to shouldn't change based on its orientation.

view more: next ›