Kids Projects. Face copy Panda

Panda copy your face.

Video

How to make

Material

ServoMotor SG5010 x 2
Paper and wires

First Create an animal face like panda face.
And Use two motor to create it's mouth.

Connect two servomotors to an obniz.
First one to signal-io0, vcc-io1, gnd-io2, seconds to signal-io9, vcc-io10, gnd-io11.

Program

It's using clmtrackr library to score smiling/sadness.

Run a program and Frame in your face. Let's smile and sad face to move an animal.

Program

<html>
<head>
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@2.0.2/obniz.js"></script>
  <script src="https://rawgit.com/auduno/clmtrackr/dev/build/clmtrackr.js"></script>
  <script src="https://rawgit.com/auduno/clmtrackr/dev/models/model_pca_20_svm.js"></script>
  <script src="https://rawgit.com/auduno/clmtrackr/dev/examples/js/emotion_classifier.js"></script>
  <script src="https://rawgit.com/auduno/clmtrackr/dev/examples/js/emotionmodel.js"></script>
</head>
  
<body>
  <div id="obniz-debug"></div>
  <video id="video" width="400" height="300" autoplay></video>
  <canvas id="canvas" width="400" height="300"></canvas> 
  <div id="print"></div>
<script>
  
var speaker;
var obniz = new Obniz("OBNIZ_ID_HERE")
var servoR;
var servoL;
obniz.onconnect = async () => {
 servoR = obniz.wired("ServoMotor", {signal:0,vcc:1, gnd:2});
 servoL = obniz.wired("ServoMotor", {signal:9,vcc:10, gnd:11});
 //servoR.angle(90);
 //servoL.angle(90);
 await startEmotion()
}

async function startEmotion() {
  var video = document.getElementById("video");
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");

  var stream = await navigator.mediaDevices.getUserMedia({
    video: {facingMode: "user"},
    audio: false
  });
  video.srcObject = stream;
  video.onloadedmetadata = function(e) {
    video.play();
  };

  var tracker = new clm.tracker();
  tracker.init(pModel);
  tracker.start(video);

  var classifier = new emotionClassifier();
  classifier.init(emotionModel);

  function drawLoop() {
    requestAnimationFrame(drawLoop);
    var positions = tracker.getCurrentPosition();
    var parameters = tracker.getCurrentParameters();
    var emotion = classifier.meanPredict(parameters);   
    context.clearRect(0, 0, canvas.width, canvas.height);
    tracker.draw(canvas);
    var emotions = {};
    for (var i=0; i<emotion.length; i++) {
      emotions[emotion[i].emotion] = emotion[i].value;
    }

    $("#print").html("sad: " + emotions.sad +"happy: " + emotions.happy)
    
    var angleR = 90;
    var angleL = 90;
    if(emotions.happy > emotions.sad){
      angleR = (emotions.happy) * (120 - 90) / (1 - 0) + 90;
      servoR.angle(angleR);
      angleL = ((emotions.happy) * (60 - 90) / (1 - 0) + 90);
      servoL.angle(angleL);
      console.log("happy");
    } else if (emotions.happy < emotions.sad){
      angleR = (emotions.sad) * (30 - 90) / (0.8 - 0) + 90;
      servoR.angle(angleR);
      angleL = ((emotions.sad) * (150 - 90) / (0.8 - 0) + 90);
      servoL.angle(angleL);
      console.log("sad");
    }
    console.log("R=" + angleR + "\nL=" + angleL);

  }
  drawLoop();
}
 

</script>
</body>
</html>