Hướng dẫn lập trình thú vị cho nhà thiết kế - Chạy hình ảnh của bạn (Phần hai): 8 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:30

Toán học, đối với hầu hết các bạn, dường như vô dụng. Thông dụng nhất được sử dụng trong cuộc sống hàng ngày của chúng ta chỉ là cộng, trừ, nhân và chia. Tuy nhiên, nó hoàn toàn khác nếu bạn có thể tạo bằng chương trình. Bạn càng biết nhiều, bạn sẽ nhận được kết quả tuyệt vời hơn.

Bước 1: Chuyển động & Chức năng

Hãy để tôi cho bạn xem một số hình ảnh chưa biết để kích thích vị giác của bạn.

Đây là gì? Bây giờ chỉ cần giữ câu hỏi này trước và sau này bạn sẽ biết và sử dụng nó.

Trong chương trước, chúng ta đã học cách thiết lập hàm và vẽ hàm, có thể làm cho đồ họa tĩnh trở nên động. Tuy nhiên, định dạng chuyển động này quá đơn giản. Chúng tôi sẽ sử dụng kiến thức chức năng mà chúng tôi đã nắm vững trước đây để chạy đồ họa của chúng tôi với nhân vật của riêng chúng.

Bạn có thể nhận ra bao nhiêu chức năng từ những bức ảnh trên? Mối quan hệ giữa chúng với chuyển động là gì? Bây giờ, hãy chọn một hàm bậc hai từ nó, thêm một số tham số ngẫu nhiên và xem điều gì sẽ xảy ra. Ví dụ: y = x² / 100.

Đây là hình ảnh chức năng trông như thế nào. Sao chép mã bên dưới.

[cceN_cpp theme = "rạng đông"] float x, y; void setup () {size (300, 300); nền (0); x = 0; } void draw () {stroke (255); strokeWeight (2); y = pow (x, 2) / 100.0; // Hàm pow sẽ trở về lũy thừa thứ n của số chỉ định. (x, 2) đại diện cho bình phương của x. Tham số đầu tiên là số cơ sở và tham số thứ hai là chỉ số. điểm (x, y); x ++; } [/cceN_cpp]

Hiệu ứng Chạy

Tiếp theo, chọn hàm sin. Công thức: y = 150 + sin (x).

Sao chép mã sau.

[cceN_cpp theme = "rạng đông"] float x, y; void setup () {size (300, 300); nền (0); x = 0; } void draw () {y = height / 2 + sin (radian (x)) * 150; // Hàm biến đổi radian x thành góc. x ++; đột quỵ (255); strokeWeight (2); điểm (x, y); } [/cceN_cpp]

Hiệu ứng Chạy

Đây là hình ảnh chúng tôi nhận được sau khi vận hành mã. Và đó là dấu vết chuyển động của họ. So với trước đây, kết quả là rõ ràng. Hình ảnh chức năng thực sự tương ứng với theo dõi chuyển động! Nó khá đơn giản, đủ. Bạn chỉ cần thay giá trị của x, y vào tọa độ. Đường trước mà chúng tôi vẽ tương đương với đồ thị của hàm y = x² / 100. Trong khi đường sau tương đương với đồ thị của hàm y = 150 + sin (x). Nhưng trong chương trình, hướng của trục y là ngược lại. Vì vậy, so với hình ảnh gốc, đường đua sẽ bị lộn ngược. Bây giờ, tôi đoán bạn phải có cảm giác rằng một số câu hỏi khó ám ảnh trong đầu của bạn trong một thời gian dài sẽ được giải quyết ngay lập tức. Thật ngạc nhiên là những chức năng tuyệt vời mà chúng ta đã học trước đây có thể được sử dụng để điều khiển chuyển động đồ họa!

Bước 2: Viết hàm

Tôi đã liệt kê một số chức năng được sử dụng thường xuyên bên dưới. Hy vọng những điều này có thể giúp chúng ta dịch các hàm thành mã có thể được máy tính nhận dạng.

Do đó, công thức dưới đây trong chương trình sẽ được viết như thế này:

y = x² → y = pow (x, 2) hoặc y = sq (x)

y = x³ → y = pow (x, 3)

y = xⁿ → y = pow (x, n)

y = 4ⁿ → y = pow (4, n)

y ＝ logₑ² → y = log (2)

y = e² → y = exp (2)

y = √5 → y = sqrt (5)

Bạn cũng có thể viết ngẫu nhiên một hàm vào chương trình và xem đường chuyển động của nó sẽ như thế nào. Hãy nhớ xem xét phạm vi của trường giá trị và miền định nghĩa, nếu không hình ảnh của bạn sẽ chạy ra khỏi màn hình.

TrigonometricFunction

Bây giờ, chúng ta hãy đi xa hơn để biết một số tác phẩm của các hàm lượng giác.

Chúng ta phải chú ý rằng trong chương trình, đầu vào của tham số hàm liên quan đến góc sử dụng radian. Do đó sin90 ° sẽ được viết thành sin (PI ／ 2). Nếu bạn không quen với phương pháp này, bạn có thể sử dụng hàm randian để biến đổi góc thành radian trước, sau đó viết sin （radian (90)).

Việc sử dụng các độ hàm tương đối ngược lại. Nó có thể biến đổi radian thành góc. Nhập bản in (độ (PI / 2)) trực tiếp vào vùng chỉnh sửa và xem bạn sẽ nhận được gì.

Bước 3: Điều khiển chuyển động đồ họa bằng hàm lượng giác

Đây là một trường hợp để bạn thấy hiệu ứng thực tế của chuyển động đồ họa.

[cceN_cpp theme = "rạng đông"] float x, y; void setup () {size (700, 300); } void draw () {background (234, 113, 107); y = sin (radian (x)) * 150 + 150; x ++; noStroke (); hình elip (x, y, 50, 50); } [/cceN_cpp]

Hàm sin là một hàm tuần hoàn. Giá trị nhỏ nhất của nó là －1 và giá trị lớn nhất là 1. Chiều cao của màn hình là 300. Tham chiếu đến y = sin (radian (x)) * 150 + 150, do đó phạm vi thay đổi của giá trị y sẽ được kiểm soát tốt trong phạm vi 0 đến 300.

Quay vòng tròn

Chà, cuối cùng chúng ta cũng đã đến phần nhập khẩu nhiều nhất trong chương này. Làm thế nào để vẽ một đường tròn trong một chương trình? Làm thế nào để sử dụng các chức năng để hiển thị nó? Để tôi cho bạn xem lại hai hình ảnh mà chúng ta đã thấy ở đầu bài viết này.

Trên thực tế, họ đã tiếp xúc trực quan mối quan hệ giữa tọa độ chu vi và hàm lượng giác. Chuyển động trong các hình trên được điều khiển bởi biến độc lập liên tục tăng θ. Bên trái là hình ảnh của hàm sin và cos, và bên phải là hình ảnh của một điểm chuyển động tròn sau khi được ánh xạ. Nó không phải là rất thông minh? Nó không còn bí ẩn nữa. Bạn có thể sử dụng mã để nhận ra nó.

Một ví dụ đơn giản:

[cceN_cpp theme = "rạng đông"] float x, y, r, R, angle; void setup () {size (300, 300); r = 20; // Đường tròn đường kính R = 100; // Bán kính đường di chuyển x = 0; góc = 0; y = chiều cao / 2; } void draw () {background (234, 113, 107); dịch (chiều rộng / 2, chiều cao / 2); // Di chuyển điểm gốc vào tâm màn hình. noStroke (); x = R * cos (góc); y = R * sin (góc); hình elip (x, y, r, r); góc + = 0,05; } [/cceN_cpp]

Nhìn! Một vòng tròn quay xuất hiện! Ở đây, biến độc lập không còn ở góc tăng bit trở thành không đổi (bằng với θ trong hình). Nó là đứng cho góc. Trong số đó, xy có hệ số tương đối nhân R, dẫn đến việc mở rộng bán kính chuyển động của vòng tròn (R là bán kính). Nếu không nhân R, đường di chuyển của nó sẽ bị giới hạn trong phạm vi từ -1 đến 1.

Tại sao không sử dụng x tăng dần? Theo thuộc tính của chính hàm, bất kỳ x nào trong miền định nghĩa đều có y duy nhất phù hợp với nó. Vì vậy, trong hệ tọa độ chiều hình chữ nhật phẳng, bạn không thể tìm ra một “chức năng đơn giản” để vẽ đường tròn một cách trực tiếp. Điều đó có nghĩa là chúng tôi không thể sử dụng định dạng này nữa.

y = (Biểu thức chưa biết của x?);

x ＋＋;

Vì vậy, chúng tôi phải thay đổi ý tưởng của mình. Chọn một góc khác làm biến độc lập, sau đó sử dụng hàm sin và cos để biến nó thành tọa độ ngang và dọc.

x = R * cos (góc);

y = R * sin (góc);

góc + = 0,05;

Một số bạn có thể thắc mắc tại sao nó có thể hiển thị đường chuyển động của vòng tròn. Theo định nghĩa của hàm lượng giác, chúng ta có thể dễ dàng suy luận rằng hàm sin là tỷ số của cạnh đối diện với cạnh huyền; hàm cos là tỷ số của cạnh huyền. Cho dù điểm của vòng tròn nằm ở đâu, r (bán kính) sẽ không thay đổi. Do đó ta có thể kết luận biểu thức của tọa độ x và tọa độ y.

Vì đây không phải là hướng dẫn toán học nên ở đây tôi xin dừng việc trình bày thêm kiến thức về hàm số lượng giác cho các bạn. Nếu bạn muốn biết nó hoặc bạn quên nó, bạn có thể thử xem lại nó một lần nữa.

Tất nhiên, nó là tất cả các quyền nếu bạn không thể hiểu đầy đủ về nó. Bạn chỉ cần biết cách sử dụng nó để vẽ một hình tròn. Đây cũng là một loại “ý tưởng lập trình”. Sau đó, chúng ta sẽ thường gọi một số mô-đun tồn tại do những người khác tạo ra để thực hiện một loại chức năng nhất định. Chỉ cần đừng cố gắng để biết nó một cách chi tiết.

Tuy nhiên, hàm sin và cos là phổ biến. Nếu bạn muốn tạo cấp độ cao hơn, tốt hơn bạn nên cố gắng tìm hiểu kỹ về điều đó. Nếu bản thân câu hỏi này có thể thúc đẩy chúng ta tìm hiểu thêm kiến thức toán học, thì còn nhiều điều thú vị hơn đang chờ bạn khai phá.

Đây là những hình ảnh liên quan chặt chẽ đến hàm số lượng giác.

Bước 4: Hệ tọa độ chuyển động

Các hiệu ứng trước đó đều là về thay đổi tọa độ đồ họa. Bản thân hệ tọa độ là tĩnh. Trên thực tế, chúng ta có thể thực hiện chuyển động tọa độ để nhận ra hiệu ứng động lực. Điều này cũng giống như những người trên bãi biển quan sát những người khác trên thuyền. Đối với người trên thuyền, thuyền là động tĩnh. Nhưng nếu bản thân chiếc thuyền đang chuyển động, thì những người trên thuyền cũng chuyển động theo nó. Các trường hợp trước đây đều là về “những người chạy trên thuyền”. Trên thực tế, con thuyền không di chuyển. Sau đây là một số hàm thông dụng để thay đổi hệ tọa độ.

Dịch hàm

Hàm dịch, chúng ta đã nói trước đây, được sử dụng để di chuyển hệ tọa độ của đồ họa theo chiều ngang.

Gọi định dạng:

dịch (a, b)

Tham số đầu tiên là viết tắt của việc di chuyển đến chiều dương của trục x đối với một pixel. Tham số thứ hai là viết tắt của chuyển động đến chiều dương của trục y đối với b pixel.

So sánh hai mã và cố gắng tìm bất kỳ sự khác biệt nào. (Để đơn giản hóa mã, chúng ta có thể xóa kích thước chức năng, chiều rộng và chiều cao màn hình được mặc định là 100.)

Trước khi chúng tôi sử dụng:

hình elip (0, 0, 20, 20);

Sau khi chúng tôi sử dụng:

dịch (50, 50);

hình elip (0, 0, 20, 20);

Chức năng xoay

Gọi định dạng:

xoay (a)

Nó được sử dụng để quay hệ tọa độ. Khi tham số là số dương, nó sẽ chọn điểm gốc làm điểm chính giữa và quay theo chiều kim đồng hồ. Đầu vào tham số giống với hàm lượng giác để sử dụng radian.

Trước khi sử dụng:

hình elip (50, 50, 20, 20);

Sau khi sử dụng:

xoay (radian (30));

hình elip (50, 50, 20, 20);

Hiệu ứng trong chương trình là làm cho vòng tròn quay xung quanh điểm tâm tọa độ theo chiều kim đồng hồ 30 độ.

Thang đo chức năng

Gọi định dạng:

thang đo (a)

Chức năng này có thể thu nhỏ hệ tọa độ. Giá trị dành cho việc mở rộng quy mô. Khi tham số vượt quá 1, sau đó phóng to; nếu nó thấp hơn 1, thì hãy thu nhỏ.

Trước khi sử dụng:

hình elip (0, 0, 20, 20);

Sau khi sử dụng:

thang đo (4);

hình elip (0, 0, 20, 20);

Hình tròn trong hình trên được khuếch đại lên gấp bốn lần so với kích thước ban đầu. Ngoài ra, bạn có thể sử dụng hai tham số để thu nhỏ theo hướng trục x và trục y một cách riêng biệt.

thang đo (4, 2);

hình elip (0, 0, 20, 20);

Sự chồng chất của chức năng chuyển đổi

Ở đây, chồng chất là tất cả những thay đổi liên quan đến hệ tọa độ hiện tại. Nói cách khác, các hiệu ứng có thể được xếp chồng lên nhau.

dịch (40, 10);

dịch (10, 40);

hình elip (0, 0, 20, 20);

Hiệu quả cuối cùng của nó sẽ bằng

dịch (50, 50);

hình elip (0, 0, 20, 20);

Tương tự để xoay chức năng

xoay (radian (10));

xoay (rađian (20));

hình elip (50, 50, 20, 20);

Tương đương với

xoay (radian (30));

hình elip (50, 50, 20, 20);

Cả hai chức năng chia tỷ lệ và xoay tâm trên điểm gốc để chia tỷ lệ và xoay. Nếu chúng ta muốn có được hiệu ứng xoay với vị trí trung tâm tại (50, 50), chúng ta phải nghĩ theo cách ngược lại. Đầu tiên di chuyển điểm ban đầu đến vị trí của (50, 50), sau đó thêm chức năng biến đổi xoay. Cuối cùng làm cho đồ họa của bạn được vẽ trên điểm ban đầu.

Trước khi sử dụng:

hình elip (50, 50, 50, 20);

Sau khi sử dụng:

dịch (50, 50);

xoay (rađian (45));

hình elip (0, 0, 50, 20); // Để xem sự thay đổi góc xoay, chúng ta đã tạo một hình bầu dục.

Nó có vẻ xoắn. Bạn chỉ cần thực hành nhiều hơn thì bạn sẽ hiểu nó. (Bạn cũng có thể thử thay đổi trình tự của chức năng dịch và xoay để xem sự khác biệt.)

Chuyển động ngang và chuyển động tròn

Trong các trường hợp sau, chúng ta sẽ nhận ra hiệu ứng chuyển động thông qua việc thay đổi hệ tọa độ. Đồng thời, tôi muốn yêu cầu bạn tham khảo ví dụ của chương trước. Hầu hết thời gian, bạn sẽ thấy để nhận ra một loại hiệu quả nào đó, bạn có thể sử dụng một phương pháp hoàn toàn khác.

Bước 5: Chuyển động ngang

[cceN_cpp theme = "bình minh"]

int x, y; void setup () {size (300, 300); x = 0; y = chiều cao / 2; } void draw () {background (234, 113, 107); noStroke (); dịch (x, y); hình elip (0, 0, 50, 50); x ++; } [/cceN_cpp]

Tọa độ đường tròn không thay đổi nhưng hệ tọa độ của nó bị thay đổi.

Xoay chuyển động

[cceN_cpp theme = "rạng đông"] float r, R, angle; void setup () {size (300, 300); r = 20; // Kích thước đường tròn R = 100; // Bán kính của đường di chuyển} void draw () {background (234, 113, 107); dịch (chiều rộng / 2, chiều cao / 2); // Di chuyển điểm ban đầu đến tâm màn hình. xoay (góc); noStroke (); hình elip (0, R, r, r); góc + = 0,05; } [/cceN_cpp]

Nó không rõ ràng và đơn giản hơn nhiều so với hàm lượng giác sao? Bạn có thể có một câu hỏi ở đây. Lấy mã xoay làm ví dụ. Rõ ràng, hàm biến đổi được đề cập ở trên là tương đối và cho phép chồng chất. theo chiều dưới cùng bên phải so với gốc ban đầu? Hợp lý là nó sẽ không nằm ở trung tâm của màn hình mãi mãi.

Bạn có thể hiểu theo cách này. Khi mã trong hàm vẽ đã hoàn thành một thao tác từ trên xuống dưới, hệ tọa độ sẽ trở lại trạng thái ban đầu ở thao tác thứ hai. Điểm gốc của hệ tọa độ sẽ được mặc định quay trở lại góc trên cùng bên trái. Vì vậy, nếu chúng ta muốn làm cho hệ tọa độ thay đổi liên tục, các tham số góc trong chức năng quay phải liên tục tăng giá trị của nó.

Truy cập Trạng thái Tọa độ

Đôi khi, chúng tôi không muốn thay đổi trạng thái hệ tọa độ dựa trên trạng thái cũ. Lúc này, chúng ta phải sử dụng hàm pushMatrix và popMatrix. Hai chức năng thường xuất hiện trong một cặp. Hàm pushMatrix có trước popMatrix. Chúng không thể được sử dụng duy nhất, hoặc nó sẽ xảy ra sai sót.

Thí dụ:

[cceN_cpp theme = "rạng đông"] pushMatrix (); // Lưu trữ trạng thái hệ tọa độ dịch (50, 50); hình elip (0, 0, 20, 20); popMatrix (); // Đọc trạng thái hệ tọa độ trực tiếp (0, 0, 20, 20); [/cceN_cpp]

Trong ví dụ này, trước khi sử dụng hàm translate (50, 50), chúng ta sử dụng hàm pushMatrix. để lưu trữ trạng thái hiện tại của hệ tọa độ. Đây, đồng thời, là trạng thái ban đầu. Sau khi chúng tôi vẽ một vòng tròn, sau đó triển khai popMatrix, nó sẽ trở lại trạng thái này. Lúc này, thực hiện hàm trực tiếp, bạn sẽ thấy nó không bị ảnh hưởng bởi hàm dịch thay vào đó nó vẽ một hình vuông ở góc trên bên trái của điểm ban đầu.

Bên cạnh đó, chức năng pushMatrix và popMatrix cho phép lồng vào nhau.

Ví dụ

pushMatrix ();

pushMatrix ();

popMatrix ();

popMatrix ();

Để hiển thị mối quan hệ của nó một cách trực quan, chúng tôi chọn định dạng ngưng tụ.

Chuyển động kết hợp hay chuyển động trong chuyển động?

Bây giờ làn sóng thứ hai của phần quan trọng bắt đầu. Chỉ cần cố gắng đẩy về phía trước. Trước đây, chúng ta đã sử dụng một phép ẩn dụ về thuyền và người. Bạn có bao giờ nghĩ nếu chúng ta bắt cả người và thuyền di chuyển thì những người trên bãi biển sẽ có cảm giác như thế nào không?

Giống như kết hợp chuyển động ngang với chuyển động quay của hệ tọa độ. Vấn đề ở đây là thực sự chỉ di chuyển theo một hướng.

[cceN_cpp theme = "rạng đông"] int x, y; góc nổi; void setup () {size (300, 300); nền (234, 113, 107); noStroke (); x = 0; // Khi giá trị ban đầu của x là 0, chúng ta có thể bỏ qua câu mã này, khi khai báo biến, giá trị mặc định là 0. y = 0; // Tương tự như trên. góc = 0; // Tương tự như trên. } void draw () {angle + = 0,25; y--; dịch (chiều rộng / 2, chiều cao / 2); pushMatrix (); xoay (góc); hình elip (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

Và có chuyển động tròn và chia tỷ lệ hệ tọa độ.

[cceN_cpp theme = "rạng đông"] float x, y, angle; void setup () {size (300, 300); nền (234, 113, 107); noStroke (); } void draw () {angle + = 0.01; x = sin (góc) * 100; y = cos (góc) * 100; dịch (chiều rộng / 2, chiều cao / 2); pushMatrix (); tỷ lệ (1 + 0,1 * sin (góc * 10)); hình elip (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

Đừng để bị lừa bởi nó! Điểm vòng tròn thực sự đang thực hiện chuyển động tròn. Không có gì khó hiểu nếu chúng ta so sánh nó với việc mở rộng quy mô bằng máy quay phim. Máy quay video liên tục di chuyển trước hoặc sau đang quay một điểm theo chuyển động tròn.

Ngạc nhiên? Đây là những chức năng cơ bản đơn giản. Nhưng với sự kết hợp khác nhau, chúng ta có thể tạo ra rất nhiều hiệu ứng khác nhau. Cho đến bây giờ, sự tiếp xúc của tôi dừng lại để dành một số không gian cho việc khám phá của bạn.

Bước 6: Sử dụng toàn diện

Nó sắp kết thúc cho chương này. Hai chương cuối, tôi đã giới thiệu phương pháp cơ bản của chuyển động đồ họa. Tôi tin rằng bạn có thể hiểu sâu hơn về nó, so với những ý tưởng ban đầu của bạn. Cuối cùng, đây là một số ví dụ hoàn chỉnh để bạn tham khảo.

[cceN_cpp theme = "rạng đông"] float x1, y1, x2, y2, r, R; float angle1, angle2; void setup () {size (300, 300); r = 12; R = 120; góc1 = 0; góc2 = PI / 4; } void draw () {background (234, 113, 107); noStroke (); dịch (chiều rộng / 2, chiều cao / 2); góc1 + = 0,02; góc2 + = 0,06; x1 = R * sin (góc1); y1 = R * cos (góc1); x2 = R / 2 * sin (góc2); y2 = R / 2 * cos (góc2); hình elip (x1, y1, r / 2, r / 2); hình elip (x2, y2, r, r); hình elip (-x1, -y1, r / 2, r / 2); hình elip (-x2, -y2, r, r); hình elip (x1, -y1, r / 2, r / 2); hình elip (x2, -y2, r, r); hình elip (-x1, y1, r / 2, r / 2); hình elip (-x2, y2, r, r); đột quỵ (255); strokeWeight (3); dòng (x1, y1, x2, y2); dòng (-x1, -y1, -x2, -y2); dòng (x1, -y1, x2, -y2); dòng (-x1, y1, -x2, y2); } [/cceN_cpp]

Ví dụ này không chứa bất kỳ kiến thức nào ngoài chương trước của chúng tôi đã giới thiệu.

Đối với những điểm nào phù hợp? Những dòng nào phù hợp? Tôi cũng không thể tìm ra nó. Nhưng tôi nhớ nó bắt nguồn từ một đoạn mã nhỏ.

Đây là bản chất của chuyển động của nó. Các dòng còn lại chỉ là hiệu ứng gương. Nếu bạn tiếp tục làm theo hướng dẫn này, bạn có thể tạo phiên bản cập nhật và thêm bộ điều khiển vào đồ họa của mình để thay đổi trạng thái chuyển động đồ họa của bạn trong thời gian thực.

Điểm thú vị của lập trình nằm ở chỗ bạn có thể thiết kế hoặc kết hợp các quy định. Tuy nhiên, chương trình cuối cùng sẽ như thế nào, tất cả đều phụ thuộc vào khả năng của bạn. Thông thường các nhà thiết kế có trí tưởng tượng đồ họa mạnh mẽ. Bạn có thể phác thảo một bức tranh trong đầu, và sau đó cố gắng dịch nó thành mã. Ngoài ra, bạn có thể bắt đầu từ chính mã và quy định, thiết kế các hàm và biến theo ý muốn. Hãy nhớ Xử lý là bản phác thảo của bạn và mã là bàn chải của bạn! Chỉ cần phun những ý tưởng của bạn một cách tự do!

Bước 7: KẾT THÚC

Cuối cùng trong chương của chúng ta, hãy quay lại câu hỏi mà chúng ta đã lưu giữ trong một thời gian dài kể từ đầu. Việc sử dụng quá nhiều nỗ lực để tạo ra một bức tranh với chương trình là gì? Sau khi tìm hiểu chương này, bạn sẽ thấy có rất nhiều phương pháp chơi đang chờ bạn khám phá.

[cceN_cpp theme = "rạng đông"] float browX, earD, eyeD, faceD; void setup () {size (500, 500); } void draw () {background (200, 0, 0); browX = 150 + sin (frameCount / 30.0) * 20; earD = 180 + sin (frameCount / 10.0) * 20; eyeD = 60 + sin (frameCount / 30.0) * 50; mặtD = 300; strokeWeight (8); hình elip (175, 220, earD, earD); hình elip (chiều rộng - 175, 220, earD, earD); trực tràng (100, 100, faceD, faceD); dòng (browX, 160, 220, 240); dòng (width-browX, 160, width-220, 240); điền (ngẫu nhiên (255), ngẫu nhiên (255), ngẫu nhiên (255)); hình elip (175, 220, eyeD, eyeD); hình elip (chiều rộng-175, 220, eyeD, eyeD); điền (255); point (width / 2, height / 2); tam giác (170 - cos (frameCount / 10.0) * 20, 300 - sin (frameCount / 10.0) * 20, width - (170 + cos (frameCount / 10.0) * 20), 300 + sin (frameCount / 10.0) * 20, 250, 350); } [/cceN_cpp]

Nó có phải là điều kỳ diệu đối với đồ họa động không? Ở đây tôi không chỉ cho bạn quá nhiều trường hợp. Bạn có thể thiết kế một hiệu ứng tốt hơn nhiều so với tôi. Lợi thế của việc vẽ bằng chương trình tồn tại là bạn có thể chơi với mọi pixel. Vì đồ họa của bạn không phải là bitmap, nên mọi điểm chính trên đồ họa của bạn đều có thể kiểm soát được. Nó có thể nhận ra một số hiệu ứng mà phần mềm khác không thể nhận ra.

Nếu bạn có một trái tim muốn phá vỡ mọi thứ và kết hợp nó lại, chương trình học sẽ giúp bạn rất nhiều để thực hiện ý tưởng này.

Bài viết này đến từ nhà thiết kế Wenzy.

Bước 8: Đọc tương đối:

Hướng dẫn lập trình thú vị cho nhà thiết kế - Xử lý cảm ứng ban đầu

Hướng dẫn lập trình thú vị cho nhà thiết kế - Tạo chương trình xử lý đầu tiên của bạn

Hướng dẫn lập trình thú vị dành cho nhà thiết kế – Chạy hình ảnh của bạn (Phần một)

Nếu bạn có bất kỳ câu hỏi nào, bạn có thể gửi email đến [email protected].

Bài viết này từ: