2017年7月
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          

Amazonウィジェット

  • miniPC
  • 最近買った本
  • Raspberry Pi
  • クアッドコプター
  • 書籍ランキング

AdSense

  • 広告
無料ブログはココログ

Processing

2015年1月 9日 (金)

Processing Java バイト列をintに変換

Processing Java でバイト列の型変換を行う方法

ByteBufferを使えばとても簡単に変換できる。
getIntが使える。

javaNIOをインポートする。(NIOってなんだろうと思ったらnew I/Oという・・・)
import java.nio.*;

これはUDPを受け取るプログラム。コイツにUDPツールで0x00003039を送ると、
decimalの12345が出てくる。
「0-udptameshi.pde」をダウンロード

UDPツール(フリーソフト)にはこんな風に入力しTEXT送信を押せばOK
<00><00><30><39>

processingIDEには
00 00 48 57
が表示される。(0x30をdecimalに直すと48になるから)

intを2個3個一辺に変換したい場合は、
int2個なら8byteをwrapしてから、getIntを連続で並べるだけでいける。
  ByteBuffer buffer = ByteBuffer.wrap(data);
  println(buffer.getInt()); // Intの場合は4バイト必要
  println(buffer.getInt());

ByteBufferについて
JAVAのリファレンス

注意:
JavaとC言語でバイトオーダーが違っている!!
Java側でオーダーを変換するには、

  ByteBuffer buffer = ByteBuffer.wrap(data);
  buffer.order(ByteOrder.LITTLE_ENDIAN);
  x = buffer.getInt();
  y = buffer.getInt();

のようにする。JavaのデフォルトはBIG_ENDIANになっている。
サンプルプログラム
「2-udptameshi.pde」をダウンロード


Longに変換するとき。
参考サイト

2014年12月28日 (日)

ProcessingでUDPを使う。

Processing UDPを受信するプログラム
まずはソース
「udpServ.pde」をダウンロード

UDP/IPテストツールを使いながらやってみるのがお勧め。
ベクターでフリーソフトとして手に入る。

ライブラリをダウンロードしてきて、下記フォルダ構成を用意する。
参考:http://labs.uechoco.com/blog/2008/03/processingjar.html
こちらのサイトはUDPのライブラリ以外の場合でも使える。いままで見た説明の中で一番詳しくわかりやすかった。

udpServというスケッチファイルを作ったとしたら、udpServというフォルダが出来ているはず。そこにcodeというフォルダを手動で用意して、落としてきたudp.jarを入れる。
つまりフォルダ構成をこうする↓

\udpServ
|
+--\code\udp.jar  <-udp.jarをcodeフォルダに入れる。
+--udpServ.pde

-----
本プログラムを起動すると、
ポート50200を開いて待ちうけ。

void receive(byte data[]){
}

何かデータが来たら、この関数でデータを受け取る。
ただし、byte型でしか受けられない。
intや他の型は加工が必要。

------
動作確認方法

UDPテストツールで送信先ポート番号を50200に設定。
IPアドレスを、送信先のアドレスに設定。
送信するテキスト

<STX>1235<ETX>

としていれば、TEXT送信ボタンで送ると
Processing側では

hello
2
49
50
51
52
3

という文字列がコンソールに出てくる。
<STX><ETX>ではなく<0A>を末尾につけるパターンも使える。
ラズパイにUDPを送信できるプログラムを置いて実行し、ポート50200宛てに送るようにしておけば、本プログラムで受信できる。

送信プログラムの中で、送信内容をセットするにはsprintfをよく使う。

sprintf(buf,"%d,%d\n",x,y);

としておいて、bufの中身をsendtoすればUDPで送信できる。
UDPツールで受け取るとこんな感じになる。

->受 192.168.0.5    (48484)304, 1247<LF>
->受 192.168.0.5    (48484)296, 1249<LF>
->受 192.168.0.5    (48484)400, 3094<LF>

テキストデータが来た後<LF>で終端されている。

2014年7月10日 (木)

ProcessingでOpenCVのライブラリ HSVを使ってフィルタを作成

Processing for OpenCV 使い方。
Processing 2.0.3が入っていれば、
sketch⇒ImportLibrary⇒AddLibrary⇒CVで検索⇒Install
これだけでインストール可能だった。
なにもいじる必要がない。最もいいバージョン。


Processing OpenCVのライブラリを使う
リファレンスが付属しているのだが、ところどころ未完成になっていて使い方がわからないままの関数が多い。ネット上にもあまり使用例が落ちていないので、付属サンプルソースを見よう見真似しながら使うことになる。
イメージをロードして、opencvオブジェクトを作る。
PImage src;
src = loadImage("test.jpg");
opencv = new OpenCV(this, src);
これ以降はopencvというインスタンスを操作しながら処理を進める。
画像のメモリ内容をコピーするには、
PVectorでget()を使うような感じで、
PImage thresh;
thresh = opencv.getSnapshot();
のように使う。
HSV画像(グレイ)を得るには、
PImage h;
opencv.useColor(HSB);
h = opencv.getSnapshot(opencv.getH());
それを表示するなら
image(h, 0, 0, 300, 250);
以上が簡単な使い方の例。
次に、任意の色相範囲だけをフィルタで取り出してみる。
マウスを画面左右に動かすと、その値にしたがって閾値が動くようにしてみた。
詳しくはmouseMoved()の中を参照。
数学関数mapを使って、座標変換をしている。

「hsvTest.zip」をダウンロード

2014年5月 5日 (月)

Processingでソケット通信させる。

Processing サーバお試しプログラム

processingならより一層簡単にサーバクライアントプログラムが組める。
これを参考にするのが一番
どこかのテキスト(外部ページです)

しかし
一番簡単なはずのサンプルプログラムが最初動かなかった。
The constructor Server is undefined
というエラーが出てくる。

ちゃんと Sketch > Import Library > net
でライブラリのインクルードを追加したはずなのだが。

原因は、ソースコードのファイル名であった。
ソースの名前を"server"とすると、インポートしようとしているServerクラスの名前と重複してしまう。このためにコンパイラはスケッチに書いたソースにコンストラクタを探しに行ってしまう。Processingで起こる意味不明なトラブルは、まずファイル名のつけ方を疑ったほうがいいようだ。

processingの質問掲示板(英語)


2014年4月13日 (日)

オリジナルゲーム第一弾 マウスを使ったミニゲーム

C++のオブジェクトの勉強をしていたら何か作ってみたくなり、なんやかんやでゲームエンジンを作ってしまいました。

本当はもう少しキャラクタの動きにこだわりたかったのだけれど、一旦完成させて公開まで持っていくという目標だったので、ここで公開します。

※Webに貼り付けると動かなかったので、ローカルにダウンロードして実行してもらう形になります。


実行手順:

ProcessingのIDEを起動した後、下記ソースをスケッチに貼り付けてください。実行するとフォルダを作成しろというダイアログが出ると思うので、OKしてください。

作成されたフォルダ、prj_gokiGameというフォルダに、
添付のデータ(bang.zipのほう)を入れてください。これはゲームの中で使われる音やグラフィックが入っています。

「prj_gokiGame.pde」をダウンロード

「bang.zip」をダウンロード



2013年12月15日 (日)

Processingでベクトルの勉強

ベクトルの計算を検証するため、矢印を図示するクラスを作成した。

「vectorGraphTame.zip」をダウンロード

VectorGraphTameのsetup()で描画するベクトルを生成し、draw()でdisplay()を呼び出せばOK。vgmはマウス座標にあわせて逐次描画が書き換わる。



ベクトルの外積を使って、直線の交差を判定するプログラムを書いた。
動作:
マウスを動かしてもう一本の動かない方のベクトルに交差させると、ベクトルの色が変わり、交差したことがわかる。
VectorGraphクラスがちょっと大がかりだったので、ちょっと書き換えた。

「vectorEx1e.pde」をダウンロード


ベクトルの計算過程を図解
Gaiseki

2013年8月27日 (火)

Processing vimでシンタックスハイライトを利用する方法

vimでprocessingのプログラミングをやるときに、キーワードをハイライトしてくれる機能をプラグインとして追加できる。このやり方をメモ。

↓うまくいけば、こんな感じになる。

Ws000002


Processing vimでシンタックスハイライトを利用する方法

まずはGitHubに行き、vimのプラグインをダウンロードする。

GitHubからソースを落としてくるときは、一個ずつファイルのリンクを選ぶのではなく、右下のほうにあるDownloadというボタンを押す。すると”vim-processing-masterという”圧縮ファイルが手に入る。

これを適当なところに解凍し、そのフォルダを開く。その隣ぐらいにvimのインストールされたフォルダを並びにして開く。

インストールフォルダの例↓
X:\vim\vim74-kaoriya-win64\vim74

圧縮ファイルの中にinstall.txtというファイルがあり、その中の文によると、

1.Vim runtimeディレクトリにファイルを入れる。

2.vimrcファイルに下記変数を追加する。

  let processing_doc_path="c:\\Programs\\Processing\\reference"

3.PythonがインストールされていればCtrl+Kでreference検索が可能になる。


以降、この手順書に沿って試した。


ここから、
落としてきたフォルダの中にあるフォルダの名前に対応したフォルダに、フォルダの中身をそれぞれ入れていかなければならない。

Vim_processing


まず、util,binは入れるところがないのでvimインストールフォルダ直下に入れておく。

ftdetectの中にある、processing.vimは、vimフォルダの中にあるvim74のftdtectに入れる。

X:\vim\vim74-kaoriya-win64\plugins\golang\ftdetect


同様に、ftpluginの中にあるprocessing.vimをvimインストールフォルダの中にある、ftpluginに入れる。

F:\vim\vim74-kaoriya-win64\vim74\ftplugin

syntaxフォルダも同様、ここに対応する。

F:\vim\vim74-kaoriya-win64\vim74\syntax


以上。

2013年8月24日 (土)

Processing PVectorを使いこなす 多角形の当り判定を実装

多角形の描画だけではつまらないので、当り判定を実装することにした。
ベクトルで絵を描画したあと、これらのベクトルを元に判定対象の点が多角形の内側にいるか、外側にいるかを判定する。

まずはソース
「130804_prj_PolygonAtari.zip」をダウンロード

多角形の線分と重なる線分Lnベクトルと、各頂点から判定対象の点Pに伸ばした(P-Vn)ベクトルの外積を求め、その結果の正負で点PがLnベクトルの右側にあるのか左側にあるのかが求められる。これを全ての線分について計算し、全ての線分が右側判定だったら、点Pは多角形の内側にいると判定できる。

Photo


外積の計算について
Referenceを見ずにmux()と同じ感覚でソースを書いて

hoge.cross(hoge2);

とやってしまうと、このcross関数は何もしてくれない。
crossの返り値はPVector型なので注意。

PVector cr = L[i].cross(t);
println(cr);
if(cr.z > 0){
  count++;
}

このような感じで一旦PVectorに受けなければならない。

岩のようないびつな多角形を生成し、それを隕石らしく回転+移動させてアニメーションさせてみた。これらの多角形はマウスオーバーすると線が赤色で表示される。

ソースはこちら
「130804_prj_RockAtari.zip」をダウンロード

コンストラクタの中で乱数を駆使して隕石の形状を生成する。中心からの距離をばらつかせることで、いびつな形状を作り出す。これをlen_arr[]に記録しておき、display()の度にロードして描画に使う。

update()のなかで、隕石の回転と移動を計算している。最初の頂点を書くためのdirectionベクトルが隕石を描画する基準となっており、このベクトルを回転させると隕石自体が回転する。

ここまでできれば宇宙船ゲームが作れそうになってきた。

--------------------------------------------------

Processingを使えばアニメーションも簡単。
取りあえず作って遊べる。

Processing アニメーションプログラミング入門

        田中 孝太郎 技術評論社 2011-07-15
        売り上げランキング : 289329
by ヨメレバ

2013年8月22日 (木)

Processingでvertexとベクトルを使いこなす。第二弾

vertexとベクトルを使いこなす第一弾で多角形や、岩のようなグラフィックを生成した。今回は、同じものを少し違う描き方で描画させた。

まずはソース
「130803_prj_Takakkei.lzh」をダウンロード

6type2

後から追加したい機能が実装しやすいように描画の仕方を変えることで、色々な応用が可能。この描画の仕方は多角形を描くときよりも、マリオのようなアクションゲームの地面を作成するときに使いやすいかも。

多角形の中心から頂点までの長さと頂点の数をしていして描画するタイプはこちらの第一弾を参照されたし。
多角形の描画 TYPE1

2013年8月10日 (土)

Processing vertexの使い方 ベクトルを使って多角形を描く

マイコンを一休みしてProcessingで遊ぶ。

PVectorのメソッドを駆使すると、色々な応用が簡単に実現する。

「rock.java」をダウンロード
多角形の頂点を計算するためにベクトルを使ってみた。
locationは多角形の中心位置ベクトル。vertは多角形の頂点位置ベクトル。
dirというベクトルをくるくる回しながら頂点を計算する。

Photo


実行方法
テキストエディターで開いてProcessingにコピペする。


「rock2.java」をダウンロード
こんどは少し変り種。
random()を使って岩石を生成させてみた。


「rock4.java」をダウンロード
さらに描いた多角形を回転させながら移動させて、地面を転がっているように似せてみた。
Processingで描くとすごく滑らかに表示される。ダブルバッファリングなどのテクニックを講じる必要がない。


「rock5.java」をダウンロード
岩がごろごろ。

Photo_2

directionを2π/5ずつ回転させ、その終端同士を結ぶと、ちょうど正五角形が描画できる。
Directionベクトルを軸(頂点)とし、ランダムな数字を掛け合わせると、中心からばらばらの距離に頂点が置かれることになり、いびつな5角形を描くことができる。
さらに2π/5をrandom関数で数パーセントばらつかせると、さらに岩のような図形を自動生成できる。

乱数を使って一旦生成した頂点座標は、描画するたびに変化してしまうとぐにゃぐにゃと形が変わってしまう。そこで、コンストラクタで生成したパラメータを配列に記録する。これをdisplay()関数の中で読みこんで描画することで、必ず同じ形状を描画できる。