<< 第１回：ガイダンス | top | 第３回：Processing入門（２）：アニメーションを作る >>

第２回：Processing入門

今日の講義では、MITのBenFryとCaseyReasによってつくられた電子メディアを素材とし、視覚デザインを行うためのプログラミング言語と開発環境である、Processingを学びます。

Processingとは何か

Processing is an open source programming language and environment for people who want to program images, animation, and sound. It is used by students, artists, designers, architects, researchers, and hobbyists for learning, prototyping, and production. It is created to teach fundamentals of computer programming within a visual context and to serve as a software sketchbook and professional production tool. Processing is developed by artists and designers as an alternative to commercial software tools in the same domain.

意訳：Processingは、イメージやアニメーションそしてサウンドのプログラミングをしたいと思っている人々のためのオープンソースのプログラミンング言語であり開発環境です。アーティスト、デザイナー、建築家、研究者、そして趣味として使う人が、プロトタイピングや制作のために使うものです。ビジュアルな文脈でコンピュータプログラミングの基礎を教えるため、そしてソフトウェアのスケッチブックとして、またはプロフェッショナルのための制作ツールとして作られています。Processingは、アーティスト達やデザイナー達によって、おなじ分野の商業ソフトウェアへの代替手段として開発されています。

(Processing.orgトップページより)

Processingの特徴

Processingをインストールする

processing.jpのサイトを参考にして、WindowsにProcessingをインストールしてみましょう。

WindowsにProcessingをインストール(Processing.jp)

プロセッシングを使ってみる

インターフェイスの使いかた

fig1105_01.gif

Processing環境は、プログラムを表示させる統合されたテキストエディターと、ディスプレーウィンドウから構成されている。実行 "run"ボタンが押されると、プログラムはコンパイルされ、グラフィックウィンドウが立ち上がる。メインの環境ウインドウから、実行、停止、セーブ、開く、そしてファイルのエキスポートが可能である。

File > Open > Example　メニューからサンプルのプログラムを選び、実行してみる。

Processingプログラミング入門(1)：プログラミングの文法

サンプル1：コメント

To view this content, you need to install Java from java.com

以下のサンプルはコメントアウトの方法を示しています。

// コメント
    
// 二重のスラッシュは、コメントを意味します
// それ以降の1行が、すべてコメントと見なされます
// スラッシュの間にはスペースを入れてはいけません
// もし複数行に渡るコメントを書きたい場合には
// 次のような書式のほうがよいでしょう
    
/* 
スラッシュとアスタリスクで始まり
アスタリスクとスラッシュで終るのが
複数行にわたるコメントです
*/ 
    
// コメントアウトされていないテキストは全て、コンパイルされます。
// 例えば、以下の行は、コメントアウトされていないので、
// プログラムが実行されます。

size(200, 200);

サンプル2：関数

To view this content, you need to install Java from java.com

関数を使用することで、画面上に色や演算する数字を指定した、基本図形を書き出すことができます。関数の括弧()の間にある、数字やそのほかのデータは、関数に影響するパラメータです。沢山のパラメータを持つ関数もあれば、パラメータをもたない関数もあります。

// 関数
    
// size関数は2つのパラメータを持ちます
//1つ目は生成するウィンドウの幅、2つ目は幅です
size(200, 200); 
    
// background関数は1つのパラメータを持ちます
//0(黒)から255(白)までの範囲で、グレースケールの明度を指定します
background(102);

サンプル3：命令文

To view this content, you need to install Java from java.com

プログラミングを作文に例えるなら、命令文(Statements)は、文に相当するものです。命令文は単純な命令を表現したもので、文章における句読点と同様に、命令の終端記号としてセミコロン(;)で終了します。文章において色々な文が存在するように、命令文もさまざまな種類があります。変数の宣言や、変数への値の割り当て、関数の実行、オブジェクトの生成など多岐にわたります。プログラムに際しては、全ての命令文がセミコロン(;)で終るよう気をつけること。

Processingのプログラムは、大文字と小文字を区別します。例えば、size関数を"Size"と記述したばあい、プログラムはエラーを返します。

また、Processingのプログラミング言語は、半角スペースはなにも無いものとして無視します。ただし全角スペースは、エラーの原因となるので注意しましょう。

// 命令文

// Size関数を実行
size(200, 200);

// 新たに、変数"x"を定義
int x;
// 変数"x"に、値"102"を代入
x = 102;

// background関数を実行
background(x);

サンプル4：テキストエリア

ディスプレイに図形を表示するだけでなく、テキストエリアにテキストを記述することが可能です。これは、プログラミングする際に、データをモニタリングしてバグを発見する際に重要となる機能です。またプログラムにエラーがあるときには、このテキストエリアにエラーが表示されます。

// テキストエリア
size(200, 200);
background(51);

// print関数は改行せずにテキストを書きだす
print("One");
print("Two");

// println関数は末尾で改行する
println("Three");
println("Four");
println("Five");

Processingプログラミング入門(2)：静的な2D図形を描画してみる

サンプル1：(x,y)座標上に点を配置

To view this content, you need to install Java from java.com 
//キャンバスの大きさ設定
size(200,100);
//背景色設定(R,G,B)
background(0,0,0);

//描画色設定(R,G,B)
stroke(255,0,0);
//先程指定した描画色で、座標に点を描く
point(50,100);
    
//２つ目の点
stroke(0,255,0);
point(100,100);

//３つ目の点
stroke(0,0,255);
point(150,100);

サンプル2：直線を引く

To view this content, you need to install Java from java.com 
//キャンバスの大きさ設定
size(200,200);
//背景色設定(R,G,B)
background(0,0,0);

//一つ目の線の色(R,G,B)
stroke(255,255,255);

//一つ目の線の座標
//line(x1, y1, x2, y2); 
//始点：(x1, y1)、 終点：(x2, y2)
line(0,0,60,60);
    
//二つ目の線
stroke(255,255,0);
line(40,50,190,200);

サンプル3：プリミティブな図形の生成

To view this content, you need to install Java from java.com 
size(200,200);
background(128);

//描画する図形の塗り潰す色を設定
fill(#CC6600);

//描画する図形の線の色を設定
stroke(#FFFFFF);  

//長方形の描画
// rect(x, y, width,  height);
rect(40,40,140,140);
    
//楕円の描画
// ellipse(x, y,  width, height);
ellipse(80,80,80,120);

//三角形の描画
// triangle(x1, y1,  x2, y2, x3,  y3);
triangle(12,180, 120,15, 160,60);

サンプル3：プリミティブな図形の生成(2)

To view this content, you need to install Java from java.com 
size(200,200);
background(128);

//塗り潰しなし
noFill();

//描画する図形の線の色を設定
stroke(#FFFFFF);  

//長方形の描画
// rect(x, y, width,  height);
rect(40,40,140,140);
   
//楕円の描画
// ellipse(x, y,  width, height);
ellipse(80,80,80,120);

//三角形の描画
// triangle(x1, y1,  x2, y2, x3,  y3);
triangle(12,180, 120,15, 160,60);

Processingプログラミング入門(3)：ランダムと繰り返し

ランダムにたくさん線を引く

To view this content, you need to install Java from java.com 
int i, w, h;
w = 400;
h = 400;

size(w,h);
background(64);

//0〜2000まで、2000回命令をくりかえす
for(i=0; i<2000; i++){
    
    //ランダムに色を生成
    stroke(random(255),random(255),random(255));

    //画面内でランダムな始点と終点を線で繋ぐ
    line(random(w),random(h),random(w),random(h));
}

ランダムにたくさん線を引く(2)：アルファチャンネルを付加

To view this content, you need to install Java from java.com 
int i, w, h;
color cl;
w = 400;
h = 400;
    
size(400,400);
background(0);

for(i=0; i<4000; i++){
    cl = color(random(255),random(255),random(255),25);
    stroke(cl);
    line(random(w),random(h),random(w),random(h));
}

ランダムに円を配置

To view this content, you need to install Java from java.com 
int i, w, h, r;
color cl;

w = 400;
h = 400;

size(w,h);
background(0);
noStroke(); 

for(i=0; i<400; i++){
    cl = color(random(255),random(255),random(255),12);
    fill(cl);
    r = int(random(120)); 
    ellipse(random(h), random(w), r, r);
}

一定間隔に線を引く

To view this content, you need to install Java from java.com 
int i, w, h, step, c;
color cl;

w = 400;
h = 400;
step = 4;
    
size(w,h);
background(0);

for(i=0; i<w/step; i++){
    cl = color(255/(w/step)*i, 64, 255-255/(w/step)*i, 50);
    stroke(cl);
    line(0,i*step,i*step,h);
    line(w,i*step,i*step,0);
}

posted by tado at 06:00 PM, 16 October 2005

<< 第１回：ガイダンス | top | 第３回：Processing入門（２）：アニメーションを作る >>

Comments

コメントはありません

Add Comment

このアイテムは閉鎖されました。このアイテムへのコメントの追加、投票はできません。

トップページに戻る