Processing で描ける図形まとめ

  • 85
    いいね
  • 0
    コメント

Processingで描ける図形についてまとめました。

ellipse()を利用することで描くことができます。
幅と高さを同じ値にすると真円が描けます。

0127125412.png


void setup() {
  size(400, 400);
  background(255);
}

void draw() {
  background(255);

  //中心線
  strokeWeight(1);
  stroke(200);
  line(0, height/2, width, height/2);
  line(width/2, 0, width/2, height);

  noFill();
  strokeWeight(2);

  //赤い円
  stroke(200, 0, 0);
  ellipse(width/2, height/2, 150, 150);

  //青い円
  stroke(0, 0, 200);
  ellipse(width/2, height/2, 250, 250);
}

四角

rect()を利用することで描くことができます。
rectMode() を使うことで引数として指定した座標位置がどこを指すのか変更できます。
なお、デフォルトでは左上が指定されるので、rectMode(CORNER)と同じ状態になります。

0127124320.png


void setup() {
  size(400, 400);
  background(255);
}

void draw() {
  background(255);

  //中心線
  strokeWeight(1);
  stroke(200);
  line(0, height/2, width, height/2);
  line(width/2, 0, width/2, height);

  noFill();
  strokeWeight(2);

  //赤い四角
  stroke(200, 0, 0);
  rectMode(CENTER); 
  rect(width/2, height/2, 150, 150);

  //青い四角
  stroke(0, 0, 200);
  rectMode(CORNER); 
  rect(width/2, height/2, 150, 150);
}

三角形

triangle()で描く方法もありますが、
beginShape()endShape()vertex()を使って描く方が扱いやすくなります。
詳しくは以下の記事をご覧ください。
Processing で三角形を描く : だらっと学習帳

0127131617.png

int R = 150;  //円の半径

void setup() {
  size(400, 400);
  background(255);
}

void draw() {
  background(255);

  //中心線
  strokeWeight(1);
  stroke(200);
  line(width/2, 0, width/2, height);
  line(0, height/2, width, height/2);

  //円
  stroke(200);
  ellipse(width/2, height/2, R*2, R*2);

  //三角形
  noFill();
  strokeWeight(2);
  stroke(200, 0, 0);

  pushMatrix();
  translate(width/2, height/2);  //中心となる座標
  rotate(radians(-90)); // 左へ90度回転

  //円を均等に3分割する点を結び、三角形をつくる
  beginShape();
  for (int i = 0; i < 3; i++) {
    vertex(R*cos(radians(360*i/3)), R*sin(radians(360*i/3)));
  }
  endShape(CLOSE);

  popMatrix();
}

ひし形

beginShape()endShape()vertex()を使って描くことができます。
詳しくは以下の記事をご覧ください。
Processing で ひし形 を描く : だらっと学習帳

0127132923.png

int R; //ひし形の大きさ調整用

void setup() {
  size(400, 400);
  background(255);
}

void draw() {
  background(255);

  //中心線
  strokeWeight(1);
  stroke(200);
  line(width/2, 0, width/2, height);
  line(0, height/2, width, height/2);

  //ひし形
  noFill();
  strokeWeight(2);
  stroke(200, 0, 0);

  pushMatrix();
  translate(width/2, height/2);
  beginShape();
  for (int i = 0; i < 4; i++) {
    if (i % 2 == 0) {
      R = 90;
    } else {
      R = 180;
    }
    vertex(R*cos(radians(90*i)), R*sin(radians(90*i)));
  }
  endShape(CLOSE);
  popMatrix();
}

正多角形

正五角形、正六角形、…正n角形はbeginShape()endShape()vertex()を使って描くことができます。
詳しくは以下の記事をご覧ください。
Processingで多角形・星を描く : だらっと学習帳

正六角形を描く例 :

0127134641.png

int vertex_num = 6; //頂点数(正六角形を描画)
int R = 150; //中心から頂点までの距離

void setup() {
  size(400, 400);
  background(255);
}

void draw() {
  background(255);

  //中心線
  strokeWeight(1);
  stroke(200);
  line(width/2, 0, width/2, height);
  line(0, height/2, width, height/2);

  //正六角形
  noFill();
  strokeWeight(2);
  stroke(200, 0, 0);

  pushMatrix();
  translate(width/2, height/2);
  beginShape();
  for (int i = 0; i < vertex_num; i++) {
    vertex(R*cos(radians(360*i/vertex_num)), R*sin(radians(360*i/vertex_num)));
  }
  endShape(CLOSE);
  popMatrix();
}

星はbeginShape()endShape()vertex()を使って描くことができます。
トゲの数も調整することができます。
詳しくは以下の記事をご覧ください。
Processingで多角形・星を描く : だらっと学習帳

トゲの数が5つの例 :
0127140408.png

int vertex_num = 5*2; //頂点数(星を描画、トゲの数*2)
int R; //中心から頂点までの距離(半径)
int R_out = 150; //中心からとげまでの距離(半径)
int R_in = R_out/2; //中心から谷までの距離(半径)

void setup() {
  size(400, 400);
  background(255);
}

void draw() {
  background(255);

  //中心線
  strokeWeight(1);
  stroke(200);
  line(width/2, 0, width/2, height);
  line(0, height/2, width, height/2);

  //星
  noFill();
  strokeWeight(2);
  stroke(200, 0, 0);

  pushMatrix();
  translate(width/2, height/2);
  rotate(radians(-90));
  beginShape();
  for (int i = 0; i < vertex_num; i++) {
    if (i%2 == 0) {
      R = R_out;
    } else {
      R = R_in;
    }
    vertex(R*cos(radians(360*i/vertex_num)), R*sin(radians(360*i/vertex_num)));
  }
  endShape(CLOSE);
  popMatrix();
}

星(アステロイド曲線)

キラキラとしたイメージの星はアステロイド曲線と呼ばれ、beginShape()endShape()vertex()を使って描くことができます。
図形を縦方向に大きめに描くとよりそれらしくなります。
詳しくは以下の記事を以下の記事をご覧ください。
Processing でキラキラ図形を描く : だらっと学習帳

0129151559.png

float R = 120; //アステロイド曲線の大きさ調整用

void setup() {
  size(400, 400);
  background(255);
}

void draw() {
  background(255);

  //中心線
  strokeWeight(1);
  stroke(200);
  line(width/2, 0, width/2, height);
  line(0, height/2, width, height/2);

  //アステロイド曲線
  noFill();
  strokeWeight(2);
  stroke(200, 0, 0);

  pushMatrix();
  translate(width/2, height/2);
  beginShape();
  for (int theta = 0; theta < 360; theta++) {
    vertex(R * pow(cos(radians(theta)), 3), R * 1.4 * pow(sin(radians(theta)), 3));
  }
  endShape(CLOSE);
  popMatrix();
}

しずく

涙のようなイメージのしずく型の図形はbeginShape()endShape()vertex()を使って描くことができます。
コード中、Aという変数がありますが、この値を小さくすると丸みのある形になり、大きくすると長細く鋭い形になります。
詳しくは以下の記事をご覧ください。
Processing でしずく型曲線を描く : だらっと学習帳

0129154223.png

int R = 180; //しずくの大きさ調整用
int A = 5; //しずくの丸み調整用

void setup() {
  size(400, 400);
  background(255);
}

void draw() {
  background(255);

  //中心線
  strokeWeight(1);
  stroke(200);
  line(width/2, 0, width/2, height);
  line(0, height/2, width, height/2);

  //しずく
  noFill();
  strokeWeight(2);
  stroke(200, 0, 0);

  pushMatrix();
  translate(width/2, height/2);
  rotate(radians(-90));
  beginShape();
  for (int theta = 0; theta < 360; theta++) {
    float r = 1 / (A * sin(radians(theta)/2)+1);
    vertex(R * r * cos(radians(theta)), R * r * sin(radians(theta)));
  }
  endShape(CLOSE);
  popMatrix();
}

ハート

ハートはbeginShape()endShape()vertex()を使って描くことができます。
strokeJoin()を使うことで、線のつなぎ目をなめらかにしています。
詳しくは以下の記事をご覧ください。
Processing でハートを描く : だらっと学習帳

0129152304.png

int R = 8; //ハートの大きさ調整用

void setup() {
  size(400, 400);
  background(255);
}

void draw() {
  background(255);

  //中心線
  strokeWeight(1);
  stroke(200);
  line(width/2, 0, width/2, height);
  line(0, height/2, width, height/2);

  //ハート
  noFill();
  strokeWeight(2);
  stroke(200, 0, 0);
  strokeJoin(ROUND); //線のつなぎ目について設定

  pushMatrix();
  translate(width/2, height/2);
  beginShape();
  for (int theta = 0; theta < 360; theta++) {
    float x = R * (16 * sin(radians(theta)) * sin(radians(theta)) * sin(radians(theta)));
    float y = (-1) * R * (13 * cos(radians(theta)) - 5 * cos(radians(2 * theta)) 
      - 2 * cos(radians(3 * theta)) - cos(radians(4 * theta)));

    vertex(x, y);
  }
  endShape(CLOSE);
  popMatrix();
}

お花はbeginShape()endShape()curveVertex()を使って描くことができます。
詳しくは以下の記事をご覧ください。
Processing でスーパーバラ曲線を描いてみた : だらっと学習帳

0129195559.png

int num = 100; //頂点の描画回数
int R = 100; //花の大きさ調整用

float theta_A = 0;
float delta_A = 1.0;
float theta_B = 0;
float delta_B = 0.1;

float theta_A_goal = theta_A + delta_A;
float theta_B_goal = theta_B + delta_B;

void setup() {
  size(400, 400);
  background(255);
}

void draw() {
  background(255);

  //中心線
  strokeWeight(1);
  stroke(200);
  line(width/2, 0, width/2, height);
  line(0, height/2, width, height/2);

  //花
  noFill();
  strokeWeight(2);
  stroke(200, 0, 0);

  pushMatrix();
  translate(width/2, height/2);
  beginShape();
  for (int i = 0; i < num; i++) {
    float r = sin(theta_A) / 2 + 1;
    float x = R * r * sin(theta_B);
    float y = R * r * cos(theta_B);

    theta_A += delta_A;
    theta_B += delta_B;

    curveVertex(x, y);
  }
  theta_A = theta_A_goal;
  theta_B = theta_B_goal;
  endShape();
  popMatrix();
}

葉 (麻の葉、紅葉、楓)

葉っぱはbeginShape()endShape()vertex()を使って描くことができます。
詳しくは以下の記事をご覧ください。
Processing で 葉っぱを描く(麻の葉?紅葉、楓?) : だらっと学習帳

0922165413.png

float R = 45; //図形の大きさ調整用

float x;
float y;
float r;

void setup() {
  size(400, 400);
  background(255);
}

void draw() {
  background(255);

  //中心線
  strokeWeight(1);
  stroke(200);
  line(width/2, 0, width/2, height);
  line(0, height/2, width, height/2);

  //カエデの描画
  noFill();
  strokeWeight(2);
  stroke(200, 0, 0);
  noFill();

  pushMatrix();
  translate(width/2, height/2);
  beginShape();
  for (float theta = 0; theta < 360; theta += 1) {
    r = - R * (1 + (9.0/10.0) * cos(radians(8 * theta))) * (1 + (1.0/10.0) * cos(radians(24 * theta))) * ((9.0/10.0) + (1.0/10.0) * cos(radians(200 * theta))) * (1 + sin(radians(theta)));

    x = r * cos(radians(theta));
    y = r * sin(radians(theta));

    vertex(x, y);
  }
  endShape(CLOSE);
  popMatrix();
}

穴あき図形

ドーナツのように穴を持っている図形はbeginContour()beginShape()endShape()vertex()endContour()を使って描くことができます。
詳しくは以下の記事をご覧ください。
Processing / p5.js で穴あき図形を描く beginContour() : だらっと学習帳

pict.png

float R; //星(穴)の大きさ調整用
int vertex_val = 10; //星のとげの数

int w = 300; //図形の外枠の横の長さ
int h = 300; //図形の外枠の縦の長さ

void setup() {
  size(400, 400);
  background(255);
}

void draw() {
  background(255);

  //中心線
  strokeWeight(1);
  stroke(200);
  line(0, height/2, width, height/2);
  line(width/2, 0, width/2, height);

  //星形穴あき図形
  noFill();
  strokeWeight(2);
  stroke(200, 0, 0);
  fill(200,100,100);

  pushMatrix();
  translate(width / 2, height / 2);
  rotate(radians(-90));
  beginShape();
  vertex(-w/2, -h/2);
  vertex(w/2, -h/2);
  vertex(w/2, h/2);
  vertex(-w/2, h/2);
  beginContour();
  for (int i = vertex_val; i > 0; i--) {
    if (i % 2 == 0) {
      R = w * 0.4;
    } else {
      R = w * 0.2;
    }
    vertex(R * cos(radians(360 * i / vertex_val)), R * sin(radians(360 * i / vertex_val)));
  }
  endContour();
  endShape(CLOSE);
  popMatrix();
}

びっくり吹き出し(アステロイド曲線2)

漫画でよく見かける
_人人人人人人人人人人_
> びっくり吹き出し <
 ̄Y^Y^Y^Y^Y^Y^Y^Y^Y ̄
はアステロイド曲線で表現でき、beginShape()endShape()vertex()を使って描くことができます。
詳しくは以下の記事を以下の記事をご覧ください。
Processing でびっくり吹き出しみたいなとげの多い図形(アステロイド曲線)を描く : だらっと学習帳

2016622132416.png

int R = 20; //曲線の大きさ調整用
int vertex_num = 8; //とげの数

void setup() {
  size(400, 400);
  background(255);

  vertex_num -= 1; //とげの数を調整
}

void draw() {
  background(255);

  //中心線
  strokeWeight(1);
  stroke(200);
  line(width/2, 0, width/2, height);
  line(0, height/2, width, height/2);

  //アステロイド曲線
  noFill();
  strokeWeight(2);
  stroke(200, 0, 0);
  strokeJoin(ROUND);

  pushMatrix();
  translate(width / 2, height / 2);
  beginShape();
  for (int theta = 0; theta < 360; theta++) {
    float x = R * (vertex_num * cos(radians(theta)) + cos(radians(-vertex_num * theta)));
    float y = R * (vertex_num * sin(radians(theta)) + sin(radians(-vertex_num * theta)));

    vertex(x, y);
  }
  endShape();
  popMatrix();
}