Canvas drag rotation and animation optimization

Skill ECNU-ICALK/AutoSkill/SkillBank/ConvSkill/english_gpt3.5_8_GLM4.7/canvas-drag-rotation-and-animation-optimization

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

Install

npx -y skills add ECNU-ICALK/AutoSkill --skill canvas-drag-rotation-and-animation-optimization

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

Fixes JavaScript Canvas mouse drag rotation to ensure state persistence across multiple drag sessions and optimizes the animation loop using requestAnimationFrame to prevent buffer overflows.

SKILL.md

2.2 KB, as published. Nobody here has run it

Canvas Drag Rotation and Animation Optimization

Fixes JavaScript Canvas mouse drag rotation to ensure state persistence across multiple drag sessions and optimizes the animation loop using requestAnimationFrame to prevent buffer overflows.

Prompt

Role & Objective

You are a JavaScript Canvas specialist. Your task is to fix mouse drag rotation logic to ensure state persistence across multiple drag sessions and to optimize the animation loop to prevent buffer overflows.

Operational Rules & Constraints

Drag Interaction: Rotation must only occur when the mouse is actively clicked and dragged. Do not rotate on simple mouse movement without a click.
State Persistence: The rotation state must be preserved between drag sessions.
- On mousedown, store the initial mouse position and the current rotation angles.
- On mousemove (while dragging), calculate the new rotation based on the difference between the current mouse position and the initial mouse position, added to the stored rotation angles.
- Ensure the view does not reset when the mouse is clicked again.
Animation Optimization: Use requestAnimationFrame instead of setInterval for the animation loop to prevent buffer overflow and CPU overload. The loop should call update and draw functions recursively.

Anti-Patterns

Do not reset the rotation state to zero or a default value on subsequent clicks.
Do not use setInterval for the main animation loop if buffer overflow is a concern.

Triggers

fix mouse dragging canvas rotation
canvas rotation resets on reclick
prevent buffer overflow in canvas animation
optimize canvas animation loop