Add GLSL-based noise(vec2) function to p5.strands (#7897) by LalitNarayanYadav · Pull Request #7921 · processing/p5.js

LalitNarayanYadav · 2025-06-18T21:20:40Z

Summary

This PR implements a noise(vec2) function in p5.strands to enable shader-compatible noise effects. It addresses #7897, which is part of the broader effort to bridge core p5.js functions with p5.strands (#7849).

Changes Made

Created src/webgl/shaders/functions/noise.glsl.js with a basic fractal noise implementation (3 octaves).
Registered noise(vec2) in builtInGLSLFunctions in ShaderGenerator.js with isp5Function: false.
Injected the GLSL noise code into all fragment shaders via GLOBAL_SHADER.output.fragmentDeclarations.add(noiseGLSL).

PR Checklist

npm run lint passes
Inline reference is included / updated
Unit tests are included / updated

- Created src/webgl/shaders/functions/noise.glsl.js - Provides a simple fractal noise function using 3 octaves

RandomGamingDev · 2025-06-19T13:56:13Z

Looks good to me :D

davepagurek · 2025-06-19T16:08:08Z

Thanks for tackling this! Are you able to show a test sketch using the noise so we can take a look at what it looks like? Either by making a test sketch in src/preview/global/sketch.js + npm run dev:gloabl, or by running npm run build to generate lib/p5.js and lib/p5.min.js which you could then upload to the p5 web editor and use.

davepagurek · 2025-06-19T16:51:49Z

src/webgl/ShaderGenerator.js

 }


+GLOBAL_SHADER.output.fragmentDeclarations.add(noiseGLSL);


I think this might not be defined yet, as we only set GLOBAL_SHADER = this in the ShaderGenerator constructor. Maybe rather than adding noise to the list of glsl functions, we could do a custom function for it like you did earlier for lerp, and in that custom function, you do GLOBAL_SHADER.output.fragmentDeclarations.add(noiseGLSL)? (And possibly add it to the vertex declarations too, it could be used in updating positions as well.)

Thanks @davepagurek! That makes sense. I’ve moved the noiseGLSL injection into a custom fn.noise function wrapper, similar to what was done for lerp. That way it’s only added during shader generation and avoids undefined GLOBAL_SHADER.

Also working on a test sketch under src/preview/global/sketch.js as suggested. Appreciate the review!

perminder-17

Great work on this so far, just some minor thoughts and would be good to.

perminder-17 · 2025-06-22T16:54:21Z

src/webgl/shaders/functions/noise.glsl.js

@@ -0,0 +1,15 @@
+export default /* glsl */ `


Hi @LalitNarayanYadav, when you put a .js file inside src/webgl/shaders/ that folder is treated as “raw-GLSL only” during the p5.js build because of the string plugin:

p5.js/rollup.config.mjs

Lines 19 to 20 in 257227f

string({

include: 'src/webgl/shaders/**/*'

So the bundler thinks your .js file is just a literal string, not executable JavaScript. "Probably you could get errors saying export is not defined" or maybe something like that.

Simple fix would be :

Keep JavaScript out of that folder i.e. don't place it inside src/webgl/shaders OR,

Rename your helper to something like noiseGLSL.glsl and import it the same way; it already just contains GLSL text. ( I think this one could be good, what you think)?

good catch @perminder-17!

Thanks a lot for pointing that out @perminder-17 and @davepagurek ! I've renamed the file to noiseGLSL.glsl and updated the import accordingly to avoid the Rollup plugin conflict. Let me know if anything else needs adjusting!

src/webgl/ShaderGenerator.js

…nflicts

perminder-17 · 2025-06-28T17:25:07Z

src/webgl/ShaderGenerator.js

    }
  };
+  fn.noise = function (...args) {
+    if (GLOBAL_SHADER?.isGenerating) {


Hi @LalitNarayanYadav a very small suggestion, we are on the last bits now.

What do you think about having an early return guard. Like rather than doing

if (GLOBAL_SHADER?.isGenerating) { // your code .... } else { // friendly error message }

Use an early-return guard inside the function.

Something like :

fn.noise = function (...args) { if (!GLOBAL_SHADER?.isGenerating) { // friendly-error messages return; } // Now your code here without else block: }

Thanks @perminder-17, great suggestion! I've refactored the function to use an early return guard as you described. Looks much cleaner now.

perminder-17

here's the result looks so far : https://editor.p5js.org/aman12345/sketches/83SNq9iF2 which I think looks nice. Maybe we should merge it if creating a functions directory makes sense @davepagurek ?

perminder-17 · 2025-07-01T19:31:39Z

src/webgl/shaders/functions/noiseGLSL.glsl

@@ -0,0 +1,13 @@
+float baseNoise(vec2 st) {


Are we going to have more such functions in the future like noise? I am not sure if we should create a functions directory for it? @davepagurek What's your thought on this one?

off the top of my head I think we were considering at least random(), so I think we can keep this folder structure for that.

perminder-17 · 2025-07-01T20:14:20Z

src/webgl/shaders/functions/noiseGLSL.glsl

@@ -0,0 +1,13 @@
+float baseNoise(vec2 st) {


Hi @LalitNarayanYadav while I tested it locally, I found that the things are little jittery and we want the noise to be smoother, maybe we just need a different basis for each octave.

e.g. something like the examples here, but, maybe finding where they came from to double check the licenses, or doing something similar but different https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83

davepagurek · 2025-07-02T19:34:57Z

src/webgl/ShaderGenerator.js

+  fn.noise = function (...args) {
+    if (!GLOBAL_SHADER?.isGenerating) {
+      p5._friendlyError(
+      `It looks like you've called noise() outside of a shader's modify() function.`


noise is also a regular p5 function, so in this case we can call the original implementation, similar to how you did lerp.

LalitNarayanYadav · 2025-07-05T19:21:56Z

Thanks @perminder-17 and @davepagurek for the feedback!

I've updated the GLSL noise to use a smoother implementation based on this MIT-licensed source, and added fallback support for core p5.js noise() when called outside of strands, similar to how lerp is handled. Let me know what you think!

perminder-17 · 2025-07-08T20:30:55Z

src/webgl/ShaderGenerator.js

    ],
    'sqrt': { args: ['genType'], returnType: 'genType', isp5Function: true},
    'step': { args: ['genType', 'genType'], returnType: 'genType', isp5Function: false},
+    'noise': { args: ['vec2'], returnType: 'float', isp5Function: false },


I think in the glsl code, we have a baseNoise() function returning float. So, either you have to rename at the js file or in the glsl file. Probably changing from baseNoise() to noise() in the glsl is what I would prefer.

src/webgl/shaders/functions/noiseGLSL.glsl

perminder-17

Looks good to me!

LalitNarayanYadav added 2 commits June 19, 2025 02:42

Add GLSL noise function support in p5.strands via ShaderGenerator

b924d1c

Add GLSL implementation of fractal noise for p5.strands

9cf4424

- Created src/webgl/shaders/functions/noise.glsl.js - Provides a simple fractal noise function using 3 octaves

LalitNarayanYadav changed the base branch from main to dev-2.0 June 18, 2025 21:21

davepagurek reviewed Jun 19, 2025

View reviewed changes

Add custom fn.noise() in p5.strands with conditional GLSL injection

4cbf98f

perminder-17 self-requested a review June 22, 2025 16:44

perminder-17 requested changes Jun 22, 2025

View reviewed changes

LalitNarayanYadav added 3 commits June 28, 2025 00:57

Fix: Rename noise.glsl.js to noiseGLSL.glsl to avoid Rollup plugin co…

6f66939

…nflicts

Fix: Rename noise.glsl.js to noiseGLSL.glsl to avoid Rollup plugin co…

3b70b71

…nflicts

Add noiseGLSL to vertexDeclarations for use in vertex shaders

09f307d

perminder-17 self-requested a review June 28, 2025 08:42

perminder-17 reviewed Jun 28, 2025

View reviewed changes

Refactor fn.noise() to use early return guard for cleaner structure

df4c546

perminder-17 self-requested a review July 1, 2025 16:30

perminder-17 approved these changes Jul 1, 2025

View reviewed changes

perminder-17 requested changes Jul 1, 2025

View reviewed changes

davepagurek reviewed Jul 2, 2025

View reviewed changes

Orsenna187 mentioned this pull request Jul 5, 2025

automatic rewrite of custom functions in Strands #7953

Open

17 tasks

LalitNarayanYadav added 2 commits July 6, 2025 00:45

Bridge p5.js noise with GLSL noise in p5.strands

0cd9448

Add noiseGLSL.glsl with MIT-licensed 2D noise for p5.strands

fd13238

perminder-17 requested changes Jul 8, 2025

View reviewed changes

Update src/webgl/shaders/functions/noiseGLSL.glsl

27ebbe3

perminder-17 approved these changes Jul 8, 2025

View reviewed changes

perminder-17 merged commit f3ab0ce into processing:dev-2.0 Jul 8, 2025
2 checks passed

ksen0 added this to p5.js 2.x 🌱🌳 Sep 18, 2025

ksen0 added this to the 2.1 milestone Sep 18, 2025

ksen0 moved this to Completed in p5.js 2.x 🌱🌳 Sep 18, 2025

		}


		GLOBAL_SHADER.output.fragmentDeclarations.add(noiseGLSL);

Uh oh!

Comments

Conversation

LalitNarayanYadav commented Jun 18, 2025

Summary

Changes Made

PR Checklist

Uh oh!

RandomGamingDev commented Jun 19, 2025

Uh oh!

davepagurek commented Jun 19, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

perminder-17 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

perminder-17 Jun 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

perminder-17 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

LalitNarayanYadav commented Jul 5, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

perminder-17 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

perminder-17 Jun 28, 2025 •

edited

Loading