
円を平面上で移動させよう
CIRCLE-0400 円をジグザグに移動させてみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
//=========================================== // ジグザグに移動する円 //=========================================== // CreationDate: 2025年2月16日 日曜日16:19:46 //=================【環境設定】================ size(800, 400); //画面サイズ translate(400, 200); //原点を移動 scale(1, -1); // Y軸を上下反転(上をマイナスに) //=================【初期設定】================ noFill(); //塗りつぶしなし float x=0,y=0; // X、Y座標 int d=150; // 円の直径 float dt=10*tan(radians(30)); //移動量 //==================メイン==================== for (x=-600; x<600; x+=5) { circle(x, y, d);//Y座標が80以上または80以下なら if ((y>80)||(y<-80)) { dt=-dt;//移動量を反転 } y=y+dt; //移動 } |


凸凹上を移動する円を描きます。% 剰余を使って進行方向を変えています。
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 32 33 |
//=========================================== // 凸凹に移動する円 //=========================================== // CreationDate: 2025年2月25日 火曜日18:22:05 //=================【環境設定】================ size(800, 400); //画面サイズ translate(width/2, height/2); //原点を移動 //=================【初期設定】================ noFill(); //塗りつぶしなし float x=-450, y=70; //円の初期位置 int d=120; //円の直径 int dt=10; //円の移動量 //==================メイン==================== for (int t=1; t<14; t++) { int k=t % 4; //0~3を生成 for (int i=0; i<15; i++) { circle(x, y, d); switch (k) { //kの値により移動方向を変更する case 0: x+=dt; break; case 1: y-=dt; break; case 2: x+=dt; break; case 3: y+=dt; break; } } } |

繊に色を付け、塗りつぶしの不透明度を10にして描いてみます。ボーッとした光のような効果があります。
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 32 33 34 35 |
//=========================================== // 凸凹に移動する円 //=========================================== // CreationDate: 2025年2月25日 火曜日18:49:28 //=================【環境設定】================ size(800, 400); //画面サイズ translate(width/2, height/2); //原点を移動 background(0); //=================【初期設定】================ fill(0,255,255,10); //塗りつぶし色 stroke(31,131,234); //線の色 float x=-450, y=70; //円の初期位置 int d=120; //円の直径 int dt=10; //円の移動量 //==================メイン==================== for (int t=1; t<14; t++) { int k=t % 4; //0~3を生成 for (int i=0; i<15; i++) { circle(x, y, d); switch (k) { //kの値により移動方向を変更する case 0: x+=dt; break; case 1: y-=dt; break; case 2: x+=dt; break; case 3: y+=dt; break; } } } |

CIRCLE-0304 直線上ではなく曲線上を移動させてみましょう。曲線はサイン波を使用します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
//=========================================== // サイン波上を移動する円 //=========================================== // CreationDate: 2025年2月14日 金曜日19:18:20 //=================【環境設定】================ size(800, 400); //画面サイズ translate(400, 200); //原点を移動 //=================【初期設定】================ noFill(); //塗りつぶしなし float a=.5; // 波の長さ float b=100; // 波の高さ int d=100; // 円の直径 float x, y; // X,Y座標 //==================メイン==================== for (float k=-700; k<700; k+=5) { // サイン波 x=a*k; y=b*sin(radians(k)); circle(x, y, d); } |
やってみよう 波の長さa、高さb、円の直径dなどを変えてみよう

CIRCLE-0305 円を大きくしたり小さくしたりします。
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 |
//=========================================== // サイン波上を移動する円を大きくしたり小さくしたり //=========================================== // CreationDate: 2025年2月14日 金曜日21:20:37 //=================【環境設定】================ size(800, 400); //画面サイズ translate(400, 200); //原点を移動 //=================【初期設定】================ noFill(); //塗りつぶしなし float a=.5; // 波の高さ float b=100; // 波の高さ int d=100; // 円の直径 int dt=2; // 円の増分値 float x, y; // X,Y座標 //==================メイン==================== for (float k=-700; k<700; k+=5) { // サイン波 x=a*k; y=b*sin(radians(k)); circle(x, y, d); d+=dt; //円を大きくしたり小さくしたり if ((d>150) || (d<30)) { dt=-dt; } } |

コメント