diff --git a/src/math/noise.js b/src/math/noise.js index 16c08c484c..2752115494 100644 --- a/src/math/noise.js +++ b/src/math/noise.js @@ -227,6 +227,36 @@ function noise(p5, fn){ * } * } * } + * + * `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; + * + * 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; + * // 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]; + * filterColor.set(mix(darkBlue, lightBlue, mixFraction)); + * 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..5b85c4dcbb 100644 --- a/src/utilities/time_date.js +++ b/src/utilities/time_date.js @@ -198,6 +198,36 @@ 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); + * let skyBlue = [0.2, 0.6, 0.8, 1]; + * let magenta = [0.8, 0.2, 0.6, 1]; + * finalColor.begin(); + * finalColor.set(mix(skyBlue, magenta, value)); + * finalColor.end(); + * } + * + * function draw() { + * background(220); + * shader(myShader); + * noStroke(); + * sphere(30); + * } + * ``` */ fn.millis = function() { if (this._millisStart === -1) {