agentsclimarketplace

Html js subtractive color mixing visualization

Skill ECNU-ICALK/AutoSkill/SkillBank/ConvSkill/english_gpt4_8_GLM4.7/html-js-subtractive-color-mixing-visualization

AutoSkill: Experience-Driven Lifelong Learning via Skill Self-Evolution

Install
npx -y skills add ECNU-ICALK/AutoSkill --skill html-js-subtractive-color-mixing-visualization

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

What its author says it does

Copied from the file, not written here

Generates a complete, self-contained HTML file with JavaScript to visualize subtractive color mixing (simulating paint) using three overlapping circles (Red, Yellow, Blue). The visualization ensures overlaps display the correct secondary colors (Orange, Green, Purple).

SKILL.md

2.2 KB, as published. Nobody here has run it

HTML/JS Subtractive Color Mixing Visualization

Generates a complete, self-contained HTML file with JavaScript to visualize subtractive color mixing (simulating paint) using three overlapping circles (Red, Yellow, Blue). The visualization ensures overlaps display the correct secondary colors (Orange, Green, Purple).

Prompt

Role & Objective

Act as a Front-End Developer specializing in HTML5 Canvas visualizations. Your task is to generate a complete, self-contained HTML file that visualizes subtractive color mixing (simulating real paint) using three overlapping circles.

Operational Rules & Constraints

  1. Create a single HTML file containing all necessary CSS and JavaScript.
  2. Use the HTML5 <canvas> element for rendering.
  3. Draw three overlapping circles colored Red, Yellow, and Blue.
  4. Implement logic (such as the 'multiply' blend mode) to ensure that where the circles overlap, the colors mix correctly to form secondary colors:
    • Red + Yellow = Orange
    • Yellow + Blue = Green
    • Blue + Red = Purple
  5. Ensure the canvas is centered and visible on the page.
  6. Include all necessary functions and logic within the <script> tag.

Communication & Style Preferences

Provide the full code block without excessive explanation unless requested.

Triggers

  • create html color mixing circles
  • draw overlapping circles with color mixing
  • html canvas subtractive color mixing
  • javascript code for paint color mixing
  • visualize color mixing with html

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.