diff --git a/src/strands/p5.strands.js b/src/strands/p5.strands.js
index 73ca29c412..9b58389174 100644
--- a/src/strands/p5.strands.js
+++ b/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');
@@ -311,9 +310,7 @@ if (typeof p5 !== "undefined") {
* A value between `0.0` and `1.0`
*
* @example
- *
- *
* // A filter shader (using p5.strands) which will
* // sample and invert the color of each pixel
* // from the canvas.
@@ -827,12 +811,8 @@ if (typeof p5 !== "undefined") {
*
* filterColor.end();
* }
- *
- *
*
* @example
- *
- *
* // This primitive edge-detection filter samples
* // and compares the colors of the current pixel
* // on the canvas, and a little to the right.
@@ -889,8 +869,6 @@ if (typeof p5 !== "undefined") {
* rotate(frameCount / 300);
* square(0, 0, 30);
* }
- *
- *
*/
/**
diff --git a/src/webgl/material.js b/src/webgl/material.js
index cbdc91110d..2e1bc0c7e1 100644
--- a/src/webgl/material.js
+++ b/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++) {
diff --git a/src/webgl/p5.Shader.js b/src/webgl/p5.Shader.js
index aebd0426e6..6cad5b6cfe 100644
--- a/src/webgl/p5.Shader.js
+++ b/src/webgl/p5.Shader.js
@@ -206,24 +206,28 @@ 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;
@@ -231,6 +235,10 @@ class Shader {
* });
* }
*
+ * function mouseDragged(){
+ * moveCounter += 1;
+ * }
+ *
* function draw() {
* background(255);
* noStroke(255);