# 按 G 存 3 秒 GIF（saveGif）

正式網址：https://newmediaart.course.monolab.world/snippets/save-gif

saveGif() 把動畫一格一格重畫、錄成 GIF；p5.js 1.5 以上與 2.x 都有，存好之前畫面會停一下是正常的。

- **分類**：存檔與輸出
- **行數**：33 行（p5.js 1.x／2.x）

把 keyPressed 裡的 if、pad、timestamp 貼進自己的 sketch。saveGif 會把 frameCount 從 0 重新算起（1.x、2.x 都是），用 frameCount 做的動畫錄出來最準。

```js
// 按 G 把 3 秒動畫存成 GIF（p5.js 1.5 以上、2.x 都有 saveGif）
function setup() {
  createCanvas(400, 400); // GIF 很吃記憶體：畫布小一點、秒數短一點
}

function draw() {
  background(20);
  // 動畫用 frameCount 算：saveGif 是一格一格重畫再存，
  // 用 millis() 做的動畫錄出來速度會不對
  const r = 120 + sin(frameCount * 0.05) * 80;
  noFill();
  stroke(255, 200, 80);
  strokeWeight(6);
  circle(width / 2, height / 2, r);
}

function keyPressed() {
  if (key === 'g' || key === 'G') {
    // 3 秒；左上角會出現進度，存好之前畫面停住是正常的
    saveGif('sketch-' + timestamp(), 3);
  }
}

// 補零：7 → "07"。檔名長度一致，資料夾裡才會照時間排好
function pad(n) {
  return String(n).padStart(2, '0');
}

// 現在的日期時間：2026-09-29-1905-12（年-月-日-時分-秒）
function timestamp() {
  return year() + '-' + pad(month()) + '-' + pad(day()) + '-' +
    pad(hour()) + pad(minute()) + '-' + pad(second());
}
```

## 同類常用指令・存檔與輸出

- [按 S 存 JPG（檔名帶日期時間）](https://newmediaart.course.monolab.world/snippets/save-jpg-datetime)
- [按 S 存 PNG（透明背景）](https://newmediaart.course.monolab.world/snippets/save-png-transparent)
- [存高解析度圖（pixelDensity）](https://newmediaart.course.monolab.world/snippets/save-hires)
- [按 V 錄 5 秒影片（WebM）](https://newmediaart.course.monolab.world/snippets/record-webm)

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

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