キッズプロジェクト。表情まねパンダ

このエントリーをはてなブックマークに追加

笑顔や悲しみをまねするパンダ

Video

作り方

材料

  • サーボモーター SG5010 x 2
  • 紙と小さな針金。

まずは紙でパンダなど動物の顔を作ります。
そして、サーボモーターを2つ使い口を作ってみましょう。

2つのサーボモーターをobnizにつなぎます。
1つは信号をio0,vccをio1,gndをio2につなぎ、もう1つを信号io9, vccをio10, gndをio11に接続します。

プログラム

clmtrackrというライブラリを使って顔から笑顔度や悲しみ度を調べて、口を動かします。

プログラムを開いてスマホやパソコンのカメラに顔をうつして、笑ってみたり、悲しんでみたりしましょう。

Program

<html>
<head>
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@1.8.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>