Claude Skill MartKhám phá skillCâu dùng ngayHọc qua videoDùng terminalSkill là gì?
 
← Về danh sách

Nghệ thuật sinh tạo với Canvas

Bộ quy tắc và mã mẫu để tạo nghệ thuật sinh tạo bằng Canvas 2D: particle, flow field, noise, fractal, L-system với hiệu năng tốt.

Lập trìnhTrung cấp★ 382⑂ 28Điểm AI 8/10Cập nhật lần cuối: 25 thg 9, 2026

Làm được gì

  • Thiết lập Canvas 2D chuẩn: khởi tạo canvas sắc nét theo devicePixelRatio, xử lý resize bằng ResizeObserver, vòng lặp requestAnimationFrame có giới hạn delta time.
  • Chọn loại noise: bảng so sánh Perlin / Simplex / Worley kèm quy tắc thực tế (chia tỉ lệ toạ độ, cộng octave theo fBm, cố định seed để tái lập).
  • Hệ particle: mẫu pool cấp phát trước, xoá phần tử bằng swap để tránh áp lực GC.
  • Flow field & L-system: xây lưới góc từ noise rồi điều hướng particle; viết lại chuỗi + turtle graphics để vẽ fractal.
  • Những điều không nên làm: clearRect mỗi khung khi cần hiệu ứng vết, gọi getImageData trong vòng lặp, bỏ qua DPR, cấp phát đối tượng trong hot loop — kèm ví dụ BAD/GOOD.

Phù hợp với ai

  • Lập trình viên frontend muốn làm creative coding, hiệu ứng nền tương tác.
  • Designer kiêm code muốn thêm artwork động vào landing page.
  • Người đang bị tụt FPS khi render hàng nghìn particle.

Ví dụ sử dụng

  1. "Tạo nền landing page với 5000 particle chảy theo flow field" → sinh code pool + lưới góc noise + hiệu ứng vết mờ dần.
  2. "Canvas bị mờ trên màn Retina, sửa giúp" → áp dụng setupCanvas có DPR và tách kích thước CSS.
  3. "Vẽ cây fractal bằng L-system và cho điều chỉnh số vòng lặp" → dựng axiom/rules/angle và bộ render turtle graphics.

· · · Hướng dẫn cài đặt · · ·

Dùng thử ngay, không cần cài

Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.

Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình:
https://raw.githubusercontent.com/AThevon/genjutsu/HEAD/skills/_jutsu/canvas-generative/SKILL.md

Mình muốn: (viết việc bạn cần ở đây)

Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.

↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.

Cài vào ứng dụng Claude (không cần terminal)
  1. Tải tệp ZIP bằng nút bên dưới.
  2. Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
  3. Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
↓ Tải ZIP
Cài vào Claude Code

Để Claude làm — dán câu dưới đây vào Claude Code

Hãy cài skill mình tìm thấy trên Claude Skill Mart.
Copy thư mục skills/_jutsu/canvas-generative từ repo GitHub AThevon/genjutsu vào ~/.claude/skills/canvas-generative/ của mình.
Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.

Cài bằng lệnh thủ công

git clone https://github.com/AThevon/genjutsu.git /tmp/genjutsu && mkdir -p ~/.claude/skills && cp -r /tmp/genjutsu/skills/_jutsu/canvas-generative ~/.claude/skills/

⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.

  1. Mở terminal và clone repo: git clone https://github.com/AThevon/genjutsu.git
  2. Tạo thư mục skill: mkdir -p ~/.claude/skills
  3. Copy toàn bộ thư mục skill (gồm cả tệp tham chiếu): cp -r genjutsu/skills/_jutsu/canvas-generative ~/.claude/skills/
  4. Nếu muốn dùng cả các tệp liên quan (_jutsu/VERSIONS.md, motion-principles, threejs-r3f), copy cả thư mục cha: cp -r genjutsu/skills/_jutsu ~/.claude/skills/
  5. Khởi động lại Claude Code và kiểm tra canvas-generative có trong danh sách skill.
  6. Thử yêu cầu: "Làm nền particle flow field bằng Canvas" để skill được kích hoạt.
Xem mã nguồn trên GitHub ↗Giấy phép: NOASSERTION