Repository navigation
feat(shaders): add angle and stretch to FractalNoise - #280
Merged
Merged
Conversation
Composition 2's heat field is long streaks that climb at about 30 degrees, and FractalNoise could only draw untilted features. The shader rotates the sample coordinate in aspect-corrected space, so `angle` reads in on-screen degrees, then divides the along-angle axis by `stretch`. Undoing the aspect correction afterward keeps angle 0 and stretch 1 identical to the old field, so no baseline moves. Both props ride uniforms. The internal remap constant `stretch` is renamed to `spread` so the prop has the name to itself.
…ition 2 The FractalNoise demo gains Angle and Stretch sliders, which also show in a composition's All props section. The composition 2 rough route tilts its field to 30 degrees with a stretch of 3, and doubles its scale to 5, because scale now counts features across the streaks.
Contributor
|
React Doctor found no new issues. 🎉 Reviewed by React Doctor for commit |
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
The visual spec covers only the identity transform, leaving rotation and stretch untested; a frozen nondefault case on a nonsquare canvas and committed screenshot baselines are still needed.
1 open issue
What changed in this PR
Adds animatable angle and stretch props to FractalNoise so compositions can create tilted streaks while preserving the default field.
Changes:
- Adds aspect-corrected rotation and stretching through stable uniforms.
- Exposes demo controls and configures the rough composition with 30° streaks.
- Adds mesh-stability tests and a minor-release changeset.
| File | Description |
|---|---|
| packages/shaders/src/components/fractal-noise/shader.tsx | Implements rotation and stretching of noise coordinates. |
| packages/shaders/src/components/fractal-noise/fractal-noise.tsx | Exposes and documents the new props and defaults. |
| packages/shaders/src/components/fractal-noise/fractal-noise.test.tsx | Checks prop types and mesh stability during updates. |
| apps/docs/src/app/dev/composition-2-rough/rough-scene.tsx | Configures tilted, elongated heat-field features. |
| apps/docs/src/app/components/fractal-noise/scene.tsx | Passes demo angle and stretch values to the component. |
| apps/docs/src/app/components/fractal-noise/params.ts | Adds demo parameter types and defaults. |
| apps/docs/src/app/components/fractal-noise/demo.tsx | Adds Angle and Stretch sliders. |
| .changeset/fractal-noise-angle-stretch.md | Documents the feature for a minor package release. |
Review effort: Balanced
…tch 4 The default story sits at angle 0 and stretch 1, where the transform does nothing. A new /dev/fractal-noise-probe route draws the demo's field turned and stretched on a 16:9 canvas, and the spec screenshots it beside the default case.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
Composition 2's heat field is long streaks that climb at about 30°. FractalNoise could only draw untilted features, so the rough route at
/dev/composition-2-roughdrew blobs.What changes
FractalNoise gains
angleandstretchThe shader rotates the coordinate the noise reads, then divides it along the angle by
stretch, so features run longer in that direction. The rotation happens in aspect-corrected space, soanglereads in on-screen degrees, the degrees FlutedGlass uses. The shader then undoes the aspect correction, soangle0 andstretch1 draw the old field and no baseline moves. Both props ride uniforms, and the newfractal-noise.test.tsxchecks that changing them keeps the same mesh. The drift still morphs in place, andscalenow counts features across the streaks. The internal remap constant that was namedstretchis nowspread.The demo and the rough route set them
The FractalNoise demo gains Angle and Stretch sliders, which a composition's All props section also shows. The rough route sets
angle30 andstretch3, and raisesscalefrom 2.5 to 5 to thin the streaks.Known limitations
FractalNoise samples in 0..1 uv, so on a wide canvas every feature already runs wider than it is tall. With these props, that widening turns with
angle. On the 2.35:1 hero, a stretch of 3 draws streaks about 7 times longer than wide, andangle90 atstretch1 draws tall features. Making features round atstretch1 would have moved every baseline. The visual spec still captures only the defaults, so no baseline pins a tilted field.Closes SHA-309