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>