{/* Trang này được tạo tự động từ SKILL.md của kỹ năng bởi website/scripts/generate-skill-docs.py. Chỉnh sửa nguồn SKILL.md, không phải trang này. */}

P5J`bản phác thảo p5.js: gen art, shader, tương tác, 3D.

Siêu dữ liệu kỹ năng

Nguồn	Đi kèm (được cài đặt theo mặc định)
Đường dẫn

skills/creative/p5js ` | | Phiên bản |

1.0.0 ` | | Nền tảng | Linux, macOS, Windows | | Thẻ |

creative-coding

, `generative-art

, `p5js

, `canvas

, `interactive

, `visualization

, `webgl

, `shaders

, animation | | Kỹ năng liên quan | XPROTECTX24XPROTECTX, XPROTECTX25XPROTECTX, XPROTECTX26XPROTECTX |

Tham khảo: đầy đủ SKILL.md

thông tin

Sau đây là định nghĩa kỹ năng đầy đủ mà Hermes tải khi kỹ năng này được kích hoạt. Đây là những gì tác nhân coi là hướng dẫn khi kỹ năng được kích hoạt.

Đường ống sản xuất p5.js

Khi nào nên sử dụng

Sử dụng khi người dùng yêu cầu: bản phác thảo p5.js, mã hóa sáng tạo, nghệ thuật sáng tạo, trực quan hóa tương tác, hoạt ảnh canvas, nghệ thuật thị giác dựa trên trình duyệt, dữ liệu viz, hiệu ứng đổ bóng hoặc bất kỳ dự án p5.js nào.`##Có gì bên trong

Quy trình sản xuất nghệ thuật thị giác mang tính tương tác và sáng tạo bằng cách sử dụng p5.js. Tạo các bản phác thảo dựa trên trình duyệt, nghệ thuật sáng tạo, trực quan hóa dữ liệu, trải nghiệm tương tác, cảnh 3D, hình ảnh phản ứng âm thanh và đồ họa chuyển động - được xuất dưới dạng HTML, PNG, GIF, MP4 hoặc SVG. Bao gồm: Kết xuất 2D/3D, hệ thống nhiễu và hạt, trường dòng, trình đổ bóng (GLSL), thao tác pixel, kiểu chữ động, cảnh WebGL, phân tích âm thanh, tương tác chuột/bàn phím và xuất độ phân giải cao không đầu.

Tiêu chuẩn sáng tạo

Đây là nghệ thuật thị giác được hiển thị trong trình duyệt. Canvas là phương tiện; thuật toán là bàn chải.

Trước khi viết một dòng mã, hãy nêu rõ khái niệm sáng tạo. Phần này truyền đạt điều gì? Điều gì khiến người xem ngừng cuộn chuột? Điều gì khác biệt giữa ví dụ này với ví dụ hướng dẫn về mã? Lời nhắc của người dùng là điểm khởi đầu — diễn giải nó với tham vọng sáng tạo.

Sự xuất sắc của lần hiển thị đầu tiên là không thể thương lượng. Kết quả đầu ra phải nổi bật về mặt hình ảnh trong lần tải đầu tiên. Nếu nó trông giống như một bài tập hướng dẫn p5.js, một cấu hình mặc định hoặc "mã hóa sáng tạo do AI tạo" thì đó là sai. Hãy suy nghĩ lại trước khi vận chuyển.

Vượt xa từ vựng tham khảo. Các hàm nhiễu, hệ thống hạt, bảng màu và hiệu ứng đổ bóng trong tài liệu tham khảo là từ vựng khởi đầu. Đối với mọi dự án, hãy kết hợp, tạo lớp và phát minh. Danh mục là một bảng màu - bạn viết bức tranh.

Hãy chủ động sáng tạo. Nếu người dùng yêu cầu "hệ thống hạt", hãy cung cấp một hệ thống hạt có hành vi đổ xô nổi lên, tiếng vang ma kéo theo, sương mù độ sâu thay đổi bảng màu và trường tiếng ồn nền dễ thở. Bao gồm ít nhất một chi tiết hình ảnh mà người dùng không yêu cầu nhưng sẽ đánh giá cao.

Dày đặc, nhiều lớp, cân nhắc. Mọi khung hình đều đáng xem. Không bao giờ nền trắng phẳng. Luôn có hệ thống phân cấp thành phần. Luôn luôn có chủ ý màu sắc. Luôn có những chi tiết vi mô chỉ xuất hiện khi kiểm tra kỹ.

Tính thẩm mỹ gắn kết hơn là số lượng tính năng. Tất cả các yếu tố phải phục vụ một ngôn ngữ hình ảnh thống nhất — nhiệt độ màu được chia sẻ, từ vựng về trọng lượng nét vẽ nhất quán, tốc độ chuyển động hài hòa. Một bản phác thảo có mười hiệu ứng không liên quan thì còn tệ hơn một bản phác thảo có ba hiệu ứng thuộc về nhau.

Chế độ

Chế độ	Đầu vào	Đầu ra	Tham khảo
Nghệ thuật sáng tạo	Hạt giống/thông số	Bố cục hình ảnh theo quy trình (tĩnh hoặc hoạt hình)

references/visual-effects.md ` | | Trực quan hóa dữ liệu | Bộ dữ liệu/API | Biểu đồ tương tác, đồ thị, hiển thị dữ liệu tùy chỉnh |

references/interaction.md ` | | Trải nghiệm tương tác | Không có (ổ đĩa người dùng) | Chuột/bàn phím/bản phác thảo điều khiển bằng cảm ứng |

references/interaction.md ` | | Hoạt hình / đồ họa chuyển động | Dòng thời gian / bảng phân cảnh | Trình tự thời gian, kiểu chữ động, chuyển tiếp |

references/animation.md ` | | Cảnh 3D | Mô tả khái niệm | Hình học WebGL, ánh sáng, máy ảnh, vật liệu |

references/webgl-and-3d.md ` | | Xử lý hình ảnh | (Các) tệp hình ảnh | Thao tác pixel, bộ lọc, khảm, chủ nghĩa điểm ảnh |

references/visual-effects.md ` § Thao tác pixel | | Phản ứng âm thanh | Tệp âm thanh / mic | Hình ảnh sáng tạo dựa trên âm thanh |

references/interaction.md ` § Đầu vào âm thanh |

ngăn xếp

Một tệp HTML độc lập cho mỗi dự án. Không cần bước xây dựng.| Lớp | Công cụ | Mục đích | |-------|------|---------| | Cốt lõi | p5.js 1.11.3 (CDN) | Kết xuất canvas, toán học, biến đổi, xử lý sự kiện | | 3D | Chế độ WebGL p5.js | Hình học 3D, máy ảnh, ánh sáng, bộ đổ bóng GLSL | | Âm thanh | p5.sound.js (CDN) | Phân tích FFT, biên độ, đầu vào mic, bộ dao động | | Xuất khẩu | Tích hợp saveCanvas() / saveGif() / saveFrames() | PNG, GIF, đầu ra chuỗi khung | | Chụp | CCapture.js (tùy chọn) | Quay video tốc độ khung hình xác định (WebM, GIF) | | Không đầu | Người múa rối + Node.js (tùy chọn) | Tự động hiển thị độ phân giải cao, MP4 qua ffmpeg | | SVG | p5.js-svg 1.6.0 (tùy chọn) | Đầu ra vectơ để in - yêu cầu p5.js 1.x | | Phương tiện truyền thông tự nhiên | p5.brush (tùy chọn) | Màu nước, than, bút — yêu cầu p5.js 2.x + WEBGL | | Kết cấu | p5.grain (tùy chọn) | Hạt phim, lớp phủ kết cấu | | Phông chữ | Phông chữ của Google / loadFont() | Kiểu chữ tùy chỉnh qua OTF/TTF/WOFF2 |

Ghi chú phiên bản`p5.js 1.x (1.11.3) là mặc định — ổn định, có tài liệu đầy đủ, khả năng tương thích thư viện rộng nhất. Sử dụng điều này trừ khi dự án yêu cầu các tính năng 2.x.

p5.js 2.x (2.2+) bổ sung: async setup() thay thế `preload()

, chế độ màu OKLCH/OKLAB, `splineVertex()

, API đổ bóng

.modify()

, phông chữ biến đổi, `textToContours()

, sự kiện con trỏ. Cần thiết cho p5.brush. Xem references/core-API.md § p5.js 2.0.

Đường ống

Mọi dự án đều đi theo một lộ trình 6 giai đoạn giống nhau:

` CONCEPT → DESIGN → CODE → PREVIEW → EXPORT → VERIFY

`

1. Ý TƯỞNG — Trình bày rõ ràng tầm nhìn sáng tạo: tâm trạng, thế giới màu sắc, từ vựng chuyển động, điều làm nên sự độc đáo này
2. THIẾT KẾ — Chọn chế độ, kích thước canvas, mô hình tương tác, hệ màu, định dạng xuất. Ánh xạ khái niệm tới các quyết định kỹ thuật
3. CODE — Viết một tệp HTML duy nhất với p5.js nội tuyến. Cấu trúc: toàn cầu → preload() → setup() → draw() → người trợ giúp → lớp → trình xử lý sự kiện
4. PREVIEW — Mở trong trình duyệt, xác minh chất lượng hình ảnh. Kiểm tra độ phân giải mục tiêu. Kiểm tra hiệu suất
5. XUẤT KHẨU — Đầu ra chụp: saveCanvas() cho PNG, saveGif() cho GIF, `saveFrames()

• ffmpeg cho MP4, Puppeteer cho lô không đầu

6. XÁC MINH — Kết quả đầu ra có khớp với khái niệm không? Nó có nổi bật về mặt thị giác ở kích thước hiển thị dự định không? Bạn sẽ đóng khung nó?

Hướng sáng tạo

Kích thước thẩm mỹ

| Kích thước | Tùy chọn | Tham khảo | |----------||----------|----------| | Hệ màu | HSB/HSL, RGB, bảng màu được đặt tên, sự hài hòa về quy trình, nội suy độ dốc |

references/color-systems.md ` | | Từ vựng về tiếng ồn | Tiếng ồn Perlin, đơn giản, fractal (quãng tám), cong vênh miền, tiếng ồn cuộn tròn |

references/visual-effects.md ` § Tiếng ồn | | Hệ thống hạt | Dựa trên vật lý, đổ xô, vẽ đường mòn, điều khiển bởi lực hút, theo trường dòng chảy |

references/visual-effects.md ` § Hạt | | Ngôn ngữ hình dạng | Nguyên thủy hình học, đỉnh tùy chỉnh, đường cong bezier, đường dẫn SVG |

references/shapes-and-geometry.md ` | | Phong cách chuyển động | Dễ dàng, dựa trên lò xo, điều khiển tiếng ồn, sim vật lý, lerped, bước |

references/animation.md | | ** Kiểu chữ ** | Phông chữ hệ thống, đã tải OTF, văn bản hạt textToPoints()

, động học | references/typography.md | | Hiệu ứng đổ bóng | Đoạn/đỉnh GLSL, bộ lọc đổ bóng, xử lý hậu kỳ, vòng phản hồi |

references/webgl-and-3d.md ` § Trình tạo bóng | | Thành phần | Lưới, xuyên tâm, tỷ lệ vàng, quy tắc một phần ba, phân tán hữu cơ, lát gạch |

references/core-API.md ` § Thành phần | | Mô hình tương tác | Theo dõi bằng chuột, nhấp vào xuất hiện, kéo, trạng thái bàn phím, điều khiển cuộn, đầu vào mic |

references/interaction.md ` | | Chế độ hòa trộn |

BLEND

, `ADD

, `MULTIPLY

, `SCREEN

, `DIFFERENCE

, `EXCLUSION

, OVERLAY | references/color-systems.md § Chế độ hòa trộn | | Phân lớp | Bộ đệm ngoài màn hình `createGraphics()

, tổng hợp alpha, che giấu | references/core-API.md § Bộ đệm ngoài màn hình | | Kết cấu | Bề mặt Perlin, chấm, tạo nét, bán sắc, sắp xếp pixel |

references/visual-effects.md ` § Tạo kết cấu |

Quy tắc biến đổi cho mỗi dự ánKhông bao giờ sử dụng cấu hình mặc định. Đối với mỗi dự án:

• Bảng màu tùy chỉnh — không bao giờ là fill(255, 0, 0) thô. Luôn là bảng màu được thiết kế từ 3-7 màu
• Từ vựng về trọng lượng nét tùy chỉnh — dấu nhẹ (0,5), cấu trúc trung bình (1-2), nhấn đậm (3-5)
• Xử lý nền — không bao giờ đơn giản là background(0) hoặc `background(255)

. Luôn có kết cấu, chuyển màu hoặc xếp lớp

• Chuyển động đa dạng — tốc độ khác nhau cho các phần tử khác nhau. Chính ở 1x, thứ cấp ở 0,3x, xung quanh ở 0,1x
• Ít nhất một yếu tố được phát minh — hành vi hạt tùy chỉnh, ứng dụng tiếng ồn mới, phản hồi tương tác độc đáo

Phát minh dành riêng cho dự án

Đối với mỗi dự án, hãy phát minh ra ít nhất một trong số:

• Bảng màu tùy chỉnh phù hợp với tâm trạng (không phải cài đặt trước)
• Sự kết hợp trường nhiễu mới (ví dụ: nhiễu cuộn + cong vênh miền + phản hồi)
• Hành vi hạt độc đáo (lực lượng tùy chỉnh, đường mòn tùy chỉnh, sinh sản tùy chỉnh)
• Một cơ chế tương tác mà người dùng không yêu cầu nhưng điều đó đã nâng tầm sản phẩm
• Một kỹ thuật bố cục tạo ra hệ thống phân cấp thị giác

Triết lý thiết kế tham số

Các tham số sẽ xuất hiện từ thuật toán chứ không phải từ menu chung. Hỏi: "Những thuộc tính nào của hệ thống này có thể điều chỉnh được?"`Thông số tốt bộc lộ đặc tính của thuật toán:

• Số lượng — có bao nhiêu hạt, nhánh, tế bào (kiểm soát mật độ)
• Tỷ lệ — tần số nhiễu, kích thước phần tử, khoảng cách (điều khiển kết cấu)
• Tỷ lệ — tốc độ, tốc độ tăng trưởng, phân rã (kiểm soát năng lượng)
• Ngưỡng — khi nào hành vi thay đổi? (điều khiển kịch)
• Tỷ lệ — tỷ lệ, sự cân bằng giữa các lực (điều khiển sự hài hòa)

Tham số sai là các điều khiển chung không liên quan đến thuật toán:

• "color1", "color2", "size" — vô nghĩa nếu không có ngữ cảnh
• Chuyển đổi công tắc cho các hiệu ứng không liên quan
• Thông số chỉ thay đổi mỹ phẩm chứ không thay đổi hành vi

Mọi tham số sẽ thay đổi cách thuật toán nghĩ, chứ không chỉ là hình thức của thuật toán. Thông số "nhiễu loạn" thay đổi quãng tám tiếng ồn là tốt. Thanh trượt "kích thước hạt" chỉ thay đổi bán kính ellipse() là nông.

Quy trình làm việc

Bước 1: Tầm nhìn sáng tạo

Trước bất kỳ đoạn mã nào, hãy nói rõ:

• Tâm trạng / bầu không khí: Người xem nên cảm thấy gì? Suy ngẫm? Có năng lượng? Bất ổn? Vui tươi?
• Câu chuyện trực quan: Điều gì xảy ra theo thời gian (hoặc khi tương tác)? Xây dựng? Suy tàn? Biến đổi? Dao động?
• Thế giới màu sắc: Ấm áp/mát mẻ? Đơn sắc? Bổ sung? Màu sắc chủ đạo là gì? Giọng điệu?
• Ngôn ngữ hình dạng: Những đường cong tự nhiên? Hình học sắc nét? Dấu chấm? Dòng? Hỗn hợp?
• Từ vựng về chuyển động: Trôi chậm? Vụ nổ à? Nhịp thở? Độ chính xác cơ học?
• Điều gì làm cho ĐIỀU NÀY trở nên khác biệt: Điều gì làm cho bản phác thảo này trở nên độc đáo?

Ánh xạ lời nhắc của người dùng tới các lựa chọn mang tính thẩm mỹ. "Nền tảng tạo thư giãn" yêu cầu mọi thứ khác với "trực quan hóa dữ liệu trục trặc".

Bước 2: Thiết kế kỹ thuật

• Chế độ — chế độ nào trong 7 chế độ ở bảng trên
• Kích thước canvas — ngang 1920x1080, dọc 1080x1920, vuông 1080x1080 hoặc windowWidth/windowHeight đáp ứng
• Trình kết xuất — P2D (mặc định) hoặc WEBGL (dành cho 3D, trình đổ bóng, chế độ hòa trộn nâng cao)
• Tốc độ khung hình — 60 khung hình/giây (tương tác), 30 khung hình/giây (hoạt ảnh xung quanh) hoặc noLoop() (tạo tĩnh)
• Xuất mục tiêu — hiển thị trình duyệt, ảnh tĩnh PNG, vòng lặp GIF, video MP4, vectơ SVG
• Mô hình tương tác — thụ động (không có đầu vào), điều khiển bằng chuột, điều khiển bằng bàn phím, phản ứng bằng âm thanh, điều khiển cuộn
• Giao diện người dùng của người xem — đối với nghệ thuật sáng tạo tương tác, hãy bắt đầu từ `templates/viewer.html

, nơi cung cấp điều hướng hạt giống, thanh trượt tham số và tải xuống. Đối với các bản phác thảo hoặc xuất video đơn giản, hãy sử dụng HTML đơn giản

Bước 3: Code Sketch

Đối với nghệ thuật sáng tạo tương tác (khám phá hạt giống, điều chỉnh tham số): bắt đầu từ `templates/viewer.html

. Đọc mẫu trước, giữ lại các phần cố định (điều hướng hạt giống, hành động), thay thế các điều khiển thuật toán và tham số. Điều này cung cấp cho người dùng hạt giống trước/tiếp theo/ngẫu nhiên/nhảy, các thanh trượt tham số có cập nhật trực tiếp và tải xuống PNG - tất cả đều được kết nối.

Đối với hoạt ảnh, xuất video hoặc bản phác thảo đơn giản: sử dụng HTML đơn giản:

Tệp HTML duy nhất. Cấu trúc:

<!DOCTYPE html>
<html lang="en"
<head
  <meta charset="UTF-8"
  <meta name="viewport" content="width=device-width, initial-scale=1.0"
  <titleProject Name</title
  <scriptp5.disableFriendlyErrors = true;</script
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.min.js"</script
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/addons/p5.sound.min.js"</script -->
  <!-- <script src="https://unpkg.com/p5.js-svg@1.6.0"</script -->  <!-- SVG export -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/ccapture.js-npmfixed/build/CCapture.all.min.js"</script -->  <!-- video capture -->
  <style
    html, body { margin: 0; padding: 0; overflow: hidden; }
    canvas { display: block; }
  </style
</head
<body
<script
// === Configuration ===
const CONFIG = {
  seed: 42,
  // ... project-specific params
};`// === Color Palette ===
const PALETTE = {
  bg: '#0a0a0f',
  primary: '#e8d5b7',
  // ...
};`// === Global State ===
let particles = [];`// === Preload (fonts, images, data) ===
function preload() {
  // font = loadFont('...');
}`// === Setup ===
function setup() {
  createCanvas(1920, 1080);
  randomSeed(CONFIG.seed);
  noiseSeed(CONFIG.seed);
  colorMode(HSB, 360, 100, 100, 100);
  // Initialize state...
}`// === Draw Loop ===
function draw() {
  // Render frame...
}`// === Helper Functions ===
// ...`// === Classes ===
class Particle {
  // ...
}`// === Event Handlers ===
function mousePressed() { /* ... */ }
function keyPressed() { /* ... */ }
function windowResiZed() { resizeCanvas(windowWidth, windowHeight); }
</script
</body
</html

`
`Các mẫu triển khai chính:

- **Sự ngẫu nhiên được gieo mầm**: Luôn 
`randomSeed()

 + 
`noiseSeed()
` để có khả năng tái sản xuất
- **Chế độ màu**: Sử dụng 
`colorMode(HSB, 360, 100, 100, 100)
` để kiểm soát màu sắc trực quan
- **Tách trạng thái**: CONFIG cho tham số, PALETTE cho màu sắc, toàn cục cho trạng thái có thể thay đổi
- **Các thực thể dựa trên lớp**: Các hạt, tác nhân, hình dạng dưới dạng các lớp với các phương thức 
`update()

 + 
`display()

- **Bộ đệm ngoài màn hình**: 
`createGraphics()
` dành cho bố cục lớp, vệt, mặt nạ

### Bước 4: Xem trước & Lặp lại
- Mở tệp HTML trực tiếp trong trình duyệt - không cần máy chủ cho các bản phác thảo cơ bản
- Đối với 
`loadImage()

/
`loadFont()
` từ các tệp cục bộ: sử dụng 
`scripts/serve.sh
` hoặc 
`Python3 -m http.server

- Tab Chrome DevTools Performance để xác minh 60fps
- Kiểm tra độ phân giải xuất mục tiêu, không chỉ kích thước cửa sổ
- Điều chỉnh các thông số cho đến khi hình ảnh phù hợp với concept ở Bước 1

### Bước 5: Xuất

| Định dạng | Phương pháp | Lệnh |
|--------|--------|---------|
| **PNG** |

saveCanvas('output', 'png')
` trong 
`keyPressed()
` | Nhấn 's' để lưu |
| ** PNG độ phân giải cao** | Bắt rối không đầu |

node scripts/export-frames.js sketch.html --width 3840 --height 2160 --frames 1
` |
| **GIF** |

saveGif('output', 5)

 - chụp N giây | Nhấn 'g' để lưu |
| **Chuỗi khung** |

saveFrames('frame', 'png', 10, 30)
` — 10 giây ở tốc độ 30 khung hình/giây | Sau đó 
`ffmpeg -i frame-%04d.png -c:v libx264 output.mp4
` |
| **MP4** | Chụp khung hình con rối + ffmpeg |

bash scripts/render.sh sketch.html output.mp4 --duration 30 --fps 30
` |
| **SVG** |

createCanvas(w, h, SVG)
` với p5.js-svg | 
`save('output.svg')
` |

### Bước 6: Kiểm tra chất lượng
- **Nó có phù hợp với tầm nhìn không?** So sánh kết quả đầu ra với ý tưởng sáng tạo. Nếu nó trông chung chung, hãy quay lại Bước 1
- **Kiểm tra độ phân giải**: Nó có sắc nét ở kích thước hiển thị mục tiêu không? Không có tạo tác răng cưa?
- **Kiểm tra hiệu suất**: Trình duyệt có giữ được tốc độ 60 khung hình/giây không? (Tối thiểu 30 khung hình/giây cho hoạt ảnh)
- **Kiểm tra màu**: Các màu có phối hợp với nhau không? Test trên cả màn hình sáng và tối
- **Trường hợp cạnh**: Điều gì xảy ra ở các cạnh canvas? Về thay đổi kích thước? Sau khi chạy được 10 phút?

## Ghi chú triển khai quan trọng

### Hiệu suất — Tắt FES trước

Hệ thống lỗi thân thiện (FES) tăng thêm chi phí gấp 10 lần. Vô hiệu hóa nó trong mọi bản phác thảo sản xuất:

`JavaScript
p5.disableFriendlyErrors = true;  // BEFORE setup()

function setup() {
  pixelDensity(1);  // prevent 2x-4x overdraw on retina
  createCanvas(1920, 1080);
}

`
``Trong các vòng lặp nóng (hạt, pixel op), hãy sử dụng 
`Math.*
` thay vì trình bao bọc p5 - nhanh hơn đáng kể:

`JavaScript
// In draw() or update() hot paths:
let a = Math.sin(t);          // not sin(t)
let r = Math.sqrt(dx*dx+dy*dy); // not dist() — or better: skip sqrt, compare magSq
let v = Math.random();        // not random() — when seed not needed
let m = Math.min(a, b);       // not min(a, b)

`
``Không bao giờ 
`console.log()
` bên trong 
`draw()

. Không bao giờ thao tác DOM trong 
`draw()

. Xem 
`references/troubleshooting.md
` § Hiệu suất.

### Tính ngẫu nhiên được gieo mầm — Luôn luôn

Mỗi bản phác thảo tổng quát phải có thể tái tạo được. Cùng một hạt giống, cùng một đầu ra.

`JavaScript
function setup() {
  randomSeed(CONFIG.seed);
  noiseSeed(CONFIG.seed);
  // All random() and noise() calls now deterministic
}

`
``Không bao giờ sử dụng 
`Math.random()
` cho nội dung tổng quát - chỉ dành cho mã không trực quan quan trọng về hiệu suất. Luôn 
`random()
` cho các yếu tố hình ảnh. Nếu bạn cần một hạt giống ngẫu nhiên: 
`CONFIG.seed = floor(random(99999))

.

### Hỗ trợ nền tảng nghệ thuật sáng tạo (fxhash / Art Blocks)

Đối với các nền tảng nghệ thuật tổng quát, hãy thay thế PRNG của p5 bằng ngẫu nhiên xác định của nền tảng:

`JavaScript
// fxhash convention
const SEED = $fx.hash;              // unique per mint
const rng = $fx.rand;               // deterministic PRNG
$fx.features({ palette: 'warm', complexity: 'high' });`// In setup():
randomSeed(SEED);   // for p5's noise()
noiseSeed(SEED);`// Replace random() with rng() for platform determinism
let x = rng() * width;  // instead of random(width)

`
``Xem 
`references/export-pipeline.md
` § Xuất nền tảng.

### Chế độ màu — Sử dụng HSB

HSB (Hue, Saturation, Brightness) dễ làm việc hơn nhiều so với RGB cho nghệ thuật sáng tạo:

`JavaScript
colorMode(HSB, 360, 100, 100, 100);
// Now: fill(hue, sat, bri, alpha)
// Rotate hue: fill((baseHue + offset) % 360, 80, 90)
// Desaturate: fill(hue, sat * 0.3, bri)
// Darken: fill(hue, sat, bri * 0.5)

`
``Không bao giờ mã hóa cứng các giá trị RGB thô. Xác định một đối tượng bảng màu, rút ​​ra các biến thể theo thủ tục. Xem 
`references/color-systems.md

.

### Tiếng ồn — Nhiều quãng tám, không phải thô``noise(x, y)
` thô trông giống như những đốm màu mịn. Lớp quãng tám cho kết cấu tự nhiên:

`JavaScript
function fbm(x, y, octaves = 4) {
  let val = 0, amp = 1, freq = 1, sum = 0;
  for (let i = 0; i < octaves; i++) {
    val += noise(x * freq, y * freq) * amp;
    sum += amp;
    amp *= 0.5;
    freq *= 2;
  }
  return val / sum;
}

`
``Đối với các dạng hữu cơ chảy, hãy sử dụng **cong vênh miền**: cung cấp đầu ra tiếng ồn trở lại dưới dạng tọa độ đầu vào tiếng ồn. Xem 
`references/visual-effects.md

.

### createGraphics() cho Lớp — Không bắt buộc

Kết xuất một lượt phẳng trông phẳng. Sử dụng bộ đệm ngoài màn hình để sáng tác:

`JavaScript
let bgLayer, fgLayer, trailLayer;
function setup() {
  createCanvas(1920, 1080);
  bgLayer = createGraphics(width, height);
  fgLayer = createGraphics(width, height);
  trailLayer = createGraphics(width, height);
}
function draw() {
  renderBackground(bgLayer);
  renderTrails(trailLayer);   // persistent, fading
  renderForeground(fgLayer);  // cleared each frame
  image(bgLayer, 0, 0);
  image(trailLayer, 0, 0);
  image(fgLayer, 0, 0);
}

`

### Hiệu suất — Vector hóa khi có thể

Lệnh rút thăm p5.js rất tốn kém. Đối với hàng ngàn hạt:

`JavaScript
// SLOW: individual shapes
for (let p of particles) {
  ellipse(p.x, p.y, p.size);
}`// FAST: single shape with beginShape()
beginShape(POINTS);
for (let p of particles) {
  vertex(p.x, p.y);
}
endShape();`// FASTEST: pixel buffer for massive counts
loadPixels();
for (let p of particles) {
  let idx = 4 * (floor(p.y) * width + floor(p.x));
  pixels[idx] = r; pixels[idx+1] = g; pixels[idx+2] = b; pixels[idx+3] = 255;
}
updatePixels();

`
``Xem 
`references/troubleshooting.md
` § Hiệu suất.

### Chế độ sơ thẩm cho nhiều bản phác thảo

Chế độ toàn cầu gây ô nhiễm 
`window

. Để sản xuất, hãy sử dụng chế độ phiên bản:

`JavaScript
const sketch = (p) => {
  p.setup = function() {
    p.createCanvas(800, 800);
  };
  p.draw = function() {
    p.background(0);
    p.ellipse(p.mouseX, p.mouseY, 50);
  };
};
new p5(sketch, 'canvas-container');

`
``Cần thiết khi nhúng nhiều bản phác thảo trên một trang hoặc tích hợp với các khung.

### Vấn đề về chế độ WebGL
- 
`createCanvas(w, h, WEBGL)
` — gốc ở giữa, không phải trên cùng bên trái
- Trục Y bị đảo ngược (Y dương tăng lên trong WEBGL, giảm trong P2D)
- 
`translate(-width/2, -height/2)
` để có tọa độ giống P2D
- 
`push()

/
`pop()
` xung quanh mọi biến đổi - ngăn xếp ma trận tràn âm thầm
- 
`texture()
` trước 
`rect()

/
`plane()
` — không sau
- Trình đổ bóng tùy chỉnh: 
`createShader(vert, frag)

 - thử nghiệm trên nhiều trình duyệt### Xuất — Quy ước ràng buộc chính

Mọi bản phác thảo phải bao gồm những thứ này trong 
`keyPressed()

:

`JavaScript
function keyPressed() {
  if (key === 's' || key === 'S') saveCanvas('output', 'png');
  if (key === 'g' || key === 'G') saveGif('output', 5);
  if (key === 'r' || key === 'R') { randomSeed(millis()); noiseSeed(millis()); }
  if (key === ' ') CONFIG.paused = !CONFIG.paused;
}

`

### Xuất video không đầu — Sử dụng noLoop()

Để hiển thị không đầu thông qua Puppeteer, bản phác thảo **phải** sử dụng 
`noLoop()
` trong quá trình thiết lập. Nếu không có nó, vòng vẽ của p5 sẽ chạy tự do trong khi ảnh chụp màn hình chậm — bản phác thảo chạy nhanh về phía trước và bạn sẽ bị bỏ qua/các khung hình trùng lặp.

`JavaScript
function setup() {
  createCanvas(1920, 1080);
  pixelDensity(1);
  noLoop();                    // capture script controls frame advance
  window._p5Ready = true;      // Signal readiness to capture script
}

`
```scripts/export-frames.js
` đi kèm sẽ phát hiện 
`_p5Ready
` và gọi 
`redraw()
` một lần mỗi lần chụp để có tỷ lệ tương ứng khung hình 1:1 chính xác. Xem 
`references/export-pipeline.md
` § Chụp xác định.

Đối với video nhiều cảnh, hãy sử dụng cấu trúc mỗi CLIp: một HTML cho mỗi cảnh, hiển thị độc lập, ghép bằng 
`ffmpeg -f concat

. Xem 
`references/export-pipeline.md
` § Kiến trúc trên mỗi CLIp.

### Quy trình làm việc của đại lý

Khi xây dựng bản phác thảo p5.js:
1. **Viết tệp HTML** — một tệp độc lập, tất cả mã nội tuyến
2. **Mở trong trình duyệt** — 
`open sketch.html
` (macOS) hoặc 
`xdg-open sketch.html
` (Linux)
3. **Nội dung cục bộ** (phông chữ, hình ảnh) yêu cầu máy chủ: 
`Python3 -m http.server 8080
` trong thư mục dự án, sau đó mở 
`http://localhost:8080/sketch.html

4. **Xuất PNG/GIF** — thêm phím tắt 
`keyPressed()
` như minh họa ở trên, cho người dùng biết phím nào cần nhấn
5. **Xuất không đầu** — 
`node scripts/export-frames.js sketch.html --frames 300
` để chụp khung tự động (bản phác thảo phải sử dụng 
`noLoop()

 + 
`_p5Ready

)
6. **Kết xuất MP4** — 
`bash scripts/render.sh sketch.html output.mp4 --duration 30

7. **Sàng lọc lặp lại** — chỉnh sửa tệp HTML, người dùng làm mới trình duyệt để xem các thay đổi
8. **Tải tài liệu tham khảo theo yêu cầu** — sử dụng 
`skill_view(name="p5js", file_path="references/...")
` để tải các tệp tham chiếu cụ thể nếu cần trong quá trình triển khai

## Mục tiêu hiệu suất

| Số liệu | Mục tiêu |
|--------|--------|
| Tốc độ khung hình (tương tác) | duy trì 60 khung hình/giây |
| Tốc độ khung hình (xuất hoạt hình) | tối thiểu 30 khung hình/giây |
| Số lượng hạt (hình dạng P2D) | 5.000-10.000 ở tốc độ 60 khung hình/giây |
| Số hạt (bộ đệm pixel) | 50.000-100.000 ở tốc độ 60 khung hình/giây |
| Độ phân giải vải | Lên tới 3840x2160 (xuất), 1920x1080 (tương tác) |
| Kích thước tệp (HTML) | < 100KB (không bao gồm thư viện CDN) |
| Thời gian tải | < 2 giây tới khung hình đầu tiên |

## Tài liệu tham khảo

| Tập tin | Nội dung |
|------|----------|
| 
`references/core-API.md
` | Thiết lập canvas, hệ tọa độ, vòng vẽ, 
`push()

/
`pop()

, bộ đệm ngoài màn hình, mẫu bố cục, 
`pixelDensity()

, thiết kế đáp ứng |
| 
`references/shapes-and-geometry.md
` | 2D nguyên thủy, 
`beginShape()

/
`endShape()

, đường cong Bezier/Catmull-Rom, hệ thống 
`vertex()

, hình dạng tùy chỉnh, 
`p5.Vector

, trường khoảng cách đã ký, chuyển đổi đường dẫn SVG |
| 
`references/visual-effects.md
` | Nhiễu (Perlin, fractal, cong vênh miền, cuộn tròn), trường dòng chảy, hệ thống hạt (vật lý, đổ xô, vệt), thao tác pixel, tạo kết cấu (điểm, nét, bán sắc), vòng phản hồi, khuếch tán phản ứng |
| 
`references/animation.md
` | Hoạt ảnh dựa trên khung, chức năng giảm bớt, 
`lerp()

/
`map()

, vật lý lò xo, máy trạng thái, trình tự dòng thời gian, thời gian dựa trên 
`millis()

, mẫu chuyển tiếp |
| 
`references/typography.md
` | 
`text()

, 
`loadFont()

, 
`textToPoints()

, kiểu chữ động, mặt nạ văn bản, số liệu phông chữ, định cỡ văn bản đáp ứng |
| 
`references/color-systems.md
` | 
`colorMode()

, HSB/HSL/RGB, 
`lerpColor()

, 
`paletteLerp()

, bảng màu theo quy trình, hài hòa màu sắc, 
`blendMode()

, kết xuất độ dốc, thư viện bảng màu được tuyển chọn |
| 
`references/webgl-and-3d.md
` | Trình kết xuất WEBGL, nguyên mẫu 3D, máy ảnh, ánh sáng, vật liệu, hình học tùy chỉnh, bộ đổ bóng GLSL (
`createShader()

, 
`createFilterShader()

), bộ đệm khung, xử lý hậu kỳ |
| 
`references/interaction.md
` | Sự kiện chuột, trạng thái bàn phím, đầu vào cảm ứng, thành phần DOM, 
`createSlider()

/
`createButton()

, đầu vào âm thanh (p5.sound FFT/biên độ), hoạt ảnh điều khiển cuộn, sự kiện phản hồi |
| 
`references/export-pipeline.md
` | 
`saveCanvas()

, 
`saveGif()

, 
`saveFrames()

, chụp không đầu xác định, chuyển khung hình thành video ffmpeg, CCapture.js, xuất SVG, kiến ​​trúc trên mỗi CLIp, xuất nền tảng (fxhash), vấn đề video |
| 
`references/troubleshooting.md
` | Hồ sơ hiệu suất, ngân sách trên mỗi pixel, các lỗi phổ biến, khả năng tương thích của trình duyệt, gỡ lỗi WebGL, sự cố tải phông chữ, bẫy mật độ pixel, rò rỉ bộ nhớ, CORS |
| 
`templates/viewer.html
` | Mẫu trình xem tương tác: điều hướng hạt giống (trước/tiếp theo/ngẫu nhiên/nhảy), thanh trượt tham số, tải xuống PNG, canvas đáp ứng. Bắt đầu từ đây để có được nghệ thuật sáng tạo có thể khám phá |

---## Phân kỳ sáng tạo (chỉ sử dụng khi người dùng yêu cầu đầu ra thử nghiệm/sáng tạo/độc nhất)

Nếu người dùng yêu cầu kết quả sáng tạo, mang tính thử nghiệm, gây ngạc nhiên hoặc độc đáo, hãy chọn chiến lược phù hợp nhất và lý giải qua các bước TRƯỚC KHI tạo mã.
- **Pha trộn khái niệm** — khi người dùng nêu tên hai thứ để kết hợp hoặc muốn có tính thẩm mỹ kết hợp
- **SCAMPER** — khi người dùng muốn thay đổi một mẫu nghệ thuật sáng tạo đã biết
- **Hiệp hội khoảng cách** — khi người dùng đưa ra một khái niệm duy nhất và muốn khám phá ("làm điều gì đó về thời gian")

### Pha trộn khái niệm
1. Kể tên hai hệ thống thị giác riêng biệt (ví dụ: vật lý hạt + chữ viết tay)
2. Sự tương ứng của bản đồ (hạt = giọt mực, lực = áp lực bút, trường = dạng chữ)
3. Pha trộn có chọn lọc — giữ các ánh xạ tạo ra hình ảnh nổi bật thú vị
4. Viết mã hỗn hợp như một hệ thống thống nhất, không phải hai hệ thống cạnh nhau

### Chuyển đổi LỪA ĐẢO
Lấy một mô hình sinh học đã biết (trường dòng chảy, hệ thống hạt, hệ thống L, máy tự động di động) và biến đổi nó một cách có hệ thống:
- **Thay thế**: thay thế vòng tròn bằng ký tự văn bản, dòng bằng độ dốc
- **Kết hợp**: hợp nhất hai mẫu (trường dòng chảy + voronoi)
- **Thích ứng**: áp dụng mẫu 2D cho hình chiếu 3D
- **Sửa đổi**: phóng đại tỷ lệ, làm cong không gian tọa độ
- **Mục đích**: sử dụng mô phỏng vật lý cho kiểu chữ, thuật toán sắp xếp màu sắc
- **Loại bỏ**: loại bỏ lưới, loại bỏ màu sắc, loại bỏ tính đối xứng
- **Reverse**: chạy mô phỏng lùi, đảo ngược không gian tham số

### Hiệp hội khoảng cách
1. Bám sát khái niệm của người dùng (ví dụ: "sự cô đơn")
2. Tạo liên kết ở ba khoảng cách:
   - Đóng (rõ ràng): phòng trống, bóng người lẻ loi, im lặng
   - Trung bình (thú vị): một con cá trong trường bơi sai hướng, điện thoại không có thông báo, khoảng cách giữa các toa tàu điện ngầm
   - Xa (trừu tượng): số nguyên tố, đường cong tiệm cận, màu sắc của 3 giờ sáng
3. Phát triển các liên tưởng ở khoảng cách trung bình - chúng đủ cụ thể để hình dung nhưng đủ bất ngờ để trở nên thú vị