Code Art: Learn Creative Coding to Generate Visuals with JS

Nghệ thuật Lập trình: Học Lập trình Sáng tạo để Tạo Hình ảnh bằng JS

Tìm hiểu nguyên lý cơ bản của nghệ thuật sinh sôi và khám phá cách phát triển, vẽ và làm hoạt hình hình ảnh với HTML và Javascript

4.4

(255 đánh giá)

3,682 học viên

Giảng viên

Yeti Learn

Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao

50.000đ 919.000đ -95%

✓ Xem giỏ hàng và thanh toán

Bao gồm phụ đề tiếng Việt, tiếng Anh

5.0 giờ video

78 bài giảng

Truy cập vĩnh viễn

Học trên mọi thiết bị

Cập nhật: 30/05/2026

#Canvas #Creative Coding #Javascript #Three Js

Bạn sẽ học được gì

Nghệ thuật Lập trình, Lập trình Sáng tạo, Nghệ thuật Sinh sôi

Tạo Hình ảnh bằng Mã lệnh

Học cách vẽ bằng mã lệnh

Hoạt hình bằng Javascript

HTML5 Canvas và CTX

Hiệu ứng Hạt với Vanilla JS

Thư viện canvas-sketch

ThreeJS

Tạo Bộ hiển thị Âm thanh

Yêu cầu

Kỹ năng Toán học Cơ bản

Trình soạn thảo Mã

Trình duyệt

Có kinh nghiệm lập trình là một lợi thế

Đối tượng phù hợp

Khóa học này dành cho cả nhà phát triển và nhà thiết kế muốn vẽ bằng mã lệnh.

Nội dung khóa học

7 phần • 78 bài giảng

1 Trước khi Bắt đầu

2 Tạo Tệp Dự án

3 HTML5 Canvas

4 Tạo Canvas và CTX

5 Vẽ một Hình chữ nhật

6 Live Server là gì?

7 Bộ lắng nghe Sự kiện trong JS

8 Thực hành Bộ lắng nghe Sự kiện

9 Hình cung (Arc)

10 Lưu ý (Tốc độ Video)

11 Tạo ra các Nguyên tử

12 Phá hủy và Làm mờ

13 Tạo Hiệu ứng Bầu trời Sao Đẹp mắt

14 Chuyển động Tùy chỉnh của Hạt (Parabolic)

15 Thử thách Tam giác Sierpiński

1 Hiệu ứng Mưa Pixel là gì?

2 Thiết lập Dự án

3 Lấy Dữ liệu Hình ảnh trong JS

4 Tạo Lớp Particle

5 Ánh xạ từ 2 Chiều sang 1 Chiều

6 Áp dụng Công thức Ánh xạ

7 Hàm Vẽ

8 Hoàn thiện Hiệu ứng

9 Thêm Màu RGB

1 Giới thiệu

2 Node và NPM

3 Cài đặt canvas-sketch

4 canvas-sketch là gì?

5 Thực hành Vẽ Hình chữ nhật

6 Dịch chuyển Canvas

7 Xoay Canvas

8 Lưu và Khôi phục

9 Tính Ngẫu nhiên

10 Hoạt hình Nảy

11 Lớp Circle

12 Tạo ra các Hình tròn

13 Làm hoạt hình các Hình tròn

14 Làm các Hình tròn Nảy

15 Khoảng cách Euclid

16 Vẽ các Đường thẳng

17 Lấy Khoảng cách giữa Hai Điểm

18 Độ rộng Đường thẳng Linh hoạt

1 Giới thiệu

2 Thiết lập cho Bộ hiển thị Âm thanh

3 Mẫu HTML

4 Hoàn thiện HTML

5 microphone.js

6 Lấy Dữ liệu Microphone

7 Lớp Ball

8 Tạo ra các Quả bóng

9 Các Quả bóng Rơi

10 Các Quả bóng Nhảy

11 Đầu vào Âm thanh

1 Bắt đầu

2 Thiết lập

3 Tạo các Hình

4 Chuyển động Tròn

5 Thay đổi Kích thước với Đầu vào Microphone

6 Phát Nhạc

7 Dịch chuyển Tức thời

1 three.js là gì?

2 Các Trường hợp Sử dụng của three.js

3 Cài đặt three.js

4 Mở Dự án

5 Nhập thư viện three.js

6 Tạo Cảnh và Máy quay

7 Tạo Bộ kết xuất

8 Tạo một Hình lập phương

9 Kết xuất Cảnh

10 Làm hoạt hình Hình lập phương

1 Giới thiệu

2 Thiết lập

3 Hàm Init( )

4 Tạo các Ngôi sao

5 Sử dụng Hình học và Chất liệu

6 Hàm Làm hoạt hình

7 Hoàn thành Dự án

8 Một số Ví dụ về three.js

Giới thiệu khóa học

Why code art?

Because once you learn creating art with coding, there is actually no limit. You don’t have the boundaries of visual effect programs!

Creative algorithms are data driven can work real time and interactive.

It’s combination of technical side and design.

There are many languages and ways of creative coding.
We’ll use html and javascript in this course, because nowadays javascript is everywhere.
You’ll have a chance to make your project interactive with other technologies with JS.
We’ll create particles that will listen the music and behave differently.
After learning this technique you can use audio input in any effect you want!
You’ll be shocked when you see how easy it is to make these animations.
If you already know a programming language that’s a big advantage.

Where can I use these visuals?

It’s up to you! You can create your own NFT collection. Upload effects to your website, put them in your portfolio, or just to make them for fun!

Why this course?

We as Yeti team, are working to create professional online education lectures. We are trying to keep it as simple as possible. You'll find the best practices for creative coding.

This course is created with both Windows and Mac users, meaning you can get full benefit whether you are a windows or mac user.

All students have access to the Q&A forums where our Instructors, Teaching Assistants and Community are ready to help answer your questions and cheer on your success.

Who this course is for:

Programmers - Developers
Designers
Freelancers
Animators
Graphic Designers
Who feels comfortable with another programming language and want to learn creative coding
Everyone interested in animations, visuals, algorithms, and art