Add shader examples to noise random and millis functions#8803
Add shader examples to noise random and millis functions#8803SOUMITRO-SAHA wants to merge 3 commits into
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.
Continuous ReleaseCDN linkPublished PackagesCommit hash: aaf35c5 Previous deploymentsThis is an automated message. |
2 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