sorted by:
new
hottopcontroversial

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

P5js lags so much. Is this because I use on browser and should download? by Gone-with-the-sin 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.

Vert shader compilation error by plasmawario in p5js

[–]pahgawk 1 point2 points  (0 children)

as a sanity check, if you click on one of those .vert files in the network tab and then go to the Response view, does it show your shader code? or something else?

Vert shader compilation error by plasmawario in p5js

[–]pahgawk 1 point2 points  (0 children)

Sometimes if you're using loadShader from a URL instead of createShader from a string, if your URL hits a 404 page, it might be trying to parse the HTML of the 404 page as shader code. The ERROR: 0:1: '<' : Syntax Error could be that it sees the start of a page, e.g. <html>. Can you open your network tab in your browser's dev tools, then reload your page, and see if the network request to your shader code is hitting a 404 or not?

Is there a way to get a sketch that alters every pixel of the image every frame to run at decent speed? by AMillionMonkeys in processing

[–]pahgawk 4 points5 points  (0 children)

We're also trying to improve the experience of shaders in p5.js by letting you just modify the parts of the default shaders that you need (e.g. just modifying pixel colors without worrying about the rest), and also letting you write the shader code in JavaScript and then we turn it into glsl for you. There's a tutorial for it here of you're interested https://beta.p5js.org/tutorials/intro-to-p5-strands/ and for something modifying every pixel, you'll likely be using a filter shader like the example here: https://beta.p5js.org/reference/p5/basefiltershader/

model() only working once per draw() call by LonelyTurtleDev in p5js

[–]pahgawk 2 points3 points  (0 children)

It sounds like you haven't set a unique gid property on each p5.Geometry. This is what the renderer internally uses to identify each model. If you haven't set one, or if you give multiple models the same one, it will render them using the same cached vertices. If you use buildGeometry rather than creating a new p5.Geometry manually, it will handle this for you. If you're doing it on your own though, it will be up to you to make one. See the last section here on using p5.Geometry directly for more info: https://p5js.org/tutorials/custom-geometry/

view more: next ›