円を直線上で移動させよう
CIRCLE-0300 円を直線上で移動させます。for文でxの位置を移動させているだけの単純なものです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//=========================================== // 円を直線上に移動させる //=========================================== // CreationDate: 2025年2月13日 木曜日18:11:08 //=================【環境設定】================ size(600, 400); //画面サイズ translate(300, 200); //原点を移動 //=================【初期設定】================ noFill(); //塗りつぶしなし int d=200; //円の直径 int dt=10; //移動距離 int y=0; //Y座標固定 //==================メイン==================== for (int x= -200; x<=200; x+=dt) { circle(x, y, d); } |
CIRCLE-0301 応用例です。線をレインボーカラーのグラデーションにしてみましょう。レインボーカラーにする場合はカラーモードをHSBにします。lerpColor()を使用してグラデーションカラーを作成します。カラー補完量は１÷ 繰り返し回数（200+200/5=80)で0.012となり、０〜１の間になるよう調整します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
//=========================================== // 円を直線上に移動させる レインボーカラー //=========================================== // CreationDate: 2025年2月25日 火曜日15:02:31 //=================【環境設定】================ size(600, 400); //画面サイズ translate(300, 200); //原点を移動 colorMode(HSB, 100); background(0); //=================【初期設定】================ noFill(); //塗りつぶしなし strokeWeight(2); int d=200; //円の直径 int dt=5; //移動距離 int y=0; //Y座標固定 color c1=color(100, 100, 100); color c2=color(60, 100, 100); float am=0;//カラー補完量 //==================メイン==================== for (int x= -200; x<=200; x+=dt) { stroke(lerpColor(c1, c2, am));//グラデーション circle(x, y, d); am+=0.0125;//カラー補完量の増加 } |
CIRCLE-0302 応用例です。% 剰余を使って周期的に線に色を付けていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
//=========================================== // 円を直線上に移動させる //=========================================== // CreationDate: 2025年2月25日 火曜日10:23:13 //=================【環境設定】================ size(600, 400); //画面サイズ translate(300, 200); //原点を移動 background(0); //=================【初期設定】================ noFill(); //塗りつぶしなし int d=200;; //円の直径 int dt=5; //移動距離 int y=0; //Y座標固定 //==================メイン==================== for (int x= -200; x<=200; x+=dt) { if (x % 7 ==0) { stroke(0,255,255); } else { stroke(0,128,255); } circle(x, y, d); } |
CIRCLE-0303 円を大きくしたり小さくしたりしてX軸上を移動させます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
//=========================================== // 円を直線上に移動させるー大きくしたり小さくしたり //=========================================== // CreationDate: 2025年2月13日 木曜日18:31:16 //=================【環境設定】================ size(800, 400); //画面サイズ translate(400, 200); //原点を移動 //=================【初期設定】================ noFill(); //塗りつぶしなし int d=50; //円の初期直径 int plus=7; int dt=8; //移動距離 int y=0; //Y座標固定 //==================メイン==================== for (int x= -400; x<=600; x+=dt) { circle(x, y, d); //直径が300より大きいか、50より小さいなら if ( (d>300) || (d<50)) { plus=-plus; //増分値を反転（マイナス）する } d+=plus;//直径を変化させる } |
CIRCLE-0304 線に色を付け、パターンを重ねてみましょう。
|
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 |
//=========================================== // 円を直線上に移動させるー大きくしたり小さくしたり //=========================================== // CreationDate: 2025年2月25日 火曜日10:41:39 //=================【環境設定】================ size(800, 400); //画面サイズ translate(400, 200); //原点を移動 background(0); //=================【初期設定】================ noFill(); //塗りつぶしなし stroke(0,255,249); int d=50; //円の初期直径 int plus=7; int dt=7; //移動距離 int y=0; //Y座標固定 //==================メイン==================== for (int k=1; k<=2; k++) { for (int x= -400; x<=600; x+=dt) { circle(x, y, d); //直径が300より大きいか、50より小さいなら if ( (d>300) || (d<50)) { plus=-plus; //増分値を反転（マイナス）する } d+=plus;//直径を変化させる } d=300; stroke(0,168,255); } |
CIRCLE-0305 大きくなったら最初の大きさに戻るを繰り返します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
//=========================================== // 円を直線上に移動させるーな大きくなったら始めの大きさに戻る //=========================================== // CreationDate: 2025年2月13日 木曜日18:48:26 //=================【環境設定】================ size(800, 400); //画面サイズ translate(400, 200); //原点を移動 //=================【初期設定】================ noFill(); //塗りつぶしなし float d=50; //円の初期直径 float plus=7; int dt=8; //移動距離 int y=0; //Y座標固定 //==================メイン==================== for (int x= -400; x<=600; x+=dt) { circle(x, y, d); //直径が300より大きくなったら if (d>300) { d=50; //初期値に戻す } d+=plus; //直径を変化させる } |
CIRCLE-0306 大きさの変化をなだらかにしてみましょう。sin()関数を使ってみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
//=========================================== // 円を直線上に移動させるーなだらかに大きくしたり小さくしたり //=========================================== // CreationDate: 2025年2月13日 木曜日18:40:56 //=================【環境設定】================ size(800, 400); //画面サイズ translate(400, 200); //原点を移動 //=================【初期設定】================ noFill(); //塗りつぶしなし float d=50; //円の初期直径 float plus=7; int dt=8; //移動距離 int y=0; //Y座標固定 //==================メイン==================== for (int x= -400; x<=600; x+=dt) { circle(x, y, d); //直径が300より大きいか、50より小さいなら if ( (d>300) || (d<50)) { plus=-plus;//増分値を反転（マイナス）する } plus=10*sin(radians(x)); //増分値をサイン関数で変化させる d+=plus; //直径を変化させる } |
CIRCLE-0307 線に色を付けて、パターンを少し変化させたものを重ねてみましょう。
|
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 |
//=========================================== // 円を直線上に移動させるーなだらかに大きくしたり小さくしたり //=========================================== // CreationDate: 2025年2月25日 火曜日11:08:00 //=================【環境設定】================ size(800, 400); //画面サイズ translate(400, 200); //原点を移動 background(0); //=================【初期設定】================ noFill(); //塗りつぶしなし stroke(240, 205, 7); float d=50; //円の初期直径 float plus=7; int dt=8; //移動距離 int y=0; //Y座標固定 //==================メイン==================== for (int k=1; k<=2; k++) { for (int x= -400; x<=600; x+=dt) { circle(x, y, d); //直径が300より大きいか、50より小さいなら if ( (d>300) || (d<50)) { plus=-plus;//増分値を反転（マイナス）する } plus=10*sin(radians(x)); //増分値をサイン関数で変化させる d+=plus; //直径を変化させる } d=260; stroke(222, 90, 78); } |
コメント