As I wrote about on Monday, the last day of each week in March I’m taking some time to work on a series of small projects built in Babylon JS. Today I got started with a simple breathing animation. I wanted something similar to the Breathe App on Apple Watch, but I wanted to control the timing animations and add my own sounds.
TL; DR: You can try out the scene on my WebXR Sandbox Site.
If you click the link above, you will see black scene with a sphere in the center. The sphere will grow and shrink over time to indicate the pace of the breathing exercise I’ve been learning. This is based on a pattern of breathing I read about in Breath: The New Science of a Lost Art by James Nestor. Breathe in for 5.5 seconds, breathe out for 5.5 seconds. Pretty simple.
This project didn’t get much attention as far as graphics are concerned. I have a simple icosphere that is placed at the world origin. It has a material with an
emissiveColor set to
#8c1eff. The only light source is a hemisphere light with a
diffuse value of
#ff2975 and a
specular value of
#8c1eff. This combination of material and lighting gave me something that I liked so I moved on to the animations.
In the case of this scene, the animations are broken into four segments (five if you count the starting point). These values are hardcoded for now, but in the future, I want to make these something that guests can modify.
|0 (start)||Base Size|
|1.5 seconds||Base Size, play the wait sound|
|4 seconds||Expanded Size, plan the breathe-in sound|
|1.5 seconds||Expanded Size, play the wait sound|
|4 seconds||Base Size, play the breathe-out sound|
Animations in Babylon JS can only affect a sole property, so I had to create several animations to scale the sphere on all three axes. I set the animation frame rate to 30 and created keyframe for each of the items in the table above. In each keyframe I multiplied the time in the sequence by the frame rate. Babylon JS has an interesting way to call events on a specified frame (maybe I could use this to clean up my redundant code?). I used these animation events to call the
play() method on the sound objects. Finally, the animation is set to loop.
Overall, I’m happy with the result. I have a simple breathing animation that I can use to help myself learn this breathing pace, and I was able to use several things that I learned throughout the week. In the future I’ll expand this to include some other breathing patterns and add some customizable elements.
This weekend I’ll review my notes from this past week and plan for what I should learn next week. Every area that I covered in the Getting Started guide has an expanded section of documentation available, so I don’t think I’ll run out of things to learn anytime soon.
Here is a copy of the source code for the scene. I didn’t spend any time making this code pretty. I used the Babylon JS Playground Template as a starting point and did all the work in the