はてなブックマーク

たぶん車輪の再発明だろうし、OpenCV3.0ともなればいい加減このへんをなんとかしたAPIがありそうな気がするけど、探すより作った方が早かったので作った。反省はしてない。 #include <opencv2/opencv.hpp> // 画像を画像に貼り付ける関数 void paste(cv::Mat dst, cv::Mat src, int x, int y, int width, int height) { cv::Mat resized_img; cv::resize(src, resized_img, cv::Size(width, height)); if (x >= dst.cols || y >= dst.rows) return; int w = (x >= 0) ? std::min(dst.cols - x, resized_img.cols) : std::min

Processingのグラフィックスの描画系は内部でOpenGLを利用していますが、ProcessingのAPIは特有の癖があるのでOpenGLと同じ感覚でやっていると時々戸惑うことがあります。3DグラフィックスまわりのProcessing特有の仕様について気をつけておくべき点をここにメモしておきます（Processing 3.5.4において動作確認）。 （2017/7/19）主に行列のところを加筆しました。 （2019/5/15）文章を少し手直ししました。本質的な意味は変えてません。 （2020/11/19）座標系の向きの図を更新し、プロジェクション行列について追記しました。 （2021/9/6）図中の行列の記号をU・P・V・Mに置き換えました。意味は変わっていません。modelX()およびscreenX()についての説明を追記しました。 （2022/1/7）「3D描画と2D描画を組み合

RICOH THETAは2013年の発売以来多くのユーザに親しまれ、バージョンアップを重ねて着実に進化を遂げてきました。2014年に発売されたRICOH THETA m15では動画撮影に対応し、そしてつい先日発売されたRICOH THETA Sでは念願のライブ映像出力（HDMI/USB）が搭載されました。ここではTHETAで撮影された写真・映像をProcessingで全天球表示する方法を紹介します。 RICOH THETA S 360度 全天球カメラ 910720 出版社/メーカー: リコー発売日: 2015/10/23メディア: エレクトロニクスこの商品を含むブログ (13件) を見る パノラマ写真を全天球表示する THETAでは２個の超広角レンズで撮影された画像を繋ぎ合わせて１枚のパノラマ写真を作っています。この繋ぎ合わせの処理のことをスティッチと呼びます。こうして得られたパノラマ写真

DK2向けにヘッドトラッキングとレンズ補正をやってくれるProcessing用のちゃんとしたライブラリが見当たらなかったので、先人たちの偉業を組み合わせて新しく作りました。先人たちに感謝。 ダウンロードページ（GitHub） kougaku/OculusRiftP5 ページ右下の「Download ZIP」をクリックしてダウンロードしてください。ダウンロードして解凍したら、まずはOculusRift_BasicExampleを実行してみてください。 ライブラリと銘打っていますが、まだJAR化せずにPDE形式になっています。自分のスケッチで使いたいときは、いずれかのサンプルに入っているOculusRift.pdeと、codeフォルダに入っているjna-4.1.0.jar、JOculus.jar、jovr-0.4.4.0.jar、それとdataフォルダに入っているbarrel_frag.gls

モデリングソフトとして根強い人気のあるメタセコイアですが、惜しいことにWindows版しかありません。でも大丈夫。MacでWindowsアプリを動かす方法があります。というわけで、Macでメタセコイアを動かす方法について説明します。 導入環境 これまで「Macでメタセコイア」というと、MikuMikuInstallerを使ったインストール方法が各所で解説されていましたが、現在の最新環境では動作しなかったので、あれこれ試して動作する別な方法を見つけました。今回試したソフトウェアの組み合わせは次の通りです。 Mac OS X Yosemite メタセコイア無償版 LE R3.0 WineBottler 1.7.35 （WindowsのソフトをMacアプリに変換するソフト） 手順 1. メタセコイアのページへ行き、無償版 LE R3.0 インストーラ付（metaseqle30.exe）をダウンロ

この話は前にも書いているが、前のコードではフルスクリーン化した際にウィンドウ本体へのフォーカスが失われるという症状があることがわかったので、そのあたりを修正した。具体的には this.requestFocus(); という1行を加えればよい。ついでに通常のウィンドウに戻す方法も追記する。ちなみにProcessingのフルスクリーン制御ライブラリはあるにはあるのだが、更新が止まっているのでこうやって自前で対応している。 フルスクリーン化する関数 void setFullScreen() { size(displayWidth, displayHeight); frame.removeNotify(); frame.setUndecorated(true); frame.addNotify(); frame.setSize(width, height); frame.setLocation(0

PAppletの派生クラスでもう１つのウィンドウ上で動くアプレットの内容を記述し、PFrameを使ってそのアプレットを動かすウィンドウを作る感じ。なんか毎回こういうの書いてる気がするなー。 PFrame.pde import java.awt.Frame; import java.awt.Insets; public class PFrame extends Frame { public PFrame(PApplet app) { app.init(); while ( app.width<=PApplet.DEFAULT_WIDTH || app.height<=PApplet.DEFAULT_HEIGHT ); Insets insets = frame.getInsets(); setSize( app.width + insets.left + insets.right, app.

mbedJSを使うと、mbedでWebページ連動のハードウェアを作ることができます。今回はmbedJSの導入方法を説明し、mbedJSとp5.jsの連携、iPadでの利用などについて紹介します。 mbedJSとは mbedJSはmbedをネットワーク経由で制御するためのサーバファームウェアです。mbed上でWebサーバとして動作し、PCやスマートフォンからWebブラウザを使ってmbedにアクセスするとWebページが表示されます。ユーザはそのWebページ上で操作を行うことにより、mbedの入出力を制御することができます。 mbedJSではJavaScriptを使ってmbedのAPIを呼び出せるようになっており、プログラマはJavaScriptとHTMLを使ってWebページ連動のハードウェア制御を記述することができます。 必要なもの mbedJSを動かすには以下のものが必要です。 mbed ネ

【2016/10/25修正】 Processingにおいて画像はPImage型で扱われます。特に画像処理をやるようなケースにおいて、画像のコピーを行いたいことが多々あります。その場合に注意すべきことをここに書いておきます。 PImageのコピー 画像をコピーしたいときうっかり以下のようにやりがちですが、よく考えずにこれをやるとちょっと困ったことになります。 PImage src = loadImage("lenna.jpg"); // srcにファイルから画像を読み込み PImage dst = src; // srcをdstにコピーしたつもり 「dst = src」でコピーされるのはデータの実体ではなく、データがメモリ上のどこにあるのかという参照値です。つまりdstもsrcもメモリ上で同じデータを参照していることになるので、このあとにdstに対してピクセルデータを書きかえる処理を行うと、

ArduinoでanalogRead()を使ってアナログ端子を読み取ると0〜1023の整数値（int型）を返します。Arduinoで扱われるint型は２バイトです。これに対し、シリアル通信では１バイトずつデータが送られるため、２バイト以上のデータを送受信するにはちょっと工夫がいります。 情報量が減ることを気にしないのであれば４で割って１バイト（0〜255）に収めてしまうというやり方もありますが、ここではint型のデータを上位バイトと下位バイトの２回に分けてデータを送るという方法を紹介します。 ※逆バージョンはこちら。 ProcessingからArduinoへint型のデータを送る - Imaginary Code Arduinoのコード A0端子から読み取ったセンサ値をPCに送信します。ヘッダ（'H'）は、あるタイミングで受け取ったデータが上位バイトなのか下位バイトなのかを区別するための「

BoofCVというJava用のコンピュータビジョンライブラリがあります。これを使うと基本的な画像処理に加え、オブジェクトトラッキングや特徴量抽出、ステレオ画像計測、領域セグメンテーション、モザイキングなどができます。機能豊富なOpenCVと比べると見劣りしますが性能はなかなか。Androidでも利用できるようです。 ありがたいことにProcessing版もあるのですが、ライブラリを自分でビルドしないといけないようです。 Tutorial Processing - BoofCV というわけで、トライしてみたので導入方法をメモしておきます。 要点 Gradle（グレイドル）なるビルドツールを使います。 JDK（Javaの開発環境）をインストールしておく必要があります。 ビルド時にProcessingに同梱されているcore.jarが必要です。 以下、実際にやった作業手順を記しておきます。環境は

Arduinoのシリアル通信のメモです。１回のSerial.write()で送れるデータは１バイト、すなわち数値として表現できる範囲は0〜255です。int型ならもっと広い範囲の数値（-32768〜32767）を扱えるわけですが、intは2バイトなのでこれを送受信するにはちょっと工夫が必要です。 要点 送信側では、 int型のデータを上位バイトと下位バイトに分けて送信する データを正しい順序で受信するためにヘッダをつけて送信する 受信側では、 ３バイト（ヘッダ＋int）以上のデータが着ているか確認 データが着てたらまずヘッダがあるか確認 ヘッダがあったら、下位バイトと上位バイトを読み取り、その値を合体してint型のデータを復元 Arduino同士の通信 例として、２個のArduino間のデータの送受信を考えます。配線はこんな感じです。 GNDとGND、VinとVin（または5Vと5V）をつ

Processingで画面内に独立した描画領域を作りたいときのテクニックです。PGraphicsを使う方法もありますが、ここではPAppletを使う方法を紹介します。 LocalApplet local_app; void setup() { size(500, 300); local_app = new LocalApplet(this); local_app.setLocation(50, 50); } void draw() { background(255); if ( mousePressed ) { fill(0, 0, 255); } else { fill(0, 255, 255); } ellipse(mouseX, mouseY, 100, 100); } void keyPressed() { // This does not work println("keyPre

ProcessingでArduinoやXBeeと通信するプログラムを作っているとたびたびシリアルポートがらみのエラーに出くわします。大抵の場合、ポート番号や通信速度が正しく設定されていないことが原因なのですが、プログラムでポート番号を「COM1」とか「/dev/tty.usbmodem1234」とか「Serial.list()[3]」みたいな感じで直接書いていたりするとこの問題が起こりがちです。 この問題に関して以前から「実行中にポート番号や通信速度を自由に変更できるUIがあるといいのに！」と思っていたので、ライブラリを作りました。 SerialSelectorライブラリ SerialSelectorはProcessingにおいてシリアル通信の設定ダイアログを表示するためのライブラリです。WindowsでもMacでも動作します。 ダウンロード： こちらのページに置いてます： BACKYAR

最近巷で「GIFアニメに縦線を２本入れると立体感が出る」と話題ですね。「元画像との比較ないの？」とか「縦線入れる"だけ"じゃないだろ」みたいなツッコミが散見されるので、Kinectを使って自分で縦線GIFアニメを作れるコードを書きました。科学的な検証にも興味がありますし。 こういうのが作れます。 作り方 Kinectで取得した奥行き情報（デプスマップ）を元に、各ピクセルが縦線の手前か奥かを判断して、縦線を描画します。縦線の空間的な配置は、シーンに応じて適当に決めます（例えば、カメラから１ｍのところ）。以前、ARにおいてCGに対して人がかぶった時の遮蔽を表現する方法を紹介しましたが、あれと同原理です。 使用するライブラリ インストール方法やAPIの使い方はリンク先を参照してください。 simple-openni （ProcessingでKinectやXtionを使うためのライブラリ） Gif

前回、ProcessingからTHETAのシャッターを切るのが作れた時点で半ば勝利は確信していたのですが、Arduino＋XBee WiFiを使ってシャッターを切るのにも成功しました。これでモバイルでのインターバル撮影はもちろん、各種電子工作と連携した全天球撮影が可能となり、かなり創作の幅が広がります。 使用する道具 THETA Arduino XBee WiFi XBeeシールド XBeeエクスプローラUSB 単純にXBee WiFiを搭載したXBeeシールドをArduinoに挿すだけです。Arduino Fioを使うのでもいいですね。XBeeの設定にはXBeeエクスプローラUSBを使用しました。 XBee WiFiの設定 重要なのはXBee WiFiの設定です。X-CTUなどを使って以下の項目の設定を行ってください。 Network type: INFRASTRUCTURE SSID:

リコーの全天球カメラ「THETA」いいですね。さっそく@MobileHackerzさんをはじめとするハッカー諸氏によってハックが進んでますが、僕もProcessingから操りたいのでコード書きました。といっても、@GOROmanさんのコードをProcessingに移植しただけなのですが。 はい、こんな感じ。大学の僕の部屋です。 Processingのコード PCの無線LANでTHETAにつなぎ、プログラムを実行してください。画面をクリックすると、シャッターを切ります。それだけ。ああ、簡単すぎて怖い。 import processing.net.*; Client client; int[] init = { 28, 0, 0, 0, 1, 0, 0, 0, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 25

Maker Faire Tokyo 2013でも展示されていた寺崎和久さんのGlueMotorをProcessingからコントロールするコードを書きました。 GlueMotorはサーボモータをスマートフォンやタブレットに繋いで手軽にコントロールできるケーブルです。マイコンや複雑な回路は不要で、電池とヘッドフォンプラグだけという驚異のシンプル設計です。オーディオ端子に挿して、音声信号を流すことによってサーボモータを制御します。 通常、サーボモータはArduinoやPICなどのマイコンを用いてPWM信号を出力して制御するのが王道ですが、それをオーディオ端子からの音声出力で代替したところがこの手法の賢いところです。iPhone/Android用のアプリも提供されており、ケーブルを作ってすぐに動かせる手軽さがあります。 Processingのコード というわけで、GlueMotorをProcess

みなさんこの動画はご覧になりましたか？ BOX この『BOX』という作品では、アームロボットに取り付けられた動くスクリーンに対してプロジェクションマッピングが行われます。スクリーンの動きに同期して正確に投影される映像は実に幻想的です。しかし、どこかモヤモヤとした考えが頭をもたげます。「果たしてこれはプロジェクションマッピングである意味はあるのか？」と。 モヤモヤの原因 投影されている映像には視点位置に依存する３次元的な表現が多く含まれています。言い換えると、カメラの視点から見たときにだけ幾何学的に正しく見えるような絵を投影しています。シーン内に人物が登場しますが、彼の視点からはこういう風に見えていないはずです。おそらくこれを撮影しているカメラもまたアームロボットに固定され、事前にプログラミングされた動きをしているのでしょう（あるいはモーションキャプチャなどの計測機器を使ってカメラ位置を正確

タイトルバーがないプログラムをときどき作りたくなることがありますが、タイトルバーがないとウィンドウが移動できなくなってしまいます。そこで、ウィンドウ内をドラッグしたときに移動できるようにしましょう、というのが以下のコードです。 import java.awt.*; int mx = 0; int my = 0; void setup() { size(800,600); } void init() { frame.removeNotify(); frame.setUndecorated(true); frame.addNotify(); super.init(); } void draw() { } void mousePressed() { mx = mouseX; my = mouseY; } void mouseDragged() { Point mouse; mouse = Mou

メディアアート製作やインタラクション系の研究に携わっている人なら、一度はWebカメラをシステムの一部として使ったことがあるでしょう。それはノートPCに内蔵されたチャット用Webカメラだったり、USBカメラだったり、USBビデオキャプチャだったりするわけですが、不思議なことにそういうものをテストするためのまっとうな道具がろくにありません。 Webカメラ付属のソフトウェアが使いにくいのはもはや常識で（Lで始まる会社を毎度呪ってる人も多いはず）、それ以外の候補としてSkypeみたいなビデオチャットツールを使ったり、「ふぬああ」みたいなビデオキャプチャツールを使ったり、はたまたWebカメラを使うFlashが埋め込まれたWebサイトを表示させたりと、各自が突貫工事的な方法でやりこなしてるのが実情でしょう。ええ、よくわかります。 というわけで、Webカメラのテスト用のシンプルなツールを作ることにしまし

今日の話は，ARにおいて人や実物体の後方にCGがある時に，CGの一部または全体が隠れて見えなくなっている状態（オクルージョン）をきちんと表現するべく，Kinectを使ってみましょうというものです． 前回はマーカベースの手法で遮蔽を実現する方法を紹介しましたが，今回はそれのKinect版です．事前に形が知らされていない未知形状の物体や，変形する物体，人間の手や胴体に対してもオクルージョンが表現できるようになります．ビバ！Kinect！ 今日はこれの作り方と原理について解説します．あ，ちなみに僕本人です． まずはソースコード いきなりですがProcessingのコードです．Kinectを扱うライブラリとしてsimple-openniを使いました．simple-openniのセットアップについては説明を省きます． import SimpleOpenNI.*; SimpleOpenNI kinec

ARにおいて，現実の世界に3次元CGが違和感なく存在しているように見せるための条件の１つに，オクルージョンの実現があります．オクルージョンとは隠れのことで，実物体の背後にCGがあるときにCGの一部またはすべてが隠れて見えなくなっている状態をきちんと表現しようというものです． 今回はこういうもの↓に挑戦してみましょう． しくみ TV番組や映画の制作で用いられているクロマキー合成の技法を使います．まず，シーンの背景色を緑色に設定し，実物体と同形状の緑色のCGと，重畳したいCGを一緒に描画します．これによりCGが実物体でマスクされた画像を得ることができます．このデータをいったんバッファに保存します．次にカメラ画像を描画し，バッファ中の緑色でないピクセルだけを画面上に描画していけば，合成完了です． 実装してみる ProcessingとNyAR4psg（Processing版のARToolKit）を

Google Mapper for ProcessingというGoogleマップから地図画像を取得するためのProcessing用のライブラリがあります．ごくシンプルな機能しかありませんが，とても簡単に扱えるので遊んでみてください． 使い方 上記の配布サイトに行くと，Downloadと書かれたところに投げやりにjarファイル（googleMapper.jar）が置いてあるので，それをダウンロードします．Processingを起動して，スケッチ上にgoogleMapper.jarをドラッグ＆ドロップすればそのスケッチで利用可能になります．普段使いするならば，Processing/libraries/googleMapper/library/というフォルダ構成を作ってそこに置くのが良いでしょう． コードはこんな感じです．短い．恐ろしく短い．何の冗談かと． import googlemapper

プロジェクションマッピングが流行ってるようなので、Processingでさくっと書いてみました。ビデオテクスチャの頂点をマウスで操作して、対象物（家具とか）に投影画像をぴったり合わせるというものです。 プロジェクタ固定、対象物固定な静的シーン限定ですが、実際にやってみると、結構楽しいですよ。扉とか箱にセンサをつけて、それに反応して映像が変化するようにしても面白いですね。 import processing.video.*; import processing.opengl.*; Movie mov; // 動画 int selected = -1; // 選択されている頂点 int pos[][] = {{0,0},{400,0},{400,300},{0,300}}; // 頂点座標 void setup() { size( 1024, 768, P2D); // 画面サイズ（適宜調整）