p5js:複雑な図形の描画

p5jsでより複雑な図形を描画する方法を説明します。複数の頂点を持つ図形を描画する方法です。begeinShape(),endShape(),vertex()を使います。beginShape()で図形描画を開始しendShape()で終了します。beginShape()からendShape()までに呼び出したvertex()が頂点の指定となります。beginShape()とendShape()のパラメータで図形の形状を指定することができます。stroke(),fill()で線色、塗り潰しの指定ができます。

構文

beginShape([kind])

kind：POINTS、LINES、TRIANGLES、TRIANGLE_FAN、TRIANGLE_STRIP、QUADS、またはQUAD_STRIPのいずれか

構文

endShape([mode])

mode：図形を閉じるにはCLOSEを使います

構文

vertex(x, y)

x：頂点のx座標
y：頂点のy座標

サンプル

endShape(CLOSE)で図形を閉じた時

function setup() {
  createCanvas(100, 100);  
  background(220);
  noLoop();
}

function draw() {  
  beginShape();
  vertex(30, 20);
  vertex(85, 20);
  vertex(85, 75);
  vertex(30, 75);
  endShape(CLOSE);
}

beginShape(POINTS)で頂点を点で描画

function setup() {
  createCanvas(100, 100);  
  background(220);
  noLoop();
}

function draw() {  
  strokeWeight(5);
  beginShape(POINTS);
  vertex(30, 20);
  vertex(85, 20);
  vertex(85, 75);
  vertex(30, 75);
  endShape();
}

beginShape(LINES)で描画。２点を直線でつなぐ

function setup() {
  createCanvas(100, 100);  
  background(220);
  noLoop();
}

function draw() {  
  beginShape(LINES);
  vertex(30, 20);
  vertex(85, 20);
  vertex(85, 75);
  vertex(30, 75);
  endShape();
}

noFill、endShape()引数なし。四角形は閉じられない

function setup() {
  createCanvas(100, 100);  
  background(220);
  noLoop();
}

function draw() {  
  noFill();
  beginShape();
  vertex(30, 20);
  vertex(85, 20);
  vertex(85, 75);
  vertex(30, 75);
  endShape();
}

noFill(),endShape()でCLOSE指定。図形が閉じる

function setup() {
  createCanvas(100, 100);  
  background(220);
  noLoop();
}

function draw() {  
  noFill();
  beginShape();
  vertex(30, 20);
  vertex(85, 20);
  vertex(85, 75);
  vertex(30, 75);
  endShape(CLOSE);
}

beginShape()でTRIANGLES指定。３点で三角形を描画

function setup() {
  createCanvas(100, 100);  
  background(220);
  noLoop();
}

function draw() {    
  beginShape(TRIANGLES);
  vertex(30, 75);
  vertex(40, 20);
  vertex(50, 75);
  vertex(60, 20);
  vertex(70, 75);
  vertex(80, 20);
  endShape();  
}

beginShape()でTRIANGLE_STRIP指定。３点で毎に連続した三角形を描画

function setup() {
  createCanvas(100, 100);  
  background(220);
  noLoop();
}

function draw() {    
    beginShape(TRIANGLE_STRIP);
    vertex(30, 75);
    vertex(40, 20);
    vertex(50, 75);
    vertex(60, 20);
    vertex(70, 75);
    vertex(80, 20);
    vertex(90, 75);
    endShape();
}

beginShape()でTRIANGLE_FAN指定。三角形を回転させて描画

function setup() {
  createCanvas(100, 100);  
  background(220);
  noLoop();
}

function draw() {    
    beginShape(TRIANGLE_FAN);
    vertex(57.5, 50);
    vertex(57.5, 15);
    vertex(92, 50);
    vertex(57.5, 85);
    vertex(22, 50);
    vertex(57.5, 15);
    endShape();
}

beginShape()でQUADS指定。4点毎に四角形を描画

function setup() {
  createCanvas(100, 100);  
  background(220);
  noLoop();
}

function draw() {    
    beginShape(QUADS);
    vertex(30, 20);
    vertex(30, 75);
    vertex(50, 75);
    vertex(50, 20);
    vertex(65, 20);
    vertex(65, 75);
    vertex(85, 75);
    vertex(85, 20);
    endShape();
}

beginShape()でQUAD_STRIP指定。4点毎に四角形を描画、四角形をつなげる

function setup() {
  createCanvas(100, 100);  
  background(220);
  noLoop();
}

function draw() {    
    beginShape(QUAD_STRIP);
    vertex(30, 20);
    vertex(30, 75);
    vertex(50, 20);
    vertex(50, 75);
    vertex(65, 20);
    vertex(65, 75);
    vertex(85, 20);
    vertex(85, 75);
    endShape();
}

頂点を６つ描画

function setup() {
  createCanvas(100, 100);  
  background(220);
  noLoop();
}

function draw() {    
    beginShape();
    vertex(20, 20);
    vertex(40, 20);
    vertex(40, 40);
    vertex(60, 40);
    vertex(60, 60);
    vertex(20, 60);
    endShape(CLOSE);
}

まとめ

今回はp5jsで複雑な図形を描画する方法を説明しました。