ラベル processing の投稿を表示しています。 すべての投稿を表示
ラベル processing の投稿を表示しています。 すべての投稿を表示

2010年2月9日火曜日

P5球体遊び

気晴らしに作ったもの。
マウスの座標に応じて文字が球体の周りを回転するものです。

コードは下記。
球体の周りのテキストには、任意のRSSフィードを引っ張ってきて遊ぶのも良いかと思います。






















PFont myFont;
int rad = 100;
int theta = 0;

void setup() {
size(600, 600, P3D);
myFont = loadFont("Georgia-48.vlw");
textFont(myFont, random(20,32));

}

void draw() {

String[] msg = new String[13];

for(int num = 0; num < msg.length; num++){
msg[num] = "message"+num;
}

background(225);
//stroke(255, 50);
noStroke();
lights();

translate(300, 300, 0);
rotateX(mouseY * 0.05);
rotateY(mouseX * 0.05);
fill(230, 230, 230);
//sphereDetail(mouseX / 4);
sphere(100);

for(int i=0; i< msg.length;i++){
theta = 30*i;
rotateX(PI/3.0);

if(i%3==0){
//text(msg[i],100+10*i,100+10*i,100+10*i);

fill(0, 102, 153,100);
text(msg[i],rad*cos(theta),rad*sin(theta),100+10*i);

}else if(i%3==1){

fill(102,102,255,100);
text(msg[i],rad*cos(theta),-rad*sin(theta),100+10*i);

}else{

fill(153,0,51,100);
text(msg[i],rad*cos(theta),rad*sin(theta),100+10*i);

}
}

}

2010年2月7日日曜日

proce55ingとWordle

wordleはタグクラウドを簡便に作成可能なWebサービス。

下記画像はSocialBookmarkサービスのDeliciousで保存したタグを
一覧表示したものです。

ブラウザ画面上でテキストのフォント、カラー、配置を調整できるので、
遊んでみると面白いかも。







































ProcessingからもWordleを扱うライブラリ”wordookie”があります。
※JRE ver.1.6以上で動作するようで、MacOSXの人はJava Preferencesを開いてJavaの実行環境を要調整。

参考動画はリンク先のもの。




およその使用法はサンプルに沿って下記。
import wordookie.*;

static String FONT = "MingLiU";

//フォントの最大値、最小値を設定
static final float MAX_FONT_SIZE = 100f;
static final float MIN_FONT_SIZE = 12f;

//テキストで表示するカラー群を格納
static color [] TEXT_COLORS = { #F6EFF7, #BDC9E1, #67A9CF, #02818A };
color BACKGROUND_COLOR = color( 0 );

//表示するテキストを格納
static String [] wordInput = { "Hello",
"Guten Tag",
"\u3053\u3093\u306b\u3061\u306f" , //日本語の“こんにちは”
"Buenos Dias",
"Bonjour",
"Buon Giorno",
"\u4f60\u597d" }; //中国語の“你好”

java.util.List wordList;

int wordIndex = 0;
PFont font;
Layout layout;

void setup()
{
size( 1024, 768 );
smooth();
frameRate( 30 );

font = createFont( FONT, 48 );

// load words
this.loadWords();

// sort words by weight, decreasing
this.sortWords();

layout = new Layout( this, BACKGROUND_COLOR );

background( 0 );
}

void draw()
{

・wordListに含まれる各要素を取り出してフォント、カラー設定
・wordListの各要素のフォントの大きさ、表示テキストの配置を設定


これを動かすと画像のように、ウィンドウ上に表示されます。

2009年10月27日火曜日

processingでMostPixelSever

Most Pixel Sever を動かしてみます。
processing,C++版の両方があるらしいので、粒数を増やしたアプリケーションを作成する場合はC++がお勧めのようですが、今回は簡便なprocessingで。

情報元はこちら

リンク先の展示では巨大ディスプレイに映像を出力している様子ですが、よく見るとディスプレイ自体は1枚でできているものでなく、複数枚をつないでできていることが分かります。。
複数のディスプレイ間のイメージを同期させる仕組みですね。


下記のMost Pixel Severアプリでは、クリックに応じて出力される粒がランダムな方向・速度で画面に出力されます。

TCPソケットに乗せてデータの授受を行っており、各アプリケーションごとに立ち上がった画面間を、粒が飛び交うように見えます。





























DLしたファイルは下記3つ、ブログ記載時点で動かしたものです。
ここではServer,Library,Exampleの各バージョンを揃えておかないと正常に動作しませんでした。(Server_v1上でのExample_v2実行などが不可)
  • ProcessingExample_TCP_v1.zip
  • ProcessingLibrary_TCP_v1.zip
  • Server_TCP_v1.zip

サンプルの動かし方は丁寧にWikiに記載されているので、大まかに流れだけ。
  1. DLした各ファイルを解凍。
  2. Serverの.jarファイルは適当なフォルダに配置。
  3. Libraryの.jarファイルはいつものprocessingのLibrary格納場所へ。
  4. ターミナルで、項番2.でServer.jarの置いたディレクトリまで移動。
    コマンド「java -jar mpeServer.jar -debug1 -framerate30 -screens2」を実行して、Serverを起動。
  5. Sampleに含まれる、mpeTest> client0app フォルダ内のmpeTest.appおよび、mpeTest> client1appフォルダ内の同名.appを起動します。
  6. いずれかのmpeTest.appで立ち上がった画面上でクリックすると粒が出力されます。
    飛ばされた粒は画面をまたいで表示されます。

※1:
裏では、ターミナルに各粒の位置情報が書き出されますが、これは設定ファイル(mpe.ini)で出力有無を選択できるので不要であればOFFにします。

※2:
mpe.ini設定ファイルで調節できる値は以下のもの。
マスターの大きな板の上に、任意の小さな板を複数ならべ、それら板上でデータ連携を行うといった具合です。

 id=0;
 server=localhost;
 port=9002;
 localScreenSize=200,400;
 localLocation=0,0;
 masterDimensions=400,400;
 debug=1;


このライブラリは距離を隔てたディスプレイ上でのインスタレーションに利用しやすいですね。

2009年10月8日木曜日

perl/processing で client/server

下記構成で試してみました。
TCP経由でのデータ連携のコードです。

クライアント処理: Perl
サーバ処理: Processing
port番号: 12345


【クライアント】
#!/usr/bin/perl
use strict;
use IO::Socket;

my $sock = new IO::Socket::INET(PeerAddr=>'localhost',
 PeerPort=> 12345,
 Proto=>'tcp');

die "IO::Socket : $!" unless $sock;

$sock -> print("hello world\n"); # 送信用の文字列を用意
print $sock -> getline; # サーバに文字列を送信

close($sock);



【サーバ】
/***
TCP:12345 portで受信したStringをprintlnする
Compiler: Proce55ing ver1.0.1 later
Date: 2009/10/08
***/
import processing.net.*;

int port = 12345;
Server server;
String str;

void setup(){
 size(200,200);
 server = new Server(this, port);
}

void draw(){
 Client client = server.available();
 
 /* Clientがある場合 */
 if(client != null){
  if((str=client.readString()) != null){ // 文字列を送ってきているなら受信
  print(str);
  client.write("echo: "+str); // Clientに送り返す
   }
 }
}

/* Clientが接続した時 */
void serverEvent(Server s, Client c){
println("Client connect - IP:"+c.ip()); // IPアドレス表示
}



サーバプログラム実行し、サーバ起動中にクライアントプログラムを実行すれば、サーバがリスポンスを返します。

processing で RSS/Atom

Processingで普通にXMLファイルを扱うならこちら

ただし、ここではAtomRSSフィードの加工ができませんでした…。

調べてみたところ、下記サイトを見る限りでは、Atomの加工はできそうです。
http://workshop.evolutionzone.com/2007/09/24/code-read-rss-feed-in-processing/


以下から、ライブラリ2つ「rome.jar」「jdom.jar」をダウンロードします。

ライブラリのダウンロード先:
http://georss.geonames.org/
rome-0.9.jar
jdom-1.0.jar

ダウンロードした.jarファイルを、いつものようにprocessingの外部ライブラリにそれぞれ新規追加しておきます。


ここで、試しにコード「feedParser.pde」を動かすも、jdom.Documentで問題発生、 .class fileから見えないらしい、とのこと。

このコードを見直してみると、2つのクラスしかimportしておらず、これらはどちらもrome.jarからのもの…。

import
com.sun.syndication.feed.synd.*;
import com.sun.syndication.io.*;


ということで、jdomのクラスから下記をごっそり追加importしたところ、

import org.jdom.adapters.*;
import org.jdom.transform.*;
import org.jdom.output.*;
import org.jdom.xpath.*;
import org.jdom.input.*;
import org.jdom.filter.*;
import org.jdom.*;

コードは無事に動きました。


フィードごとのURL,Date,Descriptionが取れてます。

2009年10月7日水曜日

proce55ing/processing で Box2d

ざっと見た限り、processingでBox2dをいじる日本語文献が見当たらなかったので、備忘録がてらに。

もともとC++で動くところのBox2dをJava用に直したのがjBox2d。で、このjBox2d自体はprocessingのcore.jarをもとに動いているとあり。。
では、processingではデフォルトで動くかというとそうでもありませんでした。


下記、試行錯誤。

SourceforgeにあがっているjBox2d(JBox2d-2.0.1.zip)をダウンロードして、いつものよう(※)に外部ライブラリに組み込んだものの、org.jbox2d.p5 が見当たらないというエラーを吐いて、コードは動きませんでした。

※)
processing.appの右クリック>パッケージ表示>Contents>Resources>Java>Libraries の直下に新規フォルダ「jBox2d」を作成後、さらにその下に新規フォルダ「library」を作成。
その中に、ダウンロードしたライブラリ内にあるjbox2d-2.0.1-library-onlyをコピー&リネームして "jBox2d.jar"として先ほどのlibrary直下に配置。












SourceforgeにあるjBox2dライブラリをそのまま使うことはできないようなので、本家サイトのFAQを参照したところ、「BoxWrap2D」なるライブラリがあるとのこと。

「BoxWrap2D」ライブラリのダウンロード先はこちら


試しに、processing上でこのBoxWrap2Dライブラリをimportしてみると、

import org.jbox2d.util.nonconvex.*;
import org.jbox2d.dynamics.contacts.*;
import org.jbox2d.testbed.*;
import org.jbox2d.collision.*;
import org.jbox2d.common.*;
import org.jbox2d.dynamics.joints.*;
import org.jbox2d.p5.*;
import org.jbox2d.dynamics.*;

と、Box2dを動かすのに必要な要素はすべて含まれていそうでした。


ということで、BoxWrap2DライブラリをDLしてその中に含まれるBoxWrap2D.jar上記(※)の手順同様で作成した「jBox2d」>「library」の中に”jBox2d.jar”とリネームして配置し、Box2dのコードを実行すると動作しました。


















追記:2009/10/07

サンプルコード内で、下記のようにインポート箇所が含まれる場合があるのですが、これらはコメントアウトして除いても動作するようです。
import org.jbox2d.testbed.tests.*;
import org.jbox2d.testbed.*;
import org.jbox2d.testbed.timingTests.*;
import org.jbox2d.util.blob.*;

2009年9月30日水曜日

Optical Flow Particles動作メモ

Optical Flow Particles Source Codeを動かすのに、for PPC ではなく、for Intel Mac用の「libJMyron.jnilib」が必要でした。
http://www.jibberia.com/projects/

Optical Flow Particlesについては、リンク先の動画から。
webCamの映像上にアスキーデータを表示して、そのデータを触っているかのように表現するプログラムです。
コードのDL先はこちら















libJMyron.jnilibのファイルは Processing>Contents>Resources>java>libraries>JMyron>libraryの中にあるもので、デフォではPowerPC用になっています。
これをIntelMac用に置き換えておけば、正常に動きました。

2009年3月7日土曜日

3D Mouse Picker , it's Coooool !!

3D mouse picker が素敵です。

操作は3種類、それぞれの操作で異なるアクションが3D空間上で展開されます。
  • "ドラッグ"で視点切り替え
  • "マウスオーバー"で遠近
  • "クリック"でオブジェクトに接近
※下記リンク先ではJava Applet が起動するので、ブラウザ動作重くなります。
http://updatepixels.net/2007/actu/2009/fevrier/easyPick3D/index.html


ソースを見てみると、インポートしてるライブラリのパワーのおかげか、上のアプリケーションをわずか160行で実現しています。。

import easy.EasyCam;
import easy.EasyOpenGL;
import easy.GUIManager;
import easy.VBOManager;
import easy.listener.mouse.EasyPress;
import easy.listener.mouse.EasyRollOut;
import easy.listener.mouse.EasyRollOver;
import easy.object.Easy;
import easy.object.RGBA;
import easy.object.render3D.EasyVBO;

import easy.object.render3D.EasyVBOLine;
import easy.object.render3D.EasyVBOQuad;
import java.awt.event.MouseEvent;
import java.awt.event.MouseWheelEvent;
import javax.media.opengl.GL;
import processing.core.PApplet;

コード追跡& いじってみます。

2009年1月19日月曜日

necessary libraries for "source_particles"

processing blog で気になった記事、"flight404"。。

この記事のソース「source_particles」を動かしたくて、ソース見ていました。


下記、必要なライブラリの参照元。。
元記事のページでは、リンク切れを起こしていたりしたので備忘録です。。


で、上2つのライブラリを processing 直下の libraries に置いてあげたら、動きました。















真冬の花火みたいで綺麗です。。

さらには、キー操作に伴い、アクションが変わるインタラクティブ性も実装されていました。。



















どのキーを押すと、どのアクションが起きるかは下の記述通り。。

‘P’ will toggle a Perlin Noise influence to the Particle velocity.
‘G’ will add a gravity influence to the Particle velocity.
‘F’ will toggle on an invisible floor allowing the Particles to bounce.
‘T’ will toggle the rendering of a Particle trail.

‘N’ will toggle the smoke effect (nebula).
‘S’ will toggle the saving out of images, one per loop.


触ってみたいと思わせられるアプリで、とてもいい作品ですね。

2008年4月1日火曜日

processing 下見

Javaに最近触れてないので、感覚を忘れないようにと探していたらの "processing" です。

Javaで作図などするには Swing などのパッケージを入れてコーディングすればいいのですが、、なるべく書いた→動いた!!の直観的なものがいいなーということで。。

Javaの実行環境が必要ですが、下記からダウンロード可。
http://processing.org/download/

processing はアートとプログラミングの融合を意識して生まれたとのことで、プロの技術を拝見しては感動です。

◇参照:下記 URL群

 ・Articulate

 ・Base26

 ・Bubble Chamber


ソースを見ると構文はJavaライクなのですが、①記述量少ない&②関数とライブラリが充実が魅力です。

ざっと利用できるライブラリを挙げていくと、以下のようなものが見つかります。

  • GUIで便利な OpenGL
  • 音声形式の .mp3
  • web camera対応の OpenCV
  • illustrator で加工するための SVG形式
  • 2次元バーコード QRcode
  • Ajaxで有名なGoogleAPI
  • ネットワーク通信 TCP/UDP packet
  • 音楽ファイルのMIDI
  • データベースもMySQL
  • センサーで捕えられる感覚データに EnviromentalXML ...etc



  • いやはや、至れり尽くせりですね。。

    あとはデザインの遊び心と、データ素材を組み合わせて。。

    Let's Enjoy Processing!!

    Blogger Syntax Highliter