https://github.com/qc20/wavyhairball
This project showcases an interactive, fluid line animation using Three.js. It's designed to explore the intersection of generative art and user interaction, providing a visually engaging experience that responds to user input.
https://github.com/qc20/wavyhairball
creative-coding css html interaction-design interactive javascript threejs visualization
Last synced: 2 months ago
JSON representation
This project showcases an interactive, fluid line animation using Three.js. It's designed to explore the intersection of generative art and user interaction, providing a visually engaging experience that responds to user input.
- Host: GitHub
- URL: https://github.com/qc20/wavyhairball
- Owner: QC20
- Created: 2024-07-01T01:07:38.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-04T20:12:56.000Z (almost 2 years ago)
- Last Synced: 2025-05-25T07:40:45.337Z (about 1 year ago)
- Topics: creative-coding, css, html, interaction-design, interactive, javascript, threejs, visualization
- Language: HTML
- Homepage: https://qc20.github.io/WavyHairball/
- Size: 246 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Fluid Line Animation
## Overview
This project showcases an interactive, fluid line animation using Three.js. It's designed to explore the intersection of generative art and user interaction, providing a visually engaging experience that responds to user input.
## Features
- Smooth, organic line movements
- Real-time animation updates
- Responsive design for various screen sizes
- Customizable animation parameters
## Usage
The animation starts automatically upon loading the page. Users can interact with the animation in the following ways:
- Mouse movement: Influences the direction and speed of the lines
- Click and drag: Creates temporary distortions in the line patterns
- Scroll: Zooms in/out of the animation
## Customization
You can easily customize the animation by modifying the following parameters in `sketch.js`:
- `amountLines`: Number of lines in the animation
- `dotsPerLine`: Density of points per line
- `animationSpeed`: Overall speed of the animation
## Technology
This project uses:
- Three.js for 3D rendering
- HTML5 Canvas for efficient 2D drawing
- Vanilla JavaScript for logic and interactivity
## Contribution
We welcome contributions from the HCI and interaction design community! If you have ideas for improving the user experience or enhancing the visual appeal, please follow these steps:
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## Research Applications
This project can be used as a starting point for various HCI research topics, including:
- The impact of dynamic visual feedback on user engagement
- Studying user perception of organic vs. geometric animations
- Exploring the relationship between visual complexity and cognitive load
## License
Distributed under the MIT License. See `LICENSE` for more information.
## Contact
Your Name - [@yourtwitter](https://twitter.com/yourtwitter) - email@example.com
Project Link: [https://github.com/yourusername/fluid-line-animation](https://github.com/yourusername/fluid-line-animation)
## Acknowledgments
- Inspired by the work of [Artist/Researcher Name]
- Thanks to the Three.js community for their excellent documentation and examples