Add shader examples to trigonometric functions#8801
Conversation
Add shader examples using p5.strands for acos, asin, atan, cos, sin, tan, degrees, and radians functions to demonstrate their usage in shader contexts.
|
🎉 Thanks for opening this pull request! For guidance on contributing, check out our contributor guidelines and other resources for contributors! Thank You! |
| * let t = millis() * 0.001; | ||
| * let value = asin(sin(t)) / (PI / 2); | ||
| * finalColor.begin(); | ||
| * finalColor.set(mix([0, 1, 0.5, 1], [0.5, 0, 1, 1], 0.5 + 0.5 * value)); |
There was a problem hiding this comment.
Maybe pull out the colour arguments into their own colours to make this line less complex.
There was a problem hiding this comment.
Good point! I'll extract the colors into named variables for clarity. Something like:
function shaderCallback() {
let t = millis() * 0.001;
let value = (asin(sin(t)) / (PI / 2) + 1) * 0.5;
let green = [0, 1, 0.5, 1];
let purple = [0.5, 0, 1, 1];
finalColor.begin();
finalColor.set(mix(green, purple, value));
finalColor.end();
}This also normalizes value to 0-1 earlier, which addresses your second point about consistency. I'll push this update!
| * | ||
| * function shaderCallback() { | ||
| * let t = millis() * 0.001; | ||
| * let value = atan(tan(t)) / (PI / 2); |
There was a problem hiding this comment.
It'd be great if a demo of atan didn't also involve atan of tan!
There was a problem hiding this comment.
I've simplified it to just atan(t) with a time-based input, which is much clearer for demonstrating the function. The updated example normalizes the result to 0-1 and uses named color variables for readability:
function shaderCallback() {
let t = millis() * 0.001;
let value = (atan(t) + PI / 2) / PI;
let pink = [1, 0, 0.5, 1];
let lime = [0.5, 1, 0, 1];
finalColor.begin();
finalColor.set(mix(pink, lime, value));
finalColor.end();
}This shows atan() converting a linear time value into an angle-based color transition.
| * let t = millis() * 0.001; | ||
| * let value = asin(sin(t)) / (PI / 2); | ||
| * finalColor.begin(); | ||
| * finalColor.set(mix([0, 1, 0.5, 1], [0.5, 0, 1, 1], 0.5 + 0.5 * value)); |
There was a problem hiding this comment.
in most of these you've set value to 0 to 1 earlier. that would also simplify this line and be more consistent.
|
Thanks @nbogie for the review! I've updated all examples to:
|
2 participants
Resolves #8777
Changes:
Adds inline p5.strands examples to the reference documentation for 8 trigonometry functions in src/math/trigonometry.js:
sin()— sine-driven color oscillationcos()— cosine-driven color oscillationtan()— rapid tangent-based color transitionsasin()— smooth color transition via asin(sin(t))acos()— pulsing color transition via acos(cos(t))atan()— sawtooth color effect via atan(tan(t))degrees()— convert radians to degrees in shaderradians()— convert degrees to radians in shaderEach example uses
buildColorShader()withfinalColor.begin()/end()and includes a brief explanation that the function can be used in shaders with p5.strands.Screenshots of the change:
Documentation-only change
PR Checklist
npm run lintpasses