Astigmatism Wheel Interactions

A dynamic web application visualizing an astigmatism wheel with interactive controls. This project allows users to manipulate various parameters of the visual display, including line thickness, color, opacity, and animation. It also includes an anaglyph 3D mode for viewing with red-cyan glasses.

Features

• Interactive Controls: A draggable control panel allows for adjusting:

  • Line thickness, length, and color
  • Number of radiating lines
  • Background and text colors
  • Zoom and Pan (offset)
  • Arc offset and dash density
  • Rotation speed
  • Opacity
  • Mode-Specific:
    • Anaglyph: Depth offset, eye colors
    • Parallel Lines: Line spacing, bells per arm
    • V-Diagram: V-Angle, V-Angle adjustment speed

• Visualization Modes:

  • Many Lines: Displays multiple radiating lines.
  • Single Line: Shows a single highlighted line.
  • Pendulum: Simulates a pendulum motion.
  • Anaglyph: Renders the wheel in 3D for viewing with red-cyan glasses.
  • Parallel Lines: Displays a grid of parallel lines with dots.
  • V-Diagram: Shows two arms forming a "V" shape.

• Customizable Keyboard Shortcuts: A "Keybindings" editor in the settings panel allows users to view, edit, save, and reset all keyboard shortcuts.

• Autopilot Modes: Two autopilot modes with different behaviors for an animated display.

• Dark Mode: Toggle between a light and dark user interface.

• Zoom and Pan: Use the mouse wheel to zoom and click-and-drag to pan the canvas.

• Local Storage Persistence: All settings, including custom keybindings, are saved in your browser's local storage.

• Responsive Canvas: The canvas resizes to fill the browser window.

• Keyboard Controls: The application features a comprehensive set of keyboard shortcuts. All keys are fully customizable in the "Keybindings" editor within the settings panel. The default controls are:

  • Toggle Mode: m
  • Reset View (Zoom & Pan): r
  • Reset Pan: c
  • Zoom In: + / =
  • Zoom Out: - / _
  • Pan Up: s / ArrowDown
  • Pan Down: w / ArrowUp
  • Pan Left: e
  • Pan Right: q
  • Rotate Left: a / ArrowLeft
  • Rotate Right: d / ArrowRight
  • V-Angle Down (V-Diagram Mode): j
  • V-Angle Up (V-Diagram Mode): l

How to Use

1. Open in Browser: Simply open the index.html file in your web browser, or visit the live demo: https://madalin-fr.github.io/AstigmatismWheelInteraction/
2. Adjust Controls: Use the draggable control panel to adjust settings.
   • Click 'Show Controls' to open or close the settings.
   • Drag the handle at the top of the controls to move the container.
   • Click the arrows icon to flip the controls to the other side of the screen.
3. Customize Shortcuts: Open the settings panel and click "Show Keybindings" to view and edit the keyboard controls. You can assign multiple keys to a single action.
4. Anaglyph 3D: Select "Anaglyph" from the "Mode" dropdown and use red-cyan glasses to view the 3D effect. Adjust the "Depth Offset" for optimal viewing.
5. Autopilot: Start either autopilot mode for animated shifts and rotation.
6. Dark Mode: Toggle the dark mode switch (sun/moon icon) at the top of the controls panel.
7. Zoom and Pan: Use the mouse wheel to zoom in/out, and click-and-drag to pan.

Technical Details

• HTML5 Canvas: The main visual element is rendered using HTML5 <canvas>.
• JavaScript: The core logic, interaction, animation, and anaglyph rendering are handled with JavaScript.
• InteractJS: Used for the drag and drop controls.
• Font Awesome: Icons are used to enhance the UI.
• Local Storage: Settings are saved to the local storage and persisted across sessions.
• Responsive: The canvas and layout are responsive to different browser sizes.

License

This project is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

http://creativecommons.org/licenses/by-nc-sa/4.0/

© 2023 Jeremy Bornstein. All Rights Reserved. © 2024-2025 Frîncu Mădălin-Gabriel. All Rights Reserved.