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

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

vertex()

説明文

形状の頂点の法線ベクトルを設定します。

beginShape() と endShape() の間で vertex() を使用して指定される形状点の法線ベクトルを定義します。
法線ベクトルとは、光が形状からどのように反射するかを制御するものです。

normal() は、法線ベクトルの定義方法には2種類あります。
・normal(1, 2, 3) のように x、y、z の 3 つのパラメタ指定すると、法線ベクトルの x、y、z 成分が設定されます。
・normal(myVector)のように1つのパラメタを指定すると、それは p5.Vector オブジェクトが指定されたと認識してそのまま法線ベクトルの設定に使用されます。

normal() は、vertex() と同様に、beginShape() 関数と endShape() 関数の間で呼び出す必要があります。 normal() の呼び出しによって設定された法線ベクトルは、normal() が再度呼び出されるまで、後続のすべての頂点に影響します。

構文

normal(x, y, z)
normal(vector)

パラメタ

x
Number: 法線ベクトルの x 成分値

y
Number: y-component of the vertex normal.

z
Number: z-component of the vertex normal.
vector p5.Vector: vertex normal as a p5.Vector object.

x
Number：頂点のx座標

y
Number：頂点のy座標

z
Number：頂点のz座標

例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) に従います。