Skip to content

change strands examples to use millis() not uniform #8648

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ksen0 merged 3 commits into from
Mar 16, 2026
+36 −60
Merged

change strands examples to use millis() not uniform #8648

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5e62309
use millis() not uniform in strands examples
nbogie Mar 16, 2026
8c02b5c
remove old div+code elements from examples
nbogie Mar 16, 2026
039eb1b
have smoothstep examples use buildFilterShader()
nbogie Mar 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 9 additions & 31 deletions src/strands/p5.strands.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -222,7 +222,6 @@ if (typeof p5 !== "undefined") {
* function draw() {
* background(255);
* shader(myShader);
* myShader.setUniform('t', millis());
* lights();
* noStroke();
* fill('red');
Expand Down Expand Up @@ -311,9 +310,7 @@ if (typeof p5 !== "undefined") {
* A value between `0.0` and `1.0`
*
* @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;
*
Expand All @@ -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);
* }
* </code>
* </div>
*
* @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];
Expand All @@ -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);
* }
* </code>
* </div>
*/

/**
Expand Down Expand Up @@ -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 *
Expand All @@ -501,7 +490,6 @@ if (typeof p5 !== "undefined") {
* function draw() {
* background(240);
* shader(myShader);
* myShader.setUniform('t', millis());
* lights();
* noStroke();
* fill('purple');
Expand Down Expand Up @@ -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);
Expand All @@ -702,7 +690,6 @@ if (typeof p5 !== "undefined") {
* function draw() {
* background(220);
* shader(myShader);
* myShader.setUniform('t', millis());
* noStroke();
* fill('orange');
* sphere(50);
Expand Down Expand Up @@ -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);
Expand All @@ -746,7 +733,6 @@ if (typeof p5 !== "undefined") {
* function draw() {
* background(200);
* shader(myShader);
* myShader.setUniform('t', millis());
* noStroke();
* fill('red');
* sphere(50);
Expand Down Expand Up @@ -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
* <div modernizr='webgl'>
* <code>
* // A filter shader (using p5.strands) which will
* // sample and invert the color of each pixel
* // from the canvas.
Expand Down Expand Up @@ -827,12 +811,8 @@ if (typeof p5 !== "undefined") {
*
* filterColor.end();
* }
* </code>
*
*
* @example
* <div modernizr='webgl'>
* <code>
* // This primitive edge-detection filter samples
* // and compares the colors of the current pixel
* // on the canvas, and a little to the right.
Expand Down Expand Up @@ -889,8 +869,6 @@ if (typeof p5 !== "undefined") {
* rotate(frameCount / 300);
* square(0, 0, 30);
* }
* </code>
* </div>
*/

/**
Expand Down
36 changes: 13 additions & 23 deletions src/webgl/material.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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];
* });
Expand Down Expand Up @@ -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;
Expand All @@ -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
Expand All @@ -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;
Expand All @@ -696,7 +695,7 @@ function material(p5, fn) {
* }
*
* function noiseShaderCallback() {
* let time = uniformFloat();
* let time = millis();
* filterColor.begin();
* let coord = filterColor.texCoord;
*
Expand All @@ -713,7 +712,6 @@ function material(p5, fn) {
* }
*
* function draw() {
* myFilter.setUniform("time", millis());
* filter(myFilter);
* }
* ```
Expand Down Expand Up @@ -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));
Expand All @@ -938,7 +936,6 @@ function material(p5, fn) {
*
* function draw() {
* background(245, 245, 220);
* myShader.setUniform('time', millis() / 1000);
* shader(myShader);
*
* rectMode(CENTER);
Expand Down Expand Up @@ -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);
Expand All @@ -1424,7 +1421,6 @@ function material(p5, fn) {
* function draw() {
* background(255);
* shader(myShader);
* myShader.setUniform('time', millis());
* lights();
* noStroke();
* fill('red');
Expand Down Expand Up @@ -1593,7 +1589,6 @@ function material(p5, fn) {
* function draw() {
* background(255);
* shader(myShader);
* myShader.setUniform('time', millis());
* lights();
* noStroke();
* fill('red');
Expand All @@ -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);
Expand Down Expand Up @@ -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);
Expand All @@ -1726,7 +1721,6 @@ function material(p5, fn) {
* function draw() {
* background(255);
* shader(myShader);
* myShader.setUniform('time', millis());
* noStroke();
* sphere(50);
* }
Expand Down Expand Up @@ -1812,7 +1806,6 @@ function material(p5, fn) {
* function draw() {
* background(255);
* shader(myShader);
* myShader.setUniform('time', millis());
* lights();
* noStroke();
* fill('red');
Expand All @@ -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);
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -1978,7 +1970,6 @@ function material(p5, fn) {
* function draw() {
* background(255);
* shader(myShader);
* myShader.setUniform('time', millis());
* lights();
* noStroke();
* fill('red');
Expand All @@ -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);
Expand Down Expand Up @@ -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
Expand All @@ -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++) {
Expand Down
Loading
Loading