ProcessingとOpenCVでクールにキメよう!

皆さんこんにちは!

DAISOで買った100円の時計が思ったよりいい感じで、
激しく愛用しているNHです。


さて、今回は、ProcessingOpenCVを使って、ちょっぴりサイバーな表現に挑戦してみたいと思います。




■Processingについて


Processingは、以前ご紹介しました通り、オープンソースのビジュアルデザインに使えるプログラミング言語です。Javaっぽく、それでいてさくっと、ビジュアルプログラミングできるのが魅力です。


導入手順は以下です。


■手順


1. Processingのインストール


・Processing
https://processing.org/


Processingのインストールが完了したら、次はProcessing上でライブラリーをインポートします。


2.「OpenCV for Processing」の導入


ProcessingでOpenCVを使うべく、
「Tool > Add Tool」 より、「OpenCV for Processing」を選択し、Installします。



以上で準備完了です。早速プログラミング開始です!



今回は、OpenCVの「Canny Edge Detection」を使った輪郭検出と、
検出結果にポリゴンを貼り、サイバーな雰囲気を演出してみます。

ソースコードは以下の通りです。


■ソース



import gab.opencv.*;

import processing.video.*;



Capture video; //For Video capturing

OpenCV opencv; //For OpenCV



//Screen size

int screenWidth = 640;

int screenHeight = 480;



void setup() {

  size(screenWidth, screenHeight);

  opencv = new OpenCV(this, screenWidth, screenHeight);

  video = new Capture(this, screenWidth, screenHeight);

  video.start();

}



void draw() {

  opencv.loadImage(video);



  //Edge detection.

  opencv.findCannyEdges(mouseX, mouseY); //Canny

  image(opencv.getSnapshot(), 0, 0);



  //Draw Polygons.

  for (Contour contour : opencv.findContours()) {

    stroke(0, 100, 0);

    contour.draw();



    beginShape();

    for (PVector point : contour.getPolygonApproximation().getPoints()) {

      stroke(0, 150, 0);

      fill(0, 50, 0);

      vertex(point.x, point.y);

    }

    endShape();

  } 

}




以上で完成です。

完成したものはコチラです。








OpenCVで出来る事は、多岐に渡り、非常に興味深いです!
今後も、カメラから入ってくる情報を使った表現は、
いろいろ試してみたいと思います。


それではまた。


トンガルマンWebサイト
https://tongullman.co.jp/index.php
facebook
https://www.facebook.com/Tongullman

0 件のコメント:

コメントを投稿