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ể:
- Tham khảo ý kiến tham chiếu P5
- Tạo hình chữ nhật bằng hàm trực tràng ()
- Tạo các hình elip bằng hàm elip ()
- Hiểu khái niệm phân lớp để tạo hình ảnh bằng nhiều chức năng hình dạng
Kết quả của sinh viên
Abstraction:
- Đưa ra các ví dụ về các mẫu cụ thể trong một cái gì đó tôi có thể nhìn thấy, làm hoặc chạm vào.
- Mô tả những điều khác nhau tôi đã thử để đạt được một mục tiêu.
- Giải thích làm thế nào tôi có thể giúp người khác xác định các mẫu.
Algorithms:
- Mô tả nhiều tập hợp các hướng dẫn có thể hoàn thành một nhiệm vụ.
- Giải thích lý do tại sao tôi sử dụng các hướng dẫn cụ thể để hoàn thành một nhiệm vụ.
- So sánh và đối chiếu các hướng dẫn của tôi với các hướng dẫn khác hoàn thành cùng một nhiệm vụ.
Programming:
- Thử nghiệm các lệnh của ngôn ngữ lập trình.
- Mô tả ba cách một môi trường phát triển giúp tôi tạo ra một dự án.
- Giải thích lý do tại sao tôi chọn các lệnh cụ thể để truyền đạt hướng dẫn của tôi.
- Thảo luận về những gì có thể và không thể được thực hiện với một bộ lệnh cụ thể.
Ngữ vựng
Các chức năng là các dòng mã thực hiện các nhiệm vụ cụ thể. |
Là các giá trị bên trong một dấu ngoặc đơn theo tên của hàm. Chúng được sử dụng để thay đổi kết quả của một hàm |
Vẽ một hình chữ nhật lên màn hình |
Vẽ một hình elip vào màn hình |
Khoảng cách dọc của hình dạng 2D |
Một con số 2D với bốn cạnh thẳng và bốn góc vuông |
Một hình bầu dục thông thườ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:
text(mouseX + ", " + mouseY, 20, 20)
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.
//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 ellipse(335, 50, 50, 50); và dán nó trước dòng rect(40, 40, 400, 60);
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:
- Chỉ báo vị trí vải của chuột (x, y)
- Lưới thích ứng
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?