RRU 118: Creating Live Trippy Visuals with WebGL and Web Audio with Alex Kempton




React Round Up show

Summary: <p>In this episode of React Round Up, Alex Kempton joins us to talk about Hedron, a tool he built for enhancing live audio shows with cool visuals. We chat about MIDI, WebGL and web audio, and how Alex wrapped those all up into an app he uses for live performances.</p> <h3><strong>Panel</strong></h3> <ul> <li>TJ VanToll</li> <li>Thomas Aylott</li> </ul> <h3><strong>Guest</strong></h3> <ul> <li>Alex Kempton</li> </ul> <h3><strong>Sponsors</strong></h3> <ul> <li><a href="http://www.audibletrack.com/click.track?CID=102175&amp;AFID=475401&amp;ADID=454213&amp;SID=%27%3E">Audible.com</a></li> <li><a href="https://www.cachefly.com/">CacheFly</a></li> </ul> <h3><strong>Links</strong></h3> <ul> <li><a href="https://github.com/nudibranchrecords/hedron">Hedron</a></li> <li><a href="https://www.smashingmagazine.com/2018/03/web-midi-api/">MIDI API</a></li> <li><a href="https://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage">https://workshop.chromeexperiments.com/examples/gui/#1–Basic-Usage</a></li> <li><a href="https://threejs.org/">three.js examples</a></li> <li><a href="https://github.com/react-spring/react-three-fiber">https://github.com/react-spring/react-three-fiber</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API">Web audio API</a></li> <li><a href="https://twitter.com/polyopuk">https://twitter.com/polyopuk</a></li> <li><a href="https://github.com/react-spring/react-three-fiber">React-three-fiber</a></li> </ul> <h3><strong>Picks</strong></h3> <p><strong>Alex Kempton:</strong></p> <ul> <li><a href="https://justjavascript.com/">Just JavaScript</a></li> </ul> <p><strong>TJ VanToll:</strong></p> <ul> <li><a href="https://stratechery.com/">Stratechery</a></li> </ul> <p><strong>Thomas Aylott:</strong></p> <ul> <li><a href="https://roamresearch.com/">roamresearch.com</a></li> </ul> <p>Follow React Round Up on Twitter &gt; <a href="https://twitter.com/reactroundup">@reactroundup</a></p>