Modern P5.js Interactive Website

A visually stunning interactive website built with p5.js, featuring geometric patterns, dynamic text animations, and particle effects.

Features

• 🎨 Interactive geometric patterns that follow mouse movement and respond to clicks
• ✨ Dynamic color transitions with HSB color mode
• 📝 Morphing text animations
• 🔄 Floating particle effects
• 📱 Fully responsive design

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)
• No additional installations required

Quick Start

1. Clone or download this repository
2. Open index.html in your web browser
3. Move your mouse around to interact with the animations

Project Structure

modern-p5js-website/
├── index.html          # Main HTML file
├── css/
│   └── style.css      # Styling and animations
├── js/
│   ├── sketch.js      # Main p5.js animation code
│   └── textEffects.js # Text animation system
└── README.md          # This file

Implementation Details

• Built with p5.js instance mode for better performance
• Uses HSB color mode for smooth color transitions
• Implements object-oriented programming for maintainable code
• Responsive design that adapts to all screen sizes

Interaction Guide

• Mouse Movement: Controls the movement of geometric patterns
• Mouse Click: Creates new geometric shapes at click position
• Screen Size: Automatically adjusts to viewport changes
• Text Animation: Words cycle automatically with fade effects
• Particle Effects: Generated based on mouse position

Browser Support

• Chrome (recommended)
• Firefox
• Safari
• Edge
• Other modern browsers with HTML5 support

Performance Notes

• Uses requestAnimationFrame for smooth animations
• Implements efficient particle management
• Optimized for both desktop and mobile devices

License

This project is open-source and available under the MIT License.