Processing tutorial 4

じゃあ今回は動きを作ろう。
基本形はコレだ。

void setup(){
}
void draw(){
}

setup関数は起動後一度だけ読まれる関数で、例えば画面の大きさやなんちゃらModeの設定とかグローバル変数への値代入とか、フレームレートの設定とかの初期設定をするために使う。

draw関数はメインループと呼ばれて、起動中繰り返し行われる。
デフォルトでは1秒間で60回繰り返される。
もちろん、重たい処理などがあるときはもっと遅れる。

百聞は一見にしかず。
では実際にやってみよう。

void setup(){
  size(400,400);
}
void draw(){
  ellipse(mouseX,mouseY,mouseX,mouseY);
}

これでこのようにできる。

mouseXとはマウスのx座標。mouseYとはマウスのy座標。
この例はマウスの座標に、マウスの座標によって大きさが変わる楕円を描くというものである。
では次に変数を使ってみよう。

ちょっと脱線するが、変数にはお馴染みの型がある。

• int
• float
• double
• char

その他にも

• boolean
• color
• byte

がある。どういう型なのか、というのは名前から推測できると思う。
booleanはtrueかfalseか。真偽を保存する変数だ。
colorは色情報を保存する変数。
byteは1バイト単位の情報を保存する変数。

脱線終わり。
変数にはグローバル変数とローカル変数というのがある。
関数内で宣言されるものがローカル変数、関数外で宣言されるのがグローバル変数だ。
アニメーションするにはグローバル変数というものを多用する。
ローカル変数は関数が読まれるたびに初期化されてしまうからだ。

では、時間の経過とともに左右に動く短形を作ろう。
しかも、これは残像を残す。

float x=0;
float speed=2;
float d=1;
void setup(){
  size(400,400);
  colorMode(HSB,100);
  background(99);
}
void draw(){
  noStroke();
  fill(99,30);
  rect(0,0,width,height);
  x += speed*d;
  if(x>width) d= -1;
  if(x<0) d= 1;
  fill(0);
  rect(x,height/2,20,20);
}

これでどうだろう。
rectが二つある。
最初のrectは前のフレームを半透明な白い全体を覆い隠すための短形で、次のrectは動いているように見える黒い短形だ。
最初の短形のおかげでアニメのように見える。これがなかったら前のフレームの内容は一つ目の例のようにそのまま残る。
また、この短形が半透明なので残像があるように見える。

続きを読む...

Processing tutorial 3

Processingチュートリアル第３回。
今回も前回に引き続き基本的な関数や命令を説明する。
ちなみに、動くものを作るのはもう少し先だ。

まずはいつものようにProcessingを起動しよう。

まずは、（前回紹介するべきだったかもしれないけど、）四角形を描く関数を説明する。
この関数はこれから動きを付けるときにとてもよく使うことになるから絶対に忘れてはいけない。
それではこういう風に打ってみよう。

size(400,400);
rect(100,20,150,300);

四角形が出てきたと思う。rect関数の文法は

rect(左上のx座標, 左上のy座標, 横の長さ, 縦の長さ);

だ。
もう一つ、rectMode();という命令を。
rectMode();の括弧の中身を変えることでrectの使い方が変わる。
３種類ある。具体例とともに見てみよう。

size(400,400);
rectMode(CORNER);
rect(100,20,150,300);

size(400,400);
rectMode(CENTER);
rect(100,20,150,300);

size(400,400);
rectMode(CORNERS);
rect(100,20,150,300);

CORNER・・・デフォルトの値。rectの文法は

rect(左上のx座標, 左上のy座標, 横の長さ, 縦の長さ);

CENTER・・・一番直感的かな。rectの文法は

rect(中心のx座標, 中心のy座標, 横の長さ, 縦の長さ);

CORNERS・・・rectの文法は

rect(左上のx座標, 左上のy座標, 右下のx座標, 右下のy座標);

これでrectの説明は終わり。

ellipse();にも同様にellipseMode();というのがある。それは自分で調べてほしい。

では、色の説明をしよう。
Processingで色を数値で表現する方法には、グレースケール, RGB, HSB, アルファチャンネルの４つがある。
RGB, HSBというものの説明をしよう。
RGBというのはお馴染みのRed, Green, Blueの光の三原色で色を指定する方法だ。
HSBにはあまり馴染みが無いかもしれないが、Hue（色相）, Saturation（彩度）, Brightness（輝度）の３つの成分で指定する方法だ。
色にもModeがある。colorMode();という命令を使う。

colorMode(RGB);

・・・以降のカラーモードをRGB指定にする。デフォルトではこれだ。

colorMode(HSB);

・・・以降のカラーモードをHSB指定にする。

colorMode( カラーモード(RGB/HSB), 色指定の範囲 );

colorMode( カラーモード(RGB/HSB), RまたはHの範囲, GまたはSの範囲, Bの範囲 );

・・・カラーモードと指定する色の範囲を指定する。

色範囲というのは上限値のことだ。
たとえば、

colorMode(HSB,100);

とするとカラーモードはHSB, 0から99の間で指定するということになる。

また、上記以外にも、16進数で表されたカラーコードで色を指定する方法もある。

で、実際色を使うのは主に

background();

fill();

stroke();

の３つだ。
background();は背景色を指定するためのもの。
fill();は図形を塗りつぶすためのもの。
stroke();は直線や輪郭などの線を塗るためのもの。
ちなみに、

noFill();

とすると以降の図形の背景は透ける。

noStroke();

とすると以降の線や輪郭は引かれない。
いずれもグレースケールで指定する場合は、

size(400,400);
background(30);
fill(150);
ellipse(width/2,height/2,300,300);

のように一つの値だけを入れる。

普通の色は次のように普通にやればいい。

size(400,400);
colorMode(HSB,100);
background(10,99,99);
fill(90,99,99);
ellipse(width/2,height/2,300,300);

こういう風に。
では、透明な色はどうするのか。
方法は簡単。色指定をしたあとに数値を付け足すだけだ。

size(400,400);
colorMode(HSB,100);
smooth();
background(10);
stroke(50,99,99,30);
strokeWeight(9);
fill(0,99,99);
ellipse(150,200,200,200);
fill(60,99,99,20);
ellipse(250,200,200,200);

重なり合った部分が透けているのが分かると思う。
注）背景色(background)には透明度は設定できない。

ちなみに

strokeWeight(数値);

で線の太さを指定する。

smooth();

を入れると以降滑らかになる。
逆に、以降滑らかにしないときは

noSmooth();

とする。

続きを読む...

Processing tutorial 2

Processingチュートリアル第２回。
今回は基本的な関数や命令の説明だ。

まずはProcessingを起動しよう。
そして、次のように打ってほしい。

println("Hello World!");

そして、[Run]ボタンを押そう。
おめでとう、これがProcessingでのHello Worldプログラムだ。

println(ほにゃらら);

でコンソールにほにゃららが表示される。
もちろん文字列にするときは""（ダブルクォーテーション）で囲む必要がある。
同様に

print(ほにゃらら);

というのもある。
printlnと何が違うのかというと、自動改行の有無だ。
つまり、

println("Hello World!");
println("Goodbye World!");

と打つとコンソールには以下のように表示される。

これと同じものをprintで表示するとこういう風になる。改行されていないのが分かるだろうか？

これでprint();とprintln();の違いは分かったと思う。

それでは、いよいよグラフィックを扱おう。
とりあえず以下のように打ってほしい。

size(400,400);
line(20,30,250,350);

これで、直線が引けたと思う。

line(x1座標, y1座標, x2座標, y2座標);

で座標(x1,y1)から(x2,y2)に直線が引ける。

size(横幅,縦幅);

で画面の大きさを決める。

じゃあ次は楕円だ。
さっきのline();の下に次の関数を書き込んでみてほしい。

ellipse(160,170,200,300);

これでもう一回[Run]をクリック。
楕円が出てきたと思う。

ellipse();という関数は楕円を描く為のものだ。

ellipse(中心x座標, 中心y座標, 横の直径, 縦の直径);

後ろの二つの値を同じにすると真円を描くことが出来る。
例えばさっきのところを以下のようにしてみよう。

ellipse(160,170,200,200);

どうだろう？ちゃんと円が描かれているはずだ。

基本的な図形を書く命令は他にもある。
三角形、四角形、多角形、カーブ、などなど。
そういうものを含め他の関数についてはここにリファレンスがあるので、一度いってみて自分でどんどん試してみてほしい。

続きを読む...

Processing tutorial 1

注）こないだ載せたこの動画も見てね。

Processingはメディアアートに最適な環境の一つ。
手軽に簡単に使えるけども強力なものも作れるということでプロのアーティストなどのプロトタイプ作成や、芸術系や工業系の大学などの教育機関でプログラミングの入門の授業などでも使われている。

お手軽なことから、Processingで作ったソースのことをsketch（スケッチ）と呼ぶ。
もっと詳しいことはネットや本で確認してくれたらいいと思う。

では、今回はProcessingの超基本的な使い方を説明しようと思う。
具体的に言うと、Processingという環境を説明する。
その前に、Processingをダウンロード・インストールしよう。

準備ができたら始めよう。

まずはProcessingを起動してほしい。
Processingはこんなアイコンだ。

Processingを起動すると、こんな画面が出てくると思う。
これがProcessingのIDEだ。

メインメニューにはFile, Edit, Sketch, Tools, Helpという項目がある。

いちいち説明しなくても大丈夫だと思う。

メインメニューの下には色々なボタンが並んでいると思う。

これらの機能は見ての通り。

Exportというボタンは何かというと、完成したものをJavaアプレットとして出力しWebで見れるようにするためのボタンだ。

そしてボタン群の下にはタブがある。
大きな作品を作るときはclassごとにタブを作ってソースを整理したり、という使い方をする。

タブを操作するにはタブの横の[→]ボタンを押すとメニューが出てくるから、これで操作する。

その下には白い大きなソース エディット画面がある。ここにソースを書き込んでいくのだ。

ソースをハイライトするとこういう風になる。

今何行目にカーソルがあるのかということは一番左下に書かれている。

この画像では15行目にカーソルがあるということが分かる。

そして、ソース エディット画面の下にはメッセージ行がある。
普段は淡い水色をしているが、何かエラーがあったりすると茶色くなり、メッセージを伝える。具体的な文法間違いなどを指摘してくれる。
そしてその下の黒いところはコンソール画面だ。
ここにもエラーがあると色々と赤い文字で出てくる。こっちは難しいことを言ってくる。

この場合何が間違っているか分かるだろうか？
print(50,50);
という使い方自体間違っているのだが、
print(50,50)
と最後のセミコロンが抜けている。これには注意しなくちゃいけない。

続きを読む...

Let's start to learn Processing

Hello World! on Processing from TaKUMA YOSHiTANi on Vimeo.

英語がミスってたらゴメン
続きを読む...