From aaf35c519f2dda1d297161ca97ff326c58620782 Mon Sep 17 00:00:00 2001 From: SOUMITRO-SAHA Date: Sat, 16 May 2026 13:23:29 +0530 Subject: [PATCH 1/3] Add shader examples to noise random and millis functions 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 --- src/math/noise.js | 26 ++++++++++++++++++++++++++ src/math/random.js | 29 +++++++++++++++++++++++++++++ src/utilities/time_date.js | 28 ++++++++++++++++++++++++++++ 3 files changed, 83 insertions(+) diff --git a/src/math/noise.js b/src/math/noise.js index 16c08c484c..0b6444a6c9 100644 --- a/src/math/noise.js +++ b/src/math/noise.js @@ -227,6 +227,32 @@ function noise(p5, fn){ * } * } * } + * + * `noise()` can also be used in shaders with p5.strands. The following example + * uses `noise()` to create a cloud-like texture effect in a filter shader. + * + * ```js example + * let myFilter; + * + * function setup() { + * createCanvas(100, 100, WEBGL); + * myFilter = buildFilterShader(shaderCallback); + * describe('A cloud-like noise pattern.'); + * } + * + * function shaderCallback() { + * filterColor.begin(); + * 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)); + * filterColor.end(); + * } + * + * function draw() { + * filter(myFilter); + * } + * ``` */ fn.noise = function(x, y = 0, z = 0) { if (perlin == null) { diff --git a/src/math/random.js b/src/math/random.js index cd56ed5530..f6bc21eb3d 100644 --- a/src/math/random.js +++ b/src/math/random.js @@ -230,6 +230,35 @@ function random(p5, fn){ * // Draw the point. * point(x, y); * } + * + * `random()` can also be used in shaders with p5.strands. The following example + * uses `random()` to create varying colors on a shape. + * + * ```js example + * let myShader; + * + * function setup() { + * createCanvas(100, 100, WEBGL); + * myShader = buildColorShader(shaderCallback); + * describe('A sphere with randomly varying colors.'); + * } + * + * function shaderCallback() { + * let r = random(); + * let g = random(); + * let b = random(); + * finalColor.begin(); + * finalColor.set([r, g, b, 1]); + * finalColor.end(); + * } + * + * function draw() { + * background(220); + * shader(myShader); + * noStroke(); + * sphere(30); + * } + * ``` */ /** * @method random diff --git a/src/utilities/time_date.js b/src/utilities/time_date.js index 029b36a7cc..68aabfbc08 100644 --- a/src/utilities/time_date.js +++ b/src/utilities/time_date.js @@ -198,6 +198,34 @@ function timeDate(p5, fn){ * `The text "It took ${round(ms, 2)} ms to load the data" written in black on a gray background.` * ); * } + * + * `millis()` can also be used in shaders with p5.strands. The following example + * uses `millis()` to create time-based color transitions on a shape. + * + * ```js example + * let myShader; + * + * function setup() { + * createCanvas(100, 100, WEBGL); + * myShader = buildColorShader(shaderCallback); + * describe('A sphere whose color shifts over time.'); + * } + * + * function shaderCallback() { + * let t = millis() * 0.001; + * let value = 0.5 + 0.5 * sin(t); + * finalColor.begin(); + * finalColor.set(mix([0.2, 0.6, 0.8, 1], [0.8, 0.2, 0.6, 1], value)); + * finalColor.end(); + * } + * + * function draw() { + * background(220); + * shader(myShader); + * noStroke(); + * sphere(30); + * } + * ``` */ fn.millis = function() { if (this._millisStart === -1) { From 18f0808bf847494fd766c2615a37d646afaa3bd9 Mon Sep 17 00:00:00 2001 From: SOUMITRO-SAHA Date: Mon, 18 May 2026 15:58:37 +0530 Subject: [PATCH 2/3] - Use named color variables in examples --- src/math/noise.js | 6 ++++-- src/utilities/time_date.js | 4 +++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/math/noise.js b/src/math/noise.js index 0b6444a6c9..82b3f1f2cb 100644 --- a/src/math/noise.js +++ b/src/math/noise.js @@ -244,8 +244,10 @@ function noise(p5, fn){ * filterColor.begin(); * 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)); + * let mixFraction = noise(coord.x * 5, coord.y * 5, t); + * let darkBlue = [0.1, 0.1, 0.3, 1]; + * let lightBlue = [0.9, 0.9, 1, 1]; + * filterColor.set(mix(darkBlue, lightBlue, mixFraction)); * filterColor.end(); * } * diff --git a/src/utilities/time_date.js b/src/utilities/time_date.js index 68aabfbc08..5b85c4dcbb 100644 --- a/src/utilities/time_date.js +++ b/src/utilities/time_date.js @@ -214,8 +214,10 @@ function timeDate(p5, fn){ * function shaderCallback() { * let t = millis() * 0.001; * let value = 0.5 + 0.5 * sin(t); + * let skyBlue = [0.2, 0.6, 0.8, 1]; + * let magenta = [0.8, 0.2, 0.6, 1]; * finalColor.begin(); - * finalColor.set(mix([0.2, 0.6, 0.8, 1], [0.8, 0.2, 0.6, 1], value)); + * finalColor.set(mix(skyBlue, magenta, value)); * finalColor.end(); * } * From b69210df2c09543cefbd4beae7ad8a25068a9c6f Mon Sep 17 00:00:00 2001 From: SOUMITRO-SAHA Date: Mon, 18 May 2026 16:49:26 +0530 Subject: [PATCH 3/3] Add noise() return range comment per review feedback --- src/math/noise.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/math/noise.js b/src/math/noise.js index 82b3f1f2cb..2752115494 100644 --- a/src/math/noise.js +++ b/src/math/noise.js @@ -228,8 +228,9 @@ function noise(p5, fn){ * } * } * - * `noise()` can also be used in shaders with p5.strands. The following example - * uses `noise()` to create a cloud-like texture effect in a filter shader. + * `noise()` can also be used in shaders with p5.strands, where it returns + * values in the range 0 to 1. The following example uses `noise()` to create + * a cloud-like texture effect in a filter shader. * * ```js example * let myFilter; @@ -244,6 +245,7 @@ function noise(p5, fn){ * filterColor.begin(); * let coord = filterColor.texCoord; * let t = millis() / 2000; + * // noise() returns values in the range 0 to 1. * let mixFraction = noise(coord.x * 5, coord.y * 5, t); * let darkBlue = [0.1, 0.1, 0.3, 1]; * let lightBlue = [0.9, 0.9, 1, 1];