Skip to content

Latest commit

 

History

History
99 lines (76 loc) · 4.87 KB

README.md

File metadata and controls

99 lines (76 loc) · 4.87 KB
Raw

✨ Interactive Particle Network 🚀🌌

GitHub last commit GitHub stars GitHub issues License

🌌 Welcome to the Interactive Starry Background! This project transforms your browser into a universe, complete with a dynamically evolving star field. Explore constellations that shift and interconnect as your cursor moves - an interactive, ever-changing celestial spectacle. 🌠

⚡ Live Demo

Experience the interactive starry background here.

demo

🌟 Features

  • 👐 Interactive: The stars are at your command. Move your cursor and witness constellations form and follow!
  • 🎲 Dynamically Generated: Every refresh greets you with a unique constellation pattern.
  • 📐 Responsive: Perfectly adapts to any window size for a seamless visual experience.
  • 🔨 Pure JavaScript: No dependencies. Just plain JavaScript.

🚀 Getting Started

  1. Clone the repository: 
    git clone https://github.com/LeonKohli/interactive-particle-network.git
  2. Open the index.html file in your web browser.

🛠️ Usage

Feel free to incorporate this interactive background into your own projects. Whether it's a personal portfolio, an online store, or a blog, our starry sky will fit right in. Don't forget to give credit where it's due!

⚙️ Customize Your Universe

Interactive Particle Network is not just a starry background, it's your starry background. With numerous customization options, you can tweak the universe to match your mood or project's theme:

🌟 Configuration Options
  • numberOfStars: Set the number of stars in your sky.
  • maxDistance: Maximum distance for a star connection.
  • starSize: Range of possible star sizes.
  • speedFactor: Speed at which stars move around the canvas.
  • mouseRadius: Area around the mouse where stars will attempt to form connections.
  • starColor: Color of the stars.
  • connectionColor: Color of the lines that connect stars.
  • canvasBackgroundColor: Background color of your canvas.
  • lineThickness: Thickness of the connection lines.
  • starShapes: Shapes of the stars - 'circle' or 'star'.
  • randomStarSpeeds: Set this to true for stars moving at random speeds.
  • rotationSpeed: Range of possible rotation speeds for star-shaped stars.
  • connectionsWhenNoMouse: Set this to true to form star connections without mouse interference.
  • percentStarsConnecting: Percentage of stars that can connect when the mouse is not on the canvas.
  • connectionLinesDashed: Set this to true for dashed connection lines.
  • dashedLinesConfig: Configuration for the dashed lines.
  • canvasGradient: Add a gradient for the canvas background.
  • starDensity: Density of the stars - 'low', 'medium', 'high', or 'ultra'.

By customizing these options, you can create a truly unique and stunning celestial spectacle! 💫

🎨 Predefined Configurations

Starry Night • Astral Serenity • Nebula Burst • Cosmic Web • Galactic Symphony • Celestial Dream • Quantum Realm • Eternal Twilight • Alien Encounter • Cybernetic Circuit

Too many options? Jumpstart your journey with our predefined configurations.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👥 Contributing

We welcome all contributions! If you're interested in enhancing our universe, please read CONTRIBUTING.md for details on how to submit pull requests.