【Processing 4】webカメラの映像を反転して表示する

鏡のように表示する

ご無沙汰しています。
放置気味のこのブログですが、ごく稀にProcessingを学ぶ学生から問い合わせが来ることがあります。
私もインターネットを通していろいろ学んできたので、できるかぎり更新して知見を残そうと思います。
誰かの役に立つことは嬉しいものですね。

さて、ご縁がありましてまたまたProcessingを用いていろいろやることになりました。
具体的にはWEBカメラ + Processingで遊具をつくる・あそぶ というものです。
p5.jsでトライしたかった良いんですけど、動かす際にネットがない場所もありえるので、Prosesingでやっていきます。
慣れてきたらp5.jsに移りたいですね。

macを新調したら、いつのまにかProcessing 4になってました。
昔書いたコードがまるっと使えなくなったりして戸惑いました。
ちょっと触ってみた感じ、3DとOPEN CVがダメなようです。
しばらく待つしか無いようですね。

カメラもちょっと戸惑ったのですが、なんとかできました。
新しいmacとProcessing4のカメラの設定は以下の記事を参考にしました。

ex-gram.com

映像を反転してディスプレイを鏡みたいに表示できないものかと考えて、mac側の設定とか色々とやっていたんですけども難しかったです。
半ば諦めかけていたところ、copy()使えばええやんということに気づきました。
画像のソース指定をして反転表示すれば鏡の状態になりました。

ちなみにcopy()でソースをしていない場合はウィンドウ内の領域しかコピーできないようです。
挙動を見ているとProcessingが（copyが？？）ウィンドウ自体をPImageとして認識しているのかもしれません。

import processing.video.*;
Capture capImg;

void setup() {
  //size(640, 480);
  fullScreen();
  String[] cameras = Capture.list();
  // add
  while (cameras.length == 0) {
    cameras = Capture.list();
  }
  //
  println("Available cameras:");
  for (int i = 0; i < cameras.length; i++) {
    println(i, cameras[i]);
  }
  capImg = new Capture(this, width, height, cameras[0]); 
  //capImg = new Capture(this, width, height);
  capImg.start(); 
  frameRate(30);
}

void captureEvent(Capture capImg) {
  capImg.read(); //キャプチャイベント
}

void draw() {
  
  //image(capImg, 0, 0 , width ,height);//元の映像は表示しない
  
  //元映像から反転してコピーする
  copy(capImg, 0, 0 , width , height, width, 0 , -width, height);
  
  
}