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".

[ilithya]

@ksen0 I tried adding to this sketch the new scrollable component with the attribute scrollable={true} and while it works, the height of the code box is 300px.

I tried adding height={800} too, but I see this is meant for the embed sketch, not the code.

Is there a way I can setup the height of the code box only? I was hoping to match the height of the p5.strands box to the left in each GLSL example, and only make the GLSL sketches scrollable.

Here is a mock-up of what I wonder if possible with this component?

[ilithya]

@ksen0 Lmk if I should wait for a link for this, or remove it. Thx!

[skyyash]

should we open markdown links in new tabs??

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

target-blank.mp4