POINT-0100 点を描いてみましょう。キャンバスの大きさは400×400ピクセルにします。
キャンバスのセンターに描きます。点の描画にはpoint()関数を使います。
点はデフォルトでは1ピクセルになるので、見えにくいため10ピクセルにしています。
|
1 2 3 |
size(400, 400); strokeWeight(10); //点の大きさ point(200, 200); //点の描画 |
点を描く
| 構文 | point(x,y) | x、y位置の座標に点を描く デフォルトで１ピクセル、黒、点の大きさはstrokeWeight()で設定します。 stroke() で色設定できる point(x,y,z)と言う3D対応もありますが別ポストで。 |
| パラメータ | x y | (float) x,y座標（ピクセル） |
| 戻り値 | void | なし |
POINT-0101 点を水平に等間隔で並べてみましょう。
|
1 2 3 4 5 6 7 8 9 10 |
size(400, 400); strokeWeight(20) ; //点の大きさ int p=0;//点の初期位置 int d=10;//分割数 int step=width/d;//分割数幅を計算 //条件を満たすまで繰り返す while (p<=width) { point(p, 200);//点の描画 p+=step;//幅を増分する } |
POINT-0102 今度は縦横に等間隔に並べてみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//==================点を縦横等間隔に並べる======== size(400, 400); //==================初期設定================== strokeWeight(10) ; //点の大きさ int x=50; //初期X座標 int y=50; //初期Y座標 int goal=350;//最終XY座標 int div=10;//分割数 int d=(goal-y)/div;//分割幅 //==================メイン===================== for (y=50; y<=goal; y+=d) {//y位置の移動 for (x=50; x<=goal; x+=d) {//x位置の移動 point(x, y);//点の描画 } } |
POINT-0103 点の大きさをランダムにしてみましょう。random()関数を使用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//=======点を縦横等間隔に並べる ランダムな大きさに====== size(400, 400); //==================初期設定================== strokeWeight(10); //線幅 int x=50; //初期X座標 int y=50; //初期Y座標 int goal=350;//最終XY座標 int div=10;//分割数 int d=(goal-y)/div;//分割幅 //==================メイン===================== for (y=50; y<=goal; y+=d) {//y位置の移動 for (x=50; x<=goal; x+=d) {//x位置の移動 point(x, y);//点の描画 strokeWeight(random(10, d)); //点を10~d未満のランダムな値の大きさにする } } |
乱数を生成
| 構文 | random(high) random(low, high) | 擬似乱数を生成します。パラメータが一つの場合は0〜highまでの値を返します。2つのパラメータの場合はlow以上high未満までの値を返します。 |
| パラメータ | low | (float) 下限 |
| high | (float) 上限 | |
| 戻り値 | float | 浮動小数点値 |
POINT-0104 この点をダブらせてみましょう。赤い点で描いた座標をpushMatrix()で保存しておきます。translate()で座標を移動し、そこに黒い点を描きます。popMatrix()で前に保存した座標に戻します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
//=======点を縦横等間隔に並べる ランダムな大きさに====== size(400, 400); background(255); //==================初期設定================== strokeWeight(10); //線幅 int x=50; //初期X座標 int y=50; //初期Y座標 int goal=350;//最終XY座標 int div=10;//分割数 int d=(goal-y)/div;//分割幅 //==================メイン===================== for (y=50; y<=goal; y+=d) {//y位置の移動 for (x=50; x<=goal; x+=d) {//x位置の移動 stroke(255, 0, 0); //赤 strokeWeight(random(10, d)); //点を10~d未満のランダムな値の大きさにする point(x, y);//点の描画 pushMatrix(); //現在の座標を保存 translate(3, -3); //座標を移動 stroke(0); //黒 point(x, y);//点の描画 popMatrix();//保存した座標を復元 } } |
これは失敗しました。ところどころで赤い円が黒い円に重なってしまいました。
座標の保存・復元
| 構文 | pushMatrix() | 現在の座標をスタックに保存します。popMatrix()と共に使用します。 |
| 戻り値 | void | なし |
| 構文 | popMatrix() | pushMatrixで保存した座標を復元します。 |
| 戻り値 | void | なし |
POINT-0105 今度は下の円が上の円に重ならないようにします。ランダムなパターンを毎回同じに生成するようrandomSeed()を使用します。また円と円の間の色をグラデーションにするため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 |
//=======点を縦横等間隔に並べる ランダムな大きさに====== size(400, 400); background(255); //==================初期設定================== strokeWeight(10); //線幅 int x=50; //初期X座標 int y=50; //初期Y座標 int goal=350;//最終XY座標 int div=10;//分割数 int d=(goal-y)/div;//分割幅 color red=color(255,0,0); color blue=color(0,0,255); //==================メイン===================== for (float i=0; i<1.25; i+=.25) { randomSeed(0); color c=lerpColor(blue, red, i); stroke(c); translate(3, -3); for (y=50; y<=goal; y+=d) {//y位置の移動 for (x=50; x<=goal; x+=d) {//x位置の移動 strokeWeight(random(10, d)); //点を10~d未満のランダムな値の大きさにする point(x, y);//点の描画 } } } |
| 構文 | randomSeed(seed) | デフォルトでは、random() はプログラムを実行するたびに異なる結果を返します。同じシード値を使用すれば、同じ系列の乱数が生成されます。 |
| パラメータ | seed | （int） シード値とは、乱数生成の出発点となる数値です |
| 戻り値 | void | なし |
２色間の補完色設定
| 構文 | lerpColor(c1, c2, amt) | c1とc2間の色をamtの量で補完します。簡単に言うと２色間のグラデーションの内の一色を作成します。 learp: Linear Interpolate （線形補間） |
| パラメータ | c1 | (int) この色から補間する |
| c2 | (int) この色に補間する | |
| amt | (float) 0.0から1.0の間 amt: amount | |
| 戻り値 | int | カラー値 |
POINT-0106 点を同心円上に配置してみましょう。画像にアンチエイリアスがかかっていると不自然な部分が出たのでnoSmooth()でアンチエイリアスを無効にしています。アンチエイリアス（anti-aliasing）とは文字や画像を表示する際に、境界線に現れるギザギザ（ジャギー）を滑らかに見せる処理です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
//=========================================== // 点を同心円上に並べる //=========================================== // CreationDate: 2025年2月9日 日曜日18:12:30 //=================【環境設定】================ size(400, 400); //画面サイズ translate(200, 200); //原点を移動 //=================【初期設定】================ noSmooth(); //アンチエイリアスを無効 strokeWeight(4); //線幅 float x, y; //X,Y位置 float r=10; //円の半径 float d= TWO_PI/80; //円の分割数 //==================メイン==================== for (r=20; r<200; r+=5) { //同心円の回数 for (float th=0; th<=TWO_PI; th+=d) { x=r*cos(th); //円の方程式 y=r*sin(th); point(x, y); } } |
アンチエイリアスを無効
| 構文 | noSmooth() | 画像のスムージングを無効にします。つまりアンチエイリアスをかけません。 |
| 戻り値 | void | なし |
POINT-0107 点の大きさをランダムにしてみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
//=========================================== // 点を同心円上に並べる //=========================================== // CreationDate: 2025年2月9日 日曜日18:12:30 //=================【環境設定】================ size(400, 400); //画面サイズ translate(200, 200); //原点を移動 //=================【初期設定】================ float x, y; //X,Y位置 float r=10; //円の半径 float d= TWO_PI/80; //円の分割数 //==================メイン==================== for (r=60; r<200; r+=6) { //同心円の回数 for (float th=0; th<=TWO_PI; th+=d) { x=r*cos(th); //円の方程式 y=r*sin(th); strokeWeight(random(2,8)); //線幅をランダムに point(x, y); } } |
POINT-0108 同じ径の黒い点にランダムな大きさの白い点を重ね書きしてみましょう。全画面にした方が見栄えが良く、何かビーズのような感じに見えます。
|
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月9日 日曜日18:40:16 //=================【環境設定】================ size(400, 400); //画面サイズ translate(200, 200); //原点を移動 //=================【初期設定】================ float x, y; //X,Y位置 float r=10; //円の半径 float d= TWO_PI/80; //円の分割数 //==================メイン==================== for (r=60; r<300; r+=6) { //同心円の回数 for (float th=0; th<=TWO_PI; th+=d) { x=r*cos(th); //円の方程式 y=r*sin(th); stroke(0); strokeWeight(10); //線幅 point(x, y); stroke(255); strokeWeight(random(2,8)); //線幅 point(x, y); } } |
POINT-0109 ランダムな位置に点描してみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
//==================ランダムに点描=============== size(400, 400); //==================初期設定=================== strokeWeight(5); int pnum=1000; //点描の回数 int sc1=50; //点描の最小範囲 int sc2=350; //点描の最大範囲 //==================メイン===================== for ( int i= 0; i <=pnum; i++ ) { point( random(sc1,sc2),random(sc1,sc2)); } |
POINT-01010 カラーもランダムに付けてみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//==================ランダムにカラー点描=========== size(400, 400); background(255); //背景白 //==================初期設定=================== strokeWeight(10); int pnum=1000; //点描の回数 int sc1=50; //点描の最小範囲 int sc2=350; //点描の最大範囲 //==================メイン===================== for ( int i= 0; i <=pnum; i++ ) { stroke(random(255), random(255), random(255)); point( random(sc1, sc2), random(sc1, sc2)); } |
POINT-0111 カラーの不透明度もランダムにしてみます。効果を見やすくするため点を大きくしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//==================ランダムにカラー点描=========== size(400, 400); background(255); //==================初期設定=================== strokeWeight(20); int pnum=1000; //点描の回数 int sc1=50; //点描の最小範囲 int sc2=350; //点描の最大範囲 //==================メイン===================== for ( int i= 0; i <=pnum; i++ ) { stroke(random(255), random(255), random(255),random(100)); point( random(sc1, sc2), random(sc1, sc2)); } |
POINT-0112 点の大きさもランダムにしてみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//==================ランダムにカラー点描=========== size(400, 400); background(255); //==================初期設定=================== int pnum=1000; //点描の回数 int sc1=50; //点描の最小範囲 int sc2=350; //点描の最大範囲 //==================メイン===================== for ( int i= 0; i <=pnum; i++ ) { strokeWeight(random(5,30)); stroke(random(255), random(255), random(255),random(100)); point( random(sc1, sc2), random(sc1, sc2)); } |
コメント