明るさの認識  

カメラで映している映像の中でも、一定の明るさ以上の箇所にアニメーションを表示させています。

研究開始当初は、〇(丸)や□(四角)などの形で認識する方針でしたが、 アニメーションが表示できる対象物が限定されすぎるという話になり、

明るさを認識する方針に変更しました。

作業工程の中でも難しいと感じたのはこの明るさの認識方法でした。

そこで、 このサイト(p5.jsでビジュアルプログラミングを試す) を参考に以下のようなコードを書くことで解決できました。

                        
    capture.loadPixels();

    const stepSize = 10;
    for (let y = 0; y < height; y += stepSize) {
        for (let x = 0; x < width; x += stepSize) {
        const i = y * width + x;
        const darkness = (255 - capture.pixels[i * 4]) / 255;   
        const radius = stepSize * darkness;
        noStroke();
        noFill();
        }
    }
                        
                    

その後、if (darkness < 0.25)とすることで 一定の明るさ以上の箇所にアニメーションを表示させることが可能になりました。

  デモビデオ  

1. 色の変化

スマホの画面を指でタッチするとアニメーションが表示され、 タッチしている指の本数によって表示されるアニメーションが異なります。

指の本数が0本だと何も表示されません。

しかし、1本、2本、3本、4本と増やすことで、 それぞれ春、夏、秋、冬をモチーフにしたアニメーションが表示されます。





2. 対象物の入れ替え

明るさで対象物を認識しているので、映しているお皿の形にかかわらず認識することができます。





3. 認識

対象物が2つ以上でも、アニメーションが描画されます。