繰り返して直線を描く
LINE-0200 繰り返し文を使用して直線を複数描いてみましょう。繰り返しにはfor文を使用します。この場合 i は1から始まって７まで変化します。その変化した値をY座標に掛けて、下方向へ移動して線を描いていきます。コード内の//はコメントです。
|
1 2 3 4 5 6 7 8 9 |
size(400, 400); int sx = 50; //X座標始点 int sy = 50; //Y座標始点 int ex = 350; //X座標終点 int ey = 50; //Y座標終点 //７回繰り返す for (int i = 1; i<=7; i++) { line(sx, sy*i, ex, ey*i); } |
| 構文 | for (init; test; update) { statements } | 繰り返し処理に使用します。 (init; test; update)内の ;（セミコロン）は３つの部分の区切りを意味しています。 |
| パラメータ | init（初期化） | 変数の宣言、初期値の代入 |
| test（条件式） | 条件式がtrue(真)の間だけ、ブロック内（ 中括弧 { } )の文が実行されます。条件式には関係演算子(２つの値の大小等を比較する)が使われます。 | |
| update（更新） | 変数を変化させる | |
| statements | 繰り返し実行する文 |
ブロック文（ 中括弧 { } )を含む関数や繰り返し、条件分岐の式の最後には ;（セミコロン）は付きません。ブロック自体、文が完結していることを明白に示しているためかと思います。
二つの値や文字の関係を比較してそれが成り立っていたらtrue(真)、そうでなければfalse(偽)を返します。
| 構文 | value1 == value2 | (等価) 2つの値が等価かどうかを判定 |
| パラメータ | value1、value2 | int、float、char、byte、boolean |
| 構文 | value1 != value2 | (不等価) 2つの値が等価でないかを判定 |
| パラメータ | value1、value2 | int、float、char、byte、boolean |
| 構文 | value1 < value2 | (未満) 左の値が右の値より小さいかどうかを判定 value2を含まない |
| パラメータ | value1、value2 | int、float、char、byte |
| 構文 | value1 <= value2 | (以下) 左の値が右の値より小さいか、または値が等価かどうかを判定 value2を含む |
| パラメータ | value1、value2 | int、float、char、byte |
| 構文 | value1 > value2 | (超える) 左の値が右の値より大きいかどうかを判定 value2を含まない |
| パラメータ | value1、value2 | int、float、char、byte |
| 構文 | value1 >= value2 | (以上) 左の値が右の値より大きいか、または値が等価かどうかを判定 value2を含む |
| パラメータ | value1、value2 | int、float、char、byte |
コメントはプログラム内に書けるメモです。プログラムの内容や処理など、後から見ても分かるように書いておきます。コメント内では日本語が使用できます。この他に長文が書ける構文もあります。
| 構文 | // comment | 1行コメント |
| パラメータ | comment | 任意の文字列 |
上記のコードを以下のように変数を使わなくてもコンパクトに書けますが、少し分かりにくいです。
|
1 2 3 4 5 |
size(400, 400); //７回繰り返す for (int i = 1; i<=7; i++) { line(50, 50*i, 350, 50*i); } |
LINE-0201 上下の線の間に、任意の分割数で直線を引いてみましょう。このとき、Y座標値や分割幅の変数をfloat型にしているのは、分割数によっては計算結果が整数にならない場合があるからです。もしint型（整数型）を使うと、誤差が発生する可能性があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
size(400, 400); int sx = 50; //X座標始点 int ex = 350; //X座標終点 float yt = 50; //Y座標Top float yb = 350; //Y座標Botom int div = 7; //分割数 // floatにしているのは分割数によって整数にならないから float range = (yb - yt)/div; //分割幅 //分割数だけ繰り返す for (int i = 0; i<=div; i++) { line(sx, yt, ex, yt); yt+=range; //Y座標に分割幅を足す } |
やってみよう 分割数を変えてみよう 数値を全てintにしたらどうなるか
yt+=range は yt=yt+rangeをコンパクトな書式にしたものです。
| 構文 | value1 + value2 | 加算する。 |
| パラメータ | value1、value2 | string、int、float、char、byte、boolean |
| 構文 | var += value | 加算代入 var = var + valueと同じ |
| パラメータ | var | intまたはfloat |
| value | varと同じデータ型の任意の数値 | |
| 構文 | value++ | 整数変数の値を1増やす。 var = var + 1と同じ |
| パラメータ | value | int |
| 構文 | value1 – value2 –value1 | 減算する。または負の値にする。 |
| パラメータ | value1、value2 | intまたはfloat |
| 構文 | var -= value | 減算代入 var = var – valueと同じ |
| パラメータ | var | intまたはfloat |
| value | varと同じデータ型の任意の数値 | |
| 構文 | var— | 整数変数の値を1だけ減じる。 var = var – 1と同じ |
| パラメータ | var | int |
| 構文 | value1 * value2 | 乗算する。 |
| パラメータ | value1、value2 | int、float、byte、またはchar |
| 構文 | var *= value | 乗算代入 var = var * valueと同じ |
| パラメータ | var | intまたはfloat |
| value | varと同じデータ型の任意の数値 | |
| 構文 | value1 / value2 | 除算する。 |
| パラメータ | value1 | intまたはfloat |
| value2 | intまたはfloat、ただしゼロではない（ゼロで割ろうとするとエラーになる） | |
| 構文 | var /= value | 除算代入 var = var / valueと同じ |
| パラメータ | var | intまたはfloat |
| value | varと同じデータ型の任意の数値 |
LINE-0202 このプログラムを基に交互に線幅を変えてみましょう。%は余りを求める演算子（式で実行する計算の種類を指定する記号やシンボル）です。if else 文を使用して分岐させます。i を２で割った時の余りが0の時（割り切れる）線幅２を、そうでなければ線幅10で描きます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
size(400, 400); int sx = 50; //X座標始点 int ex = 350; //X座標終点 float yt = 50; //Y座標Top float yb = 350; //Y座標Botom int div = 7; //分割数 float range = (yb - yt)/div; //分割幅 // floatにしているのは分割数によって整数にならないから //分割数だけ繰り返す for (int i = 0; i<=div; i++) { if (i % 2 == 0) { strokeWeight(2); } else { strokeWeight(10); } line(sx, yt, ex, yt); yt+=range; } |
やってみよう 割る値を２以外の数値にしてみる 余りを０以外にしてみる
| 構文 | if (expression) { statements1 } else { statements2 } | 条件によりプログラムを分岐させます。 条件式がtrue（真／トゥルー）ならstatements１を実行する。false（偽／フォールス）ならstatements２を実行する。 ※ステートメント：プログラムを構成する手続きや命令、宣言などの文 |
| パラメータ | expression | 条件式 trueまたはfalseを評価する有効な式 |
| statements1 | trueによって実行される1つ以上のステートメント | |
| statements2 | falseによって実行される1つ以上のステートメント |
| 構文 | value1 % value2 | value1を value2で除算した時の余りを求める。 |
| パラメータ | value1 | intまたはfloatの数値 |
| value2 | intまたはfloatの数値 | |
| 戻り値 | 剰余（余りの数値） | intまたはfloatの数値 |
方眼を描く
LINE-0203 %を使わなくてもON/OFFできるトグルスイッチのようなこともできます。
最初に変数swに1（ON）を代入。もし１なら線幅２を実行し、swを０（OFF）にする。そうでなければ線幅10を実行、swを1（ON）にします。これでON/OFFが繰り返されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
size(400, 400); int sx = 50; //X座標始点 int ex = 350; //X座標終点 float yt = 50; //Y座標Top float yb = 350; //Y座標Botom int div = 7; //分割数 int sw = 1; //トグルスイッチ float range = (yb - yt)/div; //分割幅 // floatにしているのは分割数によって整数にならないから //分割数だけ繰り返す for (int i = 0; i<=div; i++) { if (sw == 1) { strokeWeight(2); sw =0; } else { strokeWeight(10); sw=1; } line(sx, yt, ex, yt); yt+=range; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
size(400, 400); int sx = 50; //X座標始点 int ex = 350; //X座標終点 float yt = 50; //Y座標 Top float yb = 350; //Y座標 Botom int div = 7; //分割数 float range = (yb - yt)/div; //分割幅 float add = 50; //XとY座標の初期値 //分割数だけ繰り返す for (int i = 0; i<=div; i++) { line(sx, add, ex, add); //水平線 line(add, yt, add, yb); // 垂直線 add+=range; //XとY座標に分割幅を足す } |
遠近感を表現する
LINE-0204 線間は同じで線幅を漸次小さくして遠近感を表現します。初期線幅 w から i に0.5掛けたものを引いていき、線幅を小さくしていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
int sx = 50; //X座標始点 int ex = 350; //X座標終点 float yt = 50; //Y座標Top float yb = 350; //Y座標Botom int div = 20; //分割数 float range = (yb - yt)/div; //分割幅 float w =10; //初期線幅 strokeCap(SQUARE); //分割数だけ繰り返す for (int i = 0; i<=div; i++) { strokeWeight(w-i*.5); //初期幅からi*0.5づつ小さくしていく line(sx, yt, ex, yt); yt+=range; } |
LINE-0205 次は線と線の間を漸次大きくして遠近感を表現してみましょう。for文内の更新部分でY座標にzenji 1.07を掛けて少しづつ距離を拡大していきます。
|
1 2 3 4 5 6 7 8 9 10 11 |
size(400, 400); int sx = 50; //X座標始点 int ex = 350; //X座標終点 float yt; //Y座標 Top float yb = 350; // Y座標Botom float zenji = 1.07; //線間の距離を変化させる //TopからBotomまでの距離繰り返す for (yt=50; yt<=yb; yt*=zenji) { line(sx, yt, ex, yt); } |
やってみよう 線間の距離zenjiを色々変えてみよう
LINE-0206 次はY座標の値が下限に達するまでwhile文で繰り返し描画します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
size(400, 400); int sx = 50; //X座標始点 int ex = 350; //X座標終点 float yt = 50; //Y座標 Top float yb = 350; //Y座標 Botom float zenji = 1.04;//線間の距離を変化させる //下限に達するまで繰り返す while (yt<=yb) { line(sx, yt, ex, yt); yt*=zenji; } |
| 構文 | while (expression) { statements } | 式が true（真）である間、一連のステートメントを連続して実行する。 |
| パラメータ | expression | 有効な式 繰り返しの間アップデートされなければならない。必ずfalseになるような式でループを抜け出せるようにする。 |
| statements | 1つ以上のステートメント |
LINE-0207 自然対数を計算するlog()関数を使ったやり方です。対数は大きくなるにつれて間隔が狭くなる性質があります。
|
1 2 3 4 5 6 7 8 9 10 11 |
size(400, 400); int sx = 50; //X座標始点 int ex = 350; //X座標終点 float yt = 50; //Y座標 Top float yb = 350; //Y座標 Botom int div =50; //分割数 float range = yb - yt; //分割する距離 for (int n=1; n<div ; n++){ float y=yb-range*(log(n)/log(div)); line(sx,y,ex,y); } |
| 構文 | log(n) | 数値の自然対数（底e対数＊）を計算する。分かりにくいので特別な増え方を計算すると思ってください。＊ネイピア数 (例） log(0.9)= -0.105360545 log(1)=0.0 log(2)=0.6931472 log(3)=1.0986123 |
| パラメータ | n | float 0.0より大きい数 |
| 戻り値 | float |
LINE-0208 次はフィボナッチ数列を使った方法です。1、2、3、5、8、13、21… のように前の２つの数値を足した数が連続するものです。この公式はそのままではプログラムできませんので各パートをA、B、Cの変数に代入します。ルートはsqrt()関数、べき乗はpow()関数を使用します。
,
|
1 2 3 4 5 6 7 8 9 10 11 |
size(400, 400); //フィボナッチ数列の要素 float A=1/sqrt(5); float B=(1+sqrt(5))/2; float C=(1-sqrt(5))/2; for (int k=1; k<=18; k++) { //フィボナッチ数列 float Y=A*(pow(B, k)-pow(C, k)); line(50, Y+50, 350, Y+50); } |
| 構文 | sqrt(n) | 数値の平方根を計算する。 |
| パラメータ | n | float 負でない数値 |
| 戻り値 | float |
| 構文 | pow(n, e) | nをe乗する |
| パラメータ | n | float 底 |
| e | float 指数 | |
| 戻り値 | float nのe乗した値 |
LINE-0209 正方形の各辺から中間まで描いていきます。for文の条件式の195はなだらかに繋がるように任意で選んだ数値です。下からと右からで50を足しているのはfor文の初期設定が50で始まっているので、それを補正するためです。そうしないとX座標終点とY座標 Botomの値が300から描画が始まるためです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
size(400, 400); int sx = 50; //X座標始点 int ex = 350; //X座標終点 float yt = 50; //Y座標 Top float yb = 350; //Y座標 Botom float zenji = 1.07; //線間の距離を変化させる for (int i=50; i<=195; i*=zenji) { line(sx, i, ex, i); // 上から描画 line(sx, yb+50-i, ex, yb+50-i); //下から line(i, yt, i, yb); //左から line(ex+50-i, yt, ex+50-i, yb); //右から } |
LINE-0210 これまでの応用で正方形の頂点から対辺に線を引いてみましょう。
|
1 2 3 4 5 6 7 8 |
size(400, 400); int div = 20; //分割数 float hd = height/div; //Y座標の分割幅 for (int i=0; i<=div; i++) { line(0, 0, width, hd*i); //左上から右辺へ描画 line(width, height, 0,hd*i); //右下から左辺へ描画 } |
LINE-0211 四隅の頂点から対辺へ線を引いてみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
size(400, 400); int div = 20; //分割数 float hd = height/div; //Y座標の分割幅 float wd = width/div; //X座標の分割幅 for (int i=0; i<=div; i++) { line(0, 0, width, hd*i); //左上から右辺へ描画 line(width, height, 0, hd*i); //右下から左辺へ描画 line(0, height, wd*i, 0); //左下から上辺へ描画 line(width, 0, wd*i, height); //左上から下辺へ描画 } |
コメント