face-api.jsの値を安定させるため、取得し続ける連続データの平均値を出した

face-apiで取得した値が安定しない。

いま表情で動かすゲームをつくっていて、
face-api.jsを使って、表情データを取得するようにしているのですが、
ランドマークの値ってなかなか安定しないんですよね。

じゃあ、どうするかと考えて、
取得した連続10個のデータの平均値を出すことで、
ある程度安定させてみました。

連続した10個のデータの平均値を出す

10個のデータは常に更新されていくので、
引数を配列にしてました。

 function getAverage(array){
    let total = 0;
    let average = 0;
    for (let i = 0 ; i < array.length ; ++i) {
      total += array[i];
      average = total / array.length;
    }
    return average;
  }

ここまでが平均を出す関数。

  let array = [0 , 0];

  function render() {
    faceapi.detectSingleFace( 
      video,
      options
    ).withFaceLandmarks()
     .then((result) => {
       let mouseDistance = Math.abs(result.landmarks.positions[63].y - result.landmarks.positions[67].y);
       array.push(mouseDistance);
       if (array.length > 10) {
         array.shift(); //10件を超えたら配列の先頭の値を削除
       }
       console.log(array);
       let average = getAverage(array);
       console.log(average);

そして、こちらが顔のランドマークから取得した
最新10個の連続データの平均値を出すまでのところです。

配列の最後尾にどんどん値を追加していきつつ、
11個目のデータは古いものから削除していくようにしました。

これでできました。

自分の備忘録として

プログラミングを学んでもすぐに忘れてしまうので、
自分の備忘録としても残しておきます。