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

Mở Đầu

Scratch là một môi trường lập trình đồ họa trực quan, được thiết kế dành cho trẻ em và người mới bắt đầu học lập trình. Nhờ giao diện kéo thả các khối lệnh, người dùng có thể tạo ra những trò chơi, hoạt ảnh, và các dự án sáng tạo một cách dễ dàng. Trong số rất nhiều hình ảnh mà chúng ta có thể vẽ trong Scratch, hình tròn là một trong những yếu tố cơ bản nhưng lại quan trọng, vì nó thường xuất hiện trong các trò chơi (đối tượng cầu thủ, quả bóng, đồng tiền…), trong đồ họa (nút bấm, biểu tượng) và trong các bài học toán học (đường tròn, hình tròn).

Bài viết này sẽ cung cấp cho bạn một hướng dẫn chi tiết, từng bước một, để vẽ hình tròn trong Scratch. Chúng ta sẽ bắt đầu từ cách vẽ một vòng tròn đơn giản bằng cách sử dụng công cụ “Pen” (bút), sau đó mở rộng sang việc tạo ra các vòng tròn đa dạng (điện tâm, màu sắc, độ dày, hoạt ảnh quay, vẽ chuỗi vòng tròn…), và cuối cùng là một số thủ thuật nâng cao như vẽ vòng tròn bằng công thức toán học, sử dụng biến và danh sách để tạo ra các mẫu vòng tròn phức tạp.

Lưu ý: Tất cả các ví dụ trong bài viết đều dựa trên Scratch 3.0 (phiên bản hiện tại trên web và desktop). Nếu bạn đang dùng Scratch 2.0 hoặc các phiên bản cũ hơn, hầu hết các khối lệnh vẫn tương tự, chỉ có một số thay đổi giao diện nhỏ.

1. Hiểu Cơ Bản Về Scratch Và Công Cụ Pen

1.1. Giao Diện Scratch

Khi mở Scratch, bạn sẽ thấy ba khu vực chính:

1. Khu vực mã (Code): Nơi bạn kéo thả các khối lệnh để tạo chương trình.
2. Khu vực hiển thị (Stage): Nơi các sprite (đối tượng) và nền (backdrop) được hiển thị.
3. Khu vực sprite (Sprites): Danh sách các sprite và các tính năng chỉnh sửa (vẽ, đổi hình, âm thanh).

1.2. Công Cụ Pen (Bút)

Pen là một extension (tiện ích mở rộng) trong Scratch, cho phép chúng ta vẽ lên Stage bằng các lệnh như:

• clear – Xóa mọi hình vẽ trên Stage.
• pen down – Bắt đầu vẽ khi sprite di chuyển.
• pen up – Dừng vẽ.
• set pen color to color – Đặt màu bút.
• change pen size by value – Thay đổi độ dày bút.
• stamp – Dấu vết sprite lên Stage (không phải là vẽ bằng pen, nhưng hữu ích).

Để sử dụng Pen, bạn cần cài đặt extension Pen: Nhấn vào biểu tượng vòng tròn màu xanh ở góc dưới bên trái, chọn “Pen”.

2. Vẽ Vòng Tròn Đơn Giản Bằng Pen

2.1. Ý Tưởng Cơ Bản

Có thể bạn quan tâm: Cách Vẽ Hoa Sen Đơn Giản: Hướng Dẫn Từng Bước Dành Cho Người Mới Bắt Đầu

Để vẽ một vòng tròn, chúng ta sẽ dùng một sprite (có thể là “Sprite 1” mặc định). Khi sprite di chuyển theo một đường tròn, nếu bút đang “down”, nó sẽ để lại một đường tròn trên Stage. Vòng tròn này sẽ được tạo ra bằng cách di chuyển sprite một góc nhỏ liên tục, tạo thành một hình tròn hoàn chỉnh.

2.2. Các Bước Thực Hiện

Bước 1: Thêm Extension Pen

• Nhấn vào biểu tượng “Extensions” (hình vòng tròn màu xanh) ở góc dưới bên trái.
• Chọn “Pen”.

Bước 2: Đặt Vị Trí Ban Đầu

• Kéo khối go to x: 0 y: 0 vào khu vực mã. Đây là vị trí trung tâm của vòng tròn (có thể thay đổi tùy ý).

Bước 3: Đặt Màu và Độ Dày Bút

when green flag clicked
clear
pen down
set pen color to #ff0000 // màu đỏ
set pen size to (5)

Bước 4: Vẽ Vòng Tròn

Chúng ta sẽ dùng vòng lặp repeat để thực hiện 360 lần (mỗi lần quay 1 độ). Để di chuyển theo vòng tròn, chúng ta sẽ:

• Di chuyển một bước ngắn (bước này quyết định bán kính).
• Xoay sprite một góc nhất định (thường là 1 độ).

repeat (360) move (2) steps // bán kính = 2 360 / (2π) ≈ 115 pixel, tùy chỉnh turn cw (1) degrees
end
pen up

Giải thích:
– move (2) steps di chuyển sprite 2 pixel mỗi lần. Khi thực hiện 360 lần, tổng quãng đường di chuyển sẽ tạo ra một vòng tròn có bán kính khoảng 115 pixel (theo công thức chu vi = 2πr). Bạn có thể thay đổi số “2” để thay đổi bán kính.
– turn cw (1) degrees quay sprite 1 độ theo chiều kim đồng hồ. Khi lặp 360 lần, sprite quay tròn một vòng đầy đủ.

Bước 5: Kiểm Tra Kết Quả

Nhấn “Green Flag”. Bạn sẽ thấy một vòng tròn màu đỏ, độ dày 5 pixel, được vẽ tại vị trí (0,0). Nếu muốn di chuyển vòng tròn đến vị trí khác, thay đổi giá trị của khối go to x: y: .

2.3. Tùy Chỉnh Bán Kính

Bạn có thể điều chỉnh bán kính bằng cách thay đổi số bước di chuyển và/hoặc số lần lặp. Công thức:

bán kính ≈ (bước di chuyển số lần lặp) / (2π)

Ví dụ, nếu muốn bán kính 50 pixel:

• Chọn move (1) steps và repeat (314) (vì 2π 50 ≈ 314). Hoặc:
• Giữ repeat (360) và thay đổi move thành move (0.88) steps (50 2π / 360 ≈ 0.88).

Scratch không cho phép bước di chuyển là số thập phân trong khối move, nhưng bạn có thể dùng khối change x by (value) và change y by (value) để tính toán vị trí chính xác hơn (xem phần “Vẽ Vòng Tròn Bằng Công Thức Toán Học” sau).

3. Vẽ Vòng Tròn Bằng Công Thức Toán Học (Sử Dụng Cosine & Sine)

3.1. Vì Sao Cần Công Thức?

Cách trên (di chuyển và quay) là đơn giản, nhưng không cho phép chúng ta vẽ các vòng tròn không đồng tâm hoặc vòng tròn với bán kính thay đổi dần dần một cách mượt mà. Khi sử dụng công thức toán học, chúng ta có thể:

Có thể bạn quan tâm: Cách Vẽ Giấy Kiểm Tra Đẹp: Hướng Dẫn Từ Cơ Bản Đến Nâng Cao

• Vẽ vòng tròn tại bất kỳ vị trí nào (x₀, y₀).
• Tạo ra các vòng tròn có bán kính thay đổi theo thời gian (hiệu ứng “bong bóng”).
• Vẽ các vòng tròn đồng thời (nhiều sprite di chuyển cùng lúc) mà không cần xoay sprite.

3.2. Công Thức Toán Học

Trong hệ tọa độ Đề-các, một điểm trên vòng tròn bán kính r, tâm (x₀, y₀) và góc θ (độ) được tính bằng:

x = x₀ + r cos(θ)
y = y₀ + r sin(θ)

Trong Scratch, hàm cos và sin nhận giá trị độ (không phải radian). Vì vậy, chúng ta có thể trực tiếp sử dụng cos (θ) và sin (θ).

3.3. Thực Hiện Trong Scratch

Bước 1: Tạo Các Biến

• r (bán kính)
• x0, y0 (tâm vòng tròn)
• θ (góc)

Bước 2: Viết Mã

when green flag clicked
clear
pen down
set pen color to #00ff00 // màu xanh lá
set pen size to (3) set x0 v to (0) // tâm x
set y0 v to (0) // tâm y
set r v to (80) // bán kính
set θ v to (0) repeat (360) // Tính toán vị trí mới set x v to ((x0) + (r) (cos (θ))) set y v to ((y0) + (r) (sin (θ))) // Di chuyển sprite tới vị trí mới mà không vẽ đường thẳng go to x: (x) y: (y) // Tăng góc change θ v by (1)
end pen up

Giải thích chi tiết:
– go to x: (x) y: (y) di chuyển sprite tới vị trí tính toán được. Vì bút đang “down”, mỗi bước di chuyển sẽ tạo ra một đoạn thẳng rất ngắn, tổng lại thành vòng tròn.
– repeat (360) thực hiện 360 lần, mỗi lần tăng góc 1 độ.
– Nếu muốn mịn hơn, bạn có thể giảm bước góc (ví dụ repeat (720) và change θ v by (0.5)).

Bước 3: Thử Nghiệm

Nhấn “Green Flag”. Bạn sẽ thấy một vòng tròn màu xanh lá, bán kính 80 pixel, trung tâm tại (0,0). Thay đổi giá trị x0, y0 để di chuyển vòng tròn tới vị trí khác, hoặc thay đổi r để thay đổi bán kính.

3.4. Vẽ Nhiều Vòng Tròn Cùng Lúc

Bạn có thể tạo nhiều sprite, mỗi sprite có một bộ biến riêng, hoặc sử dụng danh sách (list) để lưu trữ các bán kính và tâm, rồi lặp qua danh sách để vẽ. Dưới đây là một ví dụ dùng một sprite duy nhất, nhưng vẽ ba vòng tròn đồng thời bằng cách lặp ba lần trong một vòng lặp lớn:

when green flag clicked
clear
pen down
set pen color to #ff00ff // màu hồng
set pen size to (2) set r1 v to (40)
set r2 v to (80)
set r3 v to (120) repeat (360) // Vòng tròn 1 set x v to ((0) + (r1) (cos (θ))) set y v to ((0) + (r1) (sin (θ))) go to x: (x) y: (y) // Vòng tròn 2 set x v to ((0) + (r2) (cos (θ))) set y v to ((0) + (r2) (sin (θ))) go to x: (x) y: (y) // Vòng tròn 3 set x v to ((0) + (r3) (cos (θ))) set y v to ((0) + (r3) (sin (θ))) go to x: (x) y: (y) change θ v by (1)
end pen up

Lưu ý: Trong ví dụ này, sprite “nhảy” nhanh giữa ba vòng tròn, nhưng vì mỗi lần di chuyển rất ngắn và bút đang “down”, các vòng tròn sẽ được vẽ chồng lên nhau một cách mượt mà.

4. Tạo Hiệu Ứng Động: Vòng Tròn Quay, Vòng Tròn Mở Rộng, Thu Nhỏ

4.1. Vòng Tròn Quay

Có thể bạn quan tâm: Cách Vẽ Cây Xanh Đẹp Nhất: Hướng Dẫn Chi Tiết Từ Cơ Bản Đến Nâng Cao

Nếu muốn vòng tròn quay quanh một điểm mà không thay đổi bán kính, bạn có thể giữ bán kính cố định và thay đổi góc theo thời gian, ví dụ:

when green flag clicked
clear
pen down
set pen color to #0000ff // màu xanh dương
set pen size to (4) set r v to (100)
set θ v to (0) forever set x v to ((200) + (r) (cos (θ))) // tâm (200,0) set y v to ((0) + (r) (sin (θ))) go to x: (x) y: (y) change θ v by (3) // quay nhanh hơn wait (0.02) secs
end

Kết quả: Một vòng tròn đang di chuyển quanh một điểm cố định, tạo cảm giác “vòng tròn đang quay”.

4.2. Vòng Tròn Mở Rộng / Thu Nhỏ (Hiệu Ứng “Bong Bóng”)

Bạn có thể thay đổi r theo thời gian để tạo ra hiệu ứng vòng tròn mở rộng và thu hẹp:

when green flag clicked
clear
pen down
set pen color to #ff8800 // màu cam
set pen size to (3) set r v to (30)
set θ v to (0)
set dir v to (1) // 1 = tăng, -1 = giảm forever // Vẽ một vòng tròn hoàn chỉnh repeat (360) set x v to ((0) + (r) (cos (θ))) set y v to ((0) + (r) (sin (θ))) go to x: (x) y: (y) change θ v by (1) end // Thay đổi bán kính change r v by (dir 5) // tăng/giảm 5 pixel // Đảo chiều khi đạt giới hạn if <(r) > (120)> then set dir v to (-1) end if <(r) < (30)> then set dir v to (1) end // Reset góc để vẽ vòng tròn mới set θ v to (0)
end

Kết quả: Vòng tròn sẽ dần dần mở rộng tới bán kính 120 pixel, sau đó thu nhỏ lại, lặp lại liên tục.

4.3. Vòng Tròn Nhiều Lớp (Concentric Circles)

Để tạo một “bánh răng” gồm nhiều vòng tròn đồng tâm, bạn có thể sử dụng một vòng lặp lồng nhau:

when green flag clicked
clear
pen down
set pen size to (2) repeat (10) // 10 vòng tròn set r v to ((_repeatCount_) 20) // mỗi vòng cách nhau 20 pixel set θ v to (0) repeat (360) set x v to ((0) + (r) (cos (θ))) set y v to ((0) + (r) (sin (θ))) go to x: (x) y: (y) change θ v by (1) end
end pen up

Trong Scratch, _repeatCount_ là biến ảo đại diện cho số lần lặp hiện tại (có thể dùng biến tự tạo và tăng trong mỗi vòng lặp). Để thực hiện chính xác, bạn có thể tạo một biến i và tăng nó trong mỗi vòng lặp.

5. Vẽ Hình Tròn Bằng Sprite “Costume” (Trang Phục)

5.1. Tại Sao Dùng Costume?

Đôi khi, bạn không cần vẽ vòng tròn bằng Pen mà chỉ muốn hiển thị một hình tròn tĩnh hoặc đặt nó làm nút bấm. Scratch cho phép bạn tạo hoặc tải hình tròn dưới dạng costume (trang phục) cho sprite.

5.2. Cách Tạo Costume Hình Tròn

Có thể bạn quan tâm: Cách Vẽ Con Vật Đơn Giản: Hướng Dẫn Từng Bước Cho Người Mới Bắt Đầu

1. Chọn Sprite → Nhấn vào tab “Costumes”.
2. Nhấn “Paint” (vẽ) để mở công cụ vẽ.
3. Chọn công cụ “Ellipse” (hình ellipse) → Đảm bảo Shift được giữ để vẽ hình tròn hoàn hảo.
4. Kéo để tạo một vòng tròn, tùy chỉnh màu nền và viền.
5. Đặt tên costume (ví dụ: “circle_red”).

5.3. Sử Dụng Costume Trong Mã

when green flag clicked
switch costume to circle_red v
go to x: (100) y: (-50)
show

Bạn có thể thay đổi vị trí, kích thước (bằng cách thay đổi “size” trong tab “Costumes” hoặc dùng khối set size to (percentage)), và thậm chí xoay sprite để tạo hiệu ứng quay:

forever turn cw (2) degrees wait (0.05) secs
end

5.4. Kết Hợp Costumes và Pen

Bạn có thể vẽ các chi tiết lên costume bằng Pen, sau đó “stamp” (dấu) để lưu lại hình ảnh vẽ lên Stage. Ví dụ, tạo một sprite “Painter” với costume trống, dùng Pen để vẽ vòng tròn, rồi stamp để chuyển nó thành một hình ảnh cố định.

when green flag clicked
clear
switch costume to blank v // costume trống
pen down
set pen color to #ff0000
set pen size to (5)
repeat (360) move (2) steps turn cw (1) degrees
end
pen up
stamp
hide // ẩn sprite nếu không cần hiển thị

Sau khi stamp, vòng tròn sẽ trở thành một phần của Stage và không còn phụ thuộc vào sprite nữa.

6. Thủ Thuật Nâng Cao Và Ứng Dụng Thực Tế

6.1. Vòng Tròn Được Kiểm Soát Bởi Chuột

Bạn có thể cho phép người dùng kéo thả để tạo vòng tròn ở vị trí và bán kính mong muốn:

when green flag clicked
clear
pen down
set pen size to (3) forever if <mouse down?> then // Lưu vị trí bắt đầu (tâm) set x0 v to (mouse x) set y0 v to (mouse y) // Khi thả chuột, tính bán kính dựa trên khoảng cách wait until <not <mouse down?>> set r v to (distance to (mouse x) (mouse y)) // Vẽ vòng tròn set θ v to (0) repeat (360) set x v to ((x0) + (r) (cos (θ))) set y v to ((y0) + (r) (sin (θ))) go to x: (x) y: (y) change θ v by (1) end end
end

Giải thích: Khi người dùng nhấn chuột, chúng ta ghi lại vị trí bắt đầu làm tâm. Khi thả chuột, tính khoảng cách giữa tâm và vị trí thả để làm bán kính, sau đó vẽ vòng tròn.

6.2. Vòng Tròn Đa Màu (Rainbow)

Bạn có thể thay đổi màu bút trong quá trình vẽ để tạo vòng tròn “rainbow”:

when green flag clicked
clear
pen down
set pen size to (4) set r v to (80)
set θ v to (0) repeat (360) // Thay đổi màu dựa trên góc set pen color to ( (θ) ) // Scratch có hàm set pen color to color where color can be hue (0-200) set x v to ((0) + (r) (cos (θ))) set y v to ((0) + (r) (sin (θ))) go to x: (x) y: (y) change θ v by (1)
end pen up

Scratch cho phép set pen color to (hue) với hue từ 0 tới 200 (một vòng tròn màu). Khi góc tăng từ 0 tới 360, bạn có thể chuẩn hoá hue bằng cách set pen color to ((θ) mod 200) để vòng màu lặp lại.

6.3. Vòng Tròn Được Lưu Trữ Thành Sprite Động

Nếu bạn muốn tạo một sprite hình tròn mà có thể di chuyển, va chạm, hoặc tương tác, bạn có thể sau khi vẽ xong, stamp và convert thành một costume mới. Scratch không có hàm “convert stage to costume”, nhưng bạn có thể dùng khối duplicate (tạo bản sao sprite) và hide để tạo hình tròn tĩnh. Một cách khác là vẽ một hình tròn bằng công cụ vẽ costume (như phần 5) và sau đó dùng nó như một sprite.

6.4. Ứng Dụng Trong Trò Chơi

• Bóng trong game bóng đá: Dùng vòng tròn màu trắng, bán kính 10 pixel, di chuyển theo hướng người chơi.
• Tiền trong trò chơi thu thập: Vòng tròn màu vàng, có hiệu ứng xoay hoặc nhấp nháy.
• Mục tiêu (target) trong trò bắn: Vòng tròn đồng tâm (các vòng tròn màu đỏ, trắng, xanh) để tạo cảm giác “bullseye”.

6.5. Tối Ưu Hiệu Suất

Khi vẽ nhiều vòng tròn hoặc vẽ trong vòng lặp vô hạn, hiệu suất có thể bị ảnh hưởng. Một số gợi ý:

• Giảm số lần lặp: Thay vì 360 bước, dùng 180 bước với góc 2 độ mỗi lần.
• Sử dụng stamp thay vì pen down nếu không cần vẽ liên tục.
• Xóa bút (clear) khi không cần hiển thị các vòng tròn cũ để tránh chồng chất.
• Tắt “turbo mode” trong cài đặt Scratch nếu muốn tốc độ vẽ nhanh hơn (đối với các dự án giáo dục, có thể giữ tốc độ chậm để người học dễ theo dõi).

7. Tổng Kết

Trong bài viết này, chúng ta đã đi qua toàn bộ quy trình vẽ hình tròn trong Scratch, từ cách cơ bản nhất dùng Pen và vòng lặp, tới việc áp dụng công thức toán học để tạo ra các vòng tròn linh hoạt, đa dạng, và động. Ngoài ra, chúng ta còn khám phá cách vẽ vòng tròn bằng costume, kết hợp các hiệu ứng màu sắc, chuyển động, và tương tác người dùng.

Các Điểm Chính Nhớ Đến

Phương pháp	Ưu điểm	Nhược điểm
Pen + Di chuyển + Turn	Dễ hiểu, nhanh chóng triển khai	Hạn chế trong việc đặt tâm và bán kính chính xác
Pen + Công Thức Cos/Sin	Linh hoạt, cho phép đặt vị trí, bán kính bất kỳ	Cần tạo biến và công thức, hơi phức tạp hơn
Costume (Vẽ thủ công)	Đơn giản, không cần lập trình để tạo hình tĩnh	Không thể tạo hiệu ứng động trực tiếp
Stamp + Pen	Lưu lại hình vẽ thành hình tĩnh, giảm tải	Không thể chỉnh sửa sau khi stamp
Kết hợp Pen + Chuột	Tương tác người dùng, tạo công cụ vẽ	Cần xử lý logic phức tạp hơn

Bạn có thể lựa chọn phương pháp phù hợp với mục tiêu dự án của mình. Nếu bạn mới bắt đầu, hãy thử cách Pen + Di chuyển + Turn để nắm vững khái niệm vòng lặp và bút. Khi đã quen, hãy chuyển sang công thức Cos/Sin để mở rộng khả năng sáng tạo và tạo ra các hiệu ứng phức tạp hơn.

Đề Xuất Dự Án Thực Hành

1. Dự án “Bong bóng Tự Động” – Vẽ một loạt vòng tròn mở rộng/thu hẹp liên tục, thay đổi màu sắc theo chu kỳ.
2. Trò Chơi “Bắn Trúng Mục Tiêu” – Tạo một sprite mục tiêu gồm ba vòng tròn đồng tâm, cho phép người chơi bắn bằng cách nhấn chuột.
3. Ứng Dụng “Vẽ Tròn Bằng Chuột” – Cho phép người dùng kéo thả để tạo vòng tròn bất kỳ, lưu lại và xóa khi cần.

Bằng cách thực hành những dự án trên, bạn sẽ không chỉ nắm vững cách vẽ hình tròn trong Scratch, mà còn hiểu sâu hơn về cách sử dụng biến, vòng lặp, và các công cụ mở rộng khác trong môi trường lập trình này. Chúc bạn thành công và sáng tạo không ngừng!