Gradient experiment

[lawsie]

Summary

Add a gradient block with a colour list and a direction in degrees.

Simple objects can be coloured with a gradient. You cannot use it to colour parts of more complicated meshes.

Gradient is its own 'type' so you can't combine a gradient colour with a texture.

AI usage

Claude Opus 5 did this by itself while I was doing a different task. I agreed the plan but other than that had minimal input.

Summary by CodeRabbit

• New Features

  • Added a Gradient Colour block for creating directional gradients with multiple colours and angles from 0–360°.
  • Gradients now render across materials according to their selected direction and remain consistent when colours or effects change.
  • Gradient values can be used with colour-changing and gradient-material blocks.
  • Added toolbox access, search support, and English and Spanish labels with guidance.

• Bug Fixes

  • Improved handling of gradient descriptors, including empty colour lists and scene material updates.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: d872734d-75b0-4bad-a477-6dc99f4cc8ff

📥 Commits

Reviewing files that changed from the base of the PR and between 5a53533 and 4a80126.

📒 Files selected for processing (10)

• api/material.js
• api/scene.js
• blocks/materials.js
• generators/generators-material.js
• locale/en.js
• locale/es.js
• tests/generators-material.test.js
• tests/materials.test.js
• toolbox.js
• ui/blockmesh.js

---

📝 Walkthrough

Walkthrough

Adds directional gradient descriptors, direction-aware material caching, XY-axis shader rendering, Blockly authoring, scene normalization, and tests for material and generator behavior.

Changes

Directional gradient support

Layer / File(s)	Summary
Directional material pipeline api/material.js	Material creation extracts gradient directions, selects directional shaders, includes direction in cache keys, and calculates shader bounds from projected local XY coordinates.
Descriptor propagation and scene normalization api/material.js, api/scene.js	Color and gradient descriptors are normalized for scene conversion, hierarchy application, glow handling, and cache-key generation.
Blockly gradient authoring and decoding blocks/materials.js, generators/generators-material.js, toolbox.js, ui/blockmesh.js, locale/en.js, locale/es.js	A gradient_colour block accepts colors and a 0–360 degree direction, generates gradient descriptors, appears in the toolbox, and is decoded by the UI. Related material inputs accept gradient values where specified.
Gradient behavior validation tests/materials.test.js, tests/generators-material.test.js	Tests cover descriptor defaults, directional shader selection, axis orientation, shader compilation, direction-specific caching, effect preservation, and changeColor.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Mergeability Score:⚪ Minimal · up to 4a801

The gradient feature introduces no actionable merge-blocking risk in the supplied evidence; it is merge-ready after normal checks and review.

Sequence Diagram(s)

sequenceDiagram
participant Blockly
participant Blockmesh
participant MaterialAPI
participant GradientShader
Blockly->>Blockmesh: provide colors and direction
Blockmesh->>MaterialAPI: create gradient descriptor
MaterialAPI->>MaterialAPI: build direction-aware cache key
MaterialAPI->>GradientShader: provide gradientAxis
GradientShader->>GradientShader: project local XY coordinates

Loading

Possibly related PRs

• flipcomputing/flock#436: Both changes update gradient material creation and color-array handling in api/material.js.
• flipcomputing/flock#501: This change extends its gradient material, shader, and caching logic with direction support.
• flipcomputing/flock#502: Both changes update gradient material direction handling and material parameter propagation.

Suggested reviewers:tracygardner, claude

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title identifies the main change, which is the addition of gradient support, although it does not mention direction or the new block.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[lawsie]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.