Can anyone confirm whether shaded polygons are possible in any way, under the P2D renderer ? I mean just the traditional Gouraud-shaded style, sim. to this example examples | p5.js (which yes uses the WEBGL renderer).
I have a very large app in the P2D renderer which I’d like to add some elementary Gouraud-shaded polygons to, without converting the whole thing to WEBGL, which I know from past experience often throws up a lot of gremlins.
Unfortunately, no. Shading is done in webgl pipeline which is different from 2d canvas. Nevertheless I don’t fully get what you’re trying to do - like drawing a circle and adding highlights to it? Another example on what shape you want to draw would definitely help (or do you want just rectangles?)
What I suggest is to look into the context which allows you to draw shadows and so on, and you may be able to fake the effect you want.
Or you can also use gradients as p5js canvas is just an html5 canvas.
I think you can use p5.Graphics. You can render the webgl content using createGraphics or p5.framebuffer and then draw it into your main sketch as rasterized graphics using image function.
If you only need to have gradient fill you can have a look to my p5.Utils lib. It has several utilities that helps to fill p5 shapes with gradient fill. Check the example.
Thanks @micuat and @alptugan Apologies for slow reply. I will look at all that.
To clarify as requested, I am wanting to do very old-fashioned Gouraud-shaded quads and triangles. Attached is an example, just grabbed from the Web. The app/sketch I’m developing is a geometric art thing, not dissimilar to some of Victor Vaserely’s work. The scene will have hundreds of quadrilaterals and some triangles. Something like the Vasarely image below. I have it all working in flat-shaded polygons, but want to try some shaded ones. (I’m aware my use of “shaded” here is a bit dated - now “shading” connotes fancy “shader programs”).
I’ve always been surprised p5 didn’t have Gouraud shading as standard in the P2D engine, I think it’s pretty elementary these days. Good old Iris GL and OpenGL had it from the late 80’s.
Also I’d like to add a shaded backdrop to the sketch. Can the HTML5 canvas provide a simple gradient like the two below, as a backdrop to a sketch ? Seems like it potentially can in CSS, I’ll do more reading …
Those images make your intention much clearer, thanks!
I tried to make the point explicit in the previous post that it’s not really a decision from p5.js to omit shading in 2D renderer but it’s because HTML canvas doesn’t come with shading (and here I’m talking about the pipeline, no matter how sophisticated or historical the shader code is). After all, HTML 2D canvas is meant for “simple” drawing that runs on the browser, and p5.js is built on top of it.
So there are a few directions you can choose from:
completely port it to WEBGL which you mentioned not ideal - nevertheless p5.js’ WEBGL support has been improving over the last few years and it may work out of the box by just switching to WEBGL and adding a translate to the center. It won’t take much time to test it so I’d say it’s worth trying.
like alptugan mentioned, make a 2D-3D hybrid sketch. This can make very interesting visual effects but also can become a rabbit hole as you need to work with different coordinates.
also they mentioned using their gradient library. I was actually trying to make a gradient without the lib - basically you just need to call the context directly: https://editor.p5js.org/micuat/sketches/IAzSSBMvM7
the other way is to make your own “shader” by iterating on point’s or line’s. Casey Reas the co-founder of Processing popularized this technique and worth looking into it https://reas.com/network_d_s1/
I think there is no shortcut but that makes programming interesting.
I have, I guess I omitted that for simplicity, now it seems a bit misleading, my apologies, It works well in WEBGL after a lot of co-ordinate massaging and the handful of other differences. In fact the same code runs in P2D and WEBGL, with some checks like “if(P2D) this else if(WEBGL) that”. I’m quite pleased with it.
I kind of have the choice of proceeding with future work in P2D or WEBGL, and wanted to check about shaded polys in P2D. But WEBGL alows a lot of neat features, like the whole sketch rotating, and individual polys rotating, and texture and lighting, it’s going to be the winner I guess. I’ll have to finally dive into the world of shader code.
Anyway I will follow all the links you and @alptugan provided, many thanks.
