Generative Art với Canvas

1) Canvas 2D: khởi tạo chuẩn DPI

Vấn đề thường gặp là ảnh mờ trên màn hình HiDPI. Quy ước: set kích thước vẽ theo devicePixelRatio rồi scale ngược để hiển thị đúng pixel vật lý.

function fitCanvas(cnv, width, height) {
  const dpr = Math.max(1, window.devicePixelRatio || 1);
  cnv.width = Math.floor(width * dpr);
  cnv.height = Math.floor(height * dpr);
  cnv.style.width = width + 'px';
  cnv.style.height = height + 'px';
  const ctx = cnv.getContext('2d');
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  return ctx;
}

2) PRNG có seed: tái lập tác phẩm

Để “chốt” được một phiên bản artwork và tái tạo đúng 100%, dùng PRNG có seed.

function mulberry32(seed) {
  let t = seed >>> 0;
  return function() {
    t += 0x6D2B79F5;
    let r = Math.imul(t ^ (t >>> 15), 1 | t);
    r ^= r + Math.imul(r ^ (r >>> 7), 61 | r);
    return ((r ^ (r >>> 14)) >>> 0) / 4294967296; // 0..1
  };
}

3) Vòng lặp vẽ/animation

Với sketch tĩnh, chỉ cần vẽ một lần. Với sketch động, gọi lại bằng requestAnimationFrame.

let running = true;
function loop() {
  if (!running) return;
  drawFrame(); // cập nhật trạng thái & vẽ
  requestAnimationFrame(loop);
}
loop();

4) Bảng màu & bố cục

• Chọn 1 nền + 3–5 màu nhấn. Tránh bão hòa tối đa ở tất cả màu, ảnh sẽ mệt mắt.
• Đổi palette theo seed để có bộ biến thể ổn định.

5) Xuất ảnh

Cách đơn giản: canvas.toDataURL() rồi tải về PNG/JPEG.

const url = canvas.toDataURL('image/png');
const a = Object.assign(document.createElement('a'), { href: url, download: 'art.png' });
a.click();

6) Hai công thức nhanh

• Flow Field Particles: sinh trường hướng từ noise, cho hạt chạy theo vector field, vẽ vệt mảnh.
• Subdivide Grid: chia lưới đệ quy theo seed, xoay/đổ bóng nhẹ để tạo chiều sâu, không animation.

Demo A

Flow Field Particles (hạt di chuyển theo trường vector, để lại vệt mảnh).

Demo B

Subdivide Grid (ô lưới phân chia ngẫu nhiên, xoay/đổ bóng tinh tế, không animation).

Mẹo nâng cấp

• Thêm query string ?seed=... để share tác phẩm đúng phiên bản.
• Thêm preset palette: “Muted”, “Vivid”, “Monochrome”.
• Thêm nút “Hi-Res Export”: vẽ lại ở độ phân giải gấp 2–4 lần rồi tải PNG lớn.

Kết luận

Generative art không cần framework nặng nề. Với Canvas 2D + vài công thức noise/đệ quy, bạn đã có nền tảng để sáng tạo vô hạn biến thể. Hai demo trên được đóng gói an toàn, chèn ở đâu chạy ở đó, không phá layout hay CSS của blog.