Add shader examples to noise random and millis functions#8803
Conversation
Add practical examples showing how noise random and millis can be used with p5.strands shader system including complete working code examples for cloud effects random colors and time-based transitions
| * let coord = filterColor.texCoord; | ||
| * let t = millis() / 2000; | ||
| * let value = noise(coord.x * 5, coord.y * 5, t); | ||
| * filterColor.set(mix([0.1, 0.1, 0.3, 1], [0.9, 0.9, 1, 1], value)); |
There was a problem hiding this comment.
I think this could better be split out fully:
let mixFraction = noise( /* ... omitted... */)
let color1 = [0.1, 0.1, 0.3, 1];
let color2 = //etc
let mixedColor = mix(color1, color2, mixFraction)
filterColor.set(mixedColor)Reasoning:
- this might be read by someone coming to strands for the first time, who loves noise() and is excited to move on with it. The more we can do to reduce the chance of overwhelming them, the better.
- shorter lines are also more readable on lower-res devices without wrap
- separate lines allow easier experimentation and replacement in the editable sketch with less chance of the user getting in a mess
There was a problem hiding this comment.
I wonder if a second example showing the effects of noiseDetail would be suitable here, too (perhaps driven by the mouseX)? I guess that's for the noiseDetail() page itself but I worry about lesser discoverability of that.
There was a problem hiding this comment.
Sure! I'll add a second inline example on the noise() page showing noiseDetail() driven by mouseX. That way readers see both functions together without having to hunt for noiseDetail(). Pushing shortly!
| * filterColor.begin(); | ||
| * let coord = filterColor.texCoord; | ||
| * let t = millis() / 2000; | ||
| * let value = noise(coord.x * 5, coord.y * 5, t); |
There was a problem hiding this comment.
I think it's worth commenting on what range of values noise will return here.
perminder-17
left a comment
perminder-17
left a comment
There was a problem hiding this comment.
Looks good to me. Thanks @nbogie for the review, and @SOUMITRO-SAHA for the work on it.
| * point(x, y); | ||
| * } | ||
| * | ||
| * `random()` can also be used in shaders with p5.strands. The following example |
There was a problem hiding this comment.
I think this has the same issue as before where the examples won't render because we have description + js example code fences below an @example tag -- we may need to do a follow-up PR fixing this one up
There was a problem hiding this comment.
aah, yes. Idk, how I missed this one. Will be opening up a follow-up PR now and will merge this one. Thanks for the finding.
There was a problem hiding this comment.
No problem, pretty hard to catch these except by testing on the website repo, which is pretty time consuming. Thanks for checking that on some of the other PRs, which alerted me to this being a potential problem!
There was a problem hiding this comment.
Thanks @perminder-17 for jumping on this fix! I'm sorry you had to do the extra work here. I wasn't previously aware of how to test the documentation rendering locally via the p5.js website, so I appreciate you explaining the setup. I've now pushed format fixes (@example → ``js example` fences) for #8801 and #8802
4 participants
Resolves #8777 (Noise, Random, Time batch)
Changes:
Adds inline
p5.strandsexamples to the reference documentation for 3 functions across 3 files:src/math/noise.jsnoise()— cloud-like texture effect usingbuildFilterShader()withfilterColorsrc/math/random.jsrandom()— random RGB colors on a shapesrc/utilities/time_date.jsmillis()— time-based color transitionsEach example includes a brief explanation that the function can be used in shaders with p5.strands. The
noise()example demonstratesbuildFilterShader()for 2D filter effects, whilerandom()andmillis()usebuildColorShader().Screenshots of the change:
PR Checklist
npm run lintpasses