Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/qc20/assemblyrings

Welcome to the Assembly Rings repository! This project is a captivating blend of interaction design and creative coding, aimed at showcasing the mesmerizing possibilities of 3D animations within web environments.
https://github.com/qc20/assemblyrings

assembly creative creative-coding donut html pure-css torus-dom

Last synced: about 1 month ago
JSON representation

Welcome to the Assembly Rings repository! This project is a captivating blend of interaction design and creative coding, aimed at showcasing the mesmerizing possibilities of 3D animations within web environments.

Awesome Lists containing this project

README 

        
# Assembly Rings - Interactive 3D Animation



Welcome to the **Assembly Rings** repository! This project is a captivating blend of interaction design and creative coding, aimed at showcasing the mesmerizing possibilities of 3D animations within web environments.



## Overview



**Assembly Rings** is an interactive 3D animation that consists of multiple rotating rings and dots, creating a visually stunning torus-like structure. This project explores the intersections of Human-Computer Interaction (HCI) principles and creative coding, emphasizing user engagement through dynamic visual effects.



![Assembly Rings Animation](path/to/your/demo-image.gif)



## Features



- **Dynamic 3D Animation**: Utilizing CSS animations and JavaScript to create a seamless and continuous rotating effect.

- **Responsive Design**: Ensuring the animation looks great on all screen sizes.

- **Interactive Elements**: Encouraging user interaction and engagement with the visual representation.



## Getting Started



### Prerequisites



To run this project locally, you'll need:



- A modern web browser (e.g., Chrome, Firefox, Safari)

- Basic knowledge of HTML, CSS, and JavaScript



### Installation



1. **Clone the Repository**:

    ```bash

    git clone https://github.com/your-username/assembly-rings.git

    cd assembly-rings

    ```



2. **Open `index.html`** in your web browser to see the animation in action.



### Customization



Feel free to tweak the parameters in the `styles.css` and `index.html` files to explore different visual effects. Here are some variables you can experiment with:



- **Number of Rings and Dots**: Adjust the `nrings` and `ndots` variables in the `index.html` script.

- **Animation Speed and Style**: Modify the animation properties in the `styles.css` file to create unique motion effects.



## Interaction Design Insights



This project is more than just an animation—it's an exploration of how users interact with and perceive digital art. By manipulating 3D transformations and animations, we delve into:



- **User Engagement**: Creating an immersive experience that captivates and retains user attention.

- **Perception and Cognition**: Understanding how motion and 3D effects can influence user perception and cognitive load.

- **Aesthetics and Usability**: Balancing visual appeal with seamless interaction to enhance the overall user experience.



## Contributing



We welcome contributions from the community! Whether it's optimizing the code, adding new features, or improving documentation, your input is valuable.



1. **Fork the Repository**

2. **Create a New Branch** (`git checkout -b feature-branch`)

3. **Commit Your Changes** (`git commit -m 'Add some feature'`)

4. **Push to the Branch** (`git push origin feature-branch`)

5. **Create a Pull Request**



## License



This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.



## Acknowledgments



Special thanks to the creative coding community for their inspiration and continuous support. Let's keep pushing the boundaries of what's possible with code and design!