P5.js 한국어 참조 (vertex)

이 페이지에서는 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)를 따릅니다.