Chia Sẻ Khóa Học Tìm Hiểu HTML Canvas - Pixel, Particle & Physic [Khóa 5531 A]
Từ creative coding cơ bản đến nghệ thuật thuật toán nâng cao.
Những điều bạn sẽ học:
- ✓ Vẽ các hình dạng và hình ảnh.
- ✓ Tạo các particle system.
- ✓ Tìm hiểu web animation với vanilla JavaScript.
- ✓ Tạo animated generative art với code.
Học những kiến thức nền tảng về HTML canvas và khám phá cách phát triển, vẽ và animate visual & image với vanilla JavaScript. Không cần framework hay thư viện nào cả. Tôi sẽ giải thích tất cả các nguyên tắc và kỹ thuật khi chúng ta viết code từng dòng một.
HTML canvas element được sử dụng để vẽ đồ họa trên một trang web. Chúng ta có thể sử dụng nó như một art board và vẽ các đường thẳng, hình chữ nhật, hình tròn, hình ảnh, đường cong. Hôm nay, chúng ta sẽ tìm hiểu sâu về hình chữ nhật và hình ảnh, hãy để tôi cho bạn thấy chúng ta có thể làm được đến đâu. Hãy cùng đi sâu vào creative coding và khám phá những khả năng của front end web development hiện đại.
Chúng ta sẽ bắt đầu bằng cách vẽ một hình chữ nhật đơn giản và một hình ảnh trên canvas. Chúng ta sẽ học cách biến những hình chữ nhật cơ bản này thành một particle system và dạy cho chúng cách tạo hình và màu sắc của bất kỳ hình ảnh nào.
Hãy cùng biến những hình ảnh thành các animated pixel tương tác với physics (friction, easing). Chúng ta sẽ làm cho các pixel này phản ứng với chuột. Ngoài ra, chúng ta cũng sẽ học cách tách các hình ảnh thành các pixel riêng lẻ và tự động ghép chúng lại theo 4 cách độc đáo khác nhau.
Hãy cùng tôi khám phá những bí mật của creative coding. Từ những hình dạng đơn giản đến nghệ thuật thuật toán nâng cao, tất cả chỉ trong một buổi học. Chúc bạn học vui vẻ!
Mục lục:
1. Giới thiệu.
2. Slice & Dice Effect (Tùy chọn warm-up class):
- ✓ Control & animate image với code.
- ✓ HTML, CSS & JavaScript setup.
- ✓ Cách tổ chức mọi thứ thành dạng lưới.
- ✓ Cách draw, crop & slice image với code.
- ✓ Cách animate image với code.
- ✓ Tương tác chuột.
- ✓ Cách tìm khoảng cách giữa 2 điểm.
- ✓ Tìm đường đi từ điểm A đến điểm B.
- ✓ Motion physics formula (friction & easing).
- ✓ Di chuyển các cell xung quanh.
- ✓ Tối ưu hóa hiệu suất.
- ✓ Creative coding experiment.
3. Main Project: Particle Image:
- ✓ Setup Project.
- ✓ Chuyển đổi image thành code.
- ✓ Cách sử dụng canvas.
- ✓ JavaScript class & particle system.
- ✓ Vẽ hình chữ nhật.
- ✓ Vẽ hình ảnh.
- ✓ Vẽ các particle object.
- ✓ Effect class.
- ✓ Code clean-up.
- ✓ Multiple randomized particle.
- ✓ Draw image method.
- ✓ Cách căn giữa hình ảnh trên canvas.
- ✓ Particle motion.
- ✓ Pixel analysis.
- ✓ Tọa độ và màu sắc từ dữ liệu pixel.
- ✓ Biến đổi hình ảnh thành các particle system.
- ✓ Animated particle transition.
- ✓ Animation on button click.
- ✓ Tương tác giữa Mouse và Particle physics.
- ✓ Tạo các animated transition độc đáo.
- ✓ Particle assemble effect.
- ✓ Particle print effect.
Khóa học này dành cho ai:
Các Front end web developer muốn tìm hiểu thêm về creative coding với vanilla JavaScript.
NHẬN GET EBOOK TRÊN AMAZON THEO YÊU CẦU