長方形の長さをランダムに
QUAD-0300 長方形の位置、幅、高さ、色をランダムにします。不透明度は50に固定しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
//=========================================== // ランダムな長さの長方形 //=========================================== // CreationDate: 2025年3月16日 日曜日9:21:24 //=================【環境設定】================ size(400, 400); //画面サイズ background(0); //背景を黒 //=================【初期設定】================ noStroke(); //境界線なし colorMode(HSB,360,100,100,100); //==================メイン==================== for (int i=0 ; i<150; i++) { float x=random(-50,400); float y=random(-50,400); float w=random(10,120); float h=random(10,120); fill(random(200,360),random(70,100),random(70,100),50); rect(x,y,w,h); } |
長方形の回転
QUAD-0301 サイズや色も変えて回転もランダムにしてみます。
|
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年3月16日 日曜日9:57:20 //=================【環境設定】================ size(400, 400); //画面サイズ background(0); //背景を黒 //=================【初期設定】================ noStroke(); //境界線なし rectMode(CENTER); colorMode(HSB, 360, 100, 100, 100); //==================メイン==================== for (int i=0; i<300; i++) { float x=random(0, 400); float y=random(0, 400); float w=random(10, 150); float h=random(10, 30); fill(random(200, 280), random(70, 100), random(70, 100), 50); pushMatrix(); rotate(random(radians(-45), radians(45))); rect(x, y, w, h); popMatrix(); } |
QUAD-0302 長方形を拡大しながら回転させます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
//=========================================== // 長方形の回転 //=========================================== // CreationDate: 2025年3月16日 日曜日10:15:4 //=================【環境設定】================ size(400, 400); //画面サイズ translate(width/2, height/2); //原点を移動 //=================【初期設定】================ noFill(); //塗りつぶしなし rectMode(CENTER); int w=30,h=10; //長方形の大きさ //==================メイン==================== for (int i=0; i<90; i++ ) { rotate(radians(1)); w+=8; h+=5; rect(0,0,w,h); } |
QUAD-0303 長方形に色を付けます。norm()を使って繰り返し回数を0から１の間の数値に変換して２色間のグラデーションに使用しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
//=========================================== // 長方形の回転 //=========================================== // CreationDate: 2025年3月16日 日曜日10:15:4 //=================【環境設定】================ size(400, 400); //画面サイズ translate(width/2, height/2); //原点を移動 //=================【初期設定】================ colorMode(HSB, 360, 100, 100); color c1=color(160, 70, 90); color c2=color(300, 70, 100); rectMode(CENTER); int w=730, h=420; //長方形の大きさ stroke(100,0,100); //==================メイン==================== for (int i=0; i<80; i++ ) { rotate(radians(2)); fill(lerpColor(c1,c2,norm(i,0,79))); rect(0, 0, w, h); w-=8; h-=5; } |
正規化 norm
| 構文 | norm(value, start, stop) | 別の範囲の数値を 0 から 1 の間の値に正規化します。正規化とは一定のルールに基づいてデータを整える（変形・変換する）ことです。範囲外の値は意図的で有用な場合が多いので、範囲外の数値は0と1に固定されません。 |
| パラメータ | value | (float) 変換対象の入力値 |
| start | (float) 現在の値の範囲の下限値 | |
| stop | (float) 現在の値の範囲の上限値 | |
| 例 | for ( int i=0; i<50; i++) { println(norm(i,0,49)); } | 出力 0.0 0.020408163 0.040816326 ︙（略） 0.9591837 0.97959185 1.0 |
QUAD-0304 長方形の中心を軸にして回転させます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
//=========================================== // 長方形の回転 //=========================================== // CreationDate: 2025年6月23日 月曜日9:46:46 //=================【環境設定】================ size(400, 400); //画面サイズ translate(width/2, height/2); //原点を移動 //=================【初期設定】================ noFill(); rectMode(CENTER);//長方形の中心設定 int w=30, h=350; //長方形の大きさ int inc=6;//回転数 float ang=PI/inc; //回転角 対称性図形なのでTWO_PIにしない //==================メイン==================== for ( int i=0;i<inc ;i++ ) { rotate(ang); rect(0,0,w,h); } |
対称図形なので半分(PI)描くことで実現できます。TWO_PIにすると偶数回で長方形が重なってしまいます。
長方形の大きさ、回転数や回転軸の位置を変えることで様々な図形ができます。回転軸の位置を変えると対称性が崩れるのでTWO_PIで回転できます。
回転角をPIからTWO_PIにし、回転軸をY軸下に20移動
回転角をPIからTWO_PIにし、回転軸をY軸下に20設定
回転角をPIからTWO_PIにし、回転軸をY軸下に30、 X軸右に80移動
QUAD-0304 色を付けてみました。norm()を使って繰り返し回数を0から１の間の数値に変換して２色間のグラデーションに使用しています。
|
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年6月23日 月曜日9:46:46 //=================【環境設定】================ size(400, 400); //画面サイズ translate(width/2, height/2); //原点を移動 background(0); //=================【初期設定】================ noStroke(); rectMode(CENTER);//長方形の中心設定 int w=50, h=600; //長方形の大きさ int inc=48;//回転数 float ang=TWO_PI/inc; //回転角 colorMode(HSB, 360, 100, 100,100); color c1=color(180, 70, 90,30); color c2=color(330, 70, 100,30); //==================メイン==================== for ( int i=0;i<inc ;i++ ) { rotate(ang); fill(lerpColor(c1,c2,norm(i,0,inc))); rect(30,0,w,h); } |
コメント