p5.jsでカメラの映像をチェックボックスが映すプログラムを作る-プログラミングはYouTube動画で学ぶ-

今回はWebカメラを使います！

カメラから受け取ったイメージを1200個のチェックボックスがチェックのオンとオフだけで表現するんです！

使用したのはp5.jsの方です。プログラムの内容は簡単な方ですが、chromeだとローカルサーバー上で動かす必要があるので、サーバーをたてたことがない方はそっちの方に苦労するかもしれません。一度やり方が分かってしまえば簡単なので、ちゃちゃっと覚えてしまいましょう！ちなみにFirefoxでindex.htmlを開くと、ローカルサーバーをたてなくても実行できました。

完成品のGIF

見やすくするためにプログラム外で色を反転させています。

完成品のGIF
ポイントはRGBAカラーモデル
- 今回の教材
- よくつまづく、カメラの起動方法
ローカルサーバーを準備する
まとめ
関連記事

ポイントはRGBAカラーモデル

32ビットで表されるピクセルの中にはRed,Green,Blueに加えalpha（透過度）の4つの情報が格納されています。それぞれ3つの色は0~255（8ビット分）までの数字で表され、数字が大きくなるほど輝度（きど）が強くなります。この3色の輝度の平均の値が設定した閾値を超えた時と超えなかった時で✔のオンとオフを制御するという仕組みが今回のポイントの一つです。

今回の教材

チャンネル登録者数２０万人のThe Coding Trainの第10回シリーズが今回の教材です。p5.jsでのvideoの扱い方を理解するために10.1~10.4も軽く見といた方が良いです（2倍速で充分）。

よくつまづく、カメラの起動方法

あとPC内蔵カメラの起動方法ですが、私の場合はF10にカメラのマークがあったので「Fn + F10」でカメラのON/OFFの切り替えができました。これは共通のショートカットではないと思うので、ファンクションキーにカメラのマークが無いか探してみてください。分からなかったら、「内蔵カメラ起動方法」にOS もしくは PCの製品名をプラスして検索するとでてくるかもしれません。身近にPCに詳しい人がいればその人に聞くのが一番手っ取り早いです。

外付けのカメラの方は説明書、捨ててしまってない場合は大抵webに説明書があるので、それをダウンロードしてお読みください。