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

Canvas Generative Art

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

Thiết kế · UITrung cấp★ 216⑂ 17Điểm AI 8/10Cập nhật lần cuối: 31 thg 7, 2026

Kỹ năng này làm được gì

  • Cung cấp cách thiết lập canvas theo DPR để nét trên màn hình Retina, kèm xử lý resize bằng ResizeObserver và vòng lặp requestAnimationFrame có giới hạn delta.
  • Mẫu particle pool (mảng cố định, không cấp phát trong runtime), flow field dựa trên noise, fBm, L-system + turtle graphics, và double buffer cho hiệu ứng vệt.
  • Bảng so sánh noise Perlin / Simplex / Worley để chọn đúng loại cho từng hiệu ứng.
  • Danh sách "Không được làm" giúp tránh các lỗi hiệu năng phổ biến (clearRect làm mất vệt, getImageData trong vòng lặp, cấp phát object trong hot loop).

Phù hợp với ai

  • Lập trình viên frontend làm hiệu ứng nền tương tác, hero animation cho website.
  • Người mới với creative coding nhưng muốn giữ 60fps ổn định.
  • Ai muốn dùng Canvas 2D thuần thay vì thư viện như p5.js.

Ví dụ sử dụng

  1. "Tạo nền 5.000 hạt chuyển động theo flow field từ noise" → sinh lưới góc, pool hạt và hiệu ứng vệt mờ dần.
  2. "Vẽ cây fractal cho trang landing" → thiết lập axiom, luật sinh, góc quay và mã vẽ turtle.
  3. "Canvas của tôi bị mờ trên Retina" → áp dụng scale theo devicePixelRatio và handler resize.

· · · 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.
  2. Tải mã nguồn: git clone https://github.com/AThevon/genjutsu.git
  3. Tạo thư mục kỹ năng: mkdir -p ~/.claude/skills
  4. Sao chép kỹ năng: cp -r genjutsu/skills/_jutsu/canvas-generative ~/.claude/skills/
  5. Kiểm tra các tệp phụ (references/) đã có: ls ~/.claude/skills/canvas-generative
  6. Khởi động lại Claude Code và thử yêu cầu: "làm animation flow field bằng Canvas".
Xem mã nguồn trên GitHub ↗Giấy phép: MIT