Add grayscale line-angle shading option

[kryptokommunist]

Summary

• add an advanced option to shade 2D regions based on their normalized line angle
• map line angles to grayscale fills when rendering while preserving existing outlines and patterns

Testing

• Not run (not requested)

---

Codex Task

[gemini-code-assist]

Summary of Changes

Hello @kryptokommunist, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a new advanced rendering option that allows users to apply grayscale shading to 2D regions based on their normalized line angles. This feature enhances the visual representation of the generated patterns by adding a new dimension of detail, providing a subtle yet informative visual cue while maintaining the integrity of existing outlines and patterns.

Highlights

• New UI Option: An advanced setting checkbox has been added to the user interface, allowing users to enable 'Shade 2D regions by line angle'. This option includes a hint explaining that it colors enclosed areas using a black to white gradient based on normalized line angles.
• Angle Normalization and Grayscale Conversion: New utility functions normaliseAngle180 and greyscaleFromAngle have been introduced. normaliseAngle180 normalizes angles to a 0-180 degree range, and greyscaleFromAngle converts these normalized angles into corresponding grayscale hexadecimal color codes for rendering.
• Rendering Engine Integration: The DoyleSpiralEngine has been updated to accept a colorByAngle parameter. When enabled, a new rendering pass applies grayscale fills to arc groups based on their primary pattern angle, preserving existing outlines and patterns.
• Default Setting and Parameter Handling: A new default setting color_by_angle: false has been added to app.js. The normaliseParams and renderSpiral functions have been modified to correctly process and pass this new option throughout the rendering pipeline, ensuring proper functionality.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a new feature to shade 2D regions with a grayscale value based on their line angle. The changes are well-implemented across the HTML UI, the application logic, and the core rendering engine. The new option is added to the advanced settings and is disabled by default. The rendering logic correctly layers the new grayscale fill under existing patterns, preserving the current behavior.

My review includes a couple of suggestions for improving code consistency and maintainability by removing redundant logic and aligning spelling with the rest of the codebase. Overall, this is a solid addition.

[gemini-code-assist]

For consistency with the rest of the codebase (e.g., the id colorByAngle for the checkbox, and CSS properties), it would be better to use the American English spelling for 'color'.

Suggested change

	Colours each enclosed area using a black → white gradient based on its normalised line angle (modulo 180°).
	Colors each enclosed area using a black → white gradient based on its normalised line angle (modulo 180°).

[gemini-code-assist]

The group.primaryPatternAngle is guaranteed to be a finite number for all groups after being populated in the loop at lines 2933-2944. Therefore, the check Number.isFinite and the fallback logic are redundant. You can directly use group.primaryPatternAngle. A similar redundancy exists in the addFillPattern block around line 3000.

        const angle = group.primaryPatternAngle;