SailorMoon pose recognition signup/login: part 1
Kauress

Kauress @kauresss

About: Meta learning, fullstack JavaScript, Coding instructor, game dev, dogs & VR (Don't you love the ui for dev.to?)

Location:
Planet Earth
Joined:
Nov 22, 2017

SailorMoon pose recognition signup/login: part 1

Publish Date: Apr 13 '20
50 7

Introduction

I've been working on a small side project called "Sailormoon Pose Signup/Login". It is a signup/login strategy using a machine learning implementation in javascript. Using posenet and ml5.js. The project for now is at here

SailorMoon Homepage

Phase 1 involves the following steps:

Alt Text

Took me a day to finish the above + read on posenet and have it running on a local server. My webcam on my laptop isn’t all that great but should suffice for the time being. Below are steps for the project so far:

  1. Use the getUserMedia method of the web media API to detect a webcam and get permission from the user to stream video from the webcam
  2. Use the setInterval() method to countdown from 3 till 0
  3. On the count of 0 trigger drawing of current video frame on the canvas using context.drawImage()
  4. Do this 3 times as there are 3 separate poses or images of poses clearInterval() between each count and disable the start button after the countdown begins, because the setInterval() method messes up the global window object

Result

sailormoon gif

Check it out

The project for now is at here

Comments 7 total

  • Kauress
    KauressApr 13, 2020

    thanks!🌙

  • Joe Hsu
    Joe HsuApr 13, 2020

    this is awesome, great job =)

  • Cat
    CatApr 13, 2020

    omg I love this. This is so good. Great job!!

    • Kauress
      KauressApr 14, 2020

      thanks glad you like it!

  • Jen Chan
    Jen ChanApr 14, 2020

    YES

Add comment