https://github.com/qc20/circular-mesh

Circular Mesh Harmony is an interactive, generative art piece that explores the beauty of geometric patterns through motion and repetition. This project uses p5.js to create mesmerizing animations of concentric circles and arcs, resulting in complex, ever-changing designs.
https://github.com/qc20/circular-mesh

creative-coding css html interaction-design interactive-visualizations javascript visualization

Last synced: 6 days ago
JSON representation

Circular Mesh Harmony is an interactive, generative art piece that explores the beauty of geometric patterns through motion and repetition. This project uses p5.js to create mesmerizing animations of concentric circles and arcs, resulting in complex, ever-changing designs.

• Host: GitHub
• URL: https://github.com/qc20/circular-mesh
• Owner: QC20
• Created: 2024-06-30T21:30:30.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-07-15T22:32:05.000Z (4 months ago)
• Last Synced: 2024-07-16T02:45:07.230Z (4 months ago)
• Topics: creative-coding, css, html, interaction-design, interactive-visualizations, javascript, visualization
• Language: JavaScript
• Homepage: https://qc20.github.io/Circular-Mesh/
• Size: 646 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Circular Mesh Harmony

![Circular Mesh Harmony Animation](animation_preview.gif)

## 🌀 About

Circular Mesh Harmony is an interactive, generative art piece that explores the beauty of geometric patterns through motion and repetition. This project uses p5.js to create mesmerizing animations of concentric circles and arcs, resulting in complex, ever-changing designs.

## 🎨 Features

- **Dynamic Patterns**: Utilizes various geometric configurations to create diverse visual effects

- **Responsive Design**: Adapts seamlessly to different screen sizes

- **Minimalist Aesthetic**: Clean black and white color scheme for maximum visual impact

- **Randomized Elements**: Ensures a unique experience with each viewing

## 🛠 Tech Stack

- HTML5

- CSS3

- JavaScript

- [p5.js](https://p5js.org/)

## 🚀 Quick Start

1. Download the project files

2. Open `index.html` in your favorite browser

3. Sit back and enjoy the hypnotic dance of circles!

## 🎭 Customization

Feel free to experiment with the code to create your own unique patterns:

- Modify the `comb` array in `sketch.js` to add new geometric configurations

- Adjust the `step` and timing variables to change the animation speed and scale

- Play with the stroke weight and color to achieve different visual effects

## 🌈 Inspiration

This project draws inspiration from:

- Kinetic art

- Minimalist design principles

- Mathematical patterns in nature

## 🤝 Contributing

Got an idea to make this even cooler? Contributions are welcome! Feel free to fork the project and submit a pull request with your enhancements.

## 📜 License

This project is open source and available under the [MIT License](LICENSE).

## 🎉 Acknowledgments

Special thanks to the p5.js community for their fantastic library and ongoing inspiration.

---

Created with ❤️ by [Your Name]