ワタタク今回の記事の目的はProcessingの「PShape.setVertex()」を理解し、自分なりに使ってみること。
応用したい表現は、記事の後半。
目次
【Processing】PShape.setVertex()について
PShape.setVertex()について
PShape.setVertex()は、「形の頂点を設定する」という意味- 図形の中の特定の頂点の位置を変更するためにに、
setVertex()という命令を使用 - 主に
PShape、createShape()、beginShape()、endShape()と一緒に使う
【Processing】PShape.setVertex()の使い方【画像とコード】
PShape.setVertex()を使わないとき。
PShape.setVertex()を使って、一番目の頂点の位置を変えたとき。
今回の記事の内容のsetVertex()は26行目。
// 図形の名前を決める（今回はtriangle）
PShape triangle;
// 画面のサイズを設定（幅200、高さ200）
size(200, 200);
// 背景を白にする
background(255);
// 新しい図形（triangle）を作る
triangle = createShape();
triangle.beginShape(); // 図形の始まりを宣言
// 図形の一番目の点を（30, 20）に設定
triangle.vertex(30, 20);
// 図形の二番目の点を（85, 20）に設定
triangle.vertex(85, 20);
// 図形の三番目の点を（60, 60）に設定
triangle.vertex(60, 60);
triangle.endShape(CLOSE); // 図形を閉じて三角形にする
// 一番目の点の位置を（50, 50）に変更
// 「triangle.setVertex(0, 50, 50)」の「0」は、一番最初の頂点を選んで、その位置を（50, 50）に変更するということ
triangle.setVertex(0, 50, 50);
// 図形を画面に描く
shape(triangle);
【Processing】PShape.setVertex()はどんな表現で使えそうか
setVertexを使って頂点の位置を変えることで、動きをつけたり、形を変えることができる。
光が当たってる四角柱
// 図形の名前を決める（今回はbox）
PShape box;
void setup() {
// 画面のサイズを設定（幅400、高さ400）
size(400, 400, P3D);
// 背景を白にする
background(255);
// 新しい図形（box）を作る
box = createShape();
// 図形の定義を始める
box.beginShape(QUADS);
// 四角柱の底面の頂点を指定
box.vertex(-50, -50, -50);
box.vertex(50, -50, -50);
box.vertex(50, 50, -50);
box.vertex(-50, 50, -50);
// 四角柱の上面の頂点を指定
box.vertex(-50, -50, 50);
box.vertex(50, -50, 50);
box.vertex(50, 50, 50);
box.vertex(-50, 50, 50);
// 四角柱の側面を指定
box.vertex(-50, -50, -50);
box.vertex(50, -50, -50);
box.vertex(50, -50, 50);
box.vertex(-50, -50, 50);
box.vertex(50, -50, -50);
box.vertex(50, 50, -50);
box.vertex(50, 50, 50);
box.vertex(50, -50, 50);
box.vertex(50, 50, -50);
box.vertex(-50, 50, -50);
box.vertex(-50, 50, 50);
box.vertex(50, 50, 50);
box.vertex(-50, 50, -50);
box.vertex(-50, -50, -50);
box.vertex(-50, -50, 50);
box.vertex(-50, 50, 50);
// 図形の定義を終える
box.endShape();
}
void draw() {
// 背景を白にする
background(255);
// 図形を中央に移動する
translate(width / 2, height / 2);
// 図形を回転させる
rotateY(frameCount * 0.01);
// 各頂点をランダムに動かす
for (int i = 0; i < box.getVertexCount(); i++) {
PVector v = box.getVertex(i); // 頂点を取得
v.x += random(-1, 1); // X座標をランダムに動かす
v.y += random(-1, 1); // Y座標をランダムに動かす
v.z += random(-1, 1); // Z座標をランダムに動かす
box.setVertex(i, v); // 変更した頂点を設定
}
// 図形を表示する
shape(box);
}- for (int i = 0; i < box.getVertexCount(); i++) {
- この行は、図形（box）の頂点（点）を一つずつ処理するためのループを作ります。
iは頂点の番号で、0から始まり、図形の頂点の数（box.getVertexCount()）まで繰り返します。
- PVector v = box.getVertex(i); // 頂点を取得
PVectorは頂点の位置（x, y, z）を表す特別な変数です。box.getVertex(i)はi番目の頂点の位置を取得し、それをvに保存します。
- v.x += random(-1, 1); // X座標をランダムに動かす
v.xは頂点のX座標（横の位置）です。random(-1, 1)は -1 から 1 の間のランダムな値を生成し、X座標に足します。- これで、頂点の横の位置が少しランダムに動きます。
- v.y += random(-1, 1); // Y座標をランダムに動かす
v.yは頂点のY座標（縦の位置）です。random(-1, 1)は -1 から 1 の間のランダムな値を生成し、Y座標に足します。- これで、頂点の縦の位置が少しランダムに動きます。
- v.z += random(-1, 1); // Z座標をランダムに動かす
v.zは頂点のZ座標（奥行きの位置）です。random(-1, 1)は -1 から 1 の間のランダムな値を生成し、Z座標に足します。- これで、頂点の奥行きの位置が少しランダムに動きます。
- box.setVertex(i, v); // 変更した頂点を設定
box.setVertex(i, v)はi番目の頂点を新しい位置vに変更します。- これにより、図形の頂点がランダムに動くようになります。
輝く複雑な図形1
上記のコードのランダムの部分の数値を-30,30に変えたらできた内容。
面白い。
// 図形の名前を決める（今回はbox）
PShape box;
void setup() {
// 画面のサイズを設定（幅400、高さ400）
size(400, 400, P3D);
// 背景を白にする
background(255);
// 新しい図形（box）を作る
box = createShape();
// 図形の定義を始める
box.beginShape(QUADS);
// 四角柱の底面の頂点を指定
box.vertex(-50, -50, -50);
box.vertex(50, -50, -50);
box.vertex(50, 50, -50);
box.vertex(-50, 50, -50);
// 四角柱の上面の頂点を指定
box.vertex(-50, -50, 50);
box.vertex(50, -50, 50);
box.vertex(50, 50, 50);
box.vertex(-50, 50, 50);
// 四角柱の側面を指定
box.vertex(-50, -50, -50);
box.vertex(50, -50, -50);
box.vertex(50, -50, 50);
box.vertex(-50, -50, 50);
box.vertex(50, -50, -50);
box.vertex(50, 50, -50);
box.vertex(50, 50, 50);
box.vertex(50, -50, 50);
box.vertex(50, 50, -50);
box.vertex(-50, 50, -50);
box.vertex(-50, 50, 50);
box.vertex(50, 50, 50);
box.vertex(-50, 50, -50);
box.vertex(-50, -50, -50);
box.vertex(-50, -50, 50);
box.vertex(-50, 50, 50);
// 図形の定義を終える
box.endShape();
}
void draw() {
// 背景を白にする
background(255);
// 図形を中央に移動する
translate(width / 2, height / 2);
// 図形を回転させる
rotateY(frameCount * 0.01);
// 各頂点をランダムに動かす
for (int i = 0; i < box.getVertexCount(); i++) {
PVector v = box.getVertex(i); // 頂点を取得
v.x += random(-30, 30); // X座標をランダムに動かす
v.y += random(-30, 30); // Y座標をランダムに動かす
v.z += random(-30, 30); // Z座標をランダムに動かす
box.setVertex(i, v); // 変更した頂点を設定
}
// 図形を表示する
shape(box);
}輝く複雑な図形2
上記のコードのランダムの部分の数値を-100,100に変えたらできた内容。
こっちの方が好き。
// 図形の名前を決める（今回はbox）
PShape box;
void setup() {
// 画面のサイズを設定（幅400、高さ400）
size(400, 400, P3D);
// 背景を白にする
background(255);
// 新しい図形（box）を作る
box = createShape();
// 図形の定義を始める
box.beginShape(QUADS);
// 四角柱の底面の頂点を指定
box.vertex(-50, -50, -50);
box.vertex(50, -50, -50);
box.vertex(50, 50, -50);
box.vertex(-50, 50, -50);
// 四角柱の上面の頂点を指定
box.vertex(-50, -50, 50);
box.vertex(50, -50, 50);
box.vertex(50, 50, 50);
box.vertex(-50, 50, 50);
// 四角柱の側面を指定
box.vertex(-50, -50, -50);
box.vertex(50, -50, -50);
box.vertex(50, -50, 50);
box.vertex(-50, -50, 50);
box.vertex(50, -50, -50);
box.vertex(50, 50, -50);
box.vertex(50, 50, 50);
box.vertex(50, -50, 50);
box.vertex(50, 50, -50);
box.vertex(-50, 50, -50);
box.vertex(-50, 50, 50);
box.vertex(50, 50, 50);
box.vertex(-50, 50, -50);
box.vertex(-50, -50, -50);
box.vertex(-50, -50, 50);
box.vertex(-50, 50, 50);
// 図形の定義を終える
box.endShape();
}
void draw() {
// 背景を白にする
background(255);
// 図形を中央に移動する
translate(width / 2, height / 2);
// 図形を回転させる
rotateY(frameCount * 0.01);
// 各頂点をランダムに動かす
for (int i = 0; i < box.getVertexCount(); i++) {
PVector v = box.getVertex(i); // 頂点を取得
v.x += random(-100, 100); // X座標をランダムに動かす
v.y += random(-100, 100); // Y座標をランダムに動かす
v.z += random(-100, 100); // Z座標をランダムに動かす
box.setVertex(i, v); // 変更した頂点を設定
}
// 図形を表示する
shape(box);
}
【Processing】PShape.setVertex()を使ってみた感想
頂点の位置を変えることで、すごく形が変わる。setVertex()で位置をランダムに変えて気に入った形を、getVertexX()、getVertexY()で座標の位置を取得してコンソールに表示→その形の数値を入力して実行すると狙った形を出せると思いました。
頂点の位置を変えるってすごく面白い。
ワタタクそれでは今日もレッツワクワクコーディング。