Cách Vẽ Đường Tròn Trong Scratch: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

Giới thiệu chung

Scratch là một môi trường lập trình trực quan, được thiết kế đặc biệt cho trẻ em và người mới bắt đầu học lập trình. Với giao diện kéo thả các khối lệnh, người dùng có thể tạo ra các dự án đa phương tiện như trò chơi, hoạt ảnh, và các ứng dụng tương tác. Một trong những yếu tố quan trọng trong việc tạo ra các hình ảnh sinh động là vẽ các hình dạng cơ bản, trong đó đường tròn là một trong những hình dạng phổ biến nhất.

Trong bài viết này, chúng ta sẽ đi sâu vào cách vẽ đường tròn trong Scratch, từ những kiến thức cơ bản, các khối lệnh cần thiết, tới các kỹ thuật nâng cao như vẽ vòng tròn mượt mà, thay đổi độ dày nét, tạo hiệu ứng xoay, và thậm chí vẽ các vòng tròn đồng tâm hoặc các hình dạng phức tạp hơn dựa trên vòng tròn. Bài viết sẽ cung cấp hướng dẫn chi tiết từng bước, kèm theo mã lệnh mẫu, hình ảnh minh họa (mô tả bằng lời) và lưu ý thực hành để bạn có thể tự tin áp dụng vào dự án của mình.

1. Kiến thức nền tảng: Scratch và sprite

1.1 Scratch là gì?

• Scratch là một nền tảng lập trình trực quan, được phát triển bởi MIT Media Lab.
• Người dùng tạo các dự án thông qua sprite (đối tượng) và stage (bối cảnh).
• Các lệnh được sắp xếp dưới dạng khối (blocks), giúp người dùng không cần viết code bằng văn bản.

1.2 Sprite và costume

• Sprite là nhân vật hoặc đối tượng mà bạn sẽ điều khiển.
• Mỗi sprite có thể có nhiều costume (trang phục), cho phép thay đổi hình dạng hiển thị.
• Để vẽ một đường tròn, chúng ta thường sử dụng pen extension (bộ mở rộng bút) để vẽ trực tiếp lên stage.

1.3 Pen Extension (Bộ mở rộng bút)

• Pen Extension cung cấp các khối lệnh như:
• clear (xóa toàn bộ vẽ)
• pen down (bắt đầu vẽ)
• pen up (ngừng vẽ)
• set pen color to … (đặt màu bút)
• change pen size by … (thay đổi độ dày nét)
• set pen size to … (đặt độ dày nét)
• Khi pen down, sprite sẽ để lại dấu vết khi di chuyển.

2. Cách vẽ vòng tròn cơ bản

2.1 Ý tưởng cơ bản

Có thể bạn quan tâm: Cách Vẽ Đường Tròn Bằng Compa: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

Vòng tròn có thể được mô phỏng bằng cách di chuyển sprite theo đường tròn thực tế, hoặc bằng cách di chuyển sprite theo đường thẳng nhiều lần với góc quay nhỏ. Phương pháp thứ hai là phổ biến trong Scratch vì nó đơn giản và không yêu cầu tính toán vị trí X, Y phức tạp.

2.2 Thuật toán “move‑turn‑repeat”

• Bước 1: Đặt độ dài bước di chuyển (step) và góc quay (angle).
• Bước 2: Lặp lại quá trình di chuyển và quay một số lần nhất định để hoàn thành vòng tròn.

Ví dụ:
– Nếu chúng ta muốn vẽ một vòng tròn tròn tròn, chúng ta có thể di chuyển 10 bước và quay 5 độ, lặp lại 72 lần (vì 5° × 72 = 360°).
– Độ dài bước quyết định bán kính của vòng tròn: bước dài hơn → bán kính lớn hơn.

2.3 Mã lệnh mẫu

when green flag clicked
clear
pen down
set pen size to 3
set pen color to #ff0000 // màu đỏ
repeat 360 move 1 steps turn 1 degrees
end
pen up

Giải thích:
– repeat 360 → vòng lặp 360 lần, mỗi lần quay 1 độ, di chuyển 1 bước. Khi move 1 step và turn 1 degree được thực hiện liên tục, sprite sẽ vẽ một vòng tròn gần như hoàn hảo.
– Độ dày nét được đặt bằng set pen size to 3.
– Màu bút là đỏ (#ff0000).

2.4 Điều chỉnh bán kính

Bán kính của vòng tròn phụ thuộc vào độ dài bước và số lần lặp. Công thức gần đúng:

Bán kính ≈ (step 180) / π

Với step = 1, bán kính ≈ 57.3 pixel. Nếu muốn bán kính lớn hơn:
– Tăng step (ví dụ move 2 steps sẽ tạo bán kính ≈ 114.6 pixel).
– Hoặc tăng số lần lặp (đảm bảo tổng góc quay = 360°).

3. Vẽ vòng tròn mượt mà hơn

3.1 Vấn đề “bước nhảy” và cách khắc phục

Có thể bạn quan tâm: Cách Vẽ Đường Trên Google Map: Hướng Dẫn Chi Tiết Từ A Đến Z

Khi step quá lớn, vòng tròn sẽ trông gợn gợn, không mượt. Để có vòng tròn mượt, chúng ta cần:
– Giảm kích thước bước (move ít pixel hơn mỗi lần).
– Tăng số lần lặp để vẫn đạt 360° quay.

Ví dụ:

when green flag clicked
clear
pen down
set pen size to 2
set pen color to #0000ff // màu xanh dương
repeat 720 move 0.5 steps turn 0.5 degrees
end
pen up

Ở đây, chúng ta lặp 720 lần, mỗi lần di chuyển 0.5 pixel và quay 0.5 độ, tạo ra vòng tròn cực kỳ mượt.

3.2 Sử dụng biến để linh hoạt

Bạn có thể tạo các biến để dễ dàng thay đổi bán kính và độ mượt:

• Bước di chuyển (step) – số pixel di chuyển mỗi lần.
• Góc quay (angle) – góc quay mỗi lần.
• Số vòng lặp (repeat count) – tổng số lần lặp.

when green flag clicked
clear
pen down
set pen size to 4
set pen color to #00ff00 // màu xanh lá
set step v to 1
set angle v to 1
set repeatCount v to (360 / angle)
repeat (repeatCount) move (step) steps turn (angle) degrees
end
pen up

Bạn chỉ cần thay đổi giá trị của step và angle để tạo ra các vòng tròn có bán kính và độ mượt khác nhau mà không cần chỉnh sửa toàn bộ mã.

4. Vẽ vòng tròn đồng tâm (nhiều vòng tròn cùng tâm)

4.1 Ý tưởng

Để vẽ nhiều vòng tròn đồng tâm, chúng ta lặp lại quá trình vẽ vòng tròn, mỗi vòng tròn có bán kính lớn hơn một chút. Các vòng tròn sẽ chia sẻ cùng một tâm (vị trí bắt đầu của sprite).

4.2 Mã lệnh mẫu

when green flag clicked
clear
pen down
set pen size to 2
set pen color to #ff6600 // màu cam repeat 5 // vẽ 5 vòng tròn đồng tâm // Vẽ một vòng tròn repeat 360 move 1 steps turn 1 degrees end // Di chuyển ra ngoài để chuẩn bị cho vòng tròn tiếp theo pen up move 10 steps // tăng bán kính 10 pixel pen down
end
pen up

Giải thích:
– Mỗi vòng lặp repeat 5 vẽ một vòng tròn, sau đó di chuyển sprite 10 pixel ra ngoài (bằng cách move 10 steps) mà không vẽ (pen up). Khi lặp lại, vòng tròn mới sẽ có bán kính lớn hơn 10 pixel so với vòng trước.
– Bạn có thể thay đổi số vòng tròn, bước di chuyển ra ngoài, hoặc độ dày nét để tạo ra các hiệu ứng khác nhau.

Có thể bạn quan tâm: Cách Vẽ Đường Thẳng Trong Phần Mềm Pts: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

5. Vẽ vòng tròn có độ dày nét thay đổi (gradient)

5.1 Ý tưởng

Bạn muốn tạo một vòng tròn mà độ dày nét tăng dần từ trong ra ngoài (hoặc ngược lại). Cách thực hiện:
– Thay đổi pen size trong quá trình vẽ vòng tròn.
– Sử dụng một biến size để tăng hoặc giảm kích thước bút mỗi vòng lặp.

5.2 Mã lệnh mẫu

when green flag clicked
clear
pen down
set pen color to #ff00ff // màu hồng
set size v to 1
repeat 360 set pen size to (size) move 1 steps turn 1 degrees change size v by 0.03 // tăng dần độ dày
end
pen up

Kết quả sẽ là một vòng tròn có nét dày dần từ 1 pixel ở đầu vòng tròn tới khoảng 11 pixel ở cuối (vì 0.03 × 360 ≈ 10.8). Bạn có thể điều chỉnh change size v by … để kiểm soát tốc độ tăng.

6. Vẽ vòng tròn xoay (có chuyển động)

6.1 Vòng tròn quay quanh tâm

Nếu bạn muốn sprite di chuyển quanh một vòng tròn (không vẽ) hoặc vẽ một vòng tròn đang quay, bạn có thể sử dụng định vị góc và toạ độ tròn.

6.2 Sử dụng công thức lượng giác

Có thể bạn quan tâm: Cách Vẽ Đường Thẳng Trong Cad: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

• X = trung tâmX + radius × cos(θ)
• Y = trung tâmY + radius × sin(θ)

Trong Scratch, các hàm cos và sin nhận giá trị độ (không phải radian).

6.3 Mã lệnh mẫu (vẽ vòng tròn quay)

when green flag clicked
clear
pen down
set pen size to 3
set pen color to #0066ff
set radius v to 100
set centerX v to 0
set centerY v to 0
repeat 360 // Tính vị trí mới set angle v to (repeat count) // từ 1 tới 360 set x to ((centerX) + (radius) (cos (angle))) set y to ((centerY) + (radius) (sin (angle))) go to x: (x) y: (y)
end
pen up

Giải thích:
– repeat count trả về số lần lặp hiện tại, ở đây từ 1 tới 360, tương đương với góc độ.
– Mỗi vòng lặp, sprite di chuyển tới một vị trí trên vòng tròn, để lại dấu vết, tạo thành vòng tròn hoàn chỉnh.
– Vì chúng ta dùng công thức lượng giác, vòng tròn sẽ đúng hình hơn so với phương pháp move-turn.

6.4 Tạo hiệu ứng quay liên tục

Nếu muốn vòng tròn quay liên tục (điều khiển bằng thời gian), bạn có thể đặt vòng lặp trong một khối forever và tăng góc dần dần:

when green flag clicked
clear
pen down
set pen size to 2
set pen color to #ff8800
set radius v to 80
set angle v to 0
forever set x to ((0) + (radius) (cos (angle))) set y to ((0) + (radius) (sin (angle))) go to x: (x) y: (y) change angle v by 2 wait 0.01 secs
end

Kết quả là một đường tròn liên tục được vẽ lại, tạo cảm giác đèn LED quay.

7. Vẽ các hình phức tạp dựa trên vòng tròn

7.1 Vẽ hình hoa (flower) – N petals

Một hình hoa thường được tạo ra bằng cách vẽ nhiều vòng tròn xoay quanh một điểm trung tâm, mỗi vòng tròn lệch một góc nhất định.

when green flag clicked
clear
pen down
set pen size to 2
set pen color to #ff0000
set radius v to 60
set petals v to 12 // số cánh hoa
repeat (petals) repeat 360 move 1 steps turn 1 degrees end // Quay sang vị trí cánh tiếp theo pen up turn (360 / petals) degrees pen down
end
pen up

Kết quả là một hình hoa gồm 12 vòng tròn, mỗi vòng tròn quay 30° so với vòng trước (360/12). Bạn có thể thay đổi petals để tạo số cánh hoa khác.

7.2 Vẽ hình xoắn ốc (spiral) dựa trên vòng tròn

Một xoắn ốc có thể được tạo bằng cách tăng dần bán kính trong quá trình vẽ vòng tròn.

when green flag clicked
clear
pen down
set pen size to 2
set pen color to #00aa00
set radius v to 5
repeat 200 // Vẽ một đoạn vòng tròn ngắn (khoảng 10 độ) repeat 10 move (radius / 10) steps turn 1 degrees end change radius v by 0.5 // tăng bán kính dần
end
pen up

Mỗi vòng lặp repeat 200 vẽ một đoạn vòng tròn 10 độ, đồng thời tăng bán kính một chút, tạo nên một xoắn ốc mở rộng ra ngoài.

8. Thực hành: Tạo dự án “Clock” (đồng hồ analog) bằng vòng tròn

8.1 Mô tả dự án

• Vẽ một vòng tròn làm mặt đồng hồ.
• Thêm các nét ngắn cho các giờ (12, 3, 6, 9) và các nét dài hơn cho các giờ khác.
• Dùng sprite kim đồng hồ để chỉ thời gian thực (hoặc giả lập).

8.2 Các bước thực hiện

Bước 1: Vẽ mặt đồng hồ

when green flag clicked
clear
pen down
set pen size to 3
set pen color to #000000
repeat 360 move 1 steps turn 1 degrees
end
pen up

Bước 2: Vẽ các dấu giờ

when green flag clicked
repeat 12 pen down set pen size to 2 move 80 steps // độ dài kim giờ pen up move -80 steps // quay lại trung tâm turn 30 degrees // 360/12 = 30
end

Bước 3: Tạo sprite kim đồng hồ

• Tạo sprite mới, chọn hình “line” (đường thẳng) hoặc vẽ một đường thẳng ngắn.
• Đặt điểm quay (rotation center) ở một đầu (đầu dưới) để khi quay, kim sẽ quay quanh trung tâm.

Bước 4: Lập trình kim giờ

when green flag clicked
forever // Giả sử mỗi vòng lặp là 1 giây -> 6 độ turn 6 degrees wait 1 secs
end

Kết quả là một đồng hồ analog đơn giản, trong đó vòng tròn là thành phần chính của mặt đồng hồ.

9. Các lưu ý thường gặp khi vẽ vòng tròn trong Scratch

Vấn đề	Nguyên nhân	Cách khắc phục
Vòng tròn “gợn gợn”, không mượt	Bước di chuyển quá lớn hoặc góc quay quá lớn	Giảm move và turn (ví dụ: 0.5 step, 0.5°) hoặc tăng số lần lặp
Vòng tròn không khép kín	Số vòng lặp không đủ để quay đủ 360°	Đảm bảo tổng góc quay = 360° (sử dụng repeat 360 với turn 1 degree)
Đường vẽ bị lệch, không nằm ở tâm mong muốn	Sprite không ở vị trí trung tâm khi bắt đầu vẽ	Dùng khối go to x: 0 y: 0 trước khi pen down
Màu bút không thay đổi	Thiếu khối set pen color to … hoặc không đặt đúng màu	Đặt màu trước khi vẽ, hoặc dùng change pen color by … để tạo hiệu ứng gradient
Độ dày nét không đồng nhất	Không thay đổi pen size trong vòng lặp	Sử dụng biến size và cập nhật trong repeat nếu cần

10. Mẹo tối ưu hiệu suất

1. Tránh lặp vô hạn: Khi sử dụng forever để vẽ, hãy chắc chắn rằng bạn có một điều kiện dừng hoặc wait đủ lớn để không làm treo trình duyệt.
2. Sử dụng biến để lưu trữ giá trị: Thay vì tính toán lại radius hoặc angle trong mỗi vòng lặp, lưu chúng vào biến để giảm tải tính toán.
3. Giảm số khối lệnh trong vòng lặp: Nếu chỉ cần vẽ một vòng tròn đơn giản, giữ khối lệnh trong repeat ở mức tối thiểu (chỉ move và turn).
4. Kiểm tra tốc độ của Scratch: Trong menu “More Blocks” → “Speed”, bạn có thể điều chỉnh tốc độ thực thi để xem kết quả nhanh hơn hoặc chậm hơn khi debug.

11. Tổng kết

• Scratch cung cấp công cụ Pen Extension mạnh mẽ để vẽ các hình dạng, trong đó đường tròn là nền tảng cho nhiều dự án sáng tạo.
• Bằng thuật toán move‑turn‑repeat, bạn có thể vẽ vòng tròn cơ bản, đồng thời điều chỉnh bán kính, độ mượt, độ dày nét, và màu sắc.
• Các kỹ thuật nâng cao như vòng tròn đồng tâm, độ dày nét thay đổi, vòng tròn xoay và sử dụng công thức lượng giác mở rộng khả năng sáng tạo, cho phép tạo ra những hình ảnh phức tạp như hoa, xoắn ốc, và đồng hồ analog.
• Khi thực hành, hãy luôn đặt sprite ở vị trí trung tâm, đảm bảo tổng góc quay = 360°, và tối ưu hoá tốc độ để dự án chạy mượt mà.

Hy vọng qua bài viết chi tiết này, bạn đã nắm vững cách vẽ đường tròn trong Scratch và sẵn sàng áp dụng vào các dự án sáng tạo của mình. Hãy thử nghiệm, thay đổi các tham số, và khám phá những hình ảnh độc đáo mà bạn có thể tạo ra! Chúc bạn thành công và luôn đam mê lập trình với Scratch.