【Processing】createShape()関数の使い方【形を作る。グループ表現も便利】

2024年10月5日

URLをコピーしました！

ワタタク

今回の記事の目的はProcessingの「createShape()関数」を理解し、自分なりに使ってみること。

記事内のProcessingのバージョンは4.3。

【Processing】createShape()関数について

createShape()関数について

createShape()は「形を作る」という意味
- 英語の「create」は「作る」、「shape」は「形」という意味
createShape()について、Processingで形を作るための関数です。この関数を使うと、四角形や円などの形を簡単に作ることができます
shape()関数で描画することができる
- 【Processing】shape()関数の使い方【あらかじめ作成した図形や画像を画面に表示するために使う】（あらかじめ作成していなくても描画可能）
以下の8つを描くことができる
- 楕円（ELLIPSE）
- 四角形（RECT）
- 弧（ARC）
- 三角形（TRIANGLE）
- 球体（SPHERE）
- 箱（BOX）
- 4つの頂点を決めて描く四角形（QUAD）
- 線（LINE）
主にPShapeと一緒に使う
createShape(GROUP);と書いてグループ化することができる
- コードを管理しやすく、読みやすくなる（記事の後半にコードの例あり）

【Processing】createShape()関数の使い方3つ【画像とコード】

1 ELLIPSE

PShape circle;

void setup() {
  size(200, 200);
  circle = createShape(ELLIPSE, 100, 100, 80, 80);
}

void draw() {
  background(255);
  shape(circle);
  save("1.jpg");
}

2 RECT

PShape rect;

void setup() {
  size(200, 200);
  rect = createShape(RECT, 60, 60, 80, 80);
}

void draw() {
  background(255);
  shape(rect);
}

3 TRIANGLE

PShape triangleShape;

void setup() {
  size(200, 200);
  triangleShape = createShape();
  triangleShape.beginShape();
  triangleShape.vertex(100, 50); // 三角形の頂点1
  triangleShape.vertex(150, 150); // 三角形の頂点2
  triangleShape.vertex(50, 150); // 三角形の頂点3
  triangleShape.endShape(CLOSE);
}

void draw() {
  background(255);
  shape(triangleShape);
  save("3.jpg");
}

なぜrect()で四角形を書けるのにcreateShape()で四角形を書くのか

rect()でも複雑な表現はできますが、「createShape()」にはメリットがあるからです。

「createShape()」は複数の図形を一つの形状としてグループ化することができます。

図形を一つの単位として管理しやすくなります。

例えば、複数の長方形や他の図形を組み合わせて一つのキャラクターを作る場合、各要素を個別に描画するのではなく、一つの「shape」としてまとめることができます。

また、「createShape()」を使うと、その形状を再利用したり、変形したりするのが簡単です。例えば、同じ形状を複数の場所で使いたい場合や、形状の一部を変更したい場合、「createShape()」を使うと効率的に行えます。

「createShape()」は描画パフォーマンスの向上にも関係している。

大量の図形を描画する場合、「createShape()」を使うと描画が効率的になり、プログラムの動作がスムーズになります。

つまり、「rect()」は簡単な長方形の描画に適していますが、「createShape()」は複雑な図形やパフォーマンスの向上、再利用性の面で優れています。

【Processing】createShape()関数でグループさせて描いてみる

PShape house;

void setup() {
  size(400, 400);
  house = createShape(GROUP); // グループを作成

  // 家のベース（長方形）
  PShape base = createShape(RECT, 150, 200, 100, 100);
  base.setFill(color(150, 75, 0)); // 茶色
  house.addChild(base); // グループに追加

  // 屋根（三角形）
  PShape roof = createShape();
  roof.beginShape();
  roof.vertex(150, 200);
  roof.vertex(250, 200);
  roof.vertex(200, 150);
  roof.endShape(CLOSE);
  roof.setFill(color(255, 0, 0)); // 赤色
  house.addChild(roof); // グループに追加

  // 窓（小さな長方形）
  PShape window = createShape(RECT, 175, 225, 20, 20);
  window.setFill(color(0, 0, 255)); // 青色
  house.addChild(window); // グループに追加

  // 草（緑色の長方形）
  PShape grass = createShape(RECT, 0, 300, 400, 50);
  grass.setFill(color(0, 255, 0)); // 緑色
  house.addChild(grass); // グループに追加

  // 雲（楕円形）
  PShape cloud1 = createShape(ELLIPSE, 100, 100, 60, 40);
  cloud1.setFill(color(255)); // 白色
  PShape cloud2 = createShape(ELLIPSE, 140, 90, 80, 50);
  cloud2.setFill(color(255)); // 白色
  PShape cloud3 = createShape(ELLIPSE, 180, 100, 60, 40);
  cloud3.setFill(color(255)); // 白色
  house.addChild(cloud1); // グループに追加
  house.addChild(cloud2); // グループに追加
  house.addChild(cloud3); // グループに追加
}

void draw() {
  background(135, 206, 250); // 背景を水色にして青空に
  shape(house, 0, 0); // 画面に家を描く
}