スポンサーサイト
上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
tag: 新しい記事を書く事で広告が消せます。
Processingレクチャー 8回目
遅くなりましたが最終回の内容をまとめます。
最終回は特別回として、Arduinoに関しての補足説明をしました。
ほとんどがペーパーに書いてある内容のままなので主に補足です。
ペーパーの表面で色がついてある部分は変数および関数の名前です。
あくまで名前なのでプログラム上の意味はなく、
その名前でなければならないという事はありません。
他の名前を付けても大丈夫です。用途に合わせた名前を付けましょう。
ただし、同じ色で統一されている箇所の名前は同じでなければなりません。
裏面では各センサーのArduinoへの接続の大雑把な説明をしています。
しかし誤った繋ぎ方をすると熱を持ったり壊れたりと危険なので
各センサーの説明が記載されたレジュメも見ながら接続してください。
以上でProcessingレクチャーを終了します。
やはりこのレクチャーで教えた事は基本的な事に過ぎないので、
各自参考書を読んで映像ジャンクションに備える事をおすすめします。
tag: [Processing]
最終回は特別回として、Arduinoに関しての補足説明をしました。
ほとんどがペーパーに書いてある内容のままなので主に補足です。
ペーパーの表面で色がついてある部分は変数および関数の名前です。
あくまで名前なのでプログラム上の意味はなく、
その名前でなければならないという事はありません。
他の名前を付けても大丈夫です。用途に合わせた名前を付けましょう。
ただし、同じ色で統一されている箇所の名前は同じでなければなりません。
裏面では各センサーのArduinoへの接続の大雑把な説明をしています。
しかし誤った繋ぎ方をすると熱を持ったり壊れたりと危険なので
各センサーの説明が記載されたレジュメも見ながら接続してください。
以上でProcessingレクチャーを終了します。
やはりこのレクチャーで教えた事は基本的な事に過ぎないので、
各自参考書を読んで映像ジャンクションに備える事をおすすめします。
スポンサーサイト
Processingレクチャー 7回目
7回目の内容をまとめます。
このレクチャーは次回のArduino特別回をもって最終回とします。
前回の動画では1フレームに同時に1つの図形しか描画しませんでした。
複数の図形を描画する場合、位置や大きさなどを描く数の分だけ制御する必要があります。
変数をx1、x2、x3…、y1、y2、y3…、と宣言してそれぞれの要素にしてもいいですが、
x1やy1の「1」は変数名の一部であって、数字を変数に置き換えて使用する事は出来ません。
そこで使うのが配列です。配列を使うと自動で番号を振られた複数の変数を宣言できます。
変数arrayをn個配列で宣言したなら、array[0]、array[1]…、array[n-1]まで作られます。
この[]内の数字なら変数を用いて制御できます。forループと組み合わせるのが簡単です。
配列の宣言の仕方
int[] hairetsu = new int[3];
これを宣言すれば、hairetsu[0]、hairetsu[1]、hairetsu[2]の3つのint型の変数が作られます。
他の型の配列を宣言したければ2つあるintをfloatやcolorなどに変更します。
hairetsuは変数名、[3]は配列の要素数を指定します。数字でなくint型の変数でも指定できます。
これで配列は宣言できますが、宣言しただけでは何も格納されていないので、
setup() 関数内などでforループを使って初期化しましょう。
マウスで操作できるプログラムの説明をします。
以前、システム変数として mouseX と mouseY を紹介しました。
これはリアルタイムでキャンパス上のマウスカーソルの座標を自動で取得します。
これを描画の各要素に使用すればマウスを動かす事で変化させる事が出来ます。
新しいシステム変数を説明します。
mousePressed
マウスボタンが押されているかを調べるシステム変数です。
何かしらマウスボタンが押されているとtrue、離しているとfalseを自動で取得します。
if文の条件文として使う事で、ボタンを押す事での変化を制御できます。
一般的に、マウスカーソルがどこの座標にあるかを判別するif文と合わせて使用します。
mouseButton
マウスのどのボタンが押されているかを調べるシステム変数です。
RIGHT、LEFT、CENTERのみ格納する事が出来、それぞれのボタンに対応します。
上記の mousePressed を用いたif文の中などで更にif文やswitch文を用いて使用します。
pmouseX、pmouseY
1フレーム前のキャンパス上のマウスカーソルの座標を自動で取得するシステム変数です。
例えばmouseX、mouseYとの差を計算する事でマウスの動く速さを計算出来ます。
イベントハンドラ関数について説明します。
これは draw() 関数とは別の関数で、マウスを動かしたりボタンを押したりなど、
特定の操作をした時のみ draw() 関数内の一番最後に自動で呼び出されます。
そのため draw() 関数内で変更された座標情報の影響を受けます。
void mouseMoved(){
}
マウスボタンを離しながら動かしている時に呼び出される関数です。
マウスを動かしていなければボタンを離していても呼び出されません。
void mouseDragged(){
}
マウスボタンを押しながら動かしている時に呼び出される関数です。
マウスを動かしていなければボタンを押していても呼び出されません。
void mousePressed(){
}
マウスボタンを押した時に呼び出される関数です。
void mouseReleased(){
}
マウスボタンを離した時に呼び出される関数です。
void mouseClicked(){
}
マウスボタンを押してその場で動かさずに離した時に呼び出される関数です。
mouseReleased() 関数も設定している時にはその関数より後に呼び出されます。
マウスを操作する以外にもキーボードを用いた操作もプログラムする事が出来ます。
詳しくは参考書を見て下さい。
ペーパーのプログラムの補足です。
tag: [Processing]
このレクチャーは次回のArduino特別回をもって最終回とします。
前回の動画では1フレームに同時に1つの図形しか描画しませんでした。
複数の図形を描画する場合、位置や大きさなどを描く数の分だけ制御する必要があります。
変数をx1、x2、x3…、y1、y2、y3…、と宣言してそれぞれの要素にしてもいいですが、
x1やy1の「1」は変数名の一部であって、数字を変数に置き換えて使用する事は出来ません。
そこで使うのが配列です。配列を使うと自動で番号を振られた複数の変数を宣言できます。
変数arrayをn個配列で宣言したなら、array[0]、array[1]…、array[n-1]まで作られます。
この[]内の数字なら変数を用いて制御できます。forループと組み合わせるのが簡単です。
配列の宣言の仕方
int[] hairetsu = new int[3];
これを宣言すれば、hairetsu[0]、hairetsu[1]、hairetsu[2]の3つのint型の変数が作られます。
他の型の配列を宣言したければ2つあるintをfloatやcolorなどに変更します。
hairetsuは変数名、[3]は配列の要素数を指定します。数字でなくint型の変数でも指定できます。
これで配列は宣言できますが、宣言しただけでは何も格納されていないので、
setup() 関数内などでforループを使って初期化しましょう。
マウスで操作できるプログラムの説明をします。
以前、システム変数として mouseX と mouseY を紹介しました。
これはリアルタイムでキャンパス上のマウスカーソルの座標を自動で取得します。
これを描画の各要素に使用すればマウスを動かす事で変化させる事が出来ます。
新しいシステム変数を説明します。
mousePressed
マウスボタンが押されているかを調べるシステム変数です。
何かしらマウスボタンが押されているとtrue、離しているとfalseを自動で取得します。
if文の条件文として使う事で、ボタンを押す事での変化を制御できます。
一般的に、マウスカーソルがどこの座標にあるかを判別するif文と合わせて使用します。
mouseButton
マウスのどのボタンが押されているかを調べるシステム変数です。
RIGHT、LEFT、CENTERのみ格納する事が出来、それぞれのボタンに対応します。
上記の mousePressed を用いたif文の中などで更にif文やswitch文を用いて使用します。
pmouseX、pmouseY
1フレーム前のキャンパス上のマウスカーソルの座標を自動で取得するシステム変数です。
例えばmouseX、mouseYとの差を計算する事でマウスの動く速さを計算出来ます。
イベントハンドラ関数について説明します。
これは draw() 関数とは別の関数で、マウスを動かしたりボタンを押したりなど、
特定の操作をした時のみ draw() 関数内の一番最後に自動で呼び出されます。
そのため draw() 関数内で変更された座標情報の影響を受けます。
void mouseMoved(){
}
マウスボタンを離しながら動かしている時に呼び出される関数です。
マウスを動かしていなければボタンを離していても呼び出されません。
void mouseDragged(){
}
マウスボタンを押しながら動かしている時に呼び出される関数です。
マウスを動かしていなければボタンを押していても呼び出されません。
void mousePressed(){
}
マウスボタンを押した時に呼び出される関数です。
void mouseReleased(){
}
マウスボタンを離した時に呼び出される関数です。
void mouseClicked(){
}
マウスボタンを押してその場で動かさずに離した時に呼び出される関数です。
mouseReleased() 関数も設定している時にはその関数より後に呼び出されます。
マウスを操作する以外にもキーボードを用いた操作もプログラムする事が出来ます。
詳しくは参考書を見て下さい。
ペーパーのプログラムの補足です。
tag: [Processing]
Processingレクチャー 6回目 その2
6回目の内容をまとめの続きです。
今までは静止画の描画について学んでいきましたが、今回から動画について学習していきます。
静止画では point() や rect() などの関数を用いて描いてきましたが、
これからはその関数自体を構築するという流れになります。
動画を作成するには最低でも2つの決められた関数を構築する必要があります。
また、変数を宣言する場所にも注意が必要になります。
関数内で宣言された変数は「ローカル変数」として扱われ、その関数内でしか使用できません。
例えば、for文では繰り返し回数を制御するために int i などが宣言されますが、
このfor文が終了すればそれらの変数は使用できなくなります。
逆に、関数外で宣言された変数は「グローバル変数」として扱われ、どこからでも使用できます。
その反面プログラムが長くなると、どの関数で変更されているのか把握しづらくなります。
void setup(){
～
}
この setup() 関数は起動したときに最初の一回だけ実行され初期設定を行う関数です。
size() や colorMode() 、 background() 、 frameRate() など他にも色々ありますが、
主に変更の必要がない設定をする関数を入力します。
また、宣言されたばかりのグローバル変数の初期化も行ってもよいでしょう。
当然ここで変数を宣言してもローカル変数のため他の関数で扱う事は出来ません。
frameRate(a);
1秒間にa回フレームを更新するように設定します。基本的に30か60しか設定しません。
void draw(){
～
}
この draw() 関数は setup() 関数が実行された後に停止するまで繰り返し実行される関数です。
今までの静止画の描画はこのこの関数の1フレームを描画しているというニュアンスになります。
random() を用いたり、この関数内でグローバル変数を変化させて用いたりする事で
描画を変化させる、つまりはアニメーションさせる事が出来ます。
ここで変数を宣言、初期化してから変化させても繰り返される度にリセットされてしまいます。
イメージとしては透明のセル画に描画して、幾重にも重ねるといった感じです。
軌跡を消したければ、draw() 関数の最初に画面を背景色で塗りつぶす命令をします。
軌跡をフェードアウトしたければ、透明度を持った背景色で画面を塗りつぶします。
また、この draw() 関数が繰り返される度に座標情報はリセットされます。
translate() や rotate() など座標情報を変更してアニメーションさせる場合は
グローバル変数を変化させて用いるとよいでしょう。
これらの関数以外にも自分で新しく関数を作り出す事も出来ます。
関数を作る利点は、一連の命令を一つにまとめ名前を付ける事で使いやすくする事です。
一例として以下の関数を見てみます。2つの整数を引数として渡してその和を返す関数です。
int tashizan( int a, int b ){
int s = a + b;
return s;
}
tashizanは関数の名前です。命名規則は変数のそれと同じです。（参照：3回目のまとめ）
( int a, int b )で引数を設定します。()の中に、変数を宣言するように型と変数名を指定します。
, で区切る事で複数の引数を使用できます。引数を使用しない場合は()の中に何も入力しません。
intの部分で戻り値の型を指定します。戻り値とは最終的に関数で導き出したい値の事です。
関数の中で戻り値とする変数を宣言します。最終的にこの変数の値を関数の値として扱います。
そして関数の最後に返す変数を指定して return を実行する事で戻り値を返します。
なお、intの部分をvoidとした場合は、戻り値を必要としないので return も実行しません。
この関数の使い方の一例を見てみます。
int x = 3;
int y = 5;
int z = tashizan(x, y);
int tashizan( int a, int b ){
int s = a + b;
return s;
}
zに格納する値として tashizan(x, y) が呼ばれています。引数がxとyなので、
tashizan() 関数では()内で宣言されたaとbにxとyの値である3と5がそれぞれ格納されます。
そして関数内で宣言されたsにaとbの和が格納され戻り値として関数の値として返されます。
その結果、zに tashizan() 関数内の変数sの値が格納される事になります。
見方を変えれば、zに格納される tashizan(x, y) はそれ自体を変数として見る事も出来ます。
int型の変数「tashizan(x, y)」にxとyの和の値が格納されている、というイメージです。
関数は大きく分けて、「戻り値の型がvoid型であるかそれ以外か」、
および「引数があるかないか」の2*2の4パターンがあります。
戻り値がvoid型以外の場合は、先の説明の通り変数のように扱われます。
void型の場合は戻り値を返さないので、関数内の命令を実行するだけになります。
point() や rect() などProcessingで描画に扱う関数はこのvoid型の関数です。
引数を受け取る関数はその引数に応じて導き出される値が変わります。
引数がない関数では呼び出される度に同じ値を返します。
ただし関数内に random() があるならその限りではありません。
1. void型で引数を受け取る関数
rect(x, y, a, b) などでおなじみの引数の値に応じて命令を実行する関数です。
//例 頂点数v、半径rの正多角形を原点を中心に描きます。
void polygon(int v, float r){
biginShape();
for(int i = 0; i < v; i++){
vertex( r*cos(TWO_PI*i/v), r*sin(TWO_PI*i/v) );
}
endShape(CLOSE);
}
2. void型で引数のない関数
smooth() や noFill() といった呼ばれる度に同じ命令を実行する関数です。
//例 キャンパス一杯に日の丸を描きます。
void nihon(){
noStroke();
background(255);
fill(255,0,0);
ellipse(width/2, height/2, width/2, height/2);
}
3. void型以外で引数を受け取る関数
dist(x, y, a, b) や pow(a, b) といった引数の値に応じて計算された値を返す関数です。
//例 加速度accelでtime時間動いた時の距離を求める関数です。
float dash(float accel, float time){
float distance = accel * sq(time) / 2.0;
return distance;
}
4. void型以外で引数のない関数
常に同じ値しか返さない関数です。 random() を使わない限り作る意義は薄いです。
//例 サイコロを振って値を得る関数です。
// random() はfloat型で値を返すので、頭に(int)を入力してint型に変換しています。
int dice(){
int num = (int)random(6) + 1;
return num;
} tag: [Processing]
今までは静止画の描画について学んでいきましたが、今回から動画について学習していきます。
静止画では point() や rect() などの関数を用いて描いてきましたが、
これからはその関数自体を構築するという流れになります。
動画を作成するには最低でも2つの決められた関数を構築する必要があります。
また、変数を宣言する場所にも注意が必要になります。
関数内で宣言された変数は「ローカル変数」として扱われ、その関数内でしか使用できません。
例えば、for文では繰り返し回数を制御するために int i などが宣言されますが、
このfor文が終了すればそれらの変数は使用できなくなります。
逆に、関数外で宣言された変数は「グローバル変数」として扱われ、どこからでも使用できます。
その反面プログラムが長くなると、どの関数で変更されているのか把握しづらくなります。
void setup(){
～
}
この setup() 関数は起動したときに最初の一回だけ実行され初期設定を行う関数です。
size() や colorMode() 、 background() 、 frameRate() など他にも色々ありますが、
主に変更の必要がない設定をする関数を入力します。
また、宣言されたばかりのグローバル変数の初期化も行ってもよいでしょう。
当然ここで変数を宣言してもローカル変数のため他の関数で扱う事は出来ません。
frameRate(a);
1秒間にa回フレームを更新するように設定します。基本的に30か60しか設定しません。
void draw(){
～
}
この draw() 関数は setup() 関数が実行された後に停止するまで繰り返し実行される関数です。
今までの静止画の描画はこのこの関数の1フレームを描画しているというニュアンスになります。
random() を用いたり、この関数内でグローバル変数を変化させて用いたりする事で
描画を変化させる、つまりはアニメーションさせる事が出来ます。
ここで変数を宣言、初期化してから変化させても繰り返される度にリセットされてしまいます。
イメージとしては透明のセル画に描画して、幾重にも重ねるといった感じです。
軌跡を消したければ、draw() 関数の最初に画面を背景色で塗りつぶす命令をします。
軌跡をフェードアウトしたければ、透明度を持った背景色で画面を塗りつぶします。
また、この draw() 関数が繰り返される度に座標情報はリセットされます。
translate() や rotate() など座標情報を変更してアニメーションさせる場合は
グローバル変数を変化させて用いるとよいでしょう。
これらの関数以外にも自分で新しく関数を作り出す事も出来ます。
関数を作る利点は、一連の命令を一つにまとめ名前を付ける事で使いやすくする事です。
一例として以下の関数を見てみます。2つの整数を引数として渡してその和を返す関数です。
int tashizan( int a, int b ){
int s = a + b;
return s;
}
tashizanは関数の名前です。命名規則は変数のそれと同じです。（参照：3回目のまとめ）
( int a, int b )で引数を設定します。()の中に、変数を宣言するように型と変数名を指定します。
, で区切る事で複数の引数を使用できます。引数を使用しない場合は()の中に何も入力しません。
intの部分で戻り値の型を指定します。戻り値とは最終的に関数で導き出したい値の事です。
関数の中で戻り値とする変数を宣言します。最終的にこの変数の値を関数の値として扱います。
そして関数の最後に返す変数を指定して return を実行する事で戻り値を返します。
なお、intの部分をvoidとした場合は、戻り値を必要としないので return も実行しません。
この関数の使い方の一例を見てみます。
int x = 3;
int y = 5;
int z = tashizan(x, y);
int tashizan( int a, int b ){
int s = a + b;
return s;
}
zに格納する値として tashizan(x, y) が呼ばれています。引数がxとyなので、
tashizan() 関数では()内で宣言されたaとbにxとyの値である3と5がそれぞれ格納されます。
そして関数内で宣言されたsにaとbの和が格納され戻り値として関数の値として返されます。
その結果、zに tashizan() 関数内の変数sの値が格納される事になります。
見方を変えれば、zに格納される tashizan(x, y) はそれ自体を変数として見る事も出来ます。
int型の変数「tashizan(x, y)」にxとyの和の値が格納されている、というイメージです。
関数は大きく分けて、「戻り値の型がvoid型であるかそれ以外か」、
および「引数があるかないか」の2*2の4パターンがあります。
戻り値がvoid型以外の場合は、先の説明の通り変数のように扱われます。
void型の場合は戻り値を返さないので、関数内の命令を実行するだけになります。
point() や rect() などProcessingで描画に扱う関数はこのvoid型の関数です。
引数を受け取る関数はその引数に応じて導き出される値が変わります。
引数がない関数では呼び出される度に同じ値を返します。
ただし関数内に random() があるならその限りではありません。
1. void型で引数を受け取る関数
rect(x, y, a, b) などでおなじみの引数の値に応じて命令を実行する関数です。
//例 頂点数v、半径rの正多角形を原点を中心に描きます。
void polygon(int v, float r){
biginShape();
for(int i = 0; i < v; i++){
vertex( r*cos(TWO_PI*i/v), r*sin(TWO_PI*i/v) );
}
endShape(CLOSE);
}
2. void型で引数のない関数
smooth() や noFill() といった呼ばれる度に同じ命令を実行する関数です。
//例 キャンパス一杯に日の丸を描きます。
void nihon(){
noStroke();
background(255);
fill(255,0,0);
ellipse(width/2, height/2, width/2, height/2);
}
3. void型以外で引数を受け取る関数
dist(x, y, a, b) や pow(a, b) といった引数の値に応じて計算された値を返す関数です。
//例 加速度accelでtime時間動いた時の距離を求める関数です。
float dash(float accel, float time){
float distance = accel * sq(time) / 2.0;
return distance;
}
4. void型以外で引数のない関数
常に同じ値しか返さない関数です。 random() を使わない限り作る意義は薄いです。
//例 サイコロを振って値を得る関数です。
// random() はfloat型で値を返すので、頭に(int)を入力してint型に変換しています。
int dice(){
int num = (int)random(6) + 1;
return num;
} tag: [Processing]
Processingレクチャー 6回目 その1
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]
レクチャーでは下の画像ファイルを使用しました。
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]
Processingレクチャー 5回目
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]
ほとんどがペーパーに書いてあるままなので、ペーパーか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]
