A neural network visualized: the Dopamine 3D webGL animation
Let’s say you wanted to build a 3D webGL animation unlike any you’d ever seen before and modeled after an innovative blockchain platform called Dopamine.AI
What would it look like and how would you build it? That’s what we needed to figure out when Dopamine.AI approached us to build their new website and 3D animation.
Dopamine.AI was launching s a global Decentralized Collaborative Processing Networks (DCPN) whose platform enables data and AI provides to safely monetize their IP. The Dopamine.AI platform is changing the way companies connect, share, and monetize data using blockchain technology. It was only logical that the animation would use the brain and include a way, similar to the neurotransmitter Dopamine and a blockchain platform to enables new data channels, we know that the animation would need to visually show signals being through the brain.
But that was just the start. The Dopamine.AI team had more complex plan about how the animation’s light movement and element interactions. Like their platform, they were looking for something that didn’t exist. They wanted to impress potential customers and partners.
When they first showed us their idea about how it would work, while we were confident we could build it, we were not 100% sure how. After a search in Google using the specific parameters as keywords, we couldn’t find a single 3D WebGL animation that incorporated the array of movements and interactions the way theirs did.
We figured it out – take a look at the live animation (make sure to click on the nodes). Read on to see how it worked and how we did it!
As with any 3D animation, the first step was for our artist to create a 3D rending of the model based on a 2D image. The most artistic part of the process, we created the 3D drawing of the brain that would be used to create the 3D model. Then, we used CSS3DRenderer.js to help transform the design into a 3D model viewable on the Web.The brain, now viewable on the web, worked to some degree like the human brain in that it was always “on,” with the nodes slowing moving even without any direct activity. But once activated, it leaps into motion. As an added touch to the initial view, we built the brain as a dynamic image that can be rotated by click on it with your mouse (give it a go.)
To represent the Dopamine.AI platform model, we built 3 different types of nodes, categorized as N1, N2, and N3, each type with different interactivity, movement, and design. Although the nodes appear to causally move around the brain, in fact, each node is moving in a fully independent, random direction. Each of the 3 nodes also has a different velocity, with their velocity a function of their distance from the center. N1 nodes (closes to the center) while N3 nodes (on the periphery) moving fastest.At first blush, that sounds complicated, but it’s straight forward because can just build the model using a random movement equation. However, as you’ll see next, connecting the randomly moving nodes is more complicated.
Activation and Movement
To activate the nodes, simply mouse over the node and watch. Depending on whether it’s an N1, N2, or N3 node, when you mouse over the node, it will activate and transform into 1 of 3 different icons.Once activated, the light burst will shoot from an N1 to N2 to N3 node, then return to the original N1 node. Once it arrives back, that specific node is extinguished and can no longer be activated.
Because the nodes are in constant flux and moving in “random’ directions, calculating the location of the node to build the proper trajectory took on an additional layer of complexity. Without a robust animation software that could automatically calculate the exact location of nodes and work as a mouse over activated JS animation – something we certainly don’t have and are unsure if exists – we had to build an algorithm that calculate the trajectories based on our original movement model.
When it came time to build the mobile version, we ran into a hitch because, as a web mouse over animation, it didn’t work on mobile phones. In addition, because of the way the animation was built, the mobile version was taking over the entire page, preventing you from scrolling down the page or viewing the rest of the website.To solve the problem, we created an updated version and using jQuery UI Touch Punch to enable licking instead of mouse over, we were finally able to get the animation to play on mobile devices.
Tools and Software
– Three.js, Jqueryui.js, enderer.js, CSS3DRenderer.js, and 3D.js for web and mobile 3D structure.
– Detector.js, particle.js, and orbit controls.js for node movgiement and functionality
If you haven’t already, take a look at the animation to see how it works. One of the issues with 3D animations like this is that they use a lot of code, which in turn can slow down your page load speed. That’s why you often see a loading icon as the animation first loads.
But nobody wants to see a loading icon. So we created a nifty solution! Using CSS, we created a static image that looks exactly like the animation to show when you first arrive to the website. Then, once the animation is done loading, the image disappears, and the live animation becomes viewable. While there’s no work around for the load time, at least the view is nice while you wait.
All in all, building the Dopamine.AI was both challenging and fun. If you’re interested in learning more about the animation or are interested in creating your own interactive model, get in touch with us.
** Update: We’re sad to report that Dopamine.AI has shut down operations. It seems that the quickly diminishing demand for novel blockchain solutions was the cause.
Sarah works in design at Optimyz. Her favorite topics to write about include design trends, innovation, and creative.Get in touch with Optimyz