skip to content
reelikklemind

Blood-Flow-Animation

Blood-Flow-Animation

Last Updated:
🌱 Seedling Information

Blood-Flow-Animation


A dynamic and interactive web-based simulation of blood flow, visualizing red blood cells, white blood cells, and platelets moving through a vessel. This project offers customizable controls and two visualization modes: particle-based and wave-based.

Features

  • Realistic Particle System: Simulates blood cells with distinct sizes, colors, and behaviors:
    • Red Blood Cells (85%): Oxygen carriers with a concave shape.
    • White Blood Cells (10%): Immune cells with granular textures.
    • Platelets (5%): Clotting cells with irregular shapes.

Visualization Modes:

  • Particles: Displays individual blood cells flowing in a wave-like motion.
  • Wave: Shows a smooth wave representing the collective motion of the cells.
  • Interactive Controls: Adjust flow speed, cell count, pulse strength, and frequency.
  • Blood Vessel Effect: Animated vessel walls with gradients.
  • Performance Monitoring: FPS counter to track animation smoothness.
  • Responsive Design: Adapts to various screen sizes.

Demo

Live demo

Installation

  • Clone the Repository: 
git clone <https://github.com/edisedis888/blood-flow-animation.git>
cd enhanced-blood-flow-animation

Open the Project:

  • Simply open index.html in a modern web browser (e.g., Chrome, Firefox).
  • No additional dependencies or build steps are required.
  • Optional: Serve Locally: Use a local server for a better experience (e.g., with Python): 
python -m http.server 8000

Usage

  • Controls: Use the sliders at the bottom to tweak:
  • Flow Speed: How fast the particles move (0.5–5).
  • Cell Count: Number of particles (500–5000).
  • Pulse Strength: Amplitude of the wave motion (50–200).
  • Pulse Frequency: Wave oscillation rate (0.001–0.01).

Buttons:

  • Reset: Restore default settings.
  • Pause/Resume: Toggle the animation.
  • Show/Hide Info: Display or hide the info panel.
  • Visualization Mode: Switch between "Particles" and "Wave" using the radio buttons.

Project Structure

enhanced-blood-flow-animation/
├── index.html      # Main HTML file
├── styles.css      # Styling for the UI and canvas
├── script.js       # Core logic and animation
└── README.md       # This file

Technical Details

  • Canvas API: Used for rendering particles and wave visualizations.
  • JavaScript: Handles particle physics, animation loop, and event listeners.
  • CSS: Provides a responsive layout with smooth animations and modern styling.
  • Performance: Optimized with requestAnimationFrame and debounced resize events.

Screenshots

Contributing

Contributions are welcome!

License

Distributed under the GNU Affero General Public License v3.0 License. See LICENSE for more information.