In Bruno Imbrizi's course, Creative Coding 2.0 in JS: Animation, Sound, & Color, I had the opportunity to explore advanced coding techniques to produce unique visuals that combine color, movement, and sound in JavaScript. As an award-winning graphic designer, Bruno has devoted the past 10 years of his career to mastering the art of creative coding. He uses JavaScript to produce animations, prints, interactive pieces, and more, which have seen him collaborate with brands including Google, Spotify, and Nike, and win awards including the Adobe Cutting Edge Award and FITC Best Digital Installation.
The course is divided into six sections, beginning with a recap of JavaScript's fundamental tools and progressing to more complex topics such as skewing, curves, and particles. By the end of the course, I had learned how to code an immersive visualization enhanced with sound, develop coding compositions filled with color, animate my visuals, and incorporate cursor interaction.
To develop this project, I used several web technologies, including:
- 🔹 JavaScript: To write the application's logic and interact with the browser's APIs.
- 🔹 HTML/CSS: To structure the web page and define its layout and style.
- 🔹 p5.js: A JavaScript library for creative coding that simplifies the creation of animations, graphics, and sound.
- 🔹 Web Audio API: A browser API that allows for the creation, manipulation, and visualization of audio data.
You can see a live demo of the project here. The demo includes a sample audio file to showcase the visualization, but you can also upload your own audio files to experience the full potential of the application.