material.js shader() example

[hsab]

addresses #1954

• https://p5js.org/reference/#/p5/shader

extends the loadShader example to allow for toggling between 2 shaders on mouse click/press.

[welcome]

🎉 Thanks for opening this pull request! Please check out our contributing guidelines if you haven't already. And be sure to add yourself to the list of contributors on the readme page!

[stalgiag]

This looks good! I am a little on the fence about the mandelbrot shader example recurring so much in the reference examples. Especially because I think the vertex shader makes it so that quad() begins to look unfamiliar and something like using rect() to replace it is off the table. Which would be fine if it was immediately clear why the vertices are being modified. I also think that the 'p' uniform feels like a magic number. Reference examples should shoot for lowest possible complexity to indicate how a method works. I think the examples/examples (need a better word for these) is a better place for something like the mandelbrot shader.

Anyways! All of that is mostly unrelated to this PR and the added gradient shader is a pleasant step in the right direction. If you felt compelled to replace the mandelbrot shader with something more inline with the gradient shader in this example then that is obviously welcome but I am happy to merge this as is and will do so in a couple of days unless you tell me to hold off :-)

[hsab]

@stalgiag I agree, and yet the reason why I opted for the Mandel shader was exactly the familiarity of its reoccurrence throughout the reference manual. But the fact that it could seem like a blackbox for users/beginners is undeniable.

Perhaps I should change pos to offset. Then the shader could coherently be extended so that:
vec2 st = vPos.xy + vec2(xOffset,yOffset);

color1 and color2 could perhaps be uniforms as well. That way the shader could potentially be reused with a certain level of modularity that is visually distinguishable:

• moves along X || moves along Y || moves on XY plane || static
• full-color control

this could allow two instances of this shader to properly reflect the effects of shader() for this particular example/commit:
shader1: blue-orange moving vertically
shader2: red-green moving horizontally

what do yo think?

[hsab]

or even better uniform vec2 offset; rather than uniform float xOffset and uniform float yOffset, giving:
vec2 st = vPos.xy + offset.xy;

[hsab]

as for the quad() and rect() situation, we could perhaps opt in for something like this. Which as a solution, relies primarily on:
gl_FragCoord.xy / resolution.xy
This allows for eliminating +-1 values for the quad and simply using rect(0,0,width,height);
Yet ambiguity might arise from setUniform('resolution',[width,height]);

On a side note, I tried looking for docs on the webgl vs p2d coordinate differences and failed to find any. Are you aware of such in the codebase/references?

[stalgiag]

Thanks for the quick response! I like the offset with two gradient shader instances idea. I understand the the impulse to repeat the Mandel shader. It might be a good idea for familiarity sake but it also seems like a good time to start moving away from it and maybe filing an issue to simplify the other examples away from the Mandel shader as well.

I'll leave it up to you as to whether to change the vertex shader. I don't have extremely strong feelings and it would be rect(-width/2, -height/2, width, height) which when combined with setting the resolution uniform doesn't provide the largest gains in terms of simplicity.

As for coordinate differences, the getting started with webgl wiki explains this a bit. This decision dates back to the first work on WebGL mode in 2015. There are pros and cons to doing this but I agree that maybe it makes sense to try to find another more prominent place for this in documentation. Not sure if there are other mentions that I am missing.

[hsab]

Thanks for the info, although I think it would have been rect(-width/2, -height/2, width*2, height*2), I decided to just opt in for quad().

I'm gonna close this pull req, and open another one with the latest commit.