P5.js 日本語リファレンス(vertex)

15345 ワード
p5.js processing JavaScript JavaScript テキストリンク

このページでは「P5.js 日本語リファレンス」 の vertex関数を説明します。

vertex()

説明文

すべての形状を一連の頂点を接続することによって構築します。 vertex() はポイント、ライン、三角形、四角形、ポリゴンの頂点座標を指定します。 beginShape() および endShape() 内でのみ使用されます。

構文

vertex(x, y)

vertex(x, y, z, [u], [v])

パラメタ

x

Number：頂点のx座標

y

Number：頂点のy座標

z

Number：頂点のz座標

u

Number：頂点のテクスチャのu座標(オプション)

v

Number：頂点のテクスチャのV座標(オプション)

例1

function draw() {
  createCanvas(500, 500, WEBGL);
  translate(-300, -180);

  background(255);
  noStroke();
  fill(0, 255, 0);

  beginShape();  // 変形図形(星型)を描画
    vertex(90, 10);
    vertex(100, 35);
    vertex(110, 10);
    vertex(135, 0);
    vertex(110, -8);
    vertex(100, -35);
    vertex(90, -8);
    vertex(65, 0);
  endShape();

  strokeWeight(5);
  stroke(0, 0, 255);

  beginShape(LINES);  // ラインを描画
    vertex(170, -15);
    vertex(250, -15);
    vertex(170, 15);
    vertex(250, 15);
    vertex(195, -35);
    vertex(195, 35);
    vertex(225, -35);
    vertex(225, 35);
  endShape();  
}

実行結果

例2

// クリックして辺の数を変更します。
// WebGLモードでは、vertex()へのすべての呼び出しが同じZ値を
// 使用する場合、カスタム形状は中空の塗りつぶしセクション
// のみを表示します。
function setup(){
  createCanvas(100, 100, WEBGL);
  setAttributes( 'antialias', true);
  fill(237, 34, 93);
  strokeWeight(3);
}

function draw(){
  background(200);
  rotateX(frameCount * 0.01);
  rotateZ(frameCount * 0.01);
  ngon(sides, 0, 0, 80);
}

function mouseClicked(){
  if(sides > 6){
    sides = 3;
  } else {
    sides ++;
  }
}

function ngon(n, x, y, d){
  beginShape(TESS);
  for(let i = 0; i <n + 1; i ++){
    angle = TWO_PI / n * i;
    px = x + sin(angle)* d / 2;
    py = y-cos(angle)* d / 2;
    vertex(px, py, 0);
  }

  for(let i = 0; i <n + 1; i ++){
    angle = TWO_PI / n * i;
    px = x + sin(angle)* d / 4;
    py = y-cos(angle)* d / 4;
    vertex(px, py, 0);
  }
  endShape();
}

実行結果

例3

let image;
function setup() {
  createCanvas(500, 500, WEBGL);
  img = loadImage("./mountain.png");  // 画像(横300pixels、縦200pixels)を読み込む
}

function draw() {  
    background(255);
    noStroke();
    texture(img);  // 読み込んだ画像をテクスチャにします


    // 100 x 100 の正方形を描画します。この時、uv座標値にテクスチャ画像の
    // 原点(0, 0) から (200, 200) を指定します    
    beginShape();
      vertex(  0,   0,  0,   0.0,   0.0);
      vertex(100,   0,  0, 200.0,   0.0);
      vertex(100, 100,  0, 200.0, 200.0);
      vertex(  0, 100,  0,   0.0, 200.0);
    endShape();  
}

実行結果

著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。