Hướng dẫn dùng ellipse function trong PHP

Tìm hiểu cách viết các hàm của riêng bạn trong Xử lý.

Hướng dẫn /
Hướng dẫn xử lý /
Tạo chức năng

hướng dẫn
xử lý
chức năng

Giờ đây, bạn đã biết cách gọi các hàm , sử dụng các biến và tạo các biến của riêng mình .

Hướng dẫn này chỉ cho bạn cách tạo các hàm của riêng bạn.

Tạo các chức năng của riêng bạn cho phép bạn tổ chức mã của mình thành các phần nhỏ hơn và xử lý các tác vụ phức tạp như một bước duy nhất.

Việc tạo các chức năng cũng cho phép bạn thực hiện những việc nâng cao hơn như hoạt ảnh và nhận thông tin đầu vào của người dùng.

Xác định chức năng

Để tạo chức năng của riêng bạn, bạn cần thực hiện bốn điều:

• Viết kiểu trả về của hàm.
• Viết tên của hàm.
• Bên trong dấu ngoặc đơn () , liệt kê bất kỳ tham số nào mà hàm sử dụng.
• Bên trong dấu ngoặc nhọn {} , hãy viết mã sẽ chạy bất cứ khi nào hàm được gọi. Đây được gọi là phần thân của hàm.

Loại trả lại

Hãy nhớ rằng các hàm có thể làm điều gì đó (như vẽ hình elip hoặc thay đổi màu tô) hoặc cung cấp cho bạn một giá trị (như một số ngẫu nhiên hoặc thời gian hiện tại) .

Ví dụ: hàm random cung cấp cho bạn giá trị float , bạn có thể lưu trữ trong một biến. Điều đó có nghĩa là kiểu trả về của hàm random là float < / code>.

So sánh hàm này với hàm ellipse , hàm này vẽ một vòng tròn. Hàm ellipse không cung cấp cho bạn bất kỳ giá trị nào, vì vậy sẽ không hợp lý nếu bạn cố gắng lưu trữ nó trong một biến. Vì hàm ellipse không trả về bất kỳ thứ gì, nên kiểu trả về của nó là void .

Các kiểu trả về là điều quan trọng cần ghi nhớ khi bạn viết các hàm của riêng mình. Hầu hết các hàm bạn sắp viết sẽ thực hiện điều gì đó thay vì cung cấp cho bạn một giá trị, vì vậy bạn sẽ thấy rất nhiều void < / code> loại trả lại.

Ví dụ

Đây là một hàm vẽ một vòng tròn màu đỏ:

  
 void 
 
 drawRedCircle 
 
 (
 
 float 
 
 circleX 
 
, 
 
 float 
 
 circleY 
 
, 
 
 float 
 
 circleDiameter 
 
) 
 
 {
  
 điền 
 
 (
 
 255 
 
, 
 
 0 
 
, 
 
 0 
 
) ; 
  
 ellipse 
 
 (
 
 circleX 
 
, 
 
 circleY 
 
, 
 
 circleDiameter 
 
, 
 
 circleDiameter 
 
); 
} 
 

Hàm này có kiểu trả về void (có nghĩa là nó thực hiện một việc gì đó thay vì cung cấp cho bạn một giá trị) và nhận ba tham số: circleX , circleY và circleDiameter . Phần thân của hàm thay đổi màu tô thành màu đỏ, sau đó sử dụng các tham số để vẽ hình tròn.

Để gọi hàm này, bạn phải sử dụng tên của nó và cung cấp các thông số cho nó, giống như cách bạn đang gọi các hàm khác:

  
 drawRedCircle 
 
 (
 
 100 
 
, 
 
 200 
 
, 
 
 50 
 p> 
); 
 

Điều này cho phép bạn xử lý một công việc cần nhiều bước (như thay đổi màu tô thành màu đỏ và vẽ một vòng tròn) chỉ là một bước. Điều này sẽ trở nên rất hữu ích khi mã của bạn trở nên phức tạp hơn!

setup () và draw () Functions

Hãy bắt đầu với mã không sử dụng bất kỳ chức năng tùy chỉnh nào. Đến đây, có lẽ bạn đã khá quen thuộc với mã này:

  
 size 
 
 (
 
 300 
 
, 
 
 300 
 
); 

 background 
 
 (
 
 0 
 
, 
 
 200 
 
, 
 
 0 
 
) ; 

 float 
 
 flowerX 
 
 = 
 
 150 
 
; 
 float 
 
 hoaY 
 
 = 
 
 150 
 
; 
 float 
 
 wingSize 
 
 = 
 
 100 
 
; 
 float 
 
 PetanceDistance 
 
 = 
 
 wingSize 
 
 / 
 
 2 
 
; 

 điền 
 
 (
 
 255 
 
, 
 
 128 
 
, 
 
 0 
 
) ; 

 // cánh hoa phía trên bên trái 
 elip 
 
 (
 
 hoaX 
 
 - 
 
 wingDistance 
 
, 
 
 hoaY 
 
 - 
 
 PetanceDistance 
 
, 
  
 cánh hoaSize 
 
, 
 
 cánh hoaSize 
 
); < / p>

 // cánh hoa phía trên bên phải 
 elip 
 
 (
 
 hoaX 
 
 + 
 
 wingDistance 
 
, 
 
 hoaY 
 
 - 
 
 PetanceDistance 
 
, 
  
 cánh hoaSize 
 
, 
 
 cánh hoaSize 
 
); < / p>

 // cánh hoa phía dưới bên trái 
 elip 
 
 (
 
 hoaX 
 
 - 
 
 wingDistance 
 
, 
 
 hoaY 
 
 + 
 
 PetanceDistance 
 
, 
  
 cánh hoaSize 
 
, 
 
 cánh hoaSize 
 
); < / p>

 // cánh hoa phía dưới bên phải 
 elip 
 
 (
 
 hoaX 
 
 + 
 
 wingDistance 
 
, 
 
 hoaY 
 
 + 
 
 PetanceDistance 
 
, 
  
 cánh hoaSize 
 
, 
 
 cánh hoaSize 
 
); < / p>

 // cánh hoa ở giữa 
 điền 
 
 (
 
 255 



 
, 
 
 0 
 
, 
 
 0 
 
) ; 
 ellipse 
 
 (
 
 hoaX 
 
, 
 
 hoaY 
 
, 
 cánh hoaSize 
 
, 
 
 cánh hoaSize 
 
); < / p>
 

Mã này tạo một cửa sổ 300x300 , vẽ nền màu xanh lục, sau đó vẽ một bông hoa ở giữa cửa sổ:

Bạn có thể sửa đổi chương trình này để sử dụng các chức năng của riêng bạn. Ví dụ: bạn có thể chia mã thiết lập và mã vẽ thành hai chức năng:

  
 void 
 
 thiết lập 
 
 () 
 
 {
  
 size 
 
 (
 
 300 
 
, 
 
 300 
 
); 
  
 background 
 
 (
 
 0 
 
, 
 
 200 
 
, 
 
 0 
 
) ; 
} 

 void 
 
 draw 
 
 () 
 
 {< / p>
  
 float 
 
 flowerX 
 
 = 
 
 150 
 
; 
  
 float 
 
 hoaY 
 
 = 
 
 150 
 
; 
  
 float 
 
 wingSize 
 
 = 
 
 100 
 
; 
  
 float 
 
 PetanceDistance 
 
 = 
 
 wingSize 
 
 / 
 
 2 
 
; 

  
 điền 
 
 (
 
 255 
 
, 
 
 128 
 
, 
 
 0 
 
) ; 

  
 // cánh hoa phía trên bên trái 
  
 elip 
 
 (
 
 hoaX 
 
 - 
 
 cánh hoaDistance
 
, 
 
 hoaY 
 
 - 
 
 PetanceDistance 
 
, 
    
 cánh hoaSize 
 
, 
 
 cánh hoaSize 
 
); < / p>

  
 // cánh hoa phía trên bên phải 
  
 elip 
 
 (
 
 hoaX 
 
 + 
 
 wingDistance 
 
, 
 
 hoaY 
 
 - 
 
 PetanceDistance 
 
, 
    
 cánh hoaSize 
 
, 
 
 cánh hoaSize 
 
); < / p>

  
 // cánh hoa phía dưới bên trái 
  
 elip 
 
 (
 
 hoaX 
 
 - 
 
 wingDistance 
 
, 
 
 hoaY 
 
 + 
 
 PetanceDistance 
 
, 
    
 cánh hoaSize 
 
, 
 
 cánh hoaSize 
 
); < / p>

  
 // cánh hoa phía dưới bên phải 
  
 elip 
 
 (
 
 hoaX 
 
 + 
 
 wingDistance 
 
, 
 
 hoaY 
 
 + 
 
 PetanceDistance 
 
, 
    
 cánh hoaSize 
 
, 
 
 cánh hoaSize 
 
); < / p>

  
 // cánh hoa ở giữa 
  
 điền 
 
 (
 
 255 
 
, 
 
 0 
 
, 
 
 0 
 
) ; 
  
 ellipse 
 
 (
 
 hoaX 
 
, 
 
 hoaY 
 
, 
    
 cánh hoaSize 
 
, 
 
 cánh hoaSize 
 
); < / p>
} 
 

Trình chỉnh sửa mã

?

Xem Bút ký của Happy Coding ( @KevinWorkman ) trên CodePen .

Cả hai hàm này đều có kiểu trả về void , có nghĩa là chúng làm điều gì đó thay vì trả về giá trị. Hàm setup xử lý việc cho biết Xử lý cửa sổ sẽ lớn như thế nào và thiết lập màu nền và hàm draw vẽ bông hoa.

Tôi không chọn tên của những hàm này một cách ngẫu nhiên. Xử lý tự động gọi hàm thiết lập và draw ! Bạn sẽ tìm hiểu thêm về điều đó trong phần hoạt ảnh bên dưới.

Chức năng tùy chỉnh

Giờ bạn đã biết cách viết các hàm như setup và draw mà Xử lý tự động gọi. Điều này giúp tổ chức mã của bạn, nhưng nếu bạn muốn vẽ nhiều thứ khác nhau thì sao? Bạn có thể thêm tất cả mã của mình vào hàm draw , nhưng điều đó sẽ khá lộn xộn.

Hãy tưởng tượng việc sửa đổi chương trình hoa để vẽ bốn bông hoa khác nhau, mỗi bông hoa có vị trí và kích thước riêng. Bạn có thể sẽ sao chép và dán rất nhiều mã giống nhau, điều này sẽ khiến bạn khó thay đổi. Điều gì sẽ xảy ra nếu bạn muốn thay đổi những bông hoa của mình thành tất cả đều có tâm màu xanh? Bạn sẽ phải thực hiện cùng một thay đổi ở bốn nơi khác nhau!

Thử thách: Nếu bạn không tin rằng điều đó sẽ gây khó chịu, hãy thử! Viết chương trình vẽ bốn bông hoa, sau đó thay đổi mã để tất cả các bông hoa đều có cánh hoa ở giữa màu xanh lam!

Để trợ giúp việc này, bạn có thể di chuyển tất cả mã liên quan đến việc vẽ một bông hoa vào một hàm drawFlower .

Để tạo một hàm, bạn viết kiểu trả về của nó (thường là void ), sau đó là tên của nó, sau đó là các tham số của nó bên trong () và cuối cùng, bên trong dấu ngoặc nhọn {} , hãy viết mã sẽ chạy khi bạn gọi mã đó chức năng.

  
 void 
 
 drawFlower 
 
 (
 
 float 
 
 flowerX 



 
, 
 
 float 
 
 hoaY 
 
, 
 
 float 
 
 wingSize 
 
) 
 
 {
  
 float 
 
 PetanceDistance 
 
 = 
 
 wingSize 
 
 / 
 
 2 
 
; 

  
 điền 
 
 (
 
 255 
 
, 
 
 128 
 
, 
 0 
 
); 

  
 // cánh hoa phía trên bên trái 
  
 elip 
 
 (
 
 hoaX 
 
 - 
 
 wingDistance 
 
, 
 
 hoaY 
 
 - 
 
 PetanceDistance 
 
, 
    
 cánh hoaSize 
 
, 
 
 cánh hoaSize 
 
); < / p>

  
 // cánh hoa phía trên bên phải 
  
 elip 
 
 (
 
 hoaX 
 
 + 
 
 wingDistance 
 
, 
 
 hoaY 
 
 - 
 
 PetanceDistance 
 
, 
    
 cánh hoaSize 
 
, 
 
 cánh hoaSize 
 
); < / p>

  
 // cánh hoa phía dưới bên trái 
  
 elip 
 
 (
 
 hoaX 
 
 - 
 
 wingDistance 
 
, 
 
 hoaY 
 
 + 
 
 PetanceDistance 
 
, 
    
 cánh hoaSize 
 
, 
 
 cánh hoaSize 
 
); < / p>

  
 // cánh hoa phía dưới bên phải 
  
 elip 
 
 (
 
 hoaX 
 
 + 
 
 wingDistance 
 
, 
 
 hoaY 
 
 + 
 
 PetanceDistance 
 
, 
    
 cánh hoaSize 
 
, 
 
 cánh hoaSize 
 
); < / p>

  
 // cánh hoa ở giữa 
  
 điền 
 
 (
 
 255 
 
, 
 
 0 
 
, 
 
 0 
 
) ; 
  
 ellipse 
 
 (
 
 hoaX 
 
, 
 
 hoaY 
 
, 
    
 cánh hoaSize 
 
, 
 
 cánh hoaSize 
 
); < / p>
} 
 

Không giống như thiết lập và vẽ các hàm, Xử lý sẽ không gọi hàm drawFlower một cách tự động. Nhưng bây giờ bạn có thể tự gọi nó, giống hệt như bạn đang gọi các chức năng khác!

  
 void 
 
 thiết lập 
 
 () 
 
 {
  
 size 
 
 (
 
 300 
 
, 
 
 300 
 
); 
  
 background 
 
 (
 
 0 
 
, 
 
 200 
 
, 
 
 0 
 
) ; 
} 

 void 
 
 draw 
 
 () 
 
 {< / p>
  
 drawFlower 
 
 (
 
 150 
 
, 
 
 150 
 
, 
 
 100 
 
) ; 
} 

 void 
 
 drawFlower 
 
 (
 
 float 
 
 hoaX 
 
, 
 
 float 
 
 hoaY 
 
, 
 
 float 
 
 wingSize 
 
) 
 
 {
  
 float 
 
 PetanceDistance 
 
 = 
 
 wingSize 
 
 / 
 
 2 
 
; 

  
 điền 
 
 (
 
 255 
 
, 
 
 128 
 
, 
 
 0 
 
) ; 

  
 // cánh hoa phía trên bên trái 




  
 elip 
 
 (
 
 hoaX 
 
 - 
 
 wingDistance 
 
, 
 
 hoaY 
 
 - 
 
 PetanceDistance 
 
, 
    
 cánh hoaSize 
 
, 
 
 cánh hoaSize 
 
); < / p>

  
 // cánh hoa phía trên bên phải 
  
 elip 
 
 (
 
 hoaX 
 
 + 
 
 wingDistance 
 
, 
 
 hoaY 
 
 - 
 
 PetanceDistance 
 
, 
    
 cánh hoaSize 
 
, 
 
 cánh hoaSize 
 
); < / p>

  
 // cánh hoa phía dưới bên trái 
  
 elip 
 
 (
 
 hoaX 
 
 - 
 
 wingDistance 
 
, 
 
 hoaY 
 
 + 
 
 PetanceDistance 
 
, 
    
 cánh hoaSize 
 
, 
 
 cánh hoaSize 
 
); < / p>

  
 // cánh hoa phía dưới bên phải 
  
 elip 
 
 (
 
 hoaX 
 
 + 
 
 wingDistance 
 
, 
 
 hoaY 
 
 + 
 PetanceDistance 
 
, 
    
 cánh hoaSize 
 
, 
 
 cánh hoaSize 
 
); < / p>

  
 // cánh hoa ở giữa 
  
 điền 
 
 (
 
 255 
 
, 
 
 0 
 
, 
 
 0 
 
) ; 
  
 ellipse 
 
 (
 
 hoaX 
 
, 
 
 hoaY 
 
, 
    
 cánh hoaSize 
 
, 
 
 cánh hoaSize 
 
); < / p>
} 
 

Trình chỉnh sửa mã

?

Xem Bút ký của Happy Coding ( @KevinWorkman ) trên CodePen .

Mã này gọi hàm drawFlower với các tham số 150, 150, 100 vẽ một bông hoa với tọa độ X của 150 , tọa độ Y của 150 và kích thước cánh hoa là 100 . Hãy thử thay đổi các thông số để xem điều gì sẽ xảy ra!

Giờ bạn đã có hàm drawFlower , bạn có thể gọi hàm này bao nhiêu lần tùy ý với bất kỳ tham số nào bạn muốn!

  
 void 
 
 draw 
 
 () 
 
 {
  
 drawFlower 
 
 (
 
 80 
 
, 
 
 90 
 
, 
 
 75 
 
) ; 
  
 drawFlower 
 
 (
 
 225 
 
, 
 
 80 
 
, 
 
 45 
 
) ; 
  
 drawFlower 
 
 (
 
 75 
 
, 
 
 225 
 
, 
 
 55 
 
) ; 
  
 drawFlower 
 
 (
 
 220 
 
, 
 
 220 
 
, 
 
 65 
 
) ; 
} 
 

Trình chỉnh sửa mã

?

Xem Bút ký của Happy Coding ( @KevinWorkman ) trên CodePen .

Lợi ích ở đây là bạn có thể coi hàm drawFlower như một bước duy nhất, mặc dù nó thực sự thực hiện rất nhiều thứ khi bạn gọi nó. Bạn không phải lo lắng về cách bông hoa được vẽ, giống như bạn không phải lo lắng về cách hoạt động của hàm ellipse đằng sau hậu trường.

Và bây giờ nếu bạn muốn thay đổi cách vẽ hoa của mình, bạn chỉ phải thay đổi nó ở một nơi thay vì thay đổi từng bông hoa riêng lẻ. Hãy thử thay đổi màu cánh hoa trung tâm thành màu xanh lam!

Hoạt ảnh

Hãy nhớ rằng Xử lý tự động gọi các hàm setup và draw . Có điều gì đó rất mạnh mẽ đang diễn ra đằng sau hậu trường: Quá trình xử lý tự động gọi hàm setup một lần ở đầu chương trình, sau đó gọi hàm draw 60 lần mỗi giây .

Hàm setup hữu ích cho những việc bạn chỉ muốn thực hiện một lần: định cỡ cửa sổ, tải hình ảnh, đọc từ tệp, những việc như vậy.

Thực tế là hàm draw được gọi 60 lần mỗi giây cho phép bạn tạo các chương trình của mình hoạt hình và tương tác. Cho đến nay, mã vẽ (các) bông hoa giống nhau mỗi khi hàm draw được gọi.

Nhưng điều gì sẽ xảy ra nếu bạn sử dụng hàm random để vẽ một bông hoa ngẫu nhiên mỗi khi vẽ được gọi là?

  
 void 
 
 draw 
 
 () 
 
 {
  
 drawFlower 
 
 (
 
 ngẫu nhiên 
 
 (
 
 width 
 
), 
 
 ngẫu nhiên 
 
 (
 
 height 
 
), 
 
 ngẫu nhiên 
 
 (
 
 10 
 
, 
 
 25 
 
));
} 
 

Trình chỉnh sửa mã

?

Xem Bút ký của Happy Coding ( @KevinWorkman ) trên CodePen .

Giờ đây, mã vẽ một bông hoa ngẫu nhiên mới mỗi khi hàm draw chạy (60 lần mỗi giây), có nghĩa là những bông hoa ngẫu nhiên sẽ lấp đầy cửa sổ.

Bạn sẽ tìm hiểu thêm về điều này trong Hướng dẫn xử lý hoạt ảnh , nhưng bây giờ đủ để biết rằng việc tạo các hàm tùy chỉnh của riêng bạn giúp bạn dễ dàng tổ chức mã của mình thành các phần hợp lý mà bạn có thể xử lý như một bước duy nhất.

Tóm tắt

Hãy nhớ rằng một chương trình rất giống một công thức: công thức là danh sách các bước bạn làm theo thứ tự và chương trình là danh sách các lệnh gọi hàm mà máy tính tuân theo theo thứ tự.

Gọi một hàm tùy chỉnh giống như tham chiếu công thức đóng băng từ công thức làm bánh.

  ...
Đổ bột bánh vào chảo tráng bánh.
Nướng trong 45 phút.
Trong khi chờ đợi, hãy làm theo công thức đóng băng ở trang 42.
Lấy bánh ra khỏi lò và phết đá lạnh lên trên.
 

Tác giả của công thức làm bánh thậm chí không cần biết bất cứ điều gì về công thức đóng băng! Tất cả những gì họ quan tâm là kết quả cuối cùng. Họ cũng có thể đề cập đến một công thức nhiều lần: ví dụ: công thức cho một chiếc bánh ba lớp có thể đề cập đến một công thức làm một chiếc bánh ba lần. Điều này giúp bạn dễ dàng tập trung vào từng công thức và sắp xếp các bước thành một cấu trúc hợp lý hơn.

Điều tương tự cũng đúng với việc tạo các hàm. Việc tạo các hàm cho phép bạn tổ chức mã của mình và đóng gói logic phức tạp của bạn (như vẽ một bông hoa) vào một lệnh gọi hàm mà bạn có thể coi như một bước duy nhất.

Việc tạo các hàm cũng cho phép bạn lặp lại công việc mà không cần lặp lại mã: để vẽ bốn bông hoa, bạn đã gọi hàm drawFlower bốn lần với các tham số khác nhau.

Bạn cũng có thể sử dụng các hàm setup và draw để tạo các chương trình tương tác và hoạt hình mà bạn sẽ tìm hiểu trong một vài hướng dẫn tiếp theo.

Bài tập về nhà

• Tạo một hàm drawHouse để vẽ một ngôi nhà. Tham khảo các thông số về vị trí, kích thước, màu sắc của ngôi nhà, v.v.
• Tạo một hàm drawBlock vẽ 4 ngôi nhà. Đưa vào các thông số về vị trí khối, kích thước, màu sắc, v.v. Đừng viết mã vẽ 4 ngôi nhà! Thay vào đó, hãy gọi hàm drawHouse 4 lần khác nhau với các tham số khác nhau.
• Tạo một hàm drawNeighborhood để vẽ 9 khối. Nhập các thông số cho vị trí, kích thước, màu sắc vùng lân cận, v.v. Gọi hàm drawBlock để vẽ các khối.
• Tạo hàm drawCity để lấp đầy cửa sổ với các vùng lân cận.

Nhận xét và Câu hỏi

Happy Coding là một cộng đồng gồm những người giống như bạn đang học về mã hóa.

Bạn có một bình luận hoặc câu hỏi? Đăng nó ở đây!