# 左上角顯示 fps 與 frameCount

正式網址：https://newmediaart.course.monolab.world/snippets/fps-overlay

作品卡不卡看數字最準：frameRate() 是現在每秒幾格、frameCount 是第幾格，畫在 draw() 最後才會蓋在作品上面。

- **分類**：除錯
- **行數**：30 行（p5.js 1.x／2.x）

把 drawDebug() 貼進自己的 sketch，在 draw() 最後一行呼叫它；作品完成、要展示時把那一行刪掉就好。

```js
// 左上角顯示 fps 與 frameCount：動畫卡不卡，看數字最準
function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(30);
  // 你的作品畫在這裡（示範：很多個會動的圓）
  noStroke();
  fill(120, 200, 255, 120);
  for (let i = 0; i < 300; i++) {
    circle((i * 37 + frameCount) % width, (i * 53) % height, 20);
  }
  drawDebug(); // 放在 draw() 的最後，才會蓋在作品上面
}

function drawDebug() {
  push(); // 用 push／pop 包起來，不會改到作品的顏色、位置設定
  resetMatrix(); // 前面有 translate、rotate 也一樣畫在左上角
  noStroke();
  fill(0, 180);
  rect(0, 0, 150, 48);
  fill(255);
  textFont('monospace');
  textSize(13);
  textAlign(LEFT, TOP);
  text('fps   ' + round(frameRate()), 10, 8);
  text('frame ' + frameCount, 10, 26);
  pop();
}
```

## 同類常用指令・除錯

- [滑鼠十字線＋座標](https://newmediaart.course.monolab.world/snippets/mouse-crosshair)
- [每秒在 console 印一次變數](https://newmediaart.course.monolab.world/snippets/log-every-second)
- [麥克風測試](https://newmediaart.course.monolab.world/snippets/mic-test)

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

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