Add shader examples to noise random and millis functions

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) {

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

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) {