use millis() not uniform in strands examples

Author: nbogie

src/strands/p5.strands.js

@@ -210,7 +210,7 @@ if (typeof p5 !== "undefined") {
  * }
  *
  * function material() {
- *   let t = uniformFloat();
+ *   let t = millis();
  *   worldInputs.begin();
  *   // Move the vertex up and down in a wave in world space
  *   // In world space, moving the object (e.g., with translate()) will affect these coordinates
@@ -222,7 +222,6 @@ if (typeof p5 !== "undefined") {
  * function draw() {
  *   background(255);
  *   shader(myShader);
- *   myShader.setUniform('t', millis());
  *   lights();
  *   noStroke();
  *   fill('red');
@@ -313,7 +312,7 @@ if (typeof p5 !== "undefined") {
  * @example
  * <div modernizr="webgl">
  * <code>
- * // Example 1: A soft vertical fade using smoothstep (no uniforms)
+ * // Example 1: A soft vertical fade using smoothstep
  *
  * let fadeShader;
  *
@@ -345,18 +344,16 @@ if (typeof p5 !== "undefined") {
  * @example
  * <div modernizr="webgl">
  * <code>
- * // Example 2: Animate the smooth transition using a uniform
+ * // Example 2: Animate the smooth transition over time
  *
  * let animatedShader;
  *
  * function animatedFadeCallback() {
- *   const time = uniformFloat(() => millis() * 0.001);
- *
  *   getColor((inputs) => {
  *     let x = inputs.texCoord.x;
  *
  *     // Move the smoothstep band back and forth over time
- *     let center = 0.5 + 0.25 * sin(time);
+ *     let center = 0.5 + 0.25 * sin(millis() * 0.001);
  *     let t = smoothstep(center - 0.05, center + 0.05, x);
  *
  *     return [t, t, t, 1];
@@ -490,7 +487,7 @@ if (typeof p5 !== "undefined") {
  * }
  *
  * function material() {
- *   let t = uniformFloat();
+ *   let t = millis();
  *   pixelInputs.begin();
  *   // Animate alpha (transparency) based on x position
  *   pixelInputs.color.a = 0.5 + 0.5 *
@@ -501,7 +498,6 @@ if (typeof p5 !== "undefined") {
  * function draw() {
  *   background(240);
  *   shader(myShader);
- *   myShader.setUniform('t', millis());
  *   lights();
  *   noStroke();
  *   fill('purple');
@@ -692,7 +688,7 @@ if (typeof p5 !== "undefined") {
  * }
  *
  * function material() {
- *   let t = uniformFloat();
+ *   let t = millis();
  *   objectInputs.begin();
  *   // Create a sine wave along the object
  *   objectInputs.position.y += sin(t * 0.001 + objectInputs.position.x);
@@ -702,7 +698,6 @@ if (typeof p5 !== "undefined") {
  * function draw() {
  *   background(220);
  *   shader(myShader);
- *   myShader.setUniform('t', millis());
  *   noStroke();
  *   fill('orange');
  *   sphere(50);
@@ -734,7 +729,7 @@ if (typeof p5 !== "undefined") {
  * }
  *
  * function material() {
- *   let t = uniformFloat();
+ *   let t = millis();
  *   cameraInputs.begin();
  *   // Move vertices in camera space based on their x position
  *   cameraInputs.position.y += 30 * sin(cameraInputs.position.x * 0.05 + t * 0.001);
@@ -746,7 +741,6 @@ if (typeof p5 !== "undefined") {
  * function draw() {
  *   background(200);
  *   shader(myShader);
- *   myShader.setUniform('t', millis());
  *   noStroke();
  *   fill('red');
  *   sphere(50);

src/webgl/material.js

@@ -411,7 +411,7 @@ function material(p5, fn) {
    *   // Make a version of the shader with a hook overridden
    *   modifiedShader = myShader.modify(() => {
    *     // Create new uniforms and override the getColor hook
-   *     let t = uniformFloat(() => millis() / 1000);
+   *     let t = millis() / 1000;
    *     getColor(() => {
    *       return [0, 0.5 + 0.5 * sin(t), 1, 1];
    *     });
@@ -657,7 +657,7 @@ function material(p5, fn) {
    * }
    * ```
    *
-   * You can also animate your filters over time by passing the time into the shader with `uniformFloat`.
+   * You can also animate your filters over time using the `millis()` function.
    *
    * ```js example
    * let myFilter;
@@ -668,7 +668,7 @@ function material(p5, fn) {
    * }
    *
    * function gradient() {
-   *   let time = uniformFloat();
+   *   let time = millis();
    *   filterColor.begin();
    *   filterColor.set(mix(
    *     [1, 0, 0, 1], // Red
@@ -679,12 +679,11 @@ function material(p5, fn) {
    * }
    *
    * function draw() {
-   *   myFilter.setUniform('time', millis());
    *   filter(myFilter);
    * }
    * ```
    *
-   * We can use the `noise()` function built into strands to generate a color for each pixel.  (Again no need here for underlying content for the filter to operate on.)  Again we'll animate by passing in an announced uniform variable  `time` with `setUniform()`, each frame.
+   * We can use the `noise()` function built into strands to generate a color for each pixel.  (Again no need here for underlying content for the filter to operate on.)  Again we'll animate by using the millis() function to get an up-to-date time value.
    *
    * ```js example
    * let myFilter;
@@ -696,7 +695,7 @@ function material(p5, fn) {
    * }
    *
    * function noiseShaderCallback() {
-   *   let time = uniformFloat();
+   *   let time = millis();
    *   filterColor.begin();
    *   let coord = filterColor.texCoord;
    *
@@ -713,7 +712,6 @@ function material(p5, fn) {
    * }
    *
    * function draw() {
-   *   myFilter.setUniform("time", millis());
    *   filter(myFilter);
    * }
    * ```
@@ -927,7 +925,7 @@ function material(p5, fn) {
    * }
    *
    * function material() {
-   *   let time = uniformFloat();
+   *   let time = millis() / 1000;
    *   finalColor.begin();
    *   let r = 0.2 + 0.5 * abs(sin(time + 0));
    *   let g = 0.2 + 0.5 * abs(sin(time + 1));
@@ -938,7 +936,6 @@ function material(p5, fn) {
    *
    * function draw() {
    *   background(245, 245, 220);
-   *   myShader.setUniform('time', millis() / 1000);
    *   shader(myShader);
    *
    *   rectMode(CENTER);
@@ -1414,7 +1411,7 @@ function material(p5, fn) {
    * }
    *
    * function material() {
-   *   let time = uniformFloat();
+   *   let time = millis();
    *   worldInputs.begin();
    *   worldInputs.position.y +=
    *     20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -1424,7 +1421,6 @@ function material(p5, fn) {
    * function draw() {
    *   background(255);
    *   shader(myShader);
-   *   myShader.setUniform('time', millis());
    *   lights();
    *   noStroke();
    *   fill('red');
@@ -1593,7 +1589,6 @@ function material(p5, fn) {
    * function draw() {
    *   background(255);
    *   shader(myShader);
-   *   myShader.setUniform('time', millis());
    *   lights();
    *   noStroke();
    *   fill('red');
@@ -1607,7 +1602,7 @@ function material(p5, fn) {
    *
    * ```js
    * // myMaterial.js
-   * let time = uniformFloat();
+   * let time = millis();
    * worldInputs.begin();
    * worldInputs.position.y +=
    *   20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -1716,7 +1711,7 @@ function material(p5, fn) {
    * }
    *
    * function material() {
-   *   let time = uniformFloat();
+   *   let time = millis();
    *   worldInputs.begin();
    *   worldInputs.position.y +=
    *     20. * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -1726,7 +1721,6 @@ function material(p5, fn) {
    * function draw() {
    *   background(255);
    *   shader(myShader);
-   *   myShader.setUniform('time', millis());
    *   noStroke();
    *   sphere(50);
    * }
@@ -1812,7 +1806,6 @@ function material(p5, fn) {
    * function draw() {
    *   background(255);
    *   shader(myShader);
-   *   myShader.setUniform('time', millis());
    *   lights();
    *   noStroke();
    *   fill('red');
@@ -1826,7 +1819,7 @@ function material(p5, fn) {
    *
    * ```js
    * // myMaterial.js
-   * let time = uniformFloat();
+   * let time = millis();
    * worldInputs.begin();
    * worldInputs.position.y +=
    *   20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -1919,7 +1912,7 @@ function material(p5, fn) {
    * }
    *
    * function material() {
-   *   let time = uniformFloat();
+   *   let time = millis();
    *   worldInputs.begin();
    *   worldInputs.position.y +=
    *     20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -1929,7 +1922,6 @@ function material(p5, fn) {
    * function draw() {
    *   background(255);
    *   shader(myShader);
-   *   myShader.setUniform('time', millis());
    *   noStroke();
    *   fill('red');
    *   circle(0, 0, 50);
@@ -1978,7 +1970,6 @@ function material(p5, fn) {
    * function draw() {
    *   background(255);
    *   shader(myShader);
-   *   myShader.setUniform('time', millis());
    *   lights();
    *   noStroke();
    *   fill('red');
@@ -1992,7 +1983,7 @@ function material(p5, fn) {
    *
    * ```js
    * // myMaterial.js
-   * let time = uniformFloat();
+   * let time = millis();
    * worldInputs.begin();
    * worldInputs.position.y +=
    *   20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -2164,7 +2155,7 @@ function material(p5, fn) {
    * }
    *
    * function material() {
-   *   let time = uniformFloat();
+   *   let time = millis();
    *   worldInputs.begin();
    *   // Add a somewhat random offset to the weight
    *   // that varies based on position and time
@@ -2180,7 +2171,6 @@ function material(p5, fn) {
    * function draw() {
    *   background(255);
    *   strokeShader(myShader);
-   *   myShader.setUniform('time', millis());
    *   strokeWeight(10);
    *   beginShape();
    *   for (let i = 0; i <= 50; i++) {

src/webgl/p5.Shader.js

@@ -206,31 +206,39 @@ class Shader {
    *
    * In addition to calling hooks, you can create uniforms, which are special variables
    * used to pass data from p5.js into the shader. They can be created by calling `uniform` + the
-   * type of the data, such as `uniformFloat` for a number of `uniformVector2` for a two-component vector.
+   * type of the data, such as `uniformFloat` for a number or `uniformVector2` for a two-component vector.
    * They take in a function that returns the data for the variable. You can then reference these
    * variables in your hooks, and their values will update every time you apply
-   * the shader with the result of your function.
+   * the shader with the result of your function.  
+   * 
+   * Move the mouse over this sketch to increase the moveCounter which will be passed to the shader as a uniform.
    *
    * ```js example
    * let myShader;
-   *
+   * //count of frames in which mouse has been moved
+   * let moveCounter = 0;
+   * 
    * function setup() {
    *   createCanvas(200, 200, WEBGL);
    *   myShader = baseMaterialShader().modify(() => {
-   *     // Get the current time from p5.js
-   *     let t = uniformFloat(() => millis());
+   *     // Get the move counter from our sketch
+   *     let count = uniformFloat(() => moveCounter);
    *
    *     getPixelInputs((inputs) => {
    *       inputs.color = [
    *         inputs.texCoord,
-   *         sin(t * 0.01) / 2 + 0.5,
+   *         sin(count/100) / 2 + 0.5,
    *         1,
    *       ];
    *       return inputs;
    *     });
    *   });
    * }
    *
+   * function mouseDragged(){
+   *   moveCounter += 1;
+   * }
+   *
    * function draw() {
    *   background(255);
    *   noStroke(255);