change strands examples to use millis() not uniform by nbogie · Pull Request #8648 · processing/p5.js

Resolves #8645

Changes:

  1. Don't use a uniform to pass time in strands examples in p5.strands.js, material.js. Instead use millis() built-in.

  2. In the example of how to pass a uniform for modify(), don't pass time as this now is not motivating. Instead, use an example where we'd NEED to use a uniform. (I chose a count of mouse movements - is there a simpler, easily demonstrated value that is not also covered by a built-in?)

  3. Snuck in a couple of minor tidy-ups of other strands examples:
    3.1. removed old <div><code> element wrappers around examples in getTexture and smoothstep (the final remnants in the code-base).
    3.2 had smoothstep examples use buildFilterShader instead of baseFilterShader().modify

Changes per file and URL:

p5.strands.js

one replacement in each of the following:

  • ✅ worldInputs: /reference/p5/worldInputs/
  • ✅ smoothstep: /reference/p5/smoothstep/
  • ✅ pixelInputs: /reference/p5/pixelInputs/
  • ✅ objectInputs: /reference/p5/objectInputs/
  • ✅ cameraInputs: /reference/p5/cameraInputs/

material.js

  • ✅ createShader: /reference/p5/createShader/
    • ✅ near text: "Make a version of the shader with a hook overridden"
  • buildFilterShader: /reference/p5/buildFilterShader/
    • ✅ near text: generate a color for each pixel
    • ✅ near text: You can also animate your filters over time using the
  • buildMaterialShader: /reference/p5/buildMaterialShader/
    • ✅ near text: One thing you can do with a material shader is animate the positions of vertices
  • loadMaterialShader:
    • ✅ near text: Inside your shader file, you can call
  • buildNormalShader: /reference/p5/buildNormalShader/
    • ✅ near text: One thing you may want to do is update the position of all the vertices in an object over time
  • loadNormalShader: /reference/p5/loadNormalShader/
    • ✅ near text: might use the finalColor hook to change
  • buildColorShader: /reference/p5/buildColorShader/
    • ✅ near text: One thing you might want to do is modify the position
  • loadColorShader: /reference/p5/loadColorShader/
    • ✅ near text: Since this function loads data from another file
  • buildStrokeShader: /reference/p5/buildStrokeShader/
    • ✅ near text: You might also want to update some properties per vertex

what I searched for

  • \*.*uniformFloat\(
  • \*.*setUniform\(
  • \*.*millis\(\)

PR Checklist

  • npm run lint passes
  • [Inline reference] is included / updated
  • [Unit tests] are included / updated -
    some unrelated unit test failures (mostly time-outs): noise, shape modes, typography.
  • - Checked each modified example was still working

AI Usage

No AI was used in this PR or this write-up