Add shader examples to noise random and millis functions#8803
Open
SOUMITRO-SAHA wants to merge 1 commit into
Open
Add shader examples to noise random and millis functions#8803SOUMITRO-SAHA wants to merge 1 commit into
SOUMITRO-SAHA wants to merge 1 commit 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
17 tasks
nbogie
reviewed
May 16, 2026
| * 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)); |
Contributor
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
Contributor
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.
| * filterColor.begin(); | ||
| * let coord = filterColor.texCoord; | ||
| * let t = millis() / 2000; | ||
| * let value = noise(coord.x * 5, coord.y * 5, t); |
Contributor
There was a problem hiding this comment.
I think it's worth commenting on what range of values noise will return here.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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