Skip to content

README.md

Latest commit

 

History

History
52 lines (39 loc) · 3.07 KB

README.md

File metadata and controls

52 lines (39 loc) · 3.07 KB

Overview

This is a Mechanical Binary Counter Visualizer - an interactive educational web application that teaches binary arithmetic through realistic mechanical animations. The project simulates physical mechanical counters with flip animations, sound effects, and visual feedback to help users understand how binary counting works. Users can increment the counter, reset values, and observe how binary digits cascade and overflow in a mechanical fashion.

User Preferences

Preferred communication style: Simple, everyday language.

System Architecture

Frontend Architecture

  • Pure Vanilla JavaScript: No frameworks used, employing a class-based architecture with MechanicalBinaryCounter as the main controller
  • Component-based Design: Modular bit components that can be dynamically created and managed
  • Event-driven Architecture: User interactions trigger animations and state changes through event listeners
  • CSS-based Animations: Mechanical flip animations implemented using CSS transitions and transforms for smooth visual effects

Animation System

  • Flip Animation Logic: Each bit visually flips when changing state, simulating mechanical counter behavior
  • Cascade Effects: When bits overflow (1 to 0), they trigger the next bit to flip, creating realistic carry-over animations
  • Timing Controls: Animation queuing system prevents conflicts during rapid interactions

Audio Integration

  • Web Audio API: Implemented for realistic mechanical sound effects during bit flips
  • User-initiated Audio: Complies with browser autoplay policies by initializing audio context on first user interaction
  • Sound Toggle: Users can enable/disable sound effects

State Management

  • Centralized State: Current counter value and bit states managed in the main class
  • Dynamic Bit Management: Support for variable number of bits (starting with 4, expandable)
  • Overflow Detection: Automatic detection and visual indication of counter overflow conditions

Display System

  • Real-time Updates: Simultaneous display of binary representation, decimal value, and maximum possible value
  • Status Messaging: User feedback system for actions and state changes
  • Responsive Design: Adaptive layouts using CSS clamp() functions for various screen sizes

Design Patterns

  • Observer Pattern: Display elements automatically update when counter state changes
  • Command Pattern: User actions (increment, reset) are encapsulated as methods with consistent interfaces
  • Factory Pattern: Dynamic creation of bit elements with standardized structure

External Dependencies

Browser APIs

  • Web Audio API: For generating mechanical click and flip sound effects
  • DOM API: Standard browser APIs for element manipulation and event handling
  • CSS Transform API: For smooth mechanical flip animations

No External Libraries

  • The project is built entirely with vanilla web technologies (HTML5, CSS3, ES6+ JavaScript)
  • No package managers, build tools, or external frameworks required
  • Self-contained with no network dependencies after initial load