Moonwalkers Lab.の　活動記録

6回目の内容をまとめます。今回は2つに分けて記載します。
レクチャーでは下の画像ファイルを使用しました。
win.png 80x80

---

Processingではプログラムを入力して図形を描く以外にも
画像データや音楽データ等の外部データを使用する事が出来ます。
今回は画像データとフォントデータを使用します。

まずは一度名前をつけて保存し、セーブフォルダーを作成します。
初期設定なら「マイドキュメント」→「Processing」の中にあると思われます。
または Ctrl + K のショートカットキーで呼び出せます。
そのセーブフォルダー内に「data」という名前のフォルダーを新規作成します。
そして作成されたdata内に使用する外部データを保存します。
保存するデータの名前は半角文字でも全角文字でも構いません。

---

まずは画像データを使い表示させます。
jpg、png、gif、tgaの拡張子のファイルを扱う事が出来ます。

PImage ◆ = loadImage("▼");
画像を使用するためにPImage型の変数「◆」を宣言し、
その変数に使用する画像ファイル「▼」を格納します。
これは int kazu = 24; と入力するのとニュアンスは同じで、
int kazu; kazu = 24; のように分けて入力する事も出来ます。

image(◆, x, y, a, b);
imageModeの内容に応じて◆に格納された画像を表示します。
大きさを決める4つ目と5つ目の引数は省略する事が出来ます。

imageMode(CORNER);　　←指定なしと同じ
左上(x, y)から横幅a、縦幅bの大きさの画像を表示するようにします。

imageMode(CORNERS);
左上(x, y)から右下(a, b)の四角形に収まる大きさの画像を表示するようにします。

imageMode(CENTER);
中央(x, y)から横幅a、縦幅bの大きさの画像を表示するようにします。


PImageとはクラスと呼ばれる発展した型で、
格納した画像ファイルにまつわるデータを扱う事が出来ます。

◆.width および ◆.height
それぞれ◆に格納した画像ファイルの横幅、縦幅の数値を取得します。

他にも画像に色味や透明度を付加して表示できます。詳しくは参考書を見て下さい。

---

次はフォントデータを使い文字を表示させます。
まずはフォントデータであるvlwファイルを作成する必要があります。

「Tools」→「Create Font...」を選択するとフォントを作成するウィンドウが現れます。
任意のフォントを選択してフォントサイズを入力し、ファイル名も決めます。
初期状態では半角文字しか扱えないので、全角文字も表示したければ
「Characters..」を押し「All Characters」を選択します。
ただし作成されるvlwファイルの容量が膨大になるので注意が必要です。

PFont ◆ = loadFont("▼");
フォントを使用するためにPFont型の変数「◆」を宣言し、
その変数に使用するフォントファイル「▼」を格納します。

textFont(◆, a);
フォントサイズをaに指定した上で使用するフォントを設定します。
2つ目の引数は省略する事もできます。

text("★", x, y);
textAlignの内容に応じて文字列★を表示します。

textAlign(LEFT);　　←指定なしと同じ
左下(x, y)から左詰めに文字列を表示するようにします。

textAlign(CENTER);
中央下(x, y)から中央揃えで文字列を表示するようにします。

textAlign(RIGHT);
右下(x, y)から右詰めに文字列を表示するようにします。

textLeading(a);
text() に入力する文字列には¥nを入れる事で改行する事が出来ます。
その改行幅をaに指定します。未指定の場合、改行幅はフォントサイズ*2になります。

textWidth("★")
表示する文字列★の横幅の数値を取得します。
textFont() で指定したフォントにより取得する数値は異なります。 tag: [Processing]

5回目の内容をまとめます。今回はProcessingで使える数学について学習しました。
ほとんどがペーパーに書いてあるままなので、ペーパーかReferenceの
Math→CalculationおよびTrigonometry の各項目を各自見て下さい。

---

ペーパー補足

radians(180) と PI が同じ数値であるように、
radians(360) を TWO_PI
radians(90) を HALF_PI
radians(45) を QUARTER_PI と表記することができます。

・花丸を描くプログラム
1つ目のforループ内のRXとRYを操作する部分を

RX *= pow( HX*0.8, 1.0/(360*N) );
RY *= pow( HY*0.8, 1.0/(360*N) );

とすると違う形状の渦巻ができます。値が加算ではなく乗算で大きくなるためです。

・正多角形を描くプログラム
Vの値を5以上の奇数にし、forループの条件を

for(int i = 0; i < V*2; i += 2)

とすると星型を描きます。しかしこの方法だと正多角形の頂点を1つ飛ばしに結んでいるだけなので
図形の内側に枠線も描かれてしまいます。また、Vの値が偶数だと星型は描けません。
プログラムは複雑になりますが正しく星形を描くならば、forループの部分を

for(int i = 0; i < V; i++){
  vertex( R * cos(TWO_PI*i/V), R * sin(TWO_PI*i/V) );
  vertex( R*( sq( cos(PI/V) )-sq( sin(PI/V) ) )/cos(PI/V) * cos( TWO_PI*i/V + PI/V ),
          R*( sq( cos(PI/V) )-sq( sin(PI/V) ) )/cos(PI/V) * sin( TWO_PI*i/V + PI/V ) );
}

とします。コピーして確認しましょう。これだとVの値が偶数でも描けます。
R*( sq( cos(PI/V) )-sq( sin(PI/V) ) )/cos(PI/V)
の部分が星形の内側の頂点の原点からの距離になります（図の青線部）。

図の赤線部と青線部の比率が
となるためです。

---

2回目あたりで紹介してブログ未編集だったショートカットキーについてまとめます。
上部メニュー内の各項目の右に書いてある「Ctrl + …」というのがそれです。
メニュー内で選択してもよいですが、マウスを動かすよりもスムーズに操作できます。
なお、基本的にWindowsではCtrlキーを、MacではCommandoキーを使います。
このブログではよく使うキーをWindowsでの表記で紹介します。

Ctrl + N　…　新しいウィンドウを開いて新規作成します
Ctrl + O　…　新しいウィンドウでファイルを開きます
Ctrl + S　…　現在のデータを保存します
Ctrl + Shift + S　…　現在のデータを別名で保存します
Ctrl + W　…　アクティブのウィンドウを閉じます
Ctrl + Q　…　Processingを終了します

Ctrl + Z　…　ひとつ前の作業に戻ります
Ctrl + Y　…　戻った作業を元に戻します
Ctrl + C　…　選択範囲をコピーします
Ctrl + X　…　選択範囲を切り取ります（削除&コピー）
Ctrl + V　…　コピーした部分を貼り付けます
Ctrl + A　…　全選択します

Ctrl + R　…　プログラムを起動させます
Ctrl + Shift + R　…　プログラムを全画面で起動させます（プレゼンテーション用）
Esc　…　起動したプログラムを停止します

Ctrl + F　…　検索置換ウィンドウを開きます
Ctrl + K　…　保存したフォルダーを表示します
Ctrl + T　…　自動で各所にインデントを挿入します
　　　　　　　　　事前に括弧類が正しく閉じられているか確認しましょう
tag: [Processing]

4回目の内容をまとめます。

---

Processingはスクリーン座標系です。左上隅の点を原点とし、
右方向に進むとX座標がプラス、下方向に進むとY座標がプラスされます。
また、角度は時計周りが正の方向となります。

translate(X, Y);
現在の座標軸上の(X, Y)の位置に原点を移動させます。

rotate(A);
Aの値分、原点を中心に座標軸を回転させます。
角度を扱う場合 radians(a) を用いてラジアン値に変換する必要があります。
例　rotate( radians(45) );

scale(S);
scale(T, U);
原点を中心に座標軸を拡大縮小させます。
引数が1つならX軸とY軸ともにS倍され、引数が2つならX軸はT倍、Y軸はU倍されます。
値が1より大きいと拡大され、0以上1未満なら縮小されます。
負の数だと軸の向きが逆になります。

これらを実行する事で変更された座標軸は戻る事はありません。
現在の座標軸の情報を把握する必要があります。

---

pushMatrix();
現在の座標軸の情報をセーブします。複数行った場合は個別にセーブされます。

popMatrix();
最新の pushMatrix() でセーブされた座標軸の情報をロードします。
呼び出された座標軸の情報は消去されます。

セーブデータは上へ上へと積み重ねられ、ロードする時はデータは上から順に
取り出されるとイメージすると理解しやすいでしょう。 tag: [Processing]

3回目の内容をまとめます。一部は2回目のまとめに追記しました。
レクチャーで説明してない補足箇所は青文字にしています。

---

変数の宣言

int型　…　整数のみを格納します。
例　int seisu = 5;
　　 seisu += 2.5;　　//seisuの値は7

float型　…　少数（下7桁まで）を格納します。
例　float syousu = 4.65;
　　 float amari = syousu % 1.1;　　//amariの値は0.25

color型　…　色の情報を格納します。
例　color iro = color(255, 0, 255);
　　 background(iro);

boolean型　…　true（真）かfalse（偽）のみ格納します。
例　boolean shingi = true;
　　 if(shingi)　　//shingiが真なら
　　 {
　　 　shingi = !shingi;　　//shingiのtrueとfalseを入れ替える
　　 }

これまではrect()やfill()等の引数に数値を使用していましたが変数や数式を用いる事もできます。
変数につける名前には何でも良いという訳ではなくルールがあります。
・使える文字は英字、数字とアンダーバー( _ )のみ。スペースや他の記号は使えない。
・大文字と小文字は区別される。
・数字で始める事はできない。
・プログラムで予約されている単語は使えない。int, else, return等他多数。

---

システム変数
宣言しなくても使用できる特別な変数です。

width　…　キャンパスの横幅の値が収納されています。
height　…　キャンパスの横幅の値が収納されています。

以下は静止画では使えません。
mouseX　…　キャンパス上のマウスのx座標が収納されています。
mouseY　…　キャンパス上のマウスのy座標が収納されています。

---

random(～)
ランダムで数値を取得します。得られる数値は少数です。
引数の数に応じて範囲が変わります。いずれも上限値は含みません。

random()　…　範囲:0～1
randon(a)　…　範囲:0～a
random(a, b)　…　範囲:a～b

---

ループ文、条件文

for(《初期化》; 《条件》; 《変化》){
　～　
}
まずは《初期化》が実行され、《条件》が真ならループ内の命令が実行されます。
ループの最後に到達すると《変化》が実行され再度《条件》がチェックされます。
真ならループ内を繰り返し、偽ならループを抜けます。

while(《条件》){
　～　
}
《条件》が真ならループ内の命令が繰り返されます。
ループ内の命令で《条件》を偽にさせないとループが終わらず強制終了させなければなりません。

if(《条件1》){
　～　
}
else if(《条件2》){
　～　
}
else{
　～　
}
《条件1》が真なら分岐内の命令が実行されます。
《条件1》が偽なら《条件2》がチェックされ真ならその分岐内の命令が実行されます。
以降、else if(《条件》）がある限り同様に行われ、いずれもが偽ならelse内の命令が実行されます。
else if(《条件》）やelseは省略しても構いません。

switch(《変数》){
case 《値1》:
　～
　break;
case 《値2》:
　～
　break;
default:
　～
　break;
}
《変数》が《値1》や《値2》ならそれぞれの分岐内の命令を実行します。
それら以外ならdefault内の命令が実行されます。

なおfor文やwhile文、if文は命令文が1行しかない時は{ }を省略できます。
例　for(int i = 10; i <= 90; i += 2) if(i%6 != 0) ellipse(i, i, 20, 20);

---

演算子

算術演算子
+, -, *, /, %
それぞれ加算、減算、乗算、除算、剰余します。

代入演算子
+=, -=, *=, /=, %=
左辺の変数に、その値に右辺の値を計算した値を代入します。

関係演算子
==, !=, <, >, <=, >=
それぞれ左辺が、右辺と等しい時、右辺と等しくない時、右辺より小さい時、
右辺より大きい時、右辺以下の時、右辺以上の時に真となります。

論理演算子
《条件1》&&《条件2》　…　《条件1》が真かつ《条件2》も真の時に真となります。
《条件1》||《条件2》　…　《条件1》が真または《条件2》が真の時に真となります。
!《条件》　…　《条件》が偽の時に真となります。
&&と||では&&の方が優先されます。

例　if( a < 20 || a >= 40 && ( a%3 == 0 || a%4 == 0 ) && !(a%12 == 0) )
　　 point(a, a);
これはaが20未満の時、または40以上で3または4の倍数だけれども
12の倍数じゃない時に真となり点が描画されます。
aが0～100まで繰り返すfor文と組み合わせ確認してみましょう。 tag: [Processing]

2回目の内容をまとめます。変更、追記箇所は赤文字にしています。
また、3回目の内容の一部も合わせて追記します。

来週は木曜日が祝日で休みなので金曜日のレクチャーも休みとします。
次回は再来週となります。また、次回以降は開始時間を20分ずらします。
木曜日は11時から、金曜日は15時からとなりますのでよろしくお願いします。

---

colorMode(mode, ～);
mode … RGB または HSB
RGB … 赤、緑、青の値を入力して色を指定します。
HSB … 色相、彩度、輝度の値を入力して色を指定します。

colorModeを指定しない場合は colorMode(RGB, 256); が設定されます。

colorMode(mode, a, b, c);
赤（色相）の範囲をa段階、緑（彩度）の範囲をb段階、青（輝度）の範囲をc段階に変更します。
透明度の範囲の段階は維持されます。

colorMode(mode, a, b, c ,d);
赤（色相）の範囲をa段階、緑（彩度）の範囲をb段階、青（輝度）の範囲をc段階、
透明度の範囲をd段階に変更します。

colorMode(mode, a);
赤、緑、青（色相、彩度、輝度）の各要素と透明度の範囲を一括でa段階に変更します。

colorMode(mode);
各要素と透明度の範囲の段階を維持しつつmodeを変更します。

Processingのメニュー「Tools」→「Color Selector」で色を選択する事で
RGBとHSBの各値を確認できます。

初めのうちは「Color Selector」にならってRGBなら256段階に、
HSBならHは360段階にSとBは100段階に設定するのがいいでしょう。
さらに透明度を利用するなら100段階に設定するのがいいでしょう。

---

background(～);
キャンパスを指定した色で塗りつぶします。

stroke(～);
線（図形の枠線や点を含む）の色を指定します。

fill(～);
図形の面の色を指定します。

これらは引数の数で色の指定の他にグレースケールや透明度を指定できます。
ただしbackground()では透明度は使えません。

～(a, b, c);
各要素の値に応じた色にします。

～(a, b, c, d);
透明度をもった、各要素の値に応じた色にします。透明度は値が小さいほど透過します。

～(a);
グレースケール（輝度aの無彩色）にします。aの段階はcolorMode()の2つ目の引数に準じます。
例えば colorMode(HSB, 360, 100, 100); ならグレースケールは360段階になります。

～(a, d);
透明度をもったグレースケールにします。dの段階はcolorMode()の5つ目の引数に準じます。

---

noStroke();
線（図形の枠線や点を含む）を非表示にします。再度表示させる場合はstroke()で色を指定します。

noFill();
面を非表示にします。再度表示させる場合はfill()で色を指定します。

---

smooth();
図形の描画を滑らかにします。処理に時間がかかります。

noSmooth();
smooth()を解除します。

---

strokeWeight(w);
線（図形の枠線や点を含む）を幅wの太さにします。
幅を太くすると、strokeCap()に応じて線の両端の形状が変わります。
また、strokeJoin()に応じて曲がった時の角の形状も変わります。

strokeCap(ROUND);　　←指定なしと同じ
線の両端に直径wの半円型のキャップをつけます。

strokeCap(SQUARE);
線の両端のキャップを非表示にします。point()では正しく点が描画されません。

strokeCap(PROJECT);
線の両端にROUNDのキャップを覆い被さるような長方形のキャップをつけます。
point()では点がダイヤ状に描画されます。

strokeJoin(MITER);　　←指定なしと同じ
線が曲がった時の角をとがらせます。

strokeJoin(BEVEL);
線が曲がった時の角を削ります。

strokeJoin(ROUND);
線が曲がった時の角を丸くします。

---

以下にサンプルプログラムを載せます。各自確認して下さい。

続きを読む

tag: [Processing]