Perlin Noise Visualization with Three.js and Audio Controls

Muhd Irfan Rusydi — Sat, 11 Jan 2025 12:56:29 +0000

This is a submission for the GitHub Copilot Challenge : Transitions and Transformations

What I Built

This project is a web application that visualizes Perlin noise using a vertex shader in Three.js. The application includes interactive controls for playing and pausing an audio track, reloading the audio, and adjusting various visual parameters such as colors and bloom effects. The project demonstrates the use of Three.js for 3D graphics, shaders for visual effects, and dat.GUI for user interface controls.

Demo

Web Deployment

rusycem.github.io
Video

youtube.com

Repo

You can find the public GitHub repository for this project here.

rusycem / audiovirtualizer

Copilot Experience

Throughout the development process, GitHub Copilot was an invaluable tool. I used Copilot for various tasks including:

Prompts: I provided Copilot with specific prompts to generate code for initializing Three.js scenes, creating shaders, and setting up dat.GUI controls.
Edits: Copilot assisted in refining and editing the generated code to ensure it met the project requirements.
Chat: I used the chat feature to ask Copilot for explanations and suggestions on how to implement certain features.
Autocomplete: Copilot's autocomplete feature helped speed up the coding process by suggesting relevant code snippets and completing lines of code.
Model Switcher: I switched between different models to get the best possible suggestions for my code, I find GPT4.0 is the best.

GitHub Models

I use GPT4-0.

Conclusion

This project was a great opportunity to explore the capabilities of GitHub Copilot and Three.js. Copilot's assistance made the development process more efficient and enjoyable. The project showcases how AI-powered tools can enhance the development of interactive web applications with complex visual effects. I look forward to further exploring the potential of Copilot in future projects.

DEV Community: Muhd Irfan Rusydi

Try out this Audio Virtualizer 🎵