02　四角形を描いてみよう-正方形

正方形並べる

QUAD-0200　正方形を全画面に並べます。画像サイズが400×400だと右と下に線が出なかったので、401×401にしています。

//===========================================
// 正方形を並べる
//===========================================
// CreationDate:2025年3月1日 土曜日14:28:10
//=================【環境設定】================
size(401, 401); //画面サイズ
//=================【初期設定】================
float x, y; //XY座標
int d=40; //正方形の大きさ
//==================メイン====================
for (y=0; y<height; y+=d ) {
  for (x=0; x<width; x+=d) {
    square(x, y, d); //正方形の描画
  }
}

//===========================================

// 正方形を並べる

//===========================================

// CreationDate:2025年3月1日土曜日14:28:10

//=================【環境設定】================

size(401, 401); //画面サイズ

//=================【初期設定】================

float x, y; //XY座標

int d=40; //正方形の大きさ

//==================メイン====================

for (y=0; y<height; y+=d ) {

for (x=0; x<width; x+=d) {

square(x, y, d); //正方形の描画

}

QUAD-0201　これに交互に色を付けて市松模様にしてみましょう。booleanを使って交互に色を付けていきます。

//===========================================
// 市松模様にする
//===========================================
// CreationDate: 2025年3月1日 土曜日15:47:10
//=================【環境設定】================
size(400, 400); //画面サイズ
//=================【初期設定】================
noStroke();
float x, y; //XY座標
float d=40; //正方形の大きさ
color c1=color(0);
color c2=color(112, 206, 190);
boolean sw =true; //色変更スイッチ
//==================メイン====================
for (y=0; y<height; y+=d ) {
  for (x=0; x<width; x+=d) {
    if (sw==true) {
      fill(c1); sw=false;
    } else {
      fill(c2); sw=true;
    }
    square(x, y, d); //正方形の描画
  }
  sw =! sw; //反転する そうしないと市松模様にならない
}

//===========================================

// 市松模様にする

//===========================================

// CreationDate: 2025年3月1日土曜日15:47:10

//=================【環境設定】================

size(400, 400); //画面サイズ

//=================【初期設定】================

noStroke();

float x, y; //XY座標

float d=40; //正方形の大きさ

color c1=color(0);

color c2=color(112, 206, 190);

boolean sw =true; //色変更スイッチ

//==================メイン====================

for (y=0; y<height; y+=d ) {

for (x=0; x<width; x+=d) {

if (sw==true) {

fill(c1); sw=false;

} else {

fill(c2); sw=true;

}

square(x, y, d); //正方形の描画

}

sw =! sw; //反転するそうしないと市松模様にならない

}

データ型　Boolean

構文	boolean var boolean var = booleanvalue	ブール値 true と false のデータ型
パラメータ	var	値を参照する変数名
	booleanvalue	真（true）か偽（false）か

論理演算子

論理演算子とは、真（true）または偽（false）の値を判定する演算子です。if文などの条件判定に使用されます。

構文	!expression	NOT（論理否定）　式のブール値を反転します。式が偽の場合は真を返し、式が真の場合は偽を返します。
パラメータ	expression	有効な式

QUAD-0202　正方形を右下へずらして重ねてみます。

//===========================================
// 正方形をずらして重ねる
//===========================================
// CreationDate: 2025年3月1日 土曜日19:11:50
//=================【環境設定】================
size(400, 400); //画面サイズ
//=================【初期設定】================
background(0);
noFill();
stroke(255);
float x, y; //XY座標
float d=60; //正方形の位置
int w=40; //正方形の大きさ
//==================メイン====================
for (int i=0; i<=5; i++) { 
  for (y=0; y<height; y+=d ) {
    for (x=0; x<width; x+=d) {
      square(x, y, w);//正方形の描画
    }
  }
  x=0; y=0; //位置の初期化
  translate(3, 3); //正方形をずらす
}

//===========================================

// 正方形をずらして重ねる

//===========================================

// CreationDate: 2025年3月1日土曜日19:11:50

//=================【環境設定】================

size(400, 400); //画面サイズ

//=================【初期設定】================

background(0);

noFill();

stroke(255);

float x, y; //XY座標

float d=60; //正方形の位置

int w=40; //正方形の大きさ

//==================メイン====================

for (int i=0; i<=5; i++) {

for (y=0; y<height; y+=d ) {

for (x=0; x<width; x+=d) {

square(x, y, w);//正方形の描画

}

x=0; y=0; //位置の初期化

translate(3, 3); //正方形をずらす

}

QUAD-0203　正方形に色を付けます。この場合は上記とは逆に重ねていきます。lerpColor()でグラデーションにします。また補間量をnorm()で0 から 1 の間の値に正規化します。

//===========================================
// 正方形をずらして重ねる
//===========================================
// CreationDate: 2025年3月1日 土曜日19:11:50
//=================【環境設定】================
size(400, 400); //画面サイズ
//=================【初期設定】================
background(0);
//noFill();
noStroke();
float x, y; //XY座標
float d=60; //正方形の位置
int w=20; //正方形の大きさ
colorMode(HSB,360,100,100);
color c1=color(295,50,86);
color c2=color(193, 99, 99);
//==================メイン====================
translate(-11,-11); //位置の修正 上、左の正方形が切れないように
for (int i=0; i<=9; i++) { 
  for (y=height; y>0; y-=d ) {
    for (x=width; x>0; x-=d) {
      fill(lerpColor(c1,c2,norm(i,0,9)));
      square(x, y, w);//正方形の描画
    }
  }
  x=width; y=height; //位置の初期化
  translate(-3, -3); //正方形をずらす
}

//===========================================

// 正方形をずらして重ねる

//===========================================

// CreationDate: 2025年3月1日土曜日19:11:50

//=================【環境設定】================

size(400, 400); //画面サイズ

//=================【初期設定】================

background(0);

//noFill();

noStroke();

float x, y; //XY座標

float d=60; //正方形の位置

int w=20; //正方形の大きさ

colorMode(HSB,360,100,100);

color c1=color(295,50,86);

color c2=color(193, 99, 99);

//==================メイン====================

translate(-11,-11); //位置の修正上、左の正方形が切れないように

for (int i=0; i<=9; i++) {

for (y=height; y>0; y-=d ) {

for (x=width; x>0; x-=d) {

fill(lerpColor(c1,c2,norm(i,0,9)));

square(x, y, w);//正方形の描画

}

x=width; y=height; //位置の初期化

translate(-3, -3); //正方形をずらす

}

正規化 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-0204　正方形の大きさをランダムに設定します。

1	randomSeed()

を使ってランダムシードを固定すると、毎回同じパターンしか生成されないため、見た目の良い画像を選びやすくする目的で、

second()

を使ってシード値を変えることで、異なるパターンが生成されるようにしています。

//===========================================
// 正方形をずらして重ねる
//===========================================
// CreationDate: 2025年3月2日 日曜日15:02:02
//=================【環境設定】================
size(400, 400); //画面サイズ
//=================【初期設定】================
background(0);
//noFill();
noStroke();
float x, y; //XY座標
float d=60; //正方形の位置
colorMode(HSB, 360, 100, 100);
color c1=color(295, 50, 86);
color c2=color(20, 81, 96);
//==================メイン====================
translate(-11, -11); //位置の修正 上、左の正方形が切れないように
for (int i=0; i<=9; i++) {
  randomSeed(second()); //ランダムシード値を秒に設定
  for (y=height; y>0; y-=d ) {
    for (x=width; x>0; x-=d) {
      fill(lerpColor(c1, c2, norm(i, 0, 9)));
      square(x, y, random(5, 39));//正方形の描画
    }
  }
  x=width;
  y=height; //位置の初期化
  translate(-3, -3); //正方形をずらす
}

//===========================================

// 正方形をずらして重ねる

//===========================================

// CreationDate: 2025年3月2日日曜日15:02:02

//=================【環境設定】================

size(400, 400); //画面サイズ

//=================【初期設定】================

background(0);

//noFill();

noStroke();

float x, y; //XY座標

float d=60; //正方形の位置

colorMode(HSB, 360, 100, 100);

color c1=color(295, 50, 86);

color c2=color(20, 81, 96);

//==================メイン====================

translate(-11, -11); //位置の修正上、左の正方形が切れないように

for (int i=0; i<=9; i++) {

randomSeed(second()); //ランダムシード値を秒に設定

for (y=height; y>0; y-=d ) {

for (x=width; x>0; x-=d) {

fill(lerpColor(c1, c2, norm(i, 0, 9)));

square(x, y, random(5, 39));//正方形の描画

}

x=width;

y=height; //位置の初期化

translate(-3, -3); //正方形をずらす

}

日時等に関する値を返す

コンピュータの時計と通信して各値を取得します。

構文	millis()	スケッチを開始してからのミリ秒数（1000分の1秒）を返します。
戻り値	int	例）10047、10061、10079
構文	second()	現在の秒を0から59までの値で返します。
戻り値	int	0から59までの整数
構文	minute()	現在の分を0から59までの値で返します。
戻り値	int	0から59までの整数
構文	hour()	現在の時を0から59までの値で返します。
戻り値	int	0から59までの整数
構文	day()	現在の日を1から31までの値で返します。
戻り値	int	1から31までの整数
構文	month()	現在の月を1から12までの値で返します。
戻り値	int	1から12までの整数
構文	year()	現在の年を整数で返します。
戻り値	int	例）2025、2026、2027

QUAD-0205　正方形を45度回転したものをずらして重ねます。各正方形ごとに座標と回転を独立して管理するためにpushMatrix()とpopMatrix()を使用します。

//===========================================
// 正方形を45度回転、ずらして重ねる
//===========================================
// CreationDate: 2025年3月2日 日曜日10:43:30
//=================【環境設定】================
size(400, 400); //画面サイズ
background(0); //背景を黒
//=================【初期設定】================
float x, y; //XY座標
float d=60; //正方形の位置
int w=20; //正方形の大きさ
noStroke(); //境界線なし
rectMode(CENTER); //正方形の原点を中心に
colorMode(HSB, 360, 100, 100); //カラーモードをHSBに
color c1=color(295, 50, 86);
color c2=color(193, 99, 99);
//==================メイン====================
translate(-20, 5); //位置の修正 上、左の正方形が切れないように
for (int i=0; i<=9; i++) {
  for (y=height; y>0; y-=d ) {
    for (x=width; x>0; x-=d) {
      fill(lerpColor(c1, c2, norm(i, 0, 9)));
      pushMatrix(); //現在の座標を保存
      translate(x, y); //正方形を移動
      rotate(radians(45)); // 45度回転
      square(0, 0, w);//正方形の描画
      popMatrix(); //現在の座標を復元
    }
  }
  x=width; //位置の初期化
  y=height; 
  translate(0, -3); //正方形をずらす
}

//===========================================

// 正方形を45度回転、ずらして重ねる

//===========================================

// CreationDate: 2025年3月2日日曜日10:43:30

//=================【環境設定】================

size(400, 400); //画面サイズ

background(0); //背景を黒

//=================【初期設定】================

float x, y; //XY座標

float d=60; //正方形の位置

int w=20; //正方形の大きさ

noStroke(); //境界線なし

rectMode(CENTER); //正方形の原点を中心に

colorMode(HSB, 360, 100, 100); //カラーモードをHSBに

color c1=color(295, 50, 86);

color c2=color(193, 99, 99);

//==================メイン====================

translate(-20, 5); //位置の修正上、左の正方形が切れないように

for (int i=0; i<=9; i++) {

for (y=height; y>0; y-=d ) {

for (x=width; x>0; x-=d) {

fill(lerpColor(c1, c2, norm(i, 0, 9)));

pushMatrix(); //現在の座標を保存

translate(x, y); //正方形を移動

rotate(radians(45)); // 45度回転

square(0, 0, w);//正方形の描画

popMatrix(); //現在の座標を復元

}

x=width; //位置の初期化

y=height;

translate(0, -3); //正方形をずらす

}

QUAD-0206　正方形をズームしたような同心円ならぬ同心四角？を描きます。

//===========================================
// 正方形をズーム
//===========================================
// CreationDate:　2025年3月2日 日曜日19:50:22
//=================【環境設定】================
size(400, 400); //画面サイズ
translate(width/2, height/2); //原点を移動
background(0); //背景を
//=================【初期設定】================
stroke(255); //線色
noFill(); //塗りつぶしなし
rectMode(CENTER);
//==================メイン====================
for (int i=1; i<400; i+=10) {
  square(0, 0, i);
}

//===========================================

// 正方形をズーム

//===========================================

// CreationDate:　2025年3月2日日曜日19:50:22

//=================【環境設定】================

size(400, 400); //画面サイズ

translate(width/2, height/2); //原点を移動

background(0); //背景を

//=================【初期設定】================

stroke(255); //線色

noFill(); //塗りつぶしなし

rectMode(CENTER);

//==================メイン====================

for (int i=1; i<400; i+=10) {

square(0, 0, i);

}

QUAD-0206　上記の正方形を並べてみます。

//===========================================
// 正方形ズームを並べる
//===========================================
// CreationDate:　2025年3月2日 日曜日20:12:03
//=================【環境設定】================
size(400, 400); //画面サイズ
//translate(width/2, height/2); //原点を移動
background(0); //背景を黒に
//=================【初期設定】================
stroke(255); //線色
noFill(); //塗りつぶしなし
rectMode(CENTER);
float x, y;
//==================メイン====================
for (y=0; y<height; y+=100) {
  for (x=0; x<width; x+=100) {
    pushMatrix();
    translate(x, y);
    for (int i=1; i<100; i+=10) {
      square(50, 50, i);
    }
    popMatrix();
  }
}

//===========================================

// 正方形ズームを並べる

//===========================================

// CreationDate:　2025年3月2日日曜日20:12:03

//=================【環境設定】================

size(400, 400); //画面サイズ

//translate(width/2, height/2); //原点を移動

background(0); //背景を黒に

//=================【初期設定】================

stroke(255); //線色

noFill(); //塗りつぶしなし

rectMode(CENTER);

float x, y;

//==================メイン====================

for (y=0; y<height; y+=100) {

for (x=0; x<width; x+=100) {

pushMatrix();

translate(x, y);

for (int i=1; i<100; i+=10) {

square(50, 50, i);

}

popMatrix();

}

QUAD-0207　バックにランダムな色を付けてみましょう。

//===========================================
// 正方形ズームを並べる
//===========================================
// CreationDate:　2025年3月2日 日曜日20:12:03
//=================【環境設定】================
size(400, 400); //画面サイズ
//translate(width/2, height/2); //原点を移動
background(0); //背景を黒に
//=================【初期設定】================
stroke(255); //線色
colorMode(HSB, 360, 100, 100);
rectMode(CENTER);
float x, y, x2, y2;
//==================メイン====================
//バックカラーをランダムに
for (y2=0; y2<height; y2+=100) {
  for (x2=0; x2<width; x2+=100) {
    fill( color(random(360), random(30, 60), random(50, 70)));
    square(x2+50, y2+50, 100);
  }
}
noFill(); //塗りつぶしなし
for (y=0; y<height; y+=100) {
  for (x=0; x<width; x+=100) {
    pushMatrix();
    translate(x, y);
    for ( int i=1; i<100; i+=10) {
      square(50, 50, i);
    }
    popMatrix();
  }
}

//===========================================

// 正方形ズームを並べる

//===========================================

// CreationDate:　2025年3月2日日曜日20:12:03

//=================【環境設定】================

size(400, 400); //画面サイズ

//translate(width/2, height/2); //原点を移動

background(0); //背景を黒に

//=================【初期設定】================

stroke(255); //線色

colorMode(HSB, 360, 100, 100);

rectMode(CENTER);

float x, y, x2, y2;

//==================メイン====================

//バックカラーをランダムに

for (y2=0; y2<height; y2+=100) {

for (x2=0; x2<width; x2+=100) {

fill( color(random(360), random(30, 60), random(50, 70)));

square(x2+50, y2+50, 100);

}

noFill(); //塗りつぶしなし

for (y=0; y<height; y+=100) {

for (x=0; x<width; x+=100) {

pushMatrix();

translate(x, y);

for ( int i=1; i<100; i+=10) {

square(50, 50, i);

}

popMatrix();

}

QUAD-0208　rectMode(CENTER)を外してデフォルトにしてみると。。。

//===========================================
// 正方形 左上からズーム
//===========================================
// CreationDate:　2025年3月6日 木曜日11:33:14
//=================【環境設定】================
size(400, 400); //画面サイズ
//translate(width/2, height/2); //原点を移動
background(0); //背景を黒に
//=================【初期設定】================
stroke(255); //線色
colorMode(HSB, 360, 100, 100);
//rectMode(CENTER);
float x, y, x2, y2;
//==================メイン====================
//バックカラーをランダムに
for (y2=0; y2<height; y2+=100) {
  for (x2=0; x2<width; x2+=100) {
    fill( color(random(360), random(30, 60), random(50, 70)));
    square(x2, y2, 100);
  }
}
noFill(); //塗りつぶしなし
for (y=0; y<height; y+=100) {
  for (x=0; x<width; x+=100) {
    pushMatrix();
    translate(x, y);
    for ( int i=1; i<100; i+=10) {
      square(0, 0, i);
    }
    popMatrix();
  }
}

//===========================================

// 正方形左上からズーム

//===========================================

// CreationDate:　2025年3月6日木曜日11:33:14

//=================【環境設定】================

size(400, 400); //画面サイズ

//translate(width/2, height/2); //原点を移動

background(0); //背景を黒に

//=================【初期設定】================

stroke(255); //線色

colorMode(HSB, 360, 100, 100);

//rectMode(CENTER);

float x, y, x2, y2;

//==================メイン====================

//バックカラーをランダムに

for (y2=0; y2<height; y2+=100) {

for (x2=0; x2<width; x2+=100) {

fill( color(random(360), random(30, 60), random(50, 70)));

square(x2, y2, 100);

}

noFill(); //塗りつぶしなし

for (y=0; y<height; y+=100) {

for (x=0; x<width; x+=100) {

pushMatrix();

translate(x, y);

for ( int i=1; i<100; i+=10) {

square(0, 0, i);

}

popMatrix();

}

正方形を回転させる

QUAD-0209　円の方程式を使って正方形を回転させます。

//===========================================
// 正方形を回転
//===========================================
// CreationDate: 2025年2月27日 木曜日17:35:19
//=================【環境設定】================
size(400, 400); //画面サイズ
translate(width/2, height/2); //原点を移動
//=================【初期設定】================
noFill(); //塗りつぶしなし
int r=120; //回転半径
float th; //回転角度
float dt=radians(5); //回転角度量
float x, y; //XY座標
rectMode(CENTER); //原点を中心に
//==================メイン====================
for (th=0; th<TWO_PI-dt; th+=dt) {
  x=r*cos(th); //円の方程式
  y=r*sin(th);
  square(x, y, 100); //正方形の描画
}

//===========================================

// 正方形を回転

//===========================================

// CreationDate: 2025年2月27日木曜日17:35:19

//=================【環境設定】================

size(400, 400); //画面サイズ

translate(width/2, height/2); //原点を移動

//=================【初期設定】================

noFill(); //塗りつぶしなし

int r=120; //回転半径

float th; //回転角度

float dt=radians(5); //回転角度量

float x, y; //XY座標

rectMode(CENTER); //原点を中心に

//==================メイン====================

for (th=0; th<TWO_PI-dt; th+=dt) {

x=r*cos(th); //円の方程式

y=r*sin(th);

square(x, y, 100); //正方形の描画

}

QUAD-0210　正方形を画面の中心に置いて、rotate()で回転させます。lerpColor()でグラデーションにして、不透明度を下げて奥行き感を出しています。

//===========================================
// 正方形を回転
//===========================================
// CreationDate:　2025年2月28日 金曜日19:05:14
//=================【環境設定】================
size(400, 400); //画面サイズ
translate(width/2, height/2); //原点を移動
background(0); //背景を黒
//=================【初期設定】================
noStroke(); //境界線なし
colorMode(HSB, 100); //HSBカラーモード
color c1=color(80, 100, 100, 30);
color c2=color(40, 100, 100, 30);
float dt=radians(10); //回転量
float am=0; //補間量
//==================メイン====================
for (float i=0; i<TWO_PI-dt; i+=dt) {
  am=norm(i, 0, TWO_PI-dt); //補間量
  rotate(i); //回転
  fill( lerpColor(c1, c2, am)); //グラデ
  square(0, 0, 130); //正方形の描画
}

//===========================================

// 正方形を回転

//===========================================

// CreationDate:　2025年2月28日金曜日19:05:14

//=================【環境設定】================

size(400, 400); //画面サイズ

translate(width/2, height/2); //原点を移動

background(0); //背景を黒

//=================【初期設定】================

noStroke(); //境界線なし

colorMode(HSB, 100); //HSBカラーモード

color c1=color(80, 100, 100, 30);

color c2=color(40, 100, 100, 30);

float dt=radians(10); //回転量

float am=0; //補間量

//==================メイン====================

for (float i=0; i<TWO_PI-dt; i+=dt) {

am=norm(i, 0, TWO_PI-dt); //補間量

rotate(i); //回転

fill( lerpColor(c1, c2, am)); //グラデ

square(0, 0, 130); //正方形の描画

}

QUAD-0211　正方形の位置をずらして回転させています。これも上記と同じくlerpColor()と不透明度を操作しています。線も不透明度を下げています。

//===========================================
// 正方形を回転
//===========================================
// CreationDate:　2025年2月28日 金曜日19:26:51
//=================【環境設定】================
size(400, 400); //画面サイズ
translate(width/2, height/2); //原点を移動
background(0); //背景を黒
//=================【初期設定】================
noStroke(); //境界線なし
colorMode(HSB, 100); //HSBカラーモード
color c1=color(90, 100, 100, 20);
color c2=color(40, 100, 100, 20);
stroke(0, 0, 100, 20);
float dt=radians(5); //回転量
float am=0; //補間量
//==================メイン====================
for (float i=0; i<TWO_PI-dt; i+=dt) {
  am=norm(i, 0, TWO_PI-dt); //補間量
  rotate(i); //回転
  fill( lerpColor(c1, c2, am)); //グラデ
  square(40, 0, 110); //正方形の描画
}

//===========================================

// 正方形を回転

//===========================================

// CreationDate:　2025年2月28日金曜日19:26:51

//=================【環境設定】================

size(400, 400); //画面サイズ

translate(width/2, height/2); //原点を移動

background(0); //背景を黒

//=================【初期設定】================

noStroke(); //境界線なし

colorMode(HSB, 100); //HSBカラーモード

color c1=color(90, 100, 100, 20);

color c2=color(40, 100, 100, 20);

stroke(0, 0, 100, 20);

float dt=radians(5); //回転量

float am=0; //補間量

//==================メイン====================

for (float i=0; i<TWO_PI-dt; i+=dt) {

am=norm(i, 0, TWO_PI-dt); //補間量

rotate(i); //回転

fill( lerpColor(c1, c2, am)); //グラデ

square(40, 0, 110); //正方形の描画

}

QUAD-0212　ランダムに正方形を描いてみます。

//===========================================
// ランダムに正方形を描く
//===========================================
// CreationDate:　2025年2月27日 木曜日19:05:15
//=================【環境設定】================
size(400, 400); //画面サイズ
translate(width/2, height/2); //原点を移動
background(0); //背景を黒
//=================【初期設定】================
stroke(255); //線色
noFill(); //塗りつぶしなし
float x,y;
rectMode(CENTER);
//==================メイン====================
for (int i=0; i<100; i++) {
  x=random(-200,201);
  y=random(-200,201);
  square(x,y,80);
}

//===========================================

// ランダムに正方形を描く

//===========================================

// CreationDate:　2025年2月27日木曜日19:05:15

//=================【環境設定】================

size(400, 400); //画面サイズ

translate(width/2, height/2); //原点を移動

background(0); //背景を黒

//=================【初期設定】================

stroke(255); //線色

noFill(); //塗りつぶしなし

float x,y;

rectMode(CENTER);

//==================メイン====================

for (int i=0; i<100; i++) {

x=random(-200,201);

y=random(-200,201);

square(x,y,80);

}

QUAD-0213　正方形の大きさもランダムにしてみます。

//===========================================
// ランダムに正方形を描く 2
//===========================================
// CreationDate:　2025年2月27日 木曜日19:11:10
//=================【環境設定】================
size(400, 400); //画面サイズ
translate(width/2, height/2); //原点を移動
background(0); //背景を黒
//=================【初期設定】================
stroke(255); //線色
noFill(); //塗りつぶしなし
float x,y,ex;
rectMode(CENTER);
//==================メイン====================
for (int i=0; i<100; i++) {
  x=random(-200,201);
  y=random(-200,201);
  ex=random(10,101);
  square(x,y,ex);
}

//===========================================

// ランダムに正方形を描く 2

//===========================================

// CreationDate:　2025年2月27日木曜日19:11:10

//=================【環境設定】================

size(400, 400); //画面サイズ

translate(width/2, height/2); //原点を移動

background(0); //背景を黒

//=================【初期設定】================

stroke(255); //線色

noFill(); //塗りつぶしなし

float x,y,ex;

rectMode(CENTER);

//==================メイン====================

for (int i=0; i<100; i++) {

x=random(-200,201);

y=random(-200,201);

ex=random(10,101);

square(x,y,ex);

}

QUAD-0214　lerpColor()と不透明度を合わせてカラーを付けてみます。不透明度を使うことにより奥行きが出てきます。

//===========================================
// ランダムに正方形を描く 3
//===========================================
// CreationDate:　2025年2月27日 木曜日19:11:10
//=================【環境設定】================
size(400, 400); //画面サイズ
translate(width/2, height/2); //原点を移動
background(0); //背景を黒
//=================【初期設定】================
noStroke();
float x,y,ex;
rectMode(CENTER);
colorMode(HSB,100);
color c1=color(90,70,100,60);
color c2=color(55,70,100,60);
float am=0; //補完量
//==================メイン====================
for (int i=0; i<100; i++) {
  x=random(-200,201);
  y=random(-200,201);
  ex=random(10,101);
  am=norm(i,0,99); //補完量
  fill(lerpColor(c1,c2,am)); //塗りつぶし
  square(x,y,ex); //正方形の描画
}

//===========================================

// ランダムに正方形を描く 3

//===========================================

// CreationDate:　2025年2月27日木曜日19:11:10

//=================【環境設定】================

size(400, 400); //画面サイズ

translate(width/2, height/2); //原点を移動

background(0); //背景を黒

//=================【初期設定】================

noStroke();

float x,y,ex;

rectMode(CENTER);

colorMode(HSB,100);

color c1=color(90,70,100,60);

color c2=color(55,70,100,60);

float am=0; //補完量

//==================メイン====================

for (int i=0; i<100; i++) {

x=random(-200,201);

y=random(-200,201);

ex=random(10,101);

am=norm(i,0,99); //補完量

fill(lerpColor(c1,c2,am)); //塗りつぶし

square(x,y,ex); //正方形の描画

}

ヘッダー画像はChatGTPで作成しました。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

コメントするコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

02 四角形を描いてみよう-正方形

正方形並べる

正方形を回転させる

コメント

コメントする コメントをキャンセル

02　四角形を描いてみよう-正方形

コメントするコメントをキャンセル