# 取座標小工具：點一下印出 vertex

正式網址：https://newmediaart.course.monolab.world/snippets/vertex-picker

在畫布上點一下，console 就印出一行 vertex(x, y);；點出形狀的頂點，整串貼回 beginShape() 和 endShape(CLOSE) 之間，就是自己的形狀。

- **分類**：鍵盤滑鼠
- **行數**：61 行（p5.js 1.x／2.x）
- **在哪一堂用到**：[第 1 堂](https://newmediaart.course.monolab.world/lesson/01)

整段貼進一個新的 sketch 當工具用：點出想要的形狀頂點，從 console 複製那幾行 vertex 貼回自己作品的 beginShape() 與 endShape(CLOSE) 之間；按 C 清掉重點。

```js
// 取座標小工具：在畫布上點一下，console 就印出一行 vertex(x, y);
// 點出想要的形狀頂點，把那幾行複製貼回 beginShape() 和 endShape(CLOSE) 之間
let points = []; // 點過的位置，畫在畫面上當參考

function setup() {
  createCanvas(600, 600);
}

function draw() {
  background(245);

  // 示範：用 vertex 一點一點圍出來的花盆（歪七扭八也沒關係）
  fill(200, 110, 70);
  stroke(60);
  strokeWeight(2);
  beginShape();
  vertex(163, 297);
  vertex(441, 289);
  vertex(429, 347);
  vertex(396, 347);
  vertex(371, 527);
  vertex(222, 533);
  vertex(197, 352);
  vertex(170, 350);
  endShape(CLOSE); // CLOSE：最後一點自動連回第一點

  // 點過的位置：紅線連起來，看得出形狀
  noFill();
  stroke(230, 40, 40);
  strokeWeight(1.5);
  beginShape();
  for (const p of points) {
    vertex(p.x, p.y);
  }
  endShape();
  noStroke();
  fill(230, 40, 40);
  for (const p of points) {
    circle(p.x, p.y, 7);
  }

  // 滑鼠旁邊顯示座標
  fill(0);
  textSize(14);
  text(round(mouseX) + ', ' + round(mouseY), mouseX + 10, mouseY - 10);
}

function mousePressed() {
  const x = round(mouseX);
  const y = round(mouseY);
  points.push({ x: x, y: y });
  print('vertex(' + x + ', ' + y + ');'); // 到 console 複製這一行
}

// 按 C 清掉點過的點，重新點一組
function keyPressed() {
  if (key === 'c' || key === 'C') {
    points = [];
    print('// ---- 重新開始 ----');
  }
}
```

## 同類常用指令・鍵盤滑鼠

- [按 R 換一組隨機](https://newmediaart.course.monolab.world/snippets/reset-random)
- [按空白鍵暫停／繼續](https://newmediaart.course.monolab.world/snippets/pause-space)
- [按 C 清空畫布（筆刷作品）](https://newmediaart.course.monolab.world/snippets/clear-canvas)
- [MIDI 一行接上：鍵盤、螢幕上的控制器、手機都能彈](https://newmediaart.course.monolab.world/snippets/midi-one-line)

[回到全部常用指令](https://newmediaart.course.monolab.world/snippets)

[到 Hahow 報名](https://hahow.in/cr/creative-code)。價格與優惠以 Hahow 頁面為準。