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 - *
- * - * // Example 1: A soft vertical fade using smoothstep (no uniforms) + * // Example 1: A soft vertical fade using smoothstep * * let fadeShader; * @@ -332,31 +329,25 @@ if (typeof p5 !== "undefined") { * * function setup() { * createCanvas(300, 200, WEBGL); - * fadeShader = baseFilterShader().modify(fadeCallback); + * fadeShader = buildFilterShader(fadeCallback); * } * * function draw() { * background(0); * filter(fadeShader); * } - * - *
* * @example - *
- * - * // 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]; @@ -365,15 +356,13 @@ if (typeof p5 !== "undefined") { * * function setup() { * createCanvas(300, 200, WEBGL); - * animatedShader = baseFilterShader().modify(animatedFadeCallback); + * animatedShader = buildFilterShader(animatedFadeCallback); * } * * function draw() { * background(0); * filter(animatedShader); * } - * - *
*/ /** @@ -490,7 +479,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 +490,6 @@ if (typeof p5 !== "undefined") { * function draw() { * background(240); * shader(myShader); - * myShader.setUniform('t', millis()); * lights(); * noStroke(); * fill('purple'); @@ -692,7 +680,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 +690,6 @@ if (typeof p5 !== "undefined") { * function draw() { * background(220); * shader(myShader); - * myShader.setUniform('t', millis()); * noStroke(); * fill('orange'); * sphere(50); @@ -734,7 +721,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 +733,6 @@ if (typeof p5 !== "undefined") { * function draw() { * background(200); * shader(myShader); - * myShader.setUniform('t', millis()); * noStroke(); * fill('red'); * sphere(50); @@ -793,8 +779,6 @@ if (typeof p5 !== "undefined") { * will behave as a vec4 holding components r, g, b, and a (alpha), with each component being in the range 0.0 to 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);