点を描画するには

◆PROCESSING　逆引きリファレンス

　カテゴリー：図形描画

【解説】

直線、円、四角形、三角形・・・PROCESSINGで手軽に描画できる図形はいろいろあります。しかし、最も基本となるのは点を打つ（描画する）事ではないでしょうか？。その気になれば、点だけで絵だって書けます（笑）。

PROCESSINGで点を打つには point() 命令を利用します。

【構文】

void point( float x, float y );
void point( float x, float y, float z );

【パラメータ】

x：float：点を打つ横座標
y：float：点を打つ縦座標
z：float：点を打つ奥行き座標

【戻り値】

なし

【注意】

point( x, y, z ); は　size() 命令で3D描画（ P3D ) を指定した場合のみ、利用可能です。

x, y は　通常は 0 から size() で指定した画面の横、縦の範囲内で指定しますが、範囲外を指定してもエラーにはなりません。点が描画されない事になりますが、その辺りはプログラマーに任されているようです。

点の色は、直前に使用された stroke() 命令に従います。点の大きさは、直前に使用されたstrokeWeight() 命令に従います。

特に stroke() 命令や strokeWeight() 命令を使用していない場合、初期値は、大きさが1ピクセル、色は黒（ RGBで0, 0, 0 ）になります。

【関連記事】

なし

サンプルプログラム

2Dの点を描画する例：

void setup(){
  size(300,300);
  background(255);
}
void draw(){
  strokeWeight(8); //点の大きさは8ピクセル
  stroke(0,0,255); //点の色は青
  point(150,150);
}

void setup(){

size(300,300);

background(255);

}

void draw(){

strokeWeight(8); //点の大きさは8ピクセル

stroke(0,0,255); //点の色は青

point(150,150);

}

画面中央（150, 150）に、大きさ8ピクセルの青い点を描画します。

＜出力サンプル＞

3Dの点を描画する例：

final int AMOUNT = 100;  //点を打つ数

int[] x = new int[AMOUNT]; //x座標
int[] y = new int[AMOUNT]; //y座標
int[] z = new int[AMOUNT]; //z座標
int[] r = new int[AMOUNT]; //大きさ
color[] c = new color[AMOUNT]; //色

void setup() {
  size(500, 500, P3D);
  background(0);
  noFill();

  //3Dの立方体に収まる範囲で、ランダムな位置、色
  //大きさを求める
  for (int i = 0; i < AMOUNT; i++) {
    x[i] = int(random(-125, 125));
    y[i] = int(random(-125, 125));
    z[i] = int(random(-125, 125));
    r[i] = int(random(20));
    c[i] = color( random(255),random(255),255);
  }
}

void draw() {
  background(0);
  //画面中央を起点に、Y軸で回転させる
  translate(width/2, height/2);
  rotateY(frameCount / 200.0);

  //立方体を描画する
  strokeWeight(2);
  stroke(255,255,255);
  box(250);

  //点を描画する
  for (int i = 0; i < AMOUNT; i++) {
    strokeWeight(r[i]);
    stroke(c[i]);
    point(x[i], y[i], z[i]);
  }
}

final int AMOUNT = 100; //点を打つ数

int[] x = new int[AMOUNT]; //x座標

int[] y = new int[AMOUNT]; //y座標

int[] z = new int[AMOUNT]; //z座標

int[] r = new int[AMOUNT]; //大きさ

color[] c = new color[AMOUNT]; //色

void setup() {

size(500, 500, P3D);

background(0);

noFill();

//3Dの立方体に収まる範囲で、ランダムな位置、色

//大きさを求める

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

x[i] = int(random(-125, 125));

y[i] = int(random(-125, 125));

z[i] = int(random(-125, 125));

r[i] = int(random(20));

c[i] = color( random(255),random(255),255);

}

void draw() {

background(0);

//画面中央を起点に、Y軸で回転させる

translate(width/2, height/2);

rotateY(frameCount / 200.0);

//立方体を描画する

strokeWeight(2);

stroke(255,255,255);

box(250);

//点を描画する

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

strokeWeight(r[i]);

stroke(c[i]);

point(x[i], y[i], z[i]);

}

（上記サンプルは Qiita 様に投稿されていたものを、改編して利用しています。）

縦横奥行きが250の立方体を描画し、その中に収まるように100個の点を打っています。
その後、3Dである事がわかるようにY軸で回転させています。

SF映画に出てきそうな、ちょっとカッチョいい画面になります（笑）。

＜出力サンプル＞

PROCESSING逆引きリファレンス一覧へ戻る

本ページで利用しているアイコン画像は、下記サイト様より拝借しております。各画像の著作権は、それぞれのサイト様および作者にあります。

iconka.com 様
ICOOON MONO 様

自己啓発。人生について考える

楽しいを極めろ。人生は夢の中

点を描画するには

◆PROCESSING　逆引きリファレンス

カテゴリー：図形描画