放射状の線を描く
LINE-0300 三角関数を使用する円の方程式で放射状の線を描いてみましょう。画面の中心を原点にするためtranslate()関数で座標を移動させます。移動するとy軸の上方向がマイナスになります。上方向はプラスにしたいのでscale()関数で軸を上下反転させます。線と線の間の角度を８度とします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
size(400, 400); translate(200, 200); //原点を移動 scale(1, -1); // Y軸を上下反転します int r = 200; // 円の半径 float x; //X座標 float y; //Y座標 float div=radians(8); //分割する角度をラジアンに変換 float th; //角度 //分割する角度を0から2πまで繰り返す for ( th=0 ; th <TWO_PI ; th+=div) { //円の公式 x=r*sin(th); y=r*cos(th); line(0, 0, x, y); } |
やってみよう 分割する角度を変えてみる 線幅を変更してみる 交互に線の長さを変えてみる 交互に色をつける
座標の原点を移動
| 構文 | translate(x, y) | 座標の原点を移動させます。 |
| パラメータ | x | float X軸方向の移動 |
| y | float Y軸方向の移動 | |
| 戻り値 | void | なし |
シェイプのサイズを拡大・縮小
| 構文 | scale(x, y) | 頂点の拡大・縮小により、シェイプのサイズを拡大・縮小します。 スケール値は10進のパーセントで指定します。例（２）＝200% 他に3D構文等があります。 |
| パラメータ | x | (float) x軸内のオブジェクトをスケーリングする割合 |
| y | (float) y軸内のオブジェクトをスケーリングする割合 | |
| 戻り値 | void | なし |
円の方程式
| 方程式 | x=r*sin(th) y=r*cos(th) | 三角関数のsine、cosineを使用して円を表現します。 |
| 変数 | r | 円の半径（r＝ radiusの略） |
| th | 角度 (th＝thetaの略) |
SIN関数
| 構文 | sin(angle) | 角度の正弦を計算します。 |
| パラメータ | angle | float ラジアンの角度 |
| 戻り値 | float | -1 から 1 の範囲 |
COS関数
| 構文 | cos(angle) | 角度の余弦を計算します。 |
| パラメータ | angle | float ラジアンの角度 |
| 戻り値 | float | -1 から 1 の範囲 |
60分法の単位をラジアン単位に変換
プロセシングでは90度や360度などという60分法の度単位は使用できません。ラジアンという単位を使用します。１ラジアンは円の半径と同じ長さの円周の中心に対する角度です。
TWO_PIは定数で２πラジアン（360度）です。
| 構文 | radians(degrees) | 度単位をラジアン単位に変換する |
| パラメータ | degrees | float ラジアンに変換する角度 |
| 戻り値 | float | 変換されたラジアンの値 |
LINE-0301 今度は交互に線の長さを変えてみましょう。if文とトグルスイッチを使って円の半径を変えています。角度によっては隙間ができたり同じ長さの線が隣り合ったりします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
size(400, 400); translate(200, 200); //原点を移動 scale(1, -1); // Y軸を上下反転します int r=180;// 円の半径 float x;//X座標 float y;//Y座標 float div=radians(10);//分割する角度をラジアンに変換 float th;//角度 int sw=0; //トグルスイッチ //分割する角度を0から2π-divまで繰り返す for ( th=0; th <TWO_PI-div; th+=div) { if (sw ==1) { r=150; sw=0; } else { r=180; sw=1; } x=r*sin(th); y=r*cos(th); line(0, 0, x, y); } |
LINE-0302 放射状の線の始点を中心からではない方法で描いてみましょう。小円と大円を円の方程式で計算して、それをそれぞれline()関数に入れています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
size(400, 400); translate(200, 200); //原点を移動 scale(1, -1); // Y軸を上下反転します int R1 = 50; // 小円の半径 int R2 = 180; //大円の半径 float x1, x2; //小円,大円のX座標 float y1, y2; //小円,大円のY座標 float div=radians(4); //分割する角度をラジアンに変換 float th; //角度 for ( th=0; th <TWO_PI; th+=div) { //小円 x1=R1*sin(th); y1=R1*cos(th); //大円 x2=R2*sin(th); y2=R2*cos(th); line(x1, y1, x2, y2); } |
LINE-0303 ここで別の方法で放射状の線を描いてみます。rotate()を使って図形を回転させる方法です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//==================座標を回転して放射状の線を描く== size(400, 400); translate(200, 200); //原点を移動 scale(1, -1); // Y軸を上下反転 //==================初期設定================== int div = 60; //分割数 float num =TWO_PI/div; //分割角度 float x =0, y =180; //始点 float x1=0, y1=30; //終点 //==================メイン================== for (float i = 0; i<TWO_PI-.01; i += num ) { //-0.1は重なりや欠けを防ぐ補正 line(x, y, x1, y1); //線の描画 rotate(num); // num度回転 } |
回転
| 構文 | rotate(angle) | 図形を回転させる |
| パラメータ | angle | (float) ラジアンで指定された回転角 |
| 戻り値 | void | なし |
LINE-0304 応用で線の終点の座標を変えてみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//==================座標を回転して放射状の線を描く== size(400, 400); translate(200, 200); //原点を移動 scale(1, -1); // Y軸を上下反転 //==================初期設定================== int div = 60; //分割数 float num =TWO_PI/div; //分割角度 float x =0, y =180; //始点 float x1=100, y1=-150; //終点 //==================メイン================== for (float i = 0; i<TWO_PI-.01; i += num ) { //-0.1は重なりや欠けを防ぐ補正 line(x, y, x1, y1); //線の描画 rotate(num); // num度回転 } |
LINE-0305 画面の幅や高さを等間隔に分割し、中心から放射状に線を引きます。対角線で線同士が重ならないようにdtを足したり引いたりしています。
|
1 2 3 4 5 6 7 8 9 |
size(400, 400); int dt=20;//分割幅 // d: 0~400 幅、高さ for (int d=0; d<=400-dt; d+=dt) { line(200, 200, d, 0); //上 line(200, 200, d+dt, height); //下 line(200, 200, width, d); //右 line(200, 200, 0, d+dt); //左 } |
LINE-0306 この放射パターンを並べてみます。パターンを関数化するのが普通のやり方ですが、ここでは繰り返しでパターンを移動させています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
size(400, 400); background(0,0,255); int dt=10;//分割幅 int wd=200; //幅 int hd=200; //高さ int org=100; //中心座標 //右上 strokeWeight(2); //線幅 stroke(5, 255, 207); //線色 for (int i=0; i<4; i++) {//4回繰り返し for (int d=0; d<=wd-dt; d+=dt) { line(org, org, d, 0); //上 line(org, org, d+dt, hd); //下 line(org, org, wd, d); //右 line(org, org, 0, d+dt); //左 } switch(i) { case 0: //右上 stroke(252, 0, 236); translate(200, 0); break; case 1: // 左下 stroke(14, 229, 0); translate(-200, 200); break; case 2: // 右下 stroke(255, 161, 8); translate(200, 0); break; } } |
コメント