From 07c2431a6b9a222f9e58e7f5d0affb3041a52b7c Mon Sep 17 00:00:00 2001 From: SOUMITRO-SAHA Date: Sat, 16 May 2026 12:59:32 +0530 Subject: [PATCH 1/2] Add shader examples to trigonometric functions Add shader examples using p5.strands for acos, asin, atan, cos, sin, tan, degrees, and radians functions to demonstrate their usage in shader contexts. --- src/math/trigonometry.js | 227 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 227 insertions(+) diff --git a/src/math/trigonometry.js b/src/math/trigonometry.js index 0ca07bf84a..39facaa908 100644 --- a/src/math/trigonometry.js +++ b/src/math/trigonometry.js @@ -142,6 +142,34 @@ function trigonometry(p5, fn){ * * describe('The numbers 3.927, -0.707, and 2.356 written on separate rows.'); * } + * + * `acos()` can also be used in shaders with p5.strands. The following example + * uses `acos()` to create a pulsing color transition on a shape. + * + * ```js example + * let myShader; + * + * function setup() { + * createCanvas(100, 100, WEBGL); + * myShader = buildColorShader(shaderCallback); + * describe('A sphere that pulses between orange and teal.'); + * } + * + * function shaderCallback() { + * let t = millis() * 0.001; + * let value = acos(cos(t)) / PI; + * finalColor.begin(); + * finalColor.set(mix([1, 0.5, 0, 1], [0, 0.8, 0.8, 1], value)); + * finalColor.end(); + * } + * + * function draw() { + * background(220); + * shader(myShader); + * noStroke(); + * sphere(30); + * } + * ``` */ fn.acos = function(ratio) { return this._fromRadians(Math.acos(ratio)); @@ -197,6 +225,34 @@ function trigonometry(p5, fn){ * * describe('The numbers 4.189, -0.866, and -1.047 written on separate rows.'); * } + * + * `asin()` can also be used in shaders with p5.strands. The following example + * uses `asin()` to create a smooth color transition on a shape. + * + * ```js example + * let myShader; + * + * function setup() { + * createCanvas(100, 100, WEBGL); + * myShader = buildColorShader(shaderCallback); + * describe('A sphere with a green to purple gradient.'); + * } + * + * function shaderCallback() { + * 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)); + * finalColor.end(); + * } + * + * function draw() { + * background(220); + * shader(myShader); + * noStroke(); + * sphere(30); + * } + * ``` */ fn.asin = function(ratio) { return this._fromRadians(Math.asin(ratio)); @@ -252,6 +308,34 @@ function trigonometry(p5, fn){ * * describe('The numbers 4.189, 1.732, and 1.047 written on separate rows.'); * } + * + * `atan()` can also be used in shaders with p5.strands. The following example + * uses `atan()` to create a color effect based on an angle. + * + * ```js example + * let myShader; + * + * function setup() { + * createCanvas(100, 100, WEBGL); + * myShader = buildColorShader(shaderCallback); + * describe('A sphere whose color shifts with a sawtooth pattern.'); + * } + * + * function shaderCallback() { + * let t = millis() * 0.001; + * let value = atan(tan(t)) / (PI / 2); + * finalColor.begin(); + * finalColor.set(mix([1, 0, 0.5, 1], [0.5, 1, 0, 1], 0.5 + 0.5 * value)); + * finalColor.end(); + * } + * + * function draw() { + * background(220); + * shader(myShader); + * noStroke(); + * sphere(30); + * } + * ``` */ fn.atan = function(ratio) { return this._fromRadians(Math.atan(ratio)); @@ -393,6 +477,34 @@ function trigonometry(p5, fn){ * // Draw the point. * point(x, y); * } + * + * `cos()` can also be used in shaders with p5.strands. The following example + * uses `cos()` to smoothly oscillate the color of a shape over time. + * + * ```js example + * let myShader; + * + * function setup() { + * createCanvas(100, 100, WEBGL); + * myShader = buildColorShader(shaderCallback); + * describe('A sphere that fades between yellow and blue.'); + * } + * + * function shaderCallback() { + * let t = millis() * 0.001; + * let value = 0.5 + 0.5 * cos(t); + * finalColor.begin(); + * finalColor.set(mix([1, 1, 0, 1], [0, 0, 1, 1], value)); + * finalColor.end(); + * } + * + * function draw() { + * background(220); + * shader(myShader); + * noStroke(); + * sphere(30); + * } + * ``` */ fn.cos = function(angle) { return Math.cos(this._toRadians(angle)); @@ -464,6 +576,34 @@ function trigonometry(p5, fn){ * // Draw the point. * point(x, y); * } + * + * `sin()` can also be used in shaders with p5.strands. The following example + * uses `sin()` to oscillate the color of a shape over time. + * + * ```js example + * let myShader; + * + * function setup() { + * createCanvas(100, 100, WEBGL); + * myShader = buildColorShader(shaderCallback); + * describe('A sphere that pulses between cyan and magenta.'); + * } + * + * function shaderCallback() { + * let t = millis() * 0.001; + * let value = 0.5 + 0.5 * sin(t); + * finalColor.begin(); + * finalColor.set(mix([0, 1, 1, 1], [1, 0, 1, 1], value)); + * finalColor.end(); + * } + * + * function draw() { + * background(220); + * shader(myShader); + * noStroke(); + * sphere(30); + * } + * ``` */ fn.sin = function(angle) { return Math.sin(this._toRadians(angle)); @@ -499,6 +639,35 @@ function trigonometry(p5, fn){ * // Draw the point. * point(x, y); * } + * + * `tan()` can also be used in shaders with p5.strands. The following example + * uses `tan()` to create rapid color transitions on a shape. + * + * ```js example + * let myShader; + * + * function setup() { + * createCanvas(100, 100, WEBGL); + * myShader = buildColorShader(shaderCallback); + * describe('A sphere with rapidly shifting colors.'); + * } + * + * function shaderCallback() { + * let t = millis() * 0.0005; + * let value = 0.5 + 0.5 * tan(t); + * value = min(max(value, 0), 1); + * finalColor.begin(); + * finalColor.set(mix([1, 0.5, 0, 1], [0, 0.5, 1, 1], value)); + * finalColor.end(); + * } + * + * function draw() { + * background(220); + * shader(myShader); + * noStroke(); + * sphere(30); + * } + * ``` */ fn.tan = function(angle) { return Math.tan(this._toRadians(angle)); @@ -533,6 +702,35 @@ function trigonometry(p5, fn){ * * describe('The text "0.79 rad = 45˚".'); * } + * + * `degrees()` can also be used in shaders with p5.strands. The following example + * uses `degrees()` to convert a radian value to degrees inside a shader. + * + * ```js example + * let myShader; + * + * function setup() { + * createCanvas(100, 100, WEBGL); + * myShader = buildColorShader(shaderCallback); + * describe('A sphere that cycles through warm colors.'); + * } + * + * function shaderCallback() { + * let t = millis() * 0.001; + * let deg = degrees(t); + * let value = (deg % 360) / 360; + * finalColor.begin(); + * finalColor.set(mix([1, 0, 0, 1], [1, 1, 0, 1], value)); + * finalColor.end(); + * } + * + * function draw() { + * background(220); + * shader(myShader); + * noStroke(); + * sphere(30); + * } + * ``` */ fn.degrees = angle => angle * constants.RAD_TO_DEG; @@ -565,6 +763,35 @@ function trigonometry(p5, fn){ * * describe('The text "45˚ = 0.785 rad".'); * } + * + * `radians()` can also be used in shaders with p5.strands. The following example + * uses `radians()` to convert degrees to radians inside a shader. + * + * ```js example + * let myShader; + * + * function setup() { + * createCanvas(100, 100, WEBGL); + * myShader = buildColorShader(shaderCallback); + * describe('A sphere that fades between red and white.'); + * } + * + * function shaderCallback() { + * let deg = (millis() * 0.05) % 360; + * let rad = radians(deg); + * let value = 0.5 + 0.5 * sin(rad); + * finalColor.begin(); + * finalColor.set(mix([1, 0, 0, 1], [1, 1, 1, 1], value)); + * finalColor.end(); + * } + * + * function draw() { + * background(220); + * shader(myShader); + * noStroke(); + * sphere(30); + * } + * ``` */ fn.radians = angle => angle * constants.DEG_TO_RAD; From 0635e51e160db3d4eac0ae84aaf5d3ee4208c9bb Mon Sep 17 00:00:00 2001 From: SOUMITRO-SAHA Date: Sat, 16 May 2026 20:50:31 +0530 Subject: [PATCH 2/2] - Simplify trigonometry examples with named colors --- src/math/trigonometry.js | 39 +++++++++++++++++++++++++++------------ 1 file changed, 27 insertions(+), 12 deletions(-) diff --git a/src/math/trigonometry.js b/src/math/trigonometry.js index 39facaa908..e6fff6e883 100644 --- a/src/math/trigonometry.js +++ b/src/math/trigonometry.js @@ -158,8 +158,10 @@ function trigonometry(p5, fn){ * function shaderCallback() { * let t = millis() * 0.001; * let value = acos(cos(t)) / PI; + * let orange = [1, 0.5, 0, 1]; + * let teal = [0, 0.8, 0.8, 1]; * finalColor.begin(); - * finalColor.set(mix([1, 0.5, 0, 1], [0, 0.8, 0.8, 1], value)); + * finalColor.set(mix(orange, teal, value)); * finalColor.end(); * } * @@ -240,9 +242,11 @@ function trigonometry(p5, fn){ * * function shaderCallback() { * let t = millis() * 0.001; - * let value = asin(sin(t)) / (PI / 2); + * 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([0, 1, 0.5, 1], [0.5, 0, 1, 1], 0.5 + 0.5 * value)); + * finalColor.set(mix(green, purple, value)); * finalColor.end(); * } * @@ -323,9 +327,11 @@ function trigonometry(p5, fn){ * * function shaderCallback() { * let t = millis() * 0.001; - * let value = atan(tan(t)) / (PI / 2); + * 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([1, 0, 0.5, 1], [0.5, 1, 0, 1], 0.5 + 0.5 * value)); + * finalColor.set(mix(pink, lime, value)); * finalColor.end(); * } * @@ -493,8 +499,10 @@ function trigonometry(p5, fn){ * function shaderCallback() { * let t = millis() * 0.001; * let value = 0.5 + 0.5 * cos(t); + * let yellow = [1, 1, 0, 1]; + * let blue = [0, 0, 1, 1]; * finalColor.begin(); - * finalColor.set(mix([1, 1, 0, 1], [0, 0, 1, 1], value)); + * finalColor.set(mix(yellow, blue, value)); * finalColor.end(); * } * @@ -592,8 +600,10 @@ function trigonometry(p5, fn){ * function shaderCallback() { * let t = millis() * 0.001; * let value = 0.5 + 0.5 * sin(t); + * let cyan = [0, 1, 1, 1]; + * let magenta = [1, 0, 1, 1]; * finalColor.begin(); - * finalColor.set(mix([0, 1, 1, 1], [1, 0, 1, 1], value)); + * finalColor.set(mix(cyan, magenta, value)); * finalColor.end(); * } * @@ -654,10 +664,11 @@ function trigonometry(p5, fn){ * * function shaderCallback() { * let t = millis() * 0.0005; - * let value = 0.5 + 0.5 * tan(t); - * value = min(max(value, 0), 1); + * let value = min(max(0.5 + 0.5 * tan(t), 0), 1); + * let orange = [1, 0.5, 0, 1]; + * let blue = [0, 0.5, 1, 1]; * finalColor.begin(); - * finalColor.set(mix([1, 0.5, 0, 1], [0, 0.5, 1, 1], value)); + * finalColor.set(mix(orange, blue, value)); * finalColor.end(); * } * @@ -719,8 +730,10 @@ function trigonometry(p5, fn){ * let t = millis() * 0.001; * let deg = degrees(t); * let value = (deg % 360) / 360; + * let red = [1, 0, 0, 1]; + * let yellow = [1, 1, 0, 1]; * finalColor.begin(); - * finalColor.set(mix([1, 0, 0, 1], [1, 1, 0, 1], value)); + * finalColor.set(mix(red, yellow, value)); * finalColor.end(); * } * @@ -780,8 +793,10 @@ function trigonometry(p5, fn){ * let deg = (millis() * 0.05) % 360; * let rad = radians(deg); * let value = 0.5 + 0.5 * sin(rad); + * let red = [1, 0, 0, 1]; + * let white = [1, 1, 1, 1]; * finalColor.begin(); - * finalColor.set(mix([1, 0, 0, 1], [1, 1, 1, 1], value)); + * finalColor.set(mix(red, white, value)); * finalColor.end(); * } *