Welcome to the Procedural Animation Project repository! This project leverages the power of Angular 17 to create procedural animations inspired by natural movements, such as a lizard walking, a snake slithering, and a fish swimming, using constraints and FABRIK (Forward And Backward Reaching Inverse Kinematics) algorithms.
Check it out: Demo here
This project demonstrates how Angular 17 can be used beyond traditional web applications, showcasing its ability to handle creative and interactive animations driven by complex algorithms.
- Procedural Animations:
- Realistic simulations of a lizard's walk, a snake's slither, and a fish's swim.
- Powered by FABRIK constraints for smooth and natural movements.
- Physics-Based Constraints:
- Implements kinematic constraints to emulate realistic joint and limb movements.
- Optimized for performance within a web-based environment.
- Angular Ecosystem:
- Standalone components for reusable and modular code.
- SCSS for organized and dynamic styling.
- RxJS for responsive data flow and interactivity.
- Angular 17: A robust and scalable front-end framework.
- FABRIK Algorithm: For inverse kinematics and realistic animation constraints.
- TypeScript: Ensures type safety and clean, maintainable code.
- RxJS: For managing animation states and event-driven behaviors.
- SCSS: For designing visually appealing and adaptable styles.
- Node.js and npm installed on your system.
- Angular CLI (v17 or later).
- Clone the repository:
git clone https://github.com/your-username/your-repository.git
- Navigate to the project directory:
cd your-repository - Install dependencies:
npm install
- Start the development server:
ng serve
- Open your browser at:
http://localhost:4200
-
Lizard Walk:
- Implements limb constraints to replicate a natural walking cycle.
- Uses FABRIK to calculate joint positions dynamically.
-
Snake Slither:
- Simulates wave-like motion with sinusoidal curves.
- Constraints ensure smooth transitions and prevent unnatural distortions.
-
Fish Swim:
- Utilizes oscillatory movements to mimic realistic swimming patterns.
- FABRIK ensures the fish body moves fluidly through water-like paths.
The Forward And Backward Reaching Inverse Kinematics algorithm provides an efficient and intuitive method to resolve kinematic chains, ensuring:
- Minimal computational overhead.
- Smooth and continuous motion suitable for real-time rendering.
We welcome contributions to enhance the animations or add new features. Feel free to fork the repository and submit a pull request.
This project is licensed under the MIT License. See the LICENSE file for details.
For any inquiries, feedback, or collaboration opportunities, feel free to reach out:
Mohamed El Mourabit Agharbi
- Email: mohamed.elmoag@gmail.com
- Portfolio: mohamed-elmourabit.netlify.app
While working on my Angular 17 project, I came across a fascinating blog post that explores the concept of constraints and their applications in software development: 👉 Understanding Constraints.
Big thanks to Johnathon Selstad for this insightful work that inspired me to think differently about problem-solving. Highly recommend checking it out!"
Dive into the code, explore the animations, and feel free to suggest improvements or share your thoughts!