Responses by Scott Darby, creative coder, IOHK

Background: “What does a blockchain look and sound like?” That was the question from IOHK’s chief executive officer Charles Hoskinson that became the premise of Symphony 2.0. The site’s purpose is to educate a wide audience about Bitcoin and blockchain technology. We wanted everyone from university professors to children to be able to appreciate and gain something from the experience. We’ve started by visualizing Bitcoin—as this is the original cryptocurrency—and are currently working on an Ethereum version. We will then create a version for IOHK’s cryptocurrency Cardano. By comparing these three blockchains, we can show how the Cardano platform will be the most advanced and efficient one.

Favorite details: The ability to navigate to any block in Bitcoin’s history, hear a unique soundscape and see a 3-D sculpture generated from the block data—all inside a web browser.

Challenges: Managing the swaths of data associated with the Bitcoin blockchain and displaying this in a performant and visually digestible way. Another challenge was doing sound synthesis in the web browser with a huge number of input parameters.

New skills: I learned a lot about coding highly optimized WebGL experiences as well as how to create an engaging VR experience with web technologies.

Navigation features: There are several ways to navigate the experience, each of which shows the data in a new way. There is a top-down view that shows you an overview of all the transactions in the block. There are side and bottom views that expose each block’s Merkle tree, the structure that details how data is processed and verified in the chain. My favorite navigation method is the flight simulator mode, which lets you fly around a blockchain from a first-person perspective.

Technology: The site’s front end is created with JavaScript, three.js, WebGL and GLSL shader programming. There is a back-end Node.js service that grabs data from the blockchain.com API and inserts it into Firebase. This is so I can stream data to the WebGL front end more efficiently.

Anything else?  I’ve used bleeding-edge web technologies to ensure a smooth experience as the user navigates around the site. For example, the site makes heavy use of Web Workers, Transferable objects, OffscreenCanvas, GPU instancing and GPGPU animation.