p5.env 0.0.2 → 0.0.3

package/README.md

@@ -15,10 +15,10 @@ The angular SDFs here take in a surface normal and return two things:
 ## Builder API
 
 ```js
-myShader = buildEnvLightShader(() => {
+myShader = buildEnvMaterial(() => {
   envColor.begin()
   const l = envLight(baseColor, envColor.dir, envColor.blur)
-  l.mix(l.envCircle(...), lightColor)
+  l.mix(l.circle(...), lightColor)
   envColor.set(l.get())
   envColor.end()
 })
@@ -27,16 +27,16 @@ myShader = buildEnvLightShader(() => {
 `envLight(baseColor, dir, blur)` creates a builder. `dir` and `blur` are captured once and used by all subsequent method calls.
 
 **Shape methods** (return an SDF result to pass to `mix`):
-- `l.envCircle(center, radius)` - spherical cap; `center` is a unit vec3, `radius` in radians
-- `l.envCapsule(a, b, radius)` - capsule between two unit vec3 endpoints, `radius` in radians
-- `l.envStar(center, n, innerRadius, outerRadius, rotation?)` - n-pointed star; radii in radians, `n` is a plain JS integer
-- `l.envRect(center, size, rotation?)` - rectangle; `size` is `[halfWidth, halfHeight]` as chord lengths (sine of angle, not radians), `rotation` in radians
-- `l.envWindow(center, size, panes, barWidth)` - rectangle subdivided into panes; `panes` is `[nx, ny]`; `size` and `barWidth` are chord lengths (sine of angle, not radians — for small shapes the difference is negligible)
+- `l.circle(center, radius)` - spherical cap; `center` is a unit vec3, `radius` in radians
+- `l.capsule(a, b, radius)` - capsule between two unit vec3 endpoints, `radius` in radians
+- `l.star(center, n, innerRadius, outerRadius, rotation?)` - n-pointed star; radii in radians, `n` is a plain JS integer
+- `l.rect(center, size, rotation?)` - rectangle; `size` is `[halfWidth, halfHeight]` as chord lengths (sine of angle, not radians), `rotation` in radians
+- `l.window(center, size, panes, barWidth)` - rectangle subdivided into panes; `panes` is `[nx, ny]`; `size` and `barWidth` are chord lengths (sine of angle, not radians -- for small shapes the difference is negligible)
 
 **Color methods** (return a scalar/vec3 usable in expressions or as a base color):
-- `l.envGradient(center, ...stops)` - radial gradient; each stop is `{ t, color }` where `t` is angle from `center` in radians and `color` is a vec3; spread stops as individual arguments
-- `l.envNoise(size)` - blur-aware fractal noise value; `size` is the angular scale of the largest octave
-- `l.envNoisePlane(planeNormal, h, size, { rotation?, offset? })` - projects a planar noise field onto the sphere; `h` is the plane's height, `size` is the noise scale; `offset` is a vec2 that shifts the noise coordinate (use for animation)
+- `l.gradient(center, ...stops)` - radial gradient; each stop is `{ t, color }` where `t` is angle from `center` in radians and `color` is a vec3; spread stops as individual arguments
+- `l.noise(size)` - blur-aware fractal noise value; `size` is the angular scale of the largest octave
+- `l.noisePlane(planeNormal, h, size, { rotation?, offset? })` - projects a planar noise field onto the sphere; `h` is the plane's height, `size` is the noise scale; `offset` is a vec2 that shifts the noise coordinate (use for animation)
 
 **Builder methods**:
 - `l.mix(shape, color)` - blends `color` into the accumulated result using the shape's SDF; returns `l` for chaining
@@ -44,28 +44,27 @@ myShader = buildEnvLightShader(() => {
 
 ## Panorama
 
-The same `envColor` hook can also be used to create a version of `panorama()` but using your generative environment, `panoramaEnv`.
+The same `envColor` hook can also drive a background panorama, so the environment visible on surfaces matches the environment visible in the background.
 
 ```js
-function envHooks() {
+const envHooks = () => {
   envColor.begin()
-  // Draw something here!
+  // ... same hook body as before ...
   envColor.end()
 }
 
-let envShader, panoramaShader
+let envShader, pano
 
 function setup() {
-  envShader = buildEnvLightShader(envHooks)
-  panoramaShader = buildEnvLightPanorama(envHooks)
+  envShader = buildEnvMaterial(envHooks)
+  pano = buildEnvPanorama(envHooks)
 }
 
 function draw() {
-  clear()
-  panoramaEnv(panoramaShader)
+  pano()
   shader(envShader)
   sphere(150)
 }
 ```
 
-The API is `panoramaEnv(shader, blur = 0)`. Pass a nonzero `blur` (in radians) to draw a blurry background instead of a default clear one.
+`buildEnvPanorama` returns a function. Calling it each frame sets the camera uniforms and applies the panorama as a post-process filter. Pass a blur value in radians to match a rough material's specular blur: `pano(blur)`.

package/p5.env.js

@@ -37,7 +37,7 @@ function envLight(p5, fn) {
     return this._baseEnvLightShader
   }
 
-  fn.buildEnvLightShader = function(...args) {
+  fn.buildEnvMaterial = function(...args) {
     return this.baseEnvLightShader().modify(...args)
   }
 
@@ -71,19 +71,18 @@ function envLight(p5, fn) {
     return this._baseEnvLightPanoramaShader
   }
 
-  fn.buildEnvLightPanorama = function(...args) {
-    return this.baseEnvLightPanoramaShader().modify(...args)
-  }
-
-  fn.panoramaEnv = function(panoramaShader, blur = 0) {
-    const renderer = this._renderer
-    renderer.scratchMat3.inverseTranspose4x4(renderer.states.uViewMatrix)
-    renderer.scratchMat3.invert(renderer.scratchMat3)
-    panoramaShader.setUniform('uFovY', renderer.states.curCamera.cameraFOV)
-    panoramaShader.setUniform('uAspect', renderer.states.curCamera.aspectRatio)
-    panoramaShader.setUniform('uCameraRotation', renderer.scratchMat3.mat3)
-    panoramaShader.setUniform('uBlur', Math.min(blur, Math.PI / 2))
-    this.filter(panoramaShader)
+  fn.buildEnvPanorama = function(...args) {
+    const panoramaShader = this.baseEnvLightPanoramaShader().modify(...args)
+    return (blur = 0) => {
+      const renderer = this._renderer
+      renderer.scratchMat3.inverseTranspose4x4(renderer.states.uViewMatrix)
+      renderer.scratchMat3.invert(renderer.scratchMat3)
+      panoramaShader.setUniform('uFovY', renderer.states.curCamera.cameraFOV)
+      panoramaShader.setUniform('uAspect', renderer.states.curCamera.aspectRatio)
+      panoramaShader.setUniform('uCameraRotation', renderer.scratchMat3.mat3)
+      panoramaShader.setUniform('uBlur', Math.min(blur, Math.PI / 2))
+      this.filter(panoramaShader)
+    }
   }
 
   // Color helpers
@@ -400,28 +399,28 @@ function envLight(p5, fn) {
     let c = p5.strandsNode(baseColor)
 
     return {
-      envCircle(center, radius) {
+      circle(center, radius) {
         return sketch.envCircle(dir, center, radius)
       },
-      envCapsule(a, b, radius) {
+      capsule(a, b, radius) {
         return sketch.envCapsule(dir, a, b, radius)
       },
-      envStar(center, n, innerRadius, outerRadius, rotation) {
+      star(center, n, innerRadius, outerRadius, rotation) {
         return sketch.envStar(dir, center, n, innerRadius, outerRadius, rotation)
       },
-      envRect(center, size, rotation) {
+      rect(center, size, rotation) {
         return sketch.envRect(dir, center, size, rotation)
       },
-      envWindow(center, size, panes, barWidth) {
+      window(center, size, panes, barWidth) {
         return sketch.envWindow(dir, center, size, panes, barWidth)
       },
-      envNoise(size) {
+      noise(size) {
         return sketch.envNoise(dir, size, blur)
       },
-      envGradient(center, ...stops) {
+      gradient(center, ...stops) {
         return sketch.envGradient(dir, center, blur, ...stops)
       },
-      envNoisePlane(planeNormal, h, size, { rotation = 0, offset = [0, 0] } = {}) {
+      noisePlane(planeNormal, h, size, { rotation = 0, offset = [0, 0] } = {}) {
         return sketch.envNoisePlane(dir, planeNormal, h, size, blur, { rotation, offset })
       },
       mix(shape, materialColor) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "p5.env",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Generative environment light for p5.strands",
   "main": "p5.env.js",
   "scripts": {