Processingで画面座標に対応する空間座標を計算する - Imaginary Code
3Dのアプリケーションにおいて、画面をクリックして空間中のオブジェクトの表示位置を指定するときなど、画面の２次元座標に対応する３次元空間座標が欲しいときがあります。こんなとき、どんな計算を行えば良いかについて解説します。コードはProcessing 2.2.1にて動作を確認。 画面位置に対応するローカル座標 まず本題に入る前に、３次元空間中の点がウィンドウ上に描画されるまでの過程を理解しておく必要があります。ローカル座標系におかれたCG物体は、モデリング変換、ビューイング変換、投影変換、ビューポート変換を経て画面に描画されます。 モデリング変換を行う行列をMm、ビューイング変換を行う行列をMv、投影変換を行う行列（プロジェクション行列）をP、ビューポート変換を行う行列をUと置きます。それぞれ4x4の行列です。このうち、モデリング変換とビューイング変換はモデルビュー行列という１つの行列で表現
RICOH THETAで撮影した写真やライブ映像をProcessingで全天球表示する - Imaginary Code
RICOH THETAは2013年の発売以来多くのユーザに親しまれ、バージョンアップを重ねて着実に進化を遂げてきました。2014年に発売されたRICOH THETA m15では動画撮影に対応し、そしてつい先日発売されたRICOH THETA Sでは念願のライブ映像出力（HDMI/USB）が搭載されました。ここではTHETAで撮影された写真・映像をProcessingで全天球表示する方法を紹介します。 RICOH THETA S 360度 全天球カメラ 910720 出版社/メーカー: リコー発売日: 2015/10/23メディア: エレクトロニクスこの商品を含むブログ (13件) を見る パノラマ写真を全天球表示する THETAでは２個の超広角レンズで撮影された画像を繋ぎ合わせて１枚のパノラマ写真を作っています。この繋ぎ合わせの処理のことをスティッチと呼びます。こうして得られたパノラマ写真
Processing用のOculus Riftのライブラリを作りました - Imaginary Code
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
Macでメタセコイアを動かそう - Imaginary Code
モデリングソフトとして根強い人気のあるメタセコイアですが、惜しいことに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）をダウンロ
Processingでコード側の設定で強制的にPresent Modeにする - Imaginary Code
普通に公式にある情報なんですが、こうすると普通に実行しても強制的にPresent Mode（フルスクリーン）になります。 boolean sketchFullScreen() { return true; } void setup() { size(displayWidth, displayHeight); } void draw() { } Window Size and Full Screen · processing/processing Wiki · GitHub 逆にPresent Modeになってるかどうかを判定する方法について。PAppletのソースコードを読んだ感じではmain()への引数argsが持っているパラメータから判断できそうなんですが、実際やってみるとPAppletの初期化の過程でそのへんの情報が消えてる（--sketch-pathだけになってる）ようなので、実際
Processingでウィンドウのサイズをマウスで変更＆最大化できるようにする - Imaginary Code
フォーラムにあったコードほぼそのままだけど、import文を足して動作するコードにしたものがこちら。描画領域のサイズ（widthとheight）はウィンドウ変更に連動して値が変わるようになっている。 import java.awt.event.ComponentAdapter; import java.awt.event.ComponentEvent; void setup() { size(320, 240); frame.setResizable(true); frame.addComponentListener(new ComponentAdapter() { public void componentResized(ComponentEvent e) { if (e.getSource()==frame) { redraw(); } } } ); } void draw() { b
Processingでフルスクリーンと通常のウィンドウを切り替える - Imaginary Code
この話は前にも書いているが、前のコードではフルスクリーン化した際にウィンドウ本体へのフォーカスが失われるという症状があることがわかったので、そのあたりを修正した。具体的には this.requestFocus(); という1行を加えればよい。ついでに通常のウィンドウに戻す方法も追記する。ちなみにProcessingのフルスクリーン制御ライブラリはあるにはあるのだが、更新が止まっているのでこうやって自前で対応している。 フルスクリーン化する関数 void setFullScreen() { size(displayWidth, displayHeight); frame.removeNotify(); frame.setUndecorated(true); frame.addNotify(); frame.setSize(width, height); frame.setLocation(0
Processingで複数のウィンドウを作る - Imaginary Code
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 + p5.jsでWebブラウザからmbedを制御する - Imaginary Code
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 ネ
ProcessingでコンピュータビジョンライブラリBoofCVを使う - Imaginary Code
BoofCVというJava用のコンピュータビジョンライブラリがあります。これを使うと基本的な画像処理に加え、オブジェクトトラッキングや特徴量抽出、ステレオ画像計測、領域セグメンテーション、モザイキングなどができます。機能豊富なOpenCVと比べると見劣りしますが性能はなかなか。Androidでも利用できるようです。 ありがたいことにProcessing版もあるのですが、ライブラリを自分でビルドしないといけないようです。 Tutorial Processing - BoofCV というわけで、トライしてみたので導入方法をメモしておきます。 要点 Gradle（グレイドル）なるビルドツールを使います。 JDK（Javaの開発環境）をインストールしておく必要があります。 ビルド時にProcessingに同梱されているcore.jarが必要です。 以下、実際にやった作業手順を記しておきます。環境は
Processingにおけるの画像(PImage)のコピー - Imaginary Code
【2016/10/25修正】 Processingにおいて画像はPImage型で扱われます。特に画像処理をやるようなケースにおいて、画像のコピーを行いたいことが多々あります。その場合に注意すべきことをここに書いておきます。 PImageのコピー 画像をコピーしたいときうっかり以下のようにやりがちですが、よく考えずにこれをやるとちょっと困ったことになります。 PImage src = loadImage("lenna.jpg"); // srcにファイルから画像を読み込み PImage dst = src; // srcをdstにコピーしたつもり 「dst = src」でコピーされるのはデータの実体ではなく、データがメモリ上のどこにあるのかという参照値です。つまりdstもsrcもメモリ上で同じデータを参照していることになるので、このあとにdstに対してピクセルデータを書きかえる処理を行うと、
ArduinoからProcessingへint型のデータを送る - Imaginary Code
ArduinoでanalogRead()を使ってアナログ端子を読み取ると0〜1023の整数値（int型）を返します。Arduinoで扱われるint型は２バイトです。これに対し、シリアル通信では１バイトずつデータが送られるため、２バイト以上のデータを送受信するにはちょっと工夫がいります。 情報量が減ることを気にしないのであれば４で割って１バイト（0〜255）に収めてしまうというやり方もありますが、ここではint型のデータを上位バイトと下位バイトの２回に分けてデータを送るという方法を紹介します。 ※逆バージョンはこちら。 ProcessingからArduinoへint型のデータを送る - Imaginary Code Arduinoのコード A0端子から読み取ったセンサ値をPCに送信します。ヘッダ（'H'）は、あるタイミングで受け取ったデータが上位バイトなのか下位バイトなのかを区別するための「
ProcessingでAWTのボタンを使う - Imaginary Code
ProcessingでGUIというとControlP5というライブラリがありますが、お世辞にも使いやすいものではないので、JavaのAWT（Abstract Window Toolkit）のGUIをそのままのっけるのを試してみました。以下は色をランダムに変更するボタンを表示する例です。 import java.awt.*; // ボタンなどのAWTのGUIの記述に必要 import java.awt.event.*; // AWTのイベントの記述に必要 import java.awt.Font; // AWTのフォント設定に必要 void setup() { size(400, 300); setLayout(null); // 表示位置を座標指定できるようにするためにレイアウトマネージャを無効にする Button b1 = new Button("change color"); // ボ
ちょっと変わった方法で円とか四角形をプルプルさせる - Processing - Imaginary Code
ellipse()やrect()などの描画命令が並んでいる場所をfilter.begin()とfilter.end()で挟み込むと、その範囲内で描画した円や四角形がプルプルするようになる、というのを実験的に作りました。 メインのコードはこんな感じ。普通のアイデアだったら、ellipse()とかrect()の座標値を直接random()でブラすコードを書くところですが、そうなってないのがミソ。 Filter filter; // プルプルフィルタ void setup() { size(400, 300); filter = new Filter(this); // プルプルフィルタの準備 } void draw() { background(222); stroke(0); strokeWeight(4); filter.begin(); // ここからプルプル fill(0, 255,
Processingでビデオキャプチャを手軽に切り替えられるライブラリ「CaptureSelector」を作りました - Imaginary Code
先日シリアルポート設定ダイアログを表示できるライブラリを作りましたが、それのビデオキャプチャ版を作りました。下図のような設定ダイアログが表示されて、キャプチャデバイス、サイズ、FPSを自由に切り替えることができます。 ダウンロード こちらのページに置いてます： BACKYARD - 工学ナビ 使い方 ダウンロードしたファイルを解凍すると、sampleというフォルダ中に「CaptureSelector.pde」というファイルが入っています。このPDEファイルがライブラリ本体で、これを自分のスケッチに追加して使用します。 CaptureSelectorではドロップダウンリストの表示にControlP5ライブラリを使っています。ProcessingにControlP5がインストールされていない場合は、ProcessingのSketchメニューから「Import Library...」→「Add
Processingでフルスクリーン表示にする - Imaginary Code
size()でdisplayWidthとdisplayHeightを指定してPresentモードで実行するのでもいいですが、通常の実行モードにおいて特定のタイミングでフルスクリーン化したいときはこんな感じで。 void setFullScreen() { size(displayWidth, displayHeight); frame.removeNotify(); frame.setUndecorated(true); frame.addNotify(); frame.setSize(width, height); frame.setLocation(0, 0); frame.setAlwaysOnTop(true); } 【2014/12/26】 少しコードを修正したので、こちらもご覧ください。 Processingでフルスクリーンと通常のウィンドウを切り替える - Imaginabl
Processingで実行中にウィンドウサイズを変更する - Imaginary Code
実行中にウィンドウのサイズを変更するには、frame.setSize()とsize()の両方を使います。setSize()にはウィンドウの上下左右の枠も含めたサイズを指定する必要があります。以下にプログラム例を示します。 void setup() { size(400, 300); } void draw() { background(255); } void keyPressed() { if (key=='1') { changeWindowSize(400, 300); } if (key=='2') { changeWindowSize(800, 600); } } void changeWindowSize(int w, int h) { frame.setSize( w + frame.getInsets().left + frame.getInsets().right, h
PAppletの中でさらにPAppletを動かす - Imaginary Code
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とKinectを使って縦線２本で立体感が出るGIFアニメを作ろう - Imaginary Code
最近巷で「GIFアニメに縦線を２本入れると立体感が出る」と話題ですね。「元画像との比較ないの？」とか「縦線入れる"だけ"じゃないだろ」みたいなツッコミが散見されるので、Kinectを使って自分で縦線GIFアニメを作れるコードを書きました。科学的な検証にも興味がありますし。 こういうのが作れます。 作り方 Kinectで取得した奥行き情報（デプスマップ）を元に、各ピクセルが縦線の手前か奥かを判断して、縦線を描画します。縦線の空間的な配置は、シーンに応じて適当に決めます（例えば、カメラから１ｍのところ）。以前、ARにおいてCGに対して人がかぶった時の遮蔽を表現する方法を紹介しましたが、あれと同原理です。 使用するライブラリ インストール方法やAPIの使い方はリンク先を参照してください。 simple-openni （ProcessingでKinectやXtionを使うためのライブラリ） Gif
Processingでスクリーン座標系とローカル座標系の相互変換を行う - Imaginary Code
translate()やrotate()などの幾何変換によって移動・変形された座標系（ローカル座標系）と、スクリーンの左上隅を原点とするスクリーン座標系の相互変換を行う方法について説明します。 スクリーン座標系からローカル座標系への変換 スクリーン座標系における座標値を、現在の座標系での座標値に変換します。 PVector screenToLocal(float x, float y) { PVector in = new PVector(x, y); PVector out = new PVector(); PMatrix2D current_matrix = new PMatrix2D(); getMatrix(current_matrix); current_matrix.invert(); current_matrix.mult(in, out); return out; } ロー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
