PoseNet Mini Game Application

In this project, I am using ml5.js, a higher-level web API. It provides built-in machine-learning libraries for develop an approachable application, such as FaceApi, DCGAN, YOLO and so on. specifically, PoseNet is selected which can detect 16 key body points from a webcam. In this mini-game, user's nose is detected by the pretrained PoseNet, and he/she should catch a grey ball falling from top to down. Graphics interactions are implemented using p5.js as a main supported JavaScript library. [Codes]

poseNet poseNet

Details

  • Uses ml5js as a main library for implementing the machine-learning alogrithm (i.e. pose detection).
  • Performs graphical interaction by applying DOM elements from p5js library, such as falling ball drawing and camera activation.
  • Detects 16 positions but draws only on a nose while a falling ball is created. Users get scores when two circle intersect.



  • Results

    References

  • Kendall, Alex, Matthew Grimes, and Roberto Cipolla. "Posenet: A convolutional network for real-time 6-dof camera relocalization." Proceedings of the IEEE international conference on computer vision. 2015. [1]
  • P5.js library [2]
  • ml5.js library [3]
  • Real-time Human Pose Estimation in the Browser with TensorFlow.js [4]
  • ml5.js: Pose Estimation with PoseNet [5]