Skip to content

Add Shaders examples section + some new examples - #1635

Open
davepagurek wants to merge 4 commits into
mainfrom
strands-examples
Open

davepagurek wants to merge 4 commits into
mainfrom
strands-examples

Conversation

@davepagurek

Copy link
Copy Markdown
Collaborator

I was talking to @ksen0 about making the strands examples section more robust, with more entrypoints for people to learn about strands. This PR:

  • Moves shader examples (both strands and GLSL) to their own section
  • Adds three new simple examples:
    • doing a gradient between two points
    • doing a dithered gradient between two points
    • doing variable blur, stronger on the edge of the frame than the middle
  • Implements a strands version of the framebuffer depth blur example
  • Updates some metadata for the framebuffer depth blur
    • Renamed to "Depth blur" to describe more what it's doing
    • Updated the attribution history to be a bit more specific (the original 2023 version was from me)
image

@ksen0 ksen0 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for adding these, so exciting! I added some optional feedback.

gradientShader = buildFilterShader(gradient);
}

function gradient() {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it would be helpful to add some comments (same for all them) that demonstrate how we talk abotu p5.sstrands eg: the code inside gradient() is p5.strands code, which is not quite normal JavaScript: here GLSL can be used as well as p5.js, and these define shades. filterColor is a hook, and is used to define shader behavior. Tiny notes about that.

function gradient() {
filterColor.begin();
let start = [0.1, 0.1];
let end = [mouseX, mouseY] / [width, height];

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Every place where the sketch author needs to switch to [0,1] range logic could also use a comment imo

// randomSeed(floor(frameCount / 5))
let start = [0.1, 0.1];
let end = [mouseX, mouseY] / [width, height];
let startToPixel = length(filterColor.texCoord - start);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

explaining what texCoord here is, maybe spelling out "tex" is for "texture" in the comment?

let depth = uniformTexture('depth');

function getBlurriness(d) {
// Blur more the farther away we go from the

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

minor - naming: getTexture (strands, special) and getBlurriness (udf, arbitrary) are super different but kind of look/sound similar and are near each other. I know its clunky but maybe myBlurFunction instead of getBlurriness while a mouthful would highlight that this is not a special term of art, its just a sketch udf?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very minor: anyway this could be a little smaller in file size? It looks tiny so I wassurprised it's 1.7mb.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants