abdulriiyaz/code-vibes

Code Vibes is a music visualiser which leverages mathematical functions to develop a phenomena known as emergence, It is an idea which refers to the phenomenon where complex patterns, structures, or behaviors arise from the interactions of simpler components or rules, resulting in properties that cannot be directly attributed to the individual part

Code Vibes

Code Vibes is a mesmerizing music visualizer that combines the power of Tailwind CSS, Shadertoy-inspired shaders, Next.js, p5.js, and mathematical functions to create stunning audio visualizations.

Features

• Real-time music visualization synchronized with audio playback
• Beautiful and interactive graphical effects created using shaders
• Responsive design with dynamic layout using Tailwind CSS
• Seamless integration with Next.js for server-side rendering and routing
• Powerful p5.js library for creating interactive graphics and animations
• Mathematical functions and algorithms to generate unique visual patterns

Getting Started

To run Code Vibes on your local machine, follow these steps:

1. Clone the repository: git clone https://github.com/your-username/code-vibes.git
2. Navigate to the project directory: cd code-vibes
3. Install the dependencies: npm install or yarn install
4. Start the development server: npm run dev or yarn dev
5. Open your browser and visit: http://localhost:3000

Usage

• Press the play button to start playing the default music
• Upload your own music file using the upload button
• Experience the mesmerizing visual effects synced with the music
• Interact with the visuals by moving the mouse or clicking on the screen
• Explore different shaders and effects by customizing the code

Customization

Code Vibes provides various customization options to tailor the visual experience:

• Adjust the visual effects by modifying the shaders located in the shaders directory
• Customize the graphical elements using p5.js functions in the pages/index.js file
• Modify the layout, styles, and colors using Tailwind CSS utility classes in the styles directory

Deployment

Code Vibes can be easily deployed to your preferred hosting platform. Here are the general steps:

1. Build the production-ready application: npm run build or yarn build
2. Deploy the contents of the out directory to your hosting provider
3. Ensure the hosting environment supports server-side rendering (SSR) for Next.js

For detailed deployment instructions, please refer to the documentation of your chosen hosting platform.

Resources

• Tailwind CSS Documentation - learn about Tailwind CSS features and utilities.
• Shadertoy - explore a vast collection of shaders for inspiration.
• Next.js Documentation - learn about Next.js features and API.
• p5.js Reference - refer to the p5.js documentation for graphics and animation functions.
• Mathematical Functions - explore mathematical concepts and algorithms for visual patterns.

Contributing

Contributions to Code Vibes are welcome! If you encounter any issues or have suggestions for improvement, please submit a GitHub issue or pull request. Let's make Code Vibes even better together!

License

This project is licensed under the MIT License.