Run with your fingers, Speed up with emotions, infinitely!
Tools
3D modeling, Three.js, ML5.js, face recognization, machine learning,
CONCEPT
A multiplayer avatar running 3D web game!
Click your mouse and your avatar will start to run on the track, change the speed with your facial emotions!
Pop-up Score page
![](https://cdn.myportfolio.com/24429b9db48383e7b7341c9fc19a98d4/b475b7ec-657b-40fb-ada9-a85a14cf2f09_rw_1920.png?h=ecb8185f2ebcb91576a7d7785b85aac3)
What we did
Using face-api to map players' faces:
1. Calculated the nose position between left contour and right contour's position to get the faces "rotate" and "tilt" numbers.
2. Got faces' expressions and values.
![](https://cdn.myportfolio.com/24429b9db48383e7b7341c9fc19a98d4/b8d9f4c8-3144-49b1-a81b-987582ee94d4_rw_1920.jpg?h=aeaf940bfa4ebf542b1439f246369b0b)
Mapping players' faces to avatars :
We mapped the avatars' faces, rotations and tilts with our face values that we get from players' webcam in real-time.
Different face expression has different speed values, angry faces will speed up your avatar's speed.
![](https://cdn.myportfolio.com/24429b9db48383e7b7341c9fc19a98d4/ea196175-3dc4-4fa9-af66-f8113f076824_rw_1920.png?h=0081b0dc66224b89bec3848ae46f741b)
We used teachable machine by Google to train a gesture model
![](https://cdn.myportfolio.com/24429b9db48383e7b7341c9fc19a98d4/d141e478-eec6-4acb-99a1-f6c6ce2a0f06_rw_1920.png?h=129d5b2b9cf0af2735d9205b57f65f0e)
Visual / UX Design & 3D Avatars Modeling
![](https://cdn.myportfolio.com/24429b9db48383e7b7341c9fc19a98d4/31010b0f-b980-4645-b668-4c682f9638e3_rw_1920.png?h=d21f00c6f5fbce15c59f42cd98f2e531)
![](https://cdn.myportfolio.com/24429b9db48383e7b7341c9fc19a98d4/d978c9f6-bc4c-45aa-8a92-c8852c5d2554_rw_1920.png?h=2b8268a215899332507e11a698f0e53b)