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!