A 3D bat dances live to the beat of the background music in a website scene using Three.js, WebGL and Web Audio API. The bat’s dancing is a combination of moves from five main body parts which represent the frequency bin and the set of audio data analyzed. The background and surrounding spheres are of random color every page refresh. Spheres scale in size and increase in speed in relation to the audio data. The user can control the view by clicking and using the three mouse buttons.
EXPERIENCE PARTY ANIMAL: BAT - LIVE DEMO
PARTY ANIMAL: BAT (opens in new browser)
or
http://sarahjhan.design/explorations/Sound-Visualizer/party-bat.html
Please wait until the scene is loaded before pressing the playing button. Turn up the volume for the music :]
or
http://sarahjhan.design/explorations/Sound-Visualizer/party-bat.html
Please wait until the scene is loaded before pressing the playing button. Turn up the volume for the music :]
Interact and change the view of the scene using the three mouse buttons (rotate, zoom in, pan view). Try clicking, dragging and scrolling using the mouse buttons in the scene.
(Left mouse button: rotate, Scroll mouse: zoom in and out, Right mouse button: pan view)
Note: Works best in Chrome or Firefox on desktop
(Left mouse button: rotate, Scroll mouse: zoom in and out, Right mouse button: pan view)
Note: Works best in Chrome or Firefox on desktop
ENVIRONMENT
- The background is generated in a random color every time the page is refreshed.
- Surrounding spheres scale up in size and speed increases in movement to represent the individual frequency bin and its chunk of audio frequency represented.
LOADING THE INTERACTIVE 3D BAT LIVE ON THE WEB
1. The 3D bat was downloaded, then imported into the Blender scene
2. The bat model was exported from Blender in the correct format using the JSON plug-in for Blender and Three.js
3. The bat was imported onto the scene on the web using JSONLoader.
4. Material was mapped onto the bat using ImageUtils.
All dance moves were generated using
1. JavaScript Math Object Properties
- Math.PI
2. Math Object Methods
- Math.abs(x), Math.floor(x), Math.random( ), Math.round(x), Math.sin(x)
Manipulated five main bodY PARTS OF THE bat
1. Head
2. Face
3. Body
4. Wings
5. Feet/Toes
These individual dance moves were grouped together for a fluid dance move combination that would react in real time to the updating values of data from the audio.
1. HEAD DANCE MOVES:
- Move head up and down
- Move head side to side
- Move head back and forward
- Move half of head up and down
- Head bang
2. FACE DANCE MOVES:
- Ears up and down
- Ears rotate
- Eyeballs pop out
- Mouth smile
- Mouth open
3. BODY DANCE MOVES:
- Slide side to side
- Rotate Y-axis counter-clockwise
- Rotate Y-axis clockwise
- Bounce up and down
- Move half of body side to side
- Move half of body up and down
- Scale size of body up
4. WING DANCE MOVES:
- Flapping wings
- Flapping wings (stronger)
- Flapping wings up
- Flapping wings up (stronger)
5. FEET / TOE DANCE MOVES:
- Right toe tap
- Left toe tap
- Left leg down
- Right leg down
JAVASCRIPT LIBRARIES USED
- jQuery
- Three.js
- Detector
- Projector
- Dat.gui.min
- OrbitControls
API USED
- Web Audio API
3D Model with rigs by 3D Model Artist "Krakenzzz"
- The background is generated in a random color every time the page is refreshed.
- Surrounding spheres scale up in size and speed increases in movement to represent the individual frequency bin and its chunk of audio frequency represented.
LOADING THE INTERACTIVE 3D BAT LIVE ON THE WEB
1. The 3D bat was downloaded, then imported into the Blender scene
2. The bat model was exported from Blender in the correct format using the JSON plug-in for Blender and Three.js
3. The bat was imported onto the scene on the web using JSONLoader.
4. Material was mapped onto the bat using ImageUtils.
All dance moves were generated using
1. JavaScript Math Object Properties
- Math.PI
2. Math Object Methods
- Math.abs(x), Math.floor(x), Math.random( ), Math.round(x), Math.sin(x)
Manipulated five main bodY PARTS OF THE bat
1. Head
2. Face
3. Body
4. Wings
5. Feet/Toes
These individual dance moves were grouped together for a fluid dance move combination that would react in real time to the updating values of data from the audio.
1. HEAD DANCE MOVES:
- Move head up and down
- Move head side to side
- Move head back and forward
- Move half of head up and down
- Head bang
2. FACE DANCE MOVES:
- Ears up and down
- Ears rotate
- Eyeballs pop out
- Mouth smile
- Mouth open
3. BODY DANCE MOVES:
- Slide side to side
- Rotate Y-axis counter-clockwise
- Rotate Y-axis clockwise
- Bounce up and down
- Move half of body side to side
- Move half of body up and down
- Scale size of body up
4. WING DANCE MOVES:
- Flapping wings
- Flapping wings (stronger)
- Flapping wings up
- Flapping wings up (stronger)
5. FEET / TOE DANCE MOVES:
- Right toe tap
- Left toe tap
- Left leg down
- Right leg down
JAVASCRIPT LIBRARIES USED
- jQuery
- Three.js
- Detector
- Projector
- Dat.gui.min
- OrbitControls
API USED
- Web Audio API
3D Model with rigs by 3D Model Artist "Krakenzzz"
Special Thanks to Dr. Alvaro Monge