4 15

[Processing]Processing用のGeSHiハイライトファイルを作ってみた

Tag: processinguechoco @ 22 : 15 : 44

Processing用のGeSHiハイライトファイルを作成しました。MovableTypeからWordPressへの移行作業の副産物なんですが、とりあえず動いているし、ハイライトや関数リンクも大体問題ないので公開します。

GeSHiを使用しているシンタックス・ハイライト系であれば、きっと動くと思います。ざっと例を挙げましょう。

ダウンロードは以下のリンクです。

geshi-processing-1.0.0.zip

私はWordPressのiG:Syntax Hiliterプラグインを使っているので、プラグイン ディレクトリのsyntax_hilite.phpのdoHilite()関数のswitch-case文に以下を追加しています。

PHP:
  1. // Processing Highlight
  2.             case "p5code":
  3.                 $mType = "processing";
  4.                 $mTypeShow = "Processing";
  5.                 break;

こうすることで、p5codeというタグでハイライトができるようになります。


3 22

[Processing][仕様]外部ライブラリ(*.jar)の設置方法

Tag: processinguechoco @ 20 : 00 : 00

 Processingで高度なことをやろうとすると、Processingに標準搭載されていないProcessing用ライブラリや、Java用のライブラリを使うことがあるかもしれません。今回は、そういった外部ライブラリはどこに置けば良いのかを調べてみました。

1. codeフォルダに置く (一番簡単、その場限り、古くからの方法)

 一番簡単な方法としては、該当スケッチのフォルダに、codeフォルダを作成して、その中に外部ライブラリのjarファイルを置きます。フォルダ構造だと、以下のようになります。

  • SampleSketch
    • code
      • SomeExternalLibrary01.jar
      • AnotherExternalLibrary01.jar
      • ***.jar
    • SampleSketch.pde

 codeフォルダの中に置いた外部ライブラリのjarファイルは、自動的にProcessing側が判断して読み込まれます。ただし、関係のない*.jarファイルを置いていても読み込まれてしまうので注意が必要です。Java Appletにエクスポートするときに関係のないライブラリまで一緒にパックされるので、アプレットのファイルサイズがその分だけ増えてしまいます。

 codeフォルダの中に置く方法は、Processingの古いバージョンから使われている方法です。この方法では、スケッチの数だけ外部ライブラリのjarファイルが増殖してしまうという欠点がありました。その欠点を補うべく、今のProcessingでは新しいライブラリシステムが提供されていて、そちらの利用が推奨されています。

2. ライブラリシステムを利用する (少し複雑)

 いつからサポートされたのかはわかりませんが、前述のとおり、今のProcessingでは外部ライブラリを効率よく呼び出すための仕組みが提供されています。少し構造がわかりにくいかもしれませんが、いくつかフォルダ構造例がでてくるので、悟ってもらえると助かります。

 このライブラリシステムでは、jarファイル名、フォルダ構造、設置場所の3つの決まりがあります。

2-1. jarファイル名

 jarファイル名は、A~Z、a~z、0~9、_(アンダーバー)の63文字の組み合わせでなければなりません。また1文字目が数字であってもいけません。もちろん拡張子の「.jar」は例外です。もし、この規則に当てはまらないjarファイル名であった場合は、自己責任でファイル名を変更しなければなりません。いくつか例を示します。

  • OK  internationalization.jar
  • OK  Sample007Example.jar
  • OK  traer_animation.jar (アンダーバーはOK)
  • NG  007Sample.jar (数字で始まっている)
  • NG  traer_animation-1.6.jar (ハイフンとドットが含まれている)

2-2. フォルダ構造

 フォルダ構造は、jarファイル名と同名のフォルダを作り、その下にlibraryという名前のフォルダを作り、さらにその下にjarファイルを置きます。たとえばsample.jarという名前のライブラリがある場合、フォルダ構造は

  • sample
    • library
      • sample.jar

となります。

2-3. 設置場所

 設置場所の候補は2箇所あります。

 1箇所目はProcessingのプログラム(processing.exe)が置いてあるフォルダの中のlibrariesフォルダの中です。このlibrariesフォルダは、video・net・opengl・pdfなどのProcessingに標準搭載されている追加ライブラリのためのフォルダですが、ここに追加しても問題ありません。ためしにsampleライブラリを追加してみると以下のようなフォルダ構造になります。

  • C:\Program Files\Processing\libraries (私の環境)
    • candy
    • dxf
    • javascript
    • net
    • opengl
    • pdf
    • serial
    • sample
      • library
        • sample.jar
    • video
    • xml

 設置したら、Processingを再起動(全てのProcessingエディタを閉じた後に再びProcessingエディタを起動)してみてください。以下のようにメニューアイテムが追加されます。

processing_pde_add_library_to_libraries.jpg

 もう1箇所の設置場所がユーザーのスケッチブックフォルダ以下です。スケッチブックフォルダの場所は、Processingエディタメニューの[File]-[Preferences]で表示される設定ダイアログの[Sketchbook location:]に指定されているフォルダです。デフォルトのスケッチブックフォルダは、Windowsであれば「自分のアカウント\My Documents\Processing\」です。Mac OS Xであれば「自分のアカウント/Documents/Processing」です。このスケッチブックフォルダ以下にライブラリフォルダを追加します。ライブラリ用に「_libraries」というフォルダを作って、そこに入れるのがお勧めです。ためしにsampleライブラリを追加してみると以下のようなフォルダ構造になります。

  • C:\Documents and Settings\自分のアカウント\My Documents\Processing (私の環境)
    • _libraries
      • sample
        • library
          • sample.jar
    • 2D (私の作業フォルダ)
      • Work (私の作業フォルダ)
    • 3D (私の作業フォルダ)
      • Work (私の作業フォルダ)

 設置したら、Processingを再起動(全てのProcessingエディタを閉じた後に再びProcessingエディタを起動)してみてください。以下のようにメニューアイテムが追加されます。

processing_pde_add_library_to_sketchbook.jpg

 外部ライブラリを使えば、Processingの可能性はとても広がります。是非ともチャレンジしてみてください。

 


3 20

[Processing][仕様].pdeはインナークラス、.javaは別クラス

Tag: processinguechoco @ 00 : 00 : 00

 PDE(Processingの開発環境)を使っている人の中には、1つのスケッチ内で複数のタブを使っている人もいるかもしれません。複数のタブを使う理由としては、スケッチ本体クラスの他に別のクラスをつくるとき、ファイル(タブ)が分かれていた方が開発しやすいからだと思います。ちなみに、別のタブを開いた場合、ファイル内容は「タブ名.pde」という名前でスケッチのディレクトリに保存されます。

 もしかしたら勘違いをしている人がいるかもしれませんが、PDEの標準の仕様では、複数のタブを開いてクラスを書いても、1つのタブの中にクラスを書いても、コンパイル結果は同じになります。どういうことかというと、複数のタブを開いて別のクラスを作っても、そのクラスはスケッチ本体クラスのインナークラスとして結合されるのです。別の言い方をすると、スケッチのディレクトリ直下にある「*.pde」ファイルは、全部結合された後、コンパイルされるということです。

 Processing使い(ってなんて言うのかな?Processor?Processing Coder?)にとっては、基本的にはインナークラスになってくれる仕様のほうがありがたいと思います。別途クラスに分けていても、JavaとしてはPApplet派生クラス内のインナークラスなので、Processingの命令がそのまま使えます。インナークラス内で何事もなく描画命令が使えるのが一番の利点でしょう。

 ではインナークラスにされると困る場合はどうすればいいでしょうか?(そんなことあるのかよ!って突っ込みはナシでお願いしますw実際にさっき困ったのでこの記事を書いているわけなのでw)PDEとは違うエディタで開発する?そんな必要はありません。PDEのタブの特別な仕様として、[New Tab]でタブを作るとき、タブ名の後ろに「.java」をつけると、pdeファイルではなくjavaファイルを作ることができます。タブ名に「.(ドット)」を使うことはできないので、普通は「_(アンダー)」に置換されてしまうのですが、末尾の「.java」だけは例外で、javaファイルを作るときの印だそうです。

 [New Tab]からjavaファイルを作った場合、タブ名が「XXXX.java」という名前になっているので、一目でpdeファイルではないことがわかります。ファイル内容は、タブ名と同名でスケッチのディレクトリに保存されます。もし、途中からjavaファイルに変えたい場合は、Processing上で[Rename]するか、スケッチのディレクトリを開いて自分で拡張子を変えるかすれば、javaファイルにすることができます。もちろん、その逆でpdeファイルに戻すこともできます。

 下の英文は、ProcessingのPDEについての解説ページ内のタブについての説明文です。勝手に太字にしてしまいましたが、今回の「.java」ファイルの仕様についても触れられています。


Tabs, Multiple Files, and Classes

It can be inconvenient to write a long program within a single file.
When programs grow to hundreds or thousands of lines, breaking them
into modular units helps manage the different parts. Processing manages
files with the Sketchbook and each sketch can have multiple files that
are managed with tabs. The arrow button in the upper-right corner of
the Processing Development Environment is used to manage these files.
Click this button to reveal options to create a new tab, rename the
current tab, and delete the current tab. If a project has more than one
tab, they can also be hidden and revealed. Hiding a tab temporarily
removes that code from the sketch (it will not be compiled with the
program when you press Run).

Tabs are intended for more advanced users, and for this reason, the
menu that controls the tabs is intentionally made less prominent.

For programmers familiar with Java. When a program with
multiple tabs is run, the code is grouped together and the classes in
other tabs become inner classes. Because they're inner classes, they
cannot have static variables. Simply place the "static" variable
outside the class itself to do the same thing (it need not be
explicitly named "static" once you list it in this manner). If you
don't want code to be an inner class, you can also create a tab with a
.java suffix, which means it will be interpreted as straight java code.

It is also not possible to use static classes in separate tabs.
If you do this, however, you'll need to pass the PApplet object to that
object in that tab in order to get PApplet functions like line(),
loadStrings() or saveFrame() to work.

Currently, the tabs get truncated when there are too many (Bug 54).

Environment (IDE) \ Processing 1.0 (BETA)

 一応、PDEのソースコードレベルでも調べてあります。Sketch.javaのbuild()メソッド内の、

Java:
  1. // check to see if multiple files that include a .java file
  2.       externalRuntime = false;
  3.       for (int i = 0; i <codeCount; i++) {
  4.         if (code[i].flavor == JAVA) {
  5.           externalRuntime = true;
  6.           break;
  7.         }
  8.       }

Java:
  1. // 1. concatenate all .pde files to the 'main' pde
  2.     //    store line number for starting point of each code bit
  3.  
  4.     StringBuffer bigCode = new StringBuffer(code[0].program);
  5.     int bigCount = countLines(code[0].program);
  6.  
  7.     for (int i = 1; i <codeCount; i++) {
  8.       if (code[i].flavor == PDE) {
  9.         code[i].preprocOffset = ++bigCount;
  10.         bigCode.append('\n');
  11.         bigCode.append(code[i].program);
  12.         bigCount += countLines(code[i].program);
  13.         code[i].preprocName = null;  // don't compile me
  14.       }
  15.     }

ら辺をみれば、外部ファイルとして扱ったり、pdeファイル同士を結合したりしているような雰囲気がわかると思います。


3 17

[Processing]pointSphereを見てみる

Tag: processinguechoco @ 00 : 00 : 00

 少し前にVimeoにpointSphereという作品が投稿されていたのですが、ソースコードがダウンロードできることに気がついて、少し気になった点があったので、中身を覗いてみました。

 気になった点というのは、

  1. 球の表面上の点はどういう計算で配置したのか(位置を求めたのか)
  2. 球の表面上の点の太さをどのように実現したのか

です。

 中身を見てみると、球の表面上の点の配置はtoxiclibsのgeomutilsに含まれている、Vec3Dクラスを用いているようです。これはいいライブラリですね。Vec3D.randomVector()で適当な方向のベクトルを作り、Vec3D.scaleSelf(r)でベクトルの長さを半径分まで伸ばしています。もし、このライブラリを使わずに、(少しいい加減だけど)球の表面上の点を配置するなら、たとえばこんな方法はどうでしょうか。

Processing:
  1. float px = random(radius);
  2. float pl = sqrt(sq(radius) - sq(px));
  3. float py = random(pl);
  4. float pz = sqrt(sq(pl) - sq(py));
  5. px *= (random(1) <0.5 ? 1 : -1);
  6. py *= (random(1) <0.5 ? 1 : -1);
  7. pz *= (random(1) <0.5 ? 1 : -1);

px < radius

 1行目で、半径以下の範囲で、pxを定めます。

py2 + pz2 = radius2 - px2
pl = √(py2 + pz2) = √(radius2 - px2)

 2行目で、px⊥pyの直角三角形の斜面plを求めます。

py < pl

 3行目で、pl以下の範囲で、pyを定めます。

pl2 = pz2 + py2
pz = √(pl2 - py2)

 4行目で、pzの長さが自ずと定まります。
 5~7行目で、符号の±をランダムにとります。

 一応これで、球の表面上に点を配置できます。結構適当な書き方ですが、数式で考えれば一応あってるはずです。

 さてさて、お次は点の太さの実装方法です。ソースコードを良く見ると、表面上の点はellipse()で描いているようです。普通に考えるとカメラが回転してしまうと、円の描く方向が変わってしまうので、変な風に見えるのですが、このプログラムでは、円を描く前にrotateY()で回転をかけています。どうやら、ビルボードという手法を用いることで、ellipse()でも大丈夫なように調整しているようです。

 ビルボードというのは、2Dの画像を3D空間上でいい感じに表示させる方法の1つで、常にカメラの正面の方向を向くように画像を回転させるテクニックです。「ビルボード 3D」とかで検索すると関連記事が出てくると思います。

 たぶん私だったらビルボードなんてテクニックをすっかり忘れていたので、sphereDetail()で精度を落としてsphere()で球を描いてしまうと思います。sphere()なら、もともとどの方向から見ても球ですから。もちろん、ellipse()に比べたらその描画コストは計り知れませんけれども。

 うまいの人のプログラムはやっぱり参考になりますね


3 16

[Processing]海外の大学のprocessing講義資料

Tag: processinguechoco @ 00 : 00 : 00

 ニューヨーク大学の芸術学部(NYU's Tisch School of the Arts)のITP学科(Department of Interactive Telecommunications Program)では、The Nature of Codeという、Processingのプログラミングを通じて自然現象をシミュレーションする授業があります。その授業の講師のDaniel ShiffmanさんのWebサイトには、The Nature of Codeの講義に使われるチュートリアルとその解説が全て掲載されています。

 講義資料というだけあって、分量的にかなりあります。自然現象のシミュレートなので理系的な話がちょくちょく登場するとの、そもそも英語なので、まじめに読もうとすると大変ですが、とても価値のある資料だと思います。Processingで出力したJava Appletとソースコードも掲載されているので、とても参考になります。

 幾何学的なアート作品を作成するときは参考になりますね。

 余談ですが、The Nature of Codeのシラバスの一番下に、成績のつけ方が載っているのですが、

宿題:50%
プロジェクト:30%
出席:20%

と出席点が意外と高いことになんだか親しみを覚えました。


« 前ページへ次ページへ »