Tổng quan Trong hoạt động học tập này, sinh viên sẽ tạo ra một bố cục trực quan bằng cách sử dụng các hàm vẽ hình dạng P5 trực tràng () và elipse (). Họ sẽ tiếp tục xây dựng dựa trên sự hiểu biết của họ về các chức năng và các tham số của họ để tạo lại robot từ Bài 1. Thời gian đề xuất 45 phút Mục tiêu Học sinh sẽ có thể:
Kết quả của sinh viên Abstraction:
Algorithms:
Programming:
Ngữ vựng
Vẽ một hình chữ nhật P5 có nhiều chức năng tích hợp để vẽ các hình dạng khác nhau. Trong ví dụ này, chúng tôi đang vẽ một hình chữ nhật. Hàm trực tràng mất bốn tham số: x, y, chiều rộng và chiều cao. Các giá trị x và y đề cập đến vị trí trên vải và chiều rộng và chiều cao đề cập đến kích thước.
 Tái tạo ví dụ sau và phát với các giá trị tham số. Thí dụ Để giúp bạn đặt các hình dạng nơi bạn muốn chúng trên khung vẽ, bạn có thể thêm dòng sau vào mã của mình: Hãy xem ví dụ dưới đây. Bạn có thể di chuyển chuột đến nơi bạn muốn hình dạng của bạn và viết ra các tọa độ để sử dụng chúng làm tham số trong cuộc gọi chức năng của bạn. Bạn cũng sử dụng mẫu lưới trống này để giúp bạn định vị hình dạng của mình. Thứ tự vẽ Trong P5, các hàm hình dạng và màu được hiển thị cho khung vẽ theo thứ tự chúng được viết trong chương trình - từ trên xuống dưới.
Chơi với thứ tự của các hình dạng ở đây. Sau đó loại bỏ các nhận xét để xem cách các lớp hình chữ nhật trên nhau. http://alpha.editor.p5js.org/cs4all/sketches/s1ag4fo7m Thực hành vẽ hình chữ nhật Tạo lại bản phác thảo sau bằng cách sử dụng hình chữ nhật
Dung dịch Vẽ một hình elip Bây giờ vẽ một hình elip. Các tham số của nó giống như đối với hình chữ nhật. Hàm hình elip có bốn tham số: x, y, chiều rộng và chiều cao. Các giá trị x và y đề cập đến vị trí trên vải và chiều rộng và chiều cao đề cập đến kích thước.
Tái tạo hoặc truy cập ví dụ này và chơi với các giá trị tham số. Hình elip của bạn có thể trùng với hình chữ nhật của bạn, như trong ví dụ dưới đây. Bởi vì mã trong bản phác thảo của bạn được thực thi từ trên xuống, một dòng tại một thời điểm, hình dạng được vẽ cuối cùng sẽ luôn ở trên phần còn lại. Để thay đổi thứ tự vẽ, chỉ cần cắt dòng Thực hành vẽ hình elip Tái tạo hình ảnh sau bằng hình chữ nhật và hình elip:
Một số tính toán sẽ cần thiết để có được hình elip ở góc. Bạn nên sao chép bản phác thảo trước đó để họ không phải viết mã từ đầu và giữ một bản sao của bản phác thảo gốc của họ.duplicate your previous sketch so that they don't have to code one from scratch and keep a copy of their original sketch. Vẽ robot của bạn Sử dụng mã, vẽ robot mà bạn đã thực hiện trên giấy biểu đồ. Bạn có thể sử dụng bản phác thảo khởi động này có chứa những điều sau đây:
Hãy suy nghĩ về các thành phần khác nhau tạo nên robot của bạn và bạn sẽ cần thứ tự để vẽ hình dạng của nó. Liệt kê chúng trên giấy trước khi bạn bắt đầu mã hóa. Phần mở rộng Kiểm tra tham chiếu P5.JS trực tuyến và thêm nhiều hình dạng vào robot của bạn. Bạn có thể tìm ra cách thêm một tam giác? Một đa giác? Có bao nhiêu tham số được yêu cầu để vẽ một hình chữ nhật Viết cú pháp?Không giống như một hình vuông, tối thiểu hai tham số là đủ để xây dựng một hình chữ nhật.Điều này là do các đường chéo của một hình chữ nhật không vuông góc với nhau.Do đó, không thể xây dựng một hình chữ nhật chỉ với một tham số.a minimum of two parameters are sufficient to construct a rectangle. This is because the diagonals of a rectangle are not perpendicular to each other. Hence it is not possible to construct a rectangle with just one parameter.
Những chức năng nào sẽ sử dụng để vẽ trên màn hình với các tham số?Để vẽ trên vải, hãy gọi P5.Các hàm js như point () và line ().Một điểm được xác định bởi một tọa độ (x, y).Một dòng được xác định bởi điểm bắt đầu và điểm cuối của nó.point() and line() . A point is defined by an (x, y) coordinate. A line is defined by its start and end points. |
