JS-DEMO

let video;

let ctracker;

let emotions;

let predictedEmotions;

let icons = [" ", " ", " ", " ", " ", " "];

let isDebug = true;

​

let offset, margin;

let cellW, cellH;

​

let isPlaying = false;

​

let oscs = [];

​

let happyMaxValue = 0;

let captureButton;

​

function setup() {

    createCanvas(640, 480);

    colorMode(HSB, 360, 100, 100, 100);

​

    video = createCapture(VIDEO);

    video.size(640, 480);

    video.position(0, 0);

    video.hide();

​

    ctracker = new clm.tracker();

    ctracker.init(pModel);

    ctracker.start(video.elt);

​

    emotions = new emotionClassifier();

    emotions.init(emotionModel);

​

    offset = width / 10;

    margin = offset / 5;

​

    // 创建截图按钮

    captureButton = createButton('记录美好瞬间');

    captureButton.position(width / 2 - captureButton.width / 2, height / 2 - captureButton.height / 2);

    captureButton.hide();

}

​

function draw() {

    clear();

    image(video, 0, 0);

​

    fill(0, 0, 100, 50);

    rect(0, 0, width, height);

​

    positions = ctracker.getCurrentPosition();

    var cp = ctracker.getCurrentParameters();

    predictedEmotions = emotions.meanPredict(cp);

​

    if (isPlaying && predictedEmotions) {

        for (let i = 0; i < oscs.length; i++) {

            freq = constrain(map(predictedEmotions[i].value, 0, 1, 0, 1000), 100, 500);

            amp = constrain(map(predictedEmotions[i].value / 8, 0, 1, 0, 0.5), 0, 0.5);

​

            oscs[i].freq(freq, 0);

            oscs[i].amp(amp, 0);

        }

    }

​

    cellW = (width - offset * 2 - margin * (predictedEmotions.length - 1)) / predictedEmotions.length;

    cellH = height / 8;

​

    if (isDebug) {

        for (var i = 0; i < predictedEmotions.length; i++) {

            let x = map(i, 0, predictedEmotions.length - 1, offset, width - offset - cellW);

            let y = height - margin * 3;

​

            let h = map(i, 0, predictedEmotions.length, 180, 240);

            let s = sq(predictedEmotions[i].value) * 100;

​

            fill(h, s, 100);

            rect(x, y, cellW, -predictedEmotions[i].value * cellH);

​

            fill(0, 0, 20);

            textAlign(CENTER, CENTER);

            textSize(16);

            let label = Object.values(predictedEmotions[i])[0];

​

            // 在柱状图的顶部显示数值和按钮

            if (label.toLowerCase() === 'happy' && predictedEmotions[i].value > 0.5) {

                textSize(20);

                text("记录美好瞬间", width / 2, height / 2);

                captureButton.show();

            } else {

                textSize(16);

                text(nf(predictedEmotions[i].value, 1, 2), x + cellW / 2, y - predictedEmotions[i].value * cellH - 25);

                captureButton.hide();

            }

​

            if (predictedEmotions[i].value > 0.5) {

                textSize(40);

                text(icons[i], x + cellW / 2, y - predictedEmotions[i].value * cellH - 25);

            }

        }

​

        fill(220, 80, 40);

        noStroke();

        for (var i = 0; i < positions.length - 3; i++) {

            ellipse(positions[i][0], positions[i][1], 5, 5);

        }

    }

}

​

function mousePressed() {

    // 如果按钮可见，执行截图保存

    if (captureButton.elt.offsetWidth > 0) {

        captureAndSave();

    }

}

​

function captureAndSave() {

    // 创建新的图形环境

    let newCanvas = createGraphics(width, height);

    newCanvas.image(video, 0, 0);

​

    // 保存截图

    saveCanvas(newCanvas, 'screenshot', 'png');

}

​