Skip to content

Commit 4984799

Browse files
ksen0ksen0
authored
Merge pull request #8648 from nbogie/nb-replace-millis-in-strands-examples
change strands examples to use millis() not uniform
2 parents 12b54c1 + 039eb1b commit 4984799

File tree

3 files changed

+36
-60
lines changed

3 files changed

+36
-60
lines changed

‎src/strands/p5.strands.js‎

Lines changed: 9 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@ if (typeof p5 !== "undefined") {
210210
* }
211211
*
212212
* function material() {
213-
* let t = uniformFloat();
213+
* let t = millis();
214214
* worldInputs.begin();
215215
* // Move the vertex up and down in a wave in world space
216216
* // In world space, moving the object (e.g., with translate()) will affect these coordinates
@@ -222,7 +222,6 @@ if (typeof p5 !== "undefined") {
222222
* function draw() {
223223
* background(255);
224224
* shader(myShader);
225-
* myShader.setUniform('t', millis());
226225
* lights();
227226
* noStroke();
228227
* fill('red');
@@ -311,9 +310,7 @@ if (typeof p5 !== "undefined") {
311310
* A value between `0.0` and `1.0`
312311
*
313312
* @example
314-
* <div modernizr="webgl">
315-
* <code>
316-
* // Example 1: A soft vertical fade using smoothstep (no uniforms)
313+
* // Example 1: A soft vertical fade using smoothstep
317314
*
318315
* let fadeShader;
319316
*
@@ -332,31 +329,25 @@ if (typeof p5 !== "undefined") {
332329
*
333330
* function setup() {
334331
* createCanvas(300, 200, WEBGL);
335-
* fadeShader = baseFilterShader().modify(fadeCallback);
332+
* fadeShader = buildFilterShader(fadeCallback);
336333
* }
337334
*
338335
* function draw() {
339336
* background(0);
340337
* filter(fadeShader);
341338
* }
342-
* </code>
343-
* </div>
344339
*
345340
* @example
346-
* <div modernizr="webgl">
347-
* <code>
348-
* // Example 2: Animate the smooth transition using a uniform
341+
* // Example 2: Animate the smooth transition over time
349342
*
350343
* let animatedShader;
351344
*
352345
* function animatedFadeCallback() {
353-
* const time = uniformFloat(() => millis() * 0.001);
354-
*
355346
* getColor((inputs) => {
356347
* let x = inputs.texCoord.x;
357348
*
358349
* // Move the smoothstep band back and forth over time
359-
* let center = 0.5 + 0.25 * sin(time);
350+
* let center = 0.5 + 0.25 * sin(millis() * 0.001);
360351
* let t = smoothstep(center - 0.05, center + 0.05, x);
361352
*
362353
* return [t, t, t, 1];
@@ -365,15 +356,13 @@ if (typeof p5 !== "undefined") {
365356
*
366357
* function setup() {
367358
* createCanvas(300, 200, WEBGL);
368-
* animatedShader = baseFilterShader().modify(animatedFadeCallback);
359+
* animatedShader = buildFilterShader(animatedFadeCallback);
369360
* }
370361
*
371362
* function draw() {
372363
* background(0);
373364
* filter(animatedShader);
374365
* }
375-
* </code>
376-
* </div>
377366
*/
378367

379368
/**
@@ -490,7 +479,7 @@ if (typeof p5 !== "undefined") {
490479
* }
491480
*
492481
* function material() {
493-
* let t = uniformFloat();
482+
* let t = millis();
494483
* pixelInputs.begin();
495484
* // Animate alpha (transparency) based on x position
496485
* pixelInputs.color.a = 0.5 + 0.5 *
@@ -501,7 +490,6 @@ if (typeof p5 !== "undefined") {
501490
* function draw() {
502491
* background(240);
503492
* shader(myShader);
504-
* myShader.setUniform('t', millis());
505493
* lights();
506494
* noStroke();
507495
* fill('purple');
@@ -692,7 +680,7 @@ if (typeof p5 !== "undefined") {
692680
* }
693681
*
694682
* function material() {
695-
* let t = uniformFloat();
683+
* let t = millis();
696684
* objectInputs.begin();
697685
* // Create a sine wave along the object
698686
* objectInputs.position.y += sin(t * 0.001 + objectInputs.position.x);
@@ -702,7 +690,6 @@ if (typeof p5 !== "undefined") {
702690
* function draw() {
703691
* background(220);
704692
* shader(myShader);
705-
* myShader.setUniform('t', millis());
706693
* noStroke();
707694
* fill('orange');
708695
* sphere(50);
@@ -734,7 +721,7 @@ if (typeof p5 !== "undefined") {
734721
* }
735722
*
736723
* function material() {
737-
* let t = uniformFloat();
724+
* let t = millis();
738725
* cameraInputs.begin();
739726
* // Move vertices in camera space based on their x position
740727
* cameraInputs.position.y += 30 * sin(cameraInputs.position.x * 0.05 + t * 0.001);
@@ -746,7 +733,6 @@ if (typeof p5 !== "undefined") {
746733
* function draw() {
747734
* background(200);
748735
* shader(myShader);
749-
* myShader.setUniform('t', millis());
750736
* noStroke();
751737
* fill('red');
752738
* sphere(50);
@@ -793,8 +779,6 @@ if (typeof p5 !== "undefined") {
793779
* 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.
794780
*
795781
* @example
796-
* <div modernizr='webgl'>
797-
* <code>
798782
* // A filter shader (using p5.strands) which will
799783
* // sample and invert the color of each pixel
800784
* // from the canvas.
@@ -827,12 +811,8 @@ if (typeof p5 !== "undefined") {
827811
*
828812
* filterColor.end();
829813
* }
830-
* </code>
831-
*
832814
*
833815
* @example
834-
* <div modernizr='webgl'>
835-
* <code>
836816
* // This primitive edge-detection filter samples
837817
* // and compares the colors of the current pixel
838818
* // on the canvas, and a little to the right.
@@ -889,8 +869,6 @@ if (typeof p5 !== "undefined") {
889869
* rotate(frameCount / 300);
890870
* square(0, 0, 30);
891871
* }
892-
* </code>
893-
* </div>
894872
*/
895873

896874
/**

‎src/webgl/material.js‎

Lines changed: 13 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -411,7 +411,7 @@ function material(p5, fn) {
411411
* // Make a version of the shader with a hook overridden
412412
* modifiedShader = myShader.modify(() => {
413413
* // Create new uniforms and override the getColor hook
414-
* let t = uniformFloat(() => millis() / 1000);
414+
* let t = millis() / 1000;
415415
* getColor(() => {
416416
* return [0, 0.5 + 0.5 * sin(t), 1, 1];
417417
* });
@@ -657,7 +657,7 @@ function material(p5, fn) {
657657
* }
658658
* ```
659659
*
660-
* You can also animate your filters over time by passing the time into the shader with `uniformFloat`.
660+
* You can also animate your filters over time using the `millis()` function.
661661
*
662662
* ```js example
663663
* let myFilter;
@@ -668,7 +668,7 @@ function material(p5, fn) {
668668
* }
669669
*
670670
* function gradient() {
671-
* let time = uniformFloat();
671+
* let time = millis();
672672
* filterColor.begin();
673673
* filterColor.set(mix(
674674
* [1, 0, 0, 1], // Red
@@ -679,12 +679,11 @@ function material(p5, fn) {
679679
* }
680680
*
681681
* function draw() {
682-
* myFilter.setUniform('time', millis());
683682
* filter(myFilter);
684683
* }
685684
* ```
686685
*
687-
* 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.
686+
* 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.
688687
*
689688
* ```js example
690689
* let myFilter;
@@ -696,7 +695,7 @@ function material(p5, fn) {
696695
* }
697696
*
698697
* function noiseShaderCallback() {
699-
* let time = uniformFloat();
698+
* let time = millis();
700699
* filterColor.begin();
701700
* let coord = filterColor.texCoord;
702701
*
@@ -713,7 +712,6 @@ function material(p5, fn) {
713712
* }
714713
*
715714
* function draw() {
716-
* myFilter.setUniform("time", millis());
717715
* filter(myFilter);
718716
* }
719717
* ```
@@ -927,7 +925,7 @@ function material(p5, fn) {
927925
* }
928926
*
929927
* function material() {
930-
* let time = uniformFloat();
928+
* let time = millis() / 1000;
931929
* finalColor.begin();
932930
* let r = 0.2 + 0.5 * abs(sin(time + 0));
933931
* let g = 0.2 + 0.5 * abs(sin(time + 1));
@@ -938,7 +936,6 @@ function material(p5, fn) {
938936
*
939937
* function draw() {
940938
* background(245, 245, 220);
941-
* myShader.setUniform('time', millis() / 1000);
942939
* shader(myShader);
943940
*
944941
* rectMode(CENTER);
@@ -1414,7 +1411,7 @@ function material(p5, fn) {
14141411
* }
14151412
*
14161413
* function material() {
1417-
* let time = uniformFloat();
1414+
* let time = millis();
14181415
* worldInputs.begin();
14191416
* worldInputs.position.y +=
14201417
* 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -1424,7 +1421,6 @@ function material(p5, fn) {
14241421
* function draw() {
14251422
* background(255);
14261423
* shader(myShader);
1427-
* myShader.setUniform('time', millis());
14281424
* lights();
14291425
* noStroke();
14301426
* fill('red');
@@ -1593,7 +1589,6 @@ function material(p5, fn) {
15931589
* function draw() {
15941590
* background(255);
15951591
* shader(myShader);
1596-
* myShader.setUniform('time', millis());
15971592
* lights();
15981593
* noStroke();
15991594
* fill('red');
@@ -1607,7 +1602,7 @@ function material(p5, fn) {
16071602
*
16081603
* ```js
16091604
* // myMaterial.js
1610-
* let time = uniformFloat();
1605+
* let time = millis();
16111606
* worldInputs.begin();
16121607
* worldInputs.position.y +=
16131608
* 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -1716,7 +1711,7 @@ function material(p5, fn) {
17161711
* }
17171712
*
17181713
* function material() {
1719-
* let time = uniformFloat();
1714+
* let time = millis();
17201715
* worldInputs.begin();
17211716
* worldInputs.position.y +=
17221717
* 20. * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -1726,7 +1721,6 @@ function material(p5, fn) {
17261721
* function draw() {
17271722
* background(255);
17281723
* shader(myShader);
1729-
* myShader.setUniform('time', millis());
17301724
* noStroke();
17311725
* sphere(50);
17321726
* }
@@ -1812,7 +1806,6 @@ function material(p5, fn) {
18121806
* function draw() {
18131807
* background(255);
18141808
* shader(myShader);
1815-
* myShader.setUniform('time', millis());
18161809
* lights();
18171810
* noStroke();
18181811
* fill('red');
@@ -1826,7 +1819,7 @@ function material(p5, fn) {
18261819
*
18271820
* ```js
18281821
* // myMaterial.js
1829-
* let time = uniformFloat();
1822+
* let time = millis();
18301823
* worldInputs.begin();
18311824
* worldInputs.position.y +=
18321825
* 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -1919,7 +1912,7 @@ function material(p5, fn) {
19191912
* }
19201913
*
19211914
* function material() {
1922-
* let time = uniformFloat();
1915+
* let time = millis();
19231916
* worldInputs.begin();
19241917
* worldInputs.position.y +=
19251918
* 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -1929,7 +1922,6 @@ function material(p5, fn) {
19291922
* function draw() {
19301923
* background(255);
19311924
* shader(myShader);
1932-
* myShader.setUniform('time', millis());
19331925
* noStroke();
19341926
* fill('red');
19351927
* circle(0, 0, 50);
@@ -1978,7 +1970,6 @@ function material(p5, fn) {
19781970
* function draw() {
19791971
* background(255);
19801972
* shader(myShader);
1981-
* myShader.setUniform('time', millis());
19821973
* lights();
19831974
* noStroke();
19841975
* fill('red');
@@ -1992,7 +1983,7 @@ function material(p5, fn) {
19921983
*
19931984
* ```js
19941985
* // myMaterial.js
1995-
* let time = uniformFloat();
1986+
* let time = millis();
19961987
* worldInputs.begin();
19971988
* worldInputs.position.y +=
19981989
* 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -2164,7 +2155,7 @@ function material(p5, fn) {
21642155
* }
21652156
*
21662157
* function material() {
2167-
* let time = uniformFloat();
2158+
* let time = millis();
21682159
* worldInputs.begin();
21692160
* // Add a somewhat random offset to the weight
21702161
* // that varies based on position and time
@@ -2180,7 +2171,6 @@ function material(p5, fn) {
21802171
* function draw() {
21812172
* background(255);
21822173
* strokeShader(myShader);
2183-
* myShader.setUniform('time', millis());
21842174
* strokeWeight(10);
21852175
* beginShape();
21862176
* for (let i = 0; i <= 50; i++) {

0 commit comments

Comments
 (0)