酉年のマスクアプリ: このページの下で動きます。

 Webカメラを使いますかに「はい」。カメラからの距離を適当にとり、マウスでマスクを動かして、顔を動かさないようにしてカメラの方を見てスクリーンショット。またはPrtScrでコピーしペイントに貼り付けてください。画像の自動保存は出来ません。BrowserはMS Edge,Chromeで動きます。IEでは動きません。スマホでは、カメラ使用を「許可」、もう一度タップして右下の全画面記号をタップ。

----------------------------------

VideoCapture.htmlファイル
----------------------------------
<html><head><meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/addons/p5.dom.min.js"></script>
<script language="javascript" type="text/javascript" src="VideoCapture.js"></script>
</head><body></body></html>

-----------------------------------
VideoCapture.jsファイル
-----------------------------------
var capture;
function setup() {
createCanvas(480, 340);   createCanvas(450, 340);
  capture = createCapture(VIDEO);  capture.size(450, 340);  capture.hide();
}
function draw() {
  background(255);  image(capture, 0, 0, 450, 340); fill(200,50,50); noStroke();
  ellipse(mouseX-20, mouseY-15, 15, 30);  ellipse(mouseX-13, mouseY-17, 15, 30);
  ellipse(mouseX-5, mouseY-12, 10, 35);  ellipse(mouseX+3, mouseY-10, 15, 50);
    ellipse(mouseX, mouseY+175, 30, 25);  ellipse(mouseX-7, mouseY+185, 15, 40);
    ellipse(mouseX+7, mouseY+185, 15, 40);
    fill(200,200,50); stroke(51); strokeWeight(2);
    triangle(mouseX, mouseY+130,mouseX-30,mouseY+90,mouseX,mouseY+90)
    triangle(mouseX+2, mouseY+130,mouseX+27,mouseY+90,mouseX+2,mouseY+90)
    stroke('white'); strokeWeight(4);
    line(mouseX-25, mouseY+40,mouseX-75, mouseY+90);
    line(mouseX-25, mouseY+30,mouseX-75, mouseY+80);
    line(mouseX-25, mouseY+20,mouseX-75, mouseY+70);
    line(mouseX-25, mouseY+5,mouseX-75, mouseY+55);
    line(mouseX+25, mouseY+5,mouseX+75, mouseY+35);
    line(mouseX+25, mouseY+30,mouseX+75, mouseY+60);
    textSize(32); text("賀正 酉年 マスク", 10, 30);
}