[p5]Processing情報発信サイト「proce55ing.walker(α)」リリースしました

Posted under processing by uechoco on 日曜日 5 4月 2009 at 14 : 18 : 26

proce55inginfo-captureed-image以前にも告知していましたが、Processingの情報発信サイト「proce55ing.walker」を本日公開いたしました。

管理人が私を含めて3人おり、まずはブログ形式でprocessing関連の入門記事、バージョンアップ情報、関数の使い方、ライブラリの使いあた、マニアックな使い方などを発信していく予定です。

また、フォーラム（質問掲示板）を設置してありますので、随時processingに関する質問、およびサイトに関する質問・要望を受け付けています。

ゆくゆくは日本で一番のprocessingポータル・コミュニティサイトにしていこうという意気込みです。processingに興味のある方は是非ご覧になってください。また「こんなコンテンツがあるといいよね」「こんな記事書いてほしい」などのご要望がありましたら、お気軽にフォーラムに書き込んでいただけると助かります。


[Processing]PVectorサンプル(1.0リリース記念)

Posted under processing by uechoco on 水曜日 3 12月 2008 at 22 : 45 : 12

Processing 1.0リリース記念として、いくつか新しい機能のサンプルコードを書いてみました。

まずはPVectorクラス。リファレンスには英語で主な使い方は書いてあるものの、実際のソースコードはありませんでした。

リファレンスに従い、position(位置)、velocitiy(速度)、acceleration(加速度)をPVectorクラスで表した実用的なサンプルを書いてみたので、PVectorクラスの1つの使い方として参考にしてみてください。

PLAIN TEXT
Processing:
  1. PFont font;
  2. PVector position, velocity, acceleration;
  3. final int WIDTH = 250, HEIGHT = 250;
  4. final int STATUS_HEIGHT = 50;
  5.  
  7.   // 画面の初期化
  8.   size(WIDTH, HEIGHT + STATUS_HEIGHT);
  9.  
  10.   noStroke();
  11.   colorMode(RGB, 256);
  12.   background(255, 255, 255);
  13.  
  14.   // フォントの初期化
  15.   font = loadFont("ArialNarrow-14.vlw");
  16.   textFont(font);
  17.  
  18.   // 自機の初期化
  19.   position = new PVector(WIDTH / 2, HEIGHT / 2, 0);
  20.   velocity = new PVector(3, 4, 0);
  21.   acceleration = new PVector(0.01, 0.01, 0);
  22. }
  23.  
  25.   // 背景消去
  26.   fill(255, 255, 255, 30);
  27.   rect(0, 0, WIDTH, HEIGHT);
  28.   fill(255, 255, 255);
  29.   rect(0, HEIGHT, WIDTH, STATUS_HEIGHT);
  30.  
  31.   // 自機描画
  32.   fill(255, 0, 0);
  33.   ellipse(position.x, position.y, 10, 10);
  34.  
  35.   // 速度表示
  36.   fill(0, 0, 0);
  37.   text("Position: " + position, 0, height - STATUS_HEIGHT + 14);
  38.   text("Velocity: " + velocity.mag(), 0, height - STATUS_HEIGHT + 14 * 2);
  39.   text("Acceleration: " + acceleration.mag(), 0, height - STATUS_HEIGHT + 14 * 3);
  40.  
  41.   // 場所の更新
  42.   position.add(velocity);
  43.   if (position.x <= 0 || position.x>= WIDTH) {
  44.     velocity.x *= -1;
  45.     acceleration.x *= -1;
  46.     position.x += velocity.x;
  47.   }
  48.   if (position.y <= 0 || position.y>= HEIGHT) {
  49.     velocity.y *= -1;
  50.     acceleration.y *= -1;
  51.     position.y += velocity.y;
  52.   }
  53.   velocity.add(acceleration);
  54. }

実行画面(クリックで拡大)

サンプルコードのダウンロード：PVectorSample.zip


[Processing]1.0リリース

Posted under processing by uechoco on 水曜日 3 12月 2008 at 19 : 23 : 31

そういえば、いつのまにかProicessingの正式版となる1.0がリリースされました。内部リビジョン番号は0162です。

Processing 1.0での変更点

  • ライブラリの変更
  • P2Dレンダラの復活
  • PShapeクラスによるSVG読み込みの対応
  • PVectorクラスの追加
  • コンパイラの変更
  • ソースコードのUTF-8化
  • JRE(JDK) 6.0 update 10への対応（ただし、genericsや拡張for文などのJava 1.5文法は未対応）
  • etc...

まだまだ知名度は低いものの、徐々に名前は広まっています。特に情報デザイン工学などを勉強している学生にとっては、常識に近くなっている気がします。

また、最近では、processing.jsなど、エンジンを移植する人もいるようです。

ゆっくりと、着実にProcessingは浸透していきます。


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

Posted under processing by uechoco on 火曜日 15 4月 2008 at 22 : 15 : 44

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

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

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

geshi-processing-1.0.0.zip

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

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

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


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

Posted under processing by uechoco on 土曜日 22 3月 2008 at 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の可能性はとても広がります。是非ともチャレンジしてみてください。

?


次ページへ »

Copyright © 2012 うえちょこ＠ぼろぐ. WP Theme created by Web Top.