円を並べる
CIRCLE-0200 円を画面全面に並べてみましょう。システム変数width, heightとfor文、circle()を使います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//=========================================== // 円を画面全面に並べる //=========================================== // CreationDate:2025年2月7日 金曜日18:56:23 //=================【環境設定】================ size(400, 400); //画面サイズ //=================【初期設定】================ int d=40; //円の直径(diameter.) float x, y; //円の位置 //==================メイン==================== for (y=0; y<=height; y+=d) { for (x=0; x<=width; x+=d) { circle(x, y, d); // 円の描画 } } |
端が切れていて見苦しいので修正しましょう。画面内に円がおさまるようにd/2（半径）から繰り返しを始めます。
|
1 2 3 4 5 6 7 |
※一部掲載 //==================メイン==================== for (y=d/2; y<=height; y+=d) { for (x=d/2; x<=width; x+=d) { circle(x, y, d); } } |
CIRCLE-0201 この円にランダムな色を付けてみましょう。色を作成するにはcolor()を使用します。作ったカラー値を格納する変数のデータ型はcolorです。ランダムな数値をrandom()で作り、色を振り分けるswitchの条件は整数なのでrandom()の戻り値 floatをint()またはround()で整数に変換する必要があります。
|
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 |
//=========================================== // 円を画面全面に並べるーランダムカラー //=========================================== // CreationDate:2025年2月8日 土曜日21:39:49 //=================【環境設定】================ size(400, 400); //画面サイズ background(0); //背景黒 //=================【初期設定】================ int d=40; //円の直径(diameter) float x, y; //円の位置 color c1= color(#DED2A4); //color c1= #DED2A4 でも同じ color c2= color(#D8AF9E); color c3= color(#537D90); color c4= color(#C67680); //==================メイン==================== for (y=d/2; y<=height; y+=d) { for (x=d/2; x<=width; x+=d) { int c=int(random(4)); //0~4未満のランダムな値を生成 switch(c) { //ランダムな値から選択肢を実行 case 0: fill(c1); break; case 1: fill(c2); break; case 2: fill(c3); break; case 3: fill(c4); break; } circle(x, y, d); //円の描画 } } |
色のデータ型
| 構文 | color var color var = value | 色の値を格納するデータ型です。16進法の色値は不透明なので不透明度を追加するには、値の前に0xを付け●●（16進の不透明度）＋16進法の色値という形にします。 例）color c = 0xCCDED2A4 |
| パラメータ | var | 値を参照する変数名 |
| value | color()、get()、lerpColor()、16進法の色値など |
色を作成する
color データ型の変数に格納する色を作成します。16進数表記を使用する場合はcolor()を使用する必要はありませんが、不透明度を指定する場合には必要です。
| 構文 | color(rgb) | rgb（int）16進法の色値 例）#ff0000 |
| color(rgb, alpha) | 上記+alpha（float）不透明度 | |
| color(gray) | gray 白から黒の間の値 デフォルトの最大値は 255 | |
| color(gray, alpha) | 白から黒の間の値、不透明度 数値はカラーモードの最大値の指定による | |
| color(v1, v2, v3) | v1, v2, v3(float)はカラーモードが RGBの場合；R（赤）,G（緑）,B（青） HSBの場合；H（色相）,S（彩度）,B（明度）になる 数値はカラーモードの最大値の指定による | |
| color(v1, v2, v3, alpha) | 上記+不透明度 | |
| 戻り値 | void | なし |
整数に変換する
| 構文 | int(data) | プリミティブなデータ型の値を整数表現に変換します。 |
| パラメータ | data | boolean、byte、char、color、 float、int、long、string |
| 戻り値 | int | 整数 |
整数に丸める
| 構文 | round(n) | n パラメータに最も近い整数に丸ます。（四捨五入） |
| パラメータ | n | 丸める数値 |
| 戻り値 | int | 丸められた数値 |
CIRCLE-0202 同心円パターンを作成します。大きい円から小さい円の順番で描きます。
|
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月8日 土曜日14:44:51 //=================【環境設定】================ size(400, 400); //画面サイズ background(0); // 背景黒 noStroke(); //=================【初期設定】================ float d=40; //円の直径(diameter.) float x, y; //円の位置 //==================メイン==================== for (y=d/2; y<=height; y+=d) { for (x=d/2; x<=width; x+=d) { fill(#F06F6F); circle(x, y, d); fill(#D30DD0); circle(x, y, d*.65); fill(#0DD3B7); circle(x, y, d*.25); } } |
CIRCLE-0203 これは単調で面白くないので、円の大きさを15〜40の間でランダムに変えてみましょう。random()を使います。
|
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月8日 土曜日15:01:46 //=================【環境設定】================ size(400, 400); //画面サイズ background(0); // 背景黒 noStroke(); //境界線なし //=================【初期設定】================ float dt=40; //円の移動距離 float x, y; //円の位置 //==================メイン==================== for (y=dt/2; y<=height; y+=dt) { for (x=dt/2; x<=width; x+=dt) { float rd=random(15,40); //円の直径をランダムに fill(#F06F6F); circle(x, y, rd); fill(#D30DD0); circle(x, y, rd*.65); fill(#0DD3B7); circle(x, y, rd*.25); } } |
CIRCLE-0204 次は位置もランダムにしてみましょう。Y位置のみ上下−12〜12の間に移動させます。
|
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月8日 土曜日15:01:46 //=================【環境設定】================ size(400, 400); //画面サイズ background(0); // 背景黒 noStroke(); //境界線なし //=================【初期設定】================ float dt=40; //円の移動距離 float x, y; //円の位置 //==================メイン==================== for (y=dt/2; y<=height; y+=dt) { for (x=dt/2; x<=width; x+=dt) { float rd=random(10,40); //円の直径をランダムに float yd=random(-12,12); //Y位置をランダムに fill(#F06F6F); circle(x, y+yd, rd); fill(#D30DD0); circle(x, y+yd, rd*.65); fill(#0DD3B7); circle(x, y+yd, rd*.25); } } |
CIRCLE-0205 大小の円を交互に並べていきます。円の直径をif文で分岐させます。
|
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 |
//=========================================== // 円を画面全面に並べるー円の直径大小を交互に //=========================================== // CreationDate:2025年2月9日 日曜日8:09:07 //=================【環境設定】================ size(400, 400); //画面サイズ background(0); // 背景黒 noStroke(); //境界線なし //=================【初期設定】================ float d=20; //円の直径 float dt=40; //円の移動距離 float x, y; //円の位置 int sw = 0; //円の直径を交互に変えるスイッチ fill(#B79797); //塗りつぶし色 //==================メイン==================== for (y=dt/2; y<=height; y+=dt) { for (x=dt/2; x<=width; x+=dt) { circle(x, y, d); //swが0の時、円の直径を３０にし、swを1にする if (sw==0) { d=30; sw=1; //swが1の時、円の直径を2０にし、swを0にする } else { d=20; sw=0; } } } |
CIRCLE-0206 同時に色も変えてみましょう。
|
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 |
//=========================================== // 円を画面全面に並べるー円の直径大小を交互に2 //=========================================== // CreationDate:2025年2月9日 日曜日8:23:16 //=================【環境設定】================ size(400, 400); //画面サイズ background(0); // 背景黒 noStroke(); //境界線なし //=================【初期設定】================ float d=20; //円の直径 float dt=40; //円の移動距離 float x, y; //円の位置 int sw = 0; //円の直径を交互に変えるスイッチ color c1 =color(165,132,144); color c2 =color(126,87,102); //==================メイン==================== for (y=dt/2; y<=height; y+=dt) { for (x=dt/2; x<=width; x+=dt) { //swが0の時、円の直径を３０にし、swを1にする if (sw==0) { d=30; fill(c1); sw=1; //swが1の時、円の直径を2０にし、swを0にする } else { d=20; fill(c2); sw=0; } circle(x, y, d); } } |
CIRCLE-0207 円の直径と色を３種類にします。switch文で分岐させます。
|
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 |
//=========================================== // 円を画面全面に並べるー円の直径大中小を交互に //=========================================== // CreationDate:2025年2月9日 日曜日8:41:44 //=================【環境設定】================ size(400, 400); //画面サイズ background(0); // 背景黒 noStroke(); //境界線なし //=================【初期設定】================ float d=20; //円の直径 float dt=40; //円の移動距離 float x, y; //円の位置 int i = 0; //剰余で使う変数（分岐するため） color c1 =color(165,132,144); color c2 =color(126,87,102); color c3 =color(136,150,198); //==================メイン==================== for (y=dt/2; y<=height; y+=dt) { for (x=dt/2; x<=width; x+=dt) { int k= i % 3; i++; //0、１、2の値を発生させる switch(k) { //kの値によって分岐する case 0: d=30; fill(c1); break; case 1: d=20; fill(c2); break; case 2: d=10; fill(c3); break; } circle(x, y, d); } } |
CIRCLE-0208 円の直径を変え、色に不透明度を追加してみます。
|
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 |
//=========================================== // 円を画面全面に並べるー円の直径大中小を交互に02 //=========================================== // CreationDate:2025年2月9日 日曜日8:41:44 //=================【環境設定】================ size(400, 400); //画面サイズ background(255); // 背景黒 noStroke(); //境界線なし //=================【初期設定】================ float d=20; //円の直径 float dt=40; //円の移動距離 float x, y; //円の位置 int i = 0; //剰余で使う変数（分岐するため） color c1 =color(165,132,144,180); color c2 =color(126,87,102,140); color c3 =color(136,150,198,200); //==================メイン==================== for (y=dt/2; y<=height; y+=dt) { for (x=dt/2; x<=width; x+=dt) { int k= i % 3; i++; //0、１、2の値を発生させる switch(k) { //kの値によって分岐する case 0: d=80; fill(c1); break; case 1: d=60; fill(c2); break; case 2: d=50; fill(c3); break; } circle(x, y, d); } } |
円の拡大・縮小
CIRCLE-0209 円を徐々に拡大・縮小していきます。円の直径を徐々に増やし直径が40以上になったら増加値を反転（マイナス）するようにしています。また直径が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 |
//=========================================== // 円を画面全面に並べるー徐々に拡大・縮小する //=========================================== // CreationDate:2025年2月8日 土曜日17:12:14 //=================【環境設定】================ size(400, 400); //画面サイズ background(0); // 背景黒 noStroke(); //境界線なし //=================【初期設定】================ float d=10; //円の直径 float dt=40; //円の移動距離 float inc=5; //円の増加値（increase） float x, y; //円の位置 fill(#0DD3B7); //塗りつぶし色 //==================メイン==================== for (y=dt/2; y<=height; y+=dt) { for (x=dt/2; x<=width; x+=dt) { circle(x, y, d+=inc); //円の直径が10以下または40以上になったら if ((d>=40) || (d<=10)) { inc=-inc; //増加値を反転させる } } } |
論理演算子
論理演算子とは、真（true）または偽（false）の値を判定する演算子です。if文の条件判定に使用されます。
| 構文 | expression1 || expression2 | OR（論理和） 2つの式を比較し、一方または両方が真と評価された場合に真を返す。両方が偽の場合のみ偽を返します。 true || false →true false || true →true true || true →true false || false →false |
| パラメータ | expression1、expression2 | 有効な式 |
| 構文 | expression1 && expression2 | AND（論理積） 2つの式を比較し、両方が真と評価された場合のみ真を返す。一方または両方が偽と評価された場合は偽を返します。 true && false →false false && true →false true && true →true false && false →false |
| パラメータ | expression1、expression2 | 有効な式 |
| 構文 | !expression | NOT（論理否定） 式のブール値を反転します。式が偽の場合は真を返し、式が真の場合は偽を返します。 |
| パラメータ | expression | 有効な式 |
CIRCLE-0210 円にグラデーションをつけてみましょう。２色間をグラデーションするにはlerpColor()を使用します。
|
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 |
//=========================================== // 円を画面全面に並べるー徐々に拡大・縮小・グラデーション //=========================================== // CreationDate:2025年2月9日 日曜日10:05:25 //=================【環境設定】================ size(400, 400); //画面サイズ background(0); // 背景黒 noStroke(); //境界線なし //=================【初期設定】================ float d=10; //円の直径 float dt=40; //円の移動距離 float inc=5; //円の増加値（increase） float x, y; //円の位置 color c1=color(46,198,123); //塗りつぶし色 color c2=color(237,137,36); float amt=0; //２色間の補完量（amount） float ink=.2; //２色間の補完増加値 //==================メイン==================== for (y=dt/2; y<=height; y+=dt) { for (x=dt/2; x<=width; x+=dt) { // 2色間の色を計算 color grad = lerpColor(c1, c2, amt+=ink); fill(grad); //塗りつぶし色 circle(x, y, d+=inc); // 円を描画 //円の直径が10以下または40以上になったら if ((d>=40) || (d<=10)) { inc=-inc; //直径の増加値を反転させる ink=-ink; //色の増加値を反転させる } } } |
２色間の補完色設定
| 構文 | lerpColor(c1, c2, amt) | c1とc2間の色をamtの量で補完します。簡単に言うと２色間のグラデーションの内の一色を作成します。 learp: Linear Interpolate （線形補間） |
| パラメータ | c1 | (int) この色から補間する |
| c2 | (int) この色に補間する | |
| amt | (float) 0.0から1.0の間 amt: amount | |
| 戻り値 | int | カラー値 |
コメント