https://p5js-webmidi.demo/play-with-midi-keyboard/visualizer https://p5js-webmidi.demo/play-with-midi-keyboard/effects https://webmidi-playground.canvas/p5js Welcome to the p5.js WebMIDI Demo: Play with MIDI Keyboard, an interactive web experience that combines the power of the p5.js library and the WebMIDI API to create a captivating visual playground where you can explore the world of MIDI music using your physical MIDI keyboard or controller. As you open this site, you'll be greeted by a full-screen canvas, ready to be transformed into a dynamic and ever-changing visual representation of your musical input. The true magic of this experience lies in the seamless integration of the WebMIDI API, which allows for direct communication between your MIDI input device and the web browser. When you load the page, the WebMIDI API automatically detects and connects to the first available MIDI input device. Once a connection is established, you can immediately start playing notes on your MIDI device, and watch as the canvas comes to life with vibrant visuals that respond to your musical input. Each note you play on your MIDI device is represented by a unique, colorful circle on the canvas. The size and position of these circles are determined by the velocity and pitch of the notes you play, creating a dynamic and ever-changing visual landscape that reflects your musical performance. Additionally, the circles are accompanied by text displaying the note name and MIDI number, providing a helpful reference for understanding the relationship between the visuals and the musical notes being played. The p5.js library serves as the foundation for this experience, providing a powerful and flexible framework for creating interactive visuals on the web. With its robust set of drawing and animation capabilities, you can explore various visual effects and transformations that respond to your musical input in real-time. This demo serves as a starting point for exploring the vast possibilities of combining music and visual art through the power of web technologies. You can further enhance this experience by experimenting with different visual styles, introducing additional audio effects, or even incorporating machine learning algorithms to create generative visuals that respond to your musical input in unique and captivating ways. In summary, the p5.js WebMIDI Demo: Play with MIDI Keyboard is an engaging and interactive web experience that combines the power of p5.js and the WebMIDI API to create a visual playground where you can explore the world of MIDI music using your physical MIDI device. It showcases the potential of modern web technologies to deliver rich multimedia experiences directly in the browser, blurring the lines between physical and digital instruments. Whether you're a musician, a visual artist, or simply someone who appreciates the beauty of combining sound and visuals, this experience is sure to captivate and inspire you.