Add p5strands color tutorial.

[ilithya]

Color shader tutorial for p5.strands

[ksen0]

Context for website stewards: this is a WIP micrograntee work

[ksen0]

Thanks for all your work so far @ilithya ! I've left a few minor comments. Looking forward to the next iteration!

[skyyash]

kudos @ilithya, good idea putting strands and glsl code side by side.

[ksen0]

Thanks for your notes re: cheatsheet, I'll work on that! Here are some comments. Do you have a sense for how this will conclude? Maybe a short reflection on something like, if you're excited to learn shaders, here's 2 reasons to learn p5.strands as a next step (and maybe a link to one of the existing strands resources, even if its a repetition; and/or maybe a link to https://openprocessing.org/curation/90883 with invitation to submit work and experimentation with strands there) and 2 reasons to learn GLSL as a next step.

Or something like that, showing that either is an option, its totally up to them and either would be usable with p5.js.

posible p5strands reasons:

• smallest amount of boilerplate for writign shaders on th eweb
• very easy to use built-in functions (noise, random) and variables (mouseX, mouseY, width, height) familiar from p5.js - whereas in GLSL this requires more code and defining own noise/random functions
• its in active development by the community (https://processingfoundation.org/blog/p5js-21-and-22-expanding-graphics-avenues-with-p5strands-improvements-and-webgpu/ https://p5js.org/contribute/p5.strands/ - any of those are good)

possible GLSL reasons:

• extensive existing resources and community (link some favorites) for learning and sharing
• GLSL skills carry over to three.js, shadertoy, and lots of webGL projects outside p5.js and the web including TouchDesigner and Unity
• GLSL snippets can be used alongside p5.strands; so you can get the control of GLSL but reduced boilerplate + builtins of p5.strands

If you include the above pros of GLSL I think it's good to mention that * if you learn p5.strands, it works with WEBGPU as well as with WebGL. So your strands code is translated by p5 not only to GLSL, but also to WGSL, so compute shaders can be used (eg https://processingfoundation.org/blog/whats-new-in-p5js-230/ ). WebGPU increasingly used, rather than WebGL, and learning p5.strands covers both

[aashu2006]

@ilithya I really like the side-by-side strands vs GLSL format, it makes the difference easy to see at a glance. The callouts feeding in theory gradually is a nice touch too.

[davepagurek]

I just left a few minor notes, overall it's looking really solid! great work on this!

[ksen0]

@ilithya thank you, this is looking excellent! I added some very minor comments. I'll merge the scrollable component in as soon as I can, sorry a bit swamped at the moment.

[ksen0]

HI @ilithya ! The scrollable flag PR is now merged (thanks to @aashu2006 for the review and suggestions) I think the first side by side can stay without scrollable, so it really is side by side. But the other two, you can add scrollable=true and I think maybe a note like for example "the p5.strands sketch is 79 lines of code, but GLSL is 180. This is because in GLSL, random/noise has to be written by the user".

[skyyash]

should we open markdown links in new tabs??

navigating back from links to tutorial dont preserve scroll positions...

target-blank.mp4

[ksen0]

@skyyash great catch! Re: new tabs: WCAG advises against in general (Technique G200). If we want to go this route we'd need to flag it like "opens in a new tab" in text and in aria lbel.

Losing scrolling info seems like a bug, though, do you want to report it / investigate it / work on it? There are many long pages, back buton should return to correct location.

[skyyash]

hi @ksen0, interesting. i didn't know.

lemme report it and also up for review, cant commit to working on it (tackling strands issues...)

edit: oh wait maybe the cause is the long CodeEmbed or recent changes to that component. because links above that embed works fine. #1609

[SableRaf]

Thanks @ksen0 for the reminder to review this PR and thanks @ilithya for this great work 💙

Here we go!

---

The article starts with:

To understand what advantages p5.strands brings to us when dealing with shaders, we’ll look at each technique through p5.js examples.

I think it would help to state those advantages explicitly here, before getting into the examples. The clearest summary is actually at the end of the article in Wrapping Up:

you can keep on writing JavaScript using familiar p5.js syntax and type less code.

That feels like the main value proposition and I'd put it near the top so people know why they should read on.

The article also says:

One sketch will show an approach in p5.strands, while another will compare it with GLSL, a popular language for writing shaders in the browser.

I think the intended audience is a bit unclear here. If the reader needs GLSL defined in that way, then the repeated GLSL comparisons probably won’t mean much to them, and they would be better served by a tutorial about p5.strands with no reference to GLSL at all.

Conversely, since the GLSL comparison is the main way the article explains the value of p5.strands, I’d assume some basic familiarity with GLSL and frame the article around that. In fact, I’d suggest making that explicit in the title.

p5.strands vs. GLSL Shaders: Comparing Ways to Work with Color

I imagine one of the first questions people will have about p5.strands is: "why would I use this instead of writing GLSL?" The article is already well positioned to answer that. It just needs a clearer framing.

On that topic, I'd suggest placing the GLSL examples to the left and p5.strands to the right.

In left-to-right languages at least, the expectation when two similar things are presented side-by-side, typically is that the one one the left is BEFORE and the one on the right is AFTER. Putting strands on the left and GLSL on the right makes it seem like strands is the old way and GLSL is the new way. So I'd swap them in tables and sketch examples.

On a side note (not a blocker): it might be helpful to introduce a component for multi-language examples like these (with tabs).

[ksen0]

Thanks @SableRaf ! I think most of those edits make sense. @ilithya I can put in the edits (and I got some good feedback on Friday about the cheatsheet WIP](https://xnze.ro/p5.strands/) so if I manage to polish it I'll include the link, otherwise could comment it out.) I'd love to publish tomorrow or the day after as originally intended, please let me know if you'd prefer for me to wait fo r you to make edits yourself or if you're alright with me finishing up to merge!

[ilithya]

@ksen0 Yes, please go ahead and make the necessary edits yourself so you can go online as plan without waiting too long, as they're tiny little things I was also waiting for as left in my comments last week (cheat sheet link and scrollable component).

Your cheat sheet is looking great compared to the diagram I saw last. Great job! One tiny feedback, I wonder if you could highlight in the code the built-in, hook or setup chose on mouseover for a faster glance.

@skyyash made a good point with the links, I checked all tutorials and since they all use markdown links none are with target="_blank", so also please feel free to either add HTML links instead or maybe there's a fix as I read in the replies.

@SableRaf Thx so much for the feedback! I'll let Kit take on that.

Also, good point with the left-right switch between p5.strands vs GLSL, if we switch that, just don't forget the tables, the sketches and in the "Wrapping up" I also had a code example with first p5.strands and then GLSL.

About the article title, I think we were settle with the one we have and the fact that the tutorial is focus on this premise of learning color and also a bit of what a fragment shader is, to better understand what even p5.strands is doing, which are the first two paragraphs in the tutorial intro.

I thought a new person knowing 0 from shaders could read this and learn what a shader is and why you might need p5.strands for it, and not only p5.js, and if an experienced shader artist instead read this, they also learn why could they use p5.strands instead of writing GLSL with p5.js.

Anyways, those are my 2 cents. But please, apply any feedback you feel necessary, even after reading me!

[ksen0]

Thanks for your support @ilithya also the quick email responses! I just made updates., I'm adding all the GLSL and p5 built-ins to the interactive reference sheet, and when that's at least informationally complete (I know many improvements are possible and it will be a WIP I'm sure! but for now I hope it can be better than inspecting code directly) I will merge this in.