From f7058d7dda51d5184c0908ebe60b6e8e8d3f5f53 Mon Sep 17 00:00:00 2001 From: nbogie Date: Sun, 25 Jan 2026 01:46:35 +0000 Subject: [PATCH 1/4] Add getTexture docs and examples --- src/strands/p5.strands.js | 88 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 88 insertions(+) diff --git a/src/strands/p5.strands.js b/src/strands/p5.strands.js index 7d212c332d..1eed4907e0 100644 --- a/src/strands/p5.strands.js +++ b/src/strands/p5.strands.js @@ -680,6 +680,94 @@ if (typeof p5 !== "undefined") { * */ +/** + * @method getTexture + * @description + * Retrieves the current color of a given texture at given coordinates. The coordinates should be between [0, 0] representing the top-left of the texture, and [1, 1] representing the bottom-right of the texture. The retrieved color will be a vec4, with components for red, green, blue, and alpha, each between 0.0 and 1.0. + * + * @param {sampler2D} texture + * The texture to sample from. + * @param {vec2} coords +* The coordinates to sample from, from (0,0) (top-left) to (1,1) (bottom-right) of texture. + * @returns {vec4} The color of the given texture at the given coordinates, in RGBA, + * with each element being between 0.0 and 1.0. + * + * @example + *
+ * + * let myColorFlipShader; + * + * function setup() { + * createCanvas(100, 100); + * myColorFlipShader = baseFilterShader().modify(setupMyShader); + * } + * + * function draw() { + * background(200); + * stroke("green"); + * strokeWeight(10); + * fill("red"); + * circle(50, 50, 70); + * + * //try commenting this out + * filter(myColorFlipShader); + * } + * + * function setupMyShader() { + * getColor((inputs, canvasContent) => { + * //get the color at the current coordinate + * let c = getTexture(canvasContent, inputs.texCoord); + * //return a new color formed by inverting + * //each channel: r, g, b + * return [1 - c.r, 1 - c.g, 1 - c.b, c.a]; + * }); + * } + * + * + * @example + *
+ * + * let myShader; + * + * function setup() { + * createCanvas(100, 100); + * myShader = baseFilterShader().modify(setupMyShader); + * } + * + * function draw() { + * background(50); + * noStroke(); + * textSize(70); + * fill("orange"); + * textAlign(CENTER, CENTER); + * text("p5", width / 2, height / 2); + * fill("skyblue"); + * circle(mouseX, mouseY, 40); + * + * //try commenting this out + * filter(myShader); + * } + * + * function setupMyShader(){ + * getColor((inputs, canvasContent) => { + * let coordHere = inputs.texCoord; + * //some small amount to the right + * let coordRight = inputs.texCoord + [0.01, 0]; + * + * let colorHere = getTexture(canvasContent, coordHere); + * let colorRight = getTexture(canvasContent, coordRight); + * //a naive difference between the two colours + * let difference = length(abs(colorHere - colorRight)); + * if (difference > 0.2) { + * return [1, 1, 1, 1]; + * } + * return [0, 0, 0, 1]; + * }); + * } + * + *
+ */ + /** * @method getWorldInputs * @param {Function} callback From e1d6c013d045495777c3e649c056ed7bac9a344a Mon Sep 17 00:00:00 2001 From: nbogie Date: Sun, 25 Jan 2026 05:07:55 +0000 Subject: [PATCH 2/4] getTexture docs: placate eslint --- src/strands/p5.strands.js | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/strands/p5.strands.js b/src/strands/p5.strands.js index 1eed4907e0..64e893b7dc 100644 --- a/src/strands/p5.strands.js +++ b/src/strands/p5.strands.js @@ -688,7 +688,7 @@ if (typeof p5 !== "undefined") { * @param {sampler2D} texture * The texture to sample from. * @param {vec2} coords -* The coordinates to sample from, from (0,0) (top-left) to (1,1) (bottom-right) of texture. + * The coordinates to sample from, from (0,0) (top-left) to (1,1) (bottom-right) of texture. * @returns {vec4} The color of the given texture at the given coordinates, in RGBA, * with each element being between 0.0 and 1.0. * @@ -696,12 +696,12 @@ if (typeof p5 !== "undefined") { *
* * let myColorFlipShader; - * + * * function setup() { * createCanvas(100, 100); * myColorFlipShader = baseFilterShader().modify(setupMyShader); * } - * + * * function draw() { * background(200); * stroke("green"); @@ -712,15 +712,15 @@ if (typeof p5 !== "undefined") { * //try commenting this out * filter(myColorFlipShader); * } - * + * * function setupMyShader() { * getColor((inputs, canvasContent) => { * //get the color at the current coordinate * let c = getTexture(canvasContent, inputs.texCoord); - * //return a new color formed by inverting + * //return a new color formed by inverting * //each channel: r, g, b * return [1 - c.r, 1 - c.g, 1 - c.b, c.a]; - * }); + * }); * } * * @@ -728,14 +728,14 @@ if (typeof p5 !== "undefined") { *
* * let myShader; - * + * * function setup() { * createCanvas(100, 100); - * myShader = baseFilterShader().modify(setupMyShader); + * myShader = baseFilterShader().modify(setupMyShader); * } - * + * * function draw() { - * background(50); + * background(50); * noStroke(); * textSize(70); * fill("orange"); @@ -743,24 +743,24 @@ if (typeof p5 !== "undefined") { * text("p5", width / 2, height / 2); * fill("skyblue"); * circle(mouseX, mouseY, 40); - * + * * //try commenting this out * filter(myShader); * } - * + * * function setupMyShader(){ - * getColor((inputs, canvasContent) => { + * getColor((inputs, canvasContent) => { * let coordHere = inputs.texCoord; * //some small amount to the right * let coordRight = inputs.texCoord + [0.01, 0]; - * + * * let colorHere = getTexture(canvasContent, coordHere); * let colorRight = getTexture(canvasContent, coordRight); * //a naive difference between the two colours * let difference = length(abs(colorHere - colorRight)); * if (difference > 0.2) { * return [1, 1, 1, 1]; - * } + * } * return [0, 0, 0, 1]; * }); * } From a70da07f2fc61d13a92647ec3f89e5b6c3524924 Mon Sep 17 00:00:00 2001 From: nbogie Date: Sun, 25 Jan 2026 07:33:58 +0000 Subject: [PATCH 3/4] getTexture docs: correct types --- src/strands/p5.strands.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/strands/p5.strands.js b/src/strands/p5.strands.js index 64e893b7dc..f3228bfbca 100644 --- a/src/strands/p5.strands.js +++ b/src/strands/p5.strands.js @@ -685,11 +685,11 @@ if (typeof p5 !== "undefined") { * @description * Retrieves the current color of a given texture at given coordinates. The coordinates should be between [0, 0] representing the top-left of the texture, and [1, 1] representing the bottom-right of the texture. The retrieved color will be a vec4, with components for red, green, blue, and alpha, each between 0.0 and 1.0. * - * @param {sampler2D} texture + * @param {typeof sampler2D} texture * The texture to sample from. - * @param {vec2} coords + * @param {typeof vec2} coords * The coordinates to sample from, from (0,0) (top-left) to (1,1) (bottom-right) of texture. - * @returns {vec4} The color of the given texture at the given coordinates, in RGBA, + * @returns {typeof vec4} The color of the given texture at the given coordinates, in RGBA, * with each element being between 0.0 and 1.0. * * @example From 221fb04d80c5b5ff29b0a42e516d55c052b7ba72 Mon Sep 17 00:00:00 2001 From: nbogie Date: Sun, 25 Jan 2026 08:49:25 +0000 Subject: [PATCH 4/4] link getTexture docs from buildFilterShader --- src/webgl/material.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/webgl/material.js b/src/webgl/material.js index 36fc3e6ddc..9f40932fbc 100644 --- a/src/webgl/material.js +++ b/src/webgl/material.js @@ -562,6 +562,7 @@ function material(p5, fn) { * In your function, you can use `filterColor` with a function * that will be called for each pixel on the image to determine its final color. You can * read the color of the current pixel with `getTexture(canvasContent, coord)`. + * See getTexture(). * * ```js example * async function setup() {