AWS Particle Animation

A beautiful interactive particle animation that creates a dynamic AWS logo effect using PyScript and HTML Canvas.

✨ Features

• 🔄 Interactive particle animation with AWS logo design
• 🖱️ Responsive to mouse movement and touch interactions
• 📱 Mobile-friendly and fully responsive
• 🎨 Smooth color transitions and beautiful effects
• ⚡ Real-time particle physics simulation
• 🌈 Dynamic color effects based on interaction

🎬 Preview

Interactive particle animation with AWS logo

🧩 Project Structure

.
├── index.html          # Main HTML file with PyScript integration
├── main.py             # Python code for particle animation
├── requirements.txt    # Python package dependencies
├── vercel.json         # Vercel deployment configuration
└── netlify.toml        # Netlify deployment configuration

🔧 Dependencies

• Python 3.x
• Required Python packages:
  • js==1.0
• Pyodide (loaded via CDN in the browser)

🚀 Installation

1. Clone this repository:

   git clone https://github.com/sanjulaonline/html_pyscript.git
   cd html_pyscript

2. Install the required dependencies:

   pip install -r requirements.txt

💻 Usage

Simply open the index.html file in your web browser. PyScript will automatically:

• Load the Python runtime
• Execute the Python code
• Handle the particle animation

No server setup or build process is required!

⚙️ Animation Parameters

The main animation function includes several customizable parameters:

def create_particle():
    return {
        "x": x,
        "y": y,
        "base_x": x,
        "base_y": y,
        "size": Math.random() * 1 + 0.5,  # Particle size
        "color": "white",                 # Default particle color
        "scatter": "#FF9900" or "#00DCFF", # Scatter effect color
        "life": Math.random() * 100 + 50   # Particle lifetime
    }

You can adjust these parameters to achieve different effects:

• size: Controls the size of particles (default: 0.5-1.5)
• color: Sets the default particle color
• scatter: Defines the color when particles scatter
• life: Determines how long particles live before regenerating

🔍 How It Works

1. The program creates a canvas element and initializes the AWS logo
2. Generates particles based on the logo's shape
3. Tracks mouse/touch position for interaction
4. Updates particle positions based on:
   • Mouse/touch proximity
   • Base position
   • Physics calculations
5. Renders particles with dynamic colors and effects
6. Continuously animates the scene using requestAnimationFrame

🚀 Deployment

Deploy to Vercel

1. Install Vercel CLI:

   npm install -g vercel

2. Deploy:

   vercel

Deploy to Netlify

1. Install Netlify CLI:

   npm install -g netlify-cli

2. Deploy:

   netlify deploy

Or deploy through the Netlify website:

1. Push your code to GitHub
2. Go to Netlify
3. Click "New site from Git"
4. Choose your repository
5. Configure build settings:
   • Build command: pip install -r requirements.txt
   • Publish directory: .
6. Click "Deploy site"

🤝 Contributing

Feel free to contribute to this project by:

• Adding new particle effects
• Improving the animation performance
• Adding new interactive features
• Reporting issues

📞 Contact

For any questions, suggestions, or collaborations, you can reach me on:

• Telegram: @SiXtySL
• GitHub: @sanjulaonline
• LinkedIn: Sanjula