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 một): 16 bước

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

Chạy! Chạy! Chạy!

Lập trình không quá khó. Điểm mấu chốt là tìm nhịp điệu của bạn và thực hiện từng nhịp một.

Trước khi đọc chương này, tôi hy vọng bạn đã làm quen với phương pháp vẽ hàm cơ bản, nếu không bạn sẽ cảm thấy chóng mặt và bối rối bởi hai hàm đầu lớn: thiết lập và vẽ.

Vì chúng ta muốn tạo đồ họa chuyển động, chúng ta phải biết hoạt hình được tạo ra như thế nào.

Hình trên có vẻ khá hấp dẫn và tiết lộ trực quan nguyên tắc thực hiện của hoạt ảnh.

Hoạt hình là ma thuật. Đó là một phép thuật về gian lận thị giác. Tuy nhiên, thời đại bùng nổ thông tin này, video tràn ngập thời đại, chúng ta đã quá quen với nó rồi. Sẽ ít người ngạc nhiên rằng việc có thể xem hoạt hình quả là một điều kỳ thú.

Nguyên tắc tương tự có thể được áp dụng để vẽ hoạt hình bằng chương trình. Chúng tôi phải xem xét làm thế nào để vẽ các đồ họa khác nhau trong mỗi khung hình và chương trình sẽ tự động lật các trang trong khi chúng tôi bổ sung một hình ảnh động hoàn chỉnh trong đầu. Trong chương sau, chúng ta sẽ nói về cách nhận ra chuyển động đồ họa cơ bản. Trước đó, chúng ta cần biết một số kiến thức cơ bản về biến.

Bước 1: Biến

Biến là vùng chứa dữ liệu. Nó có thể được sử dụng nhiều lần trong một chương trình.

Ví dụ:

[cceN_cpp theme = "rạng đông"] size (500, 500); hình elip (100, 250, 50, 50); hình elip (200, 250, 50, 50); hình elip (300, 250, 50, 50); hình elip (400, 250, 50, 50);

[/cceN_cpp]

Phần mã này không sử dụng bất kỳ biến nào. Nó vẽ bốn vòng tròn trên màn hình. Chúng ta có thể thấy chúng có cùng chiều rộng và chiều cao. Bây giờ nó cũng giống như vậy, để giảm thiểu việc nhập dữ liệu lặp lại, chúng ta có thể xác định một dấu hiệu để biểu diễn nó. Dấu hiệu này có thể thay đổi.

Đây là mã sau khi thêm một biến:

[cceN_cpp theme = "rạng đông"] size (500, 500); int a = 50; hình elip (100, 250, a, a); hình elip (200, 250, a, a); hình elip (300, 250, a, a); hình elip (400, 250, a, a);

[/cceN_cpp]

Chúng tôi nhận được một kết quả hoàn toàn giống nhau!

Vì chúng ta đã xác định biến a nên chúng ta có thể thay đổi các tham số một cách thuận tiện. Nếu chúng ta thay đổi a = 50 thành a = 100, thì tất cả chiều rộng và chiều cao của hình tròn sẽ trở thành 100 đồng nhất. Vì vậy, chúng ta không phải thay đổi từng tham số một. Biến thực sự là một phát minh hay.

Bước 2: Tạo biến

Trước khi sử dụng biến, chúng ta phải đưa ra tuyên bố và chỉ định kiểu dữ liệu của nó.

int i;

tôi ＝ 50;

Câu đầu tiên của đoạn mã đã tạo một câu lệnh cho một biến i. int là một ký hiệu chủ yếu dùng để khai báo biến. Khi khai báo, nó sẽ dành một chỗ trong bộ nhớ máy tính, tương đương với việc tạo ra một "hộp", được sử dụng đặc biệt để khôi phục dữ liệu số nguyên. Câu thứ hai là viết tắt của nhiệm vụ 50 được thực hiện bởi biến i. Sau khi thực hiện câu này, dữ liệu sẽ được lưu trữ ổn định trong biến i. Hoặc bạn có thể lười kết hợp hai câu trên thành một và hoàn thành bài tập trong khi thực hiện tuyên bố.

int i ＝ 50;

Nó là tương đối miễn phí để đặt tên cho một biến. Nhưng đôi khi chúng ta phải chú ý đến một điều gì đó.

Bước 3: Quy định đặt tên của biến

• Nó phải là sự kết hợp của bảng chữ cái và gạch chân. Nó có thể là một biểu tượng hoặc một từ.

• Trường hợp nhạy cảm. Tên và tên có thể đại diện cho các biến khác nhau.

• Cố gắng đặt tên cho nó càng dễ hiểu càng tốt để bạn có thể hiểu ngay được. Ký tự đầu tiên phải là một bảng chữ cái thay vì một số hoặc một ký tự đặc biệt.

• Không có từ khóa nào như int, float

Sau đây là một số phát biểu sai.

int $ a;

int 89b;

Đây là những câu đúng:

int r;

int super_24;

int openTheDoor;

Bước 4: Loại biến

Ngoại trừ việc khai báo dữ liệu số nguyên, chúng ta có thể khai báo cho dữ liệu thập phân (hay còn gọi là dữ liệu dấu phẩy động) với key word float.

float b = 0,5

Chúng tôi phải ghi nhớ loại dữ liệu mà chúng tôi đã sử dụng cho câu lệnh của mình. Nếu chúng ta đã sử dụng từ khóa int, thì phép gán sau này không thể viết i ＝ 0,5 hoặc tương tự như vậy, hoặc chương trình sẽ bị lỗi. Nhưng nếu chúng ta viết đối lập, nó không sao cả. Ví dụ, float i = 5 là đúng ngữ pháp nhưng chương trình sẽ nhận dạng nó là số thập phân.

Một số biến đã được xác định bởi hệ thống. Chúng tôi không cần phải khai báo chúng một mình. Cũng giống như "width, height" đã đề cập trước đó, nó sẽ tự động lấy chiều rộng và chiều cao của màn hình máy tính. Tần suất sử dụng cao đến mức người thiết kế trực tiếp xác định nó là một biến mặc định để giúp chúng ta sử dụng thuận tiện hơn.

Bước 5: Nhà điều hành

Sau đây là các toán tử xử lý:

+ cộng

- dấu trừ

* nhân

chia

％ Mô đun của phần còn lại

Bạn phải quen thuộc với tất cả các toán tử này ngoại trừ%. Nó có vẻ khá kỳ lạ vì kết quả của nó là phần còn lại. 9% 3 là 0. Trong khi 9% 5 là 4.

Các toán tử có thể được sử dụng giữa các phép gán và biến.

[cceN_cpp theme = "rạng đông"] int a = 1; // khai báo biến số nguyên a, phép gán là 1. int b = 2; // Khai báo biến số nguyên b, phép gán là 2. int c; // Khai báo biến số nguyên c. c = a + b; // Cộng hai phép gán và gán kết quả của nó cho c. in (c); // Biến đầu ra c.

[/cceN_cpp]

Bước 6: Kết quả hoạt động:

Kết quả đầu ra sẽ không được hiển thị trên cửa sổ mà trong bảng điều khiển ở phía dưới.

Cách viết của dòng thứ tư trông khá lạ. Nhưng nó là một định dạng phổ biến thường được sử dụng trong quá trình phân công máy tính. Bên trái của biểu tượng bằng nhau phải là biến được gán cuối cùng, trong khi bên phải là quy trình hoạt động.

Hàm in ở dòng thứ năm có thể in ra các biến trong bảng điều khiển, thường được sử dụng để kiểm tra điều kiện xuất dữ liệu.

Bước 7: Quy chế hoạt động

Một điểm rắc rối trong Xử lý là chúng ta phải làm rõ loại biến. Chúng ta phải đặc biệt chú ý đến quá trình số dấu phẩy động và kiểu số nguyên.

in （6/5）; // kết quả 1

Phép toán giữa các số nguyên sẽ có một số nguyên mới. 6 chia cho 5 là 1,2. Nhưng kết quả đầu ra của chương trình là 1. Điều này trái với trực giác của chúng ta. Chương trình sẽ không xử lý vòng nhưng xóa số phía sau dấu thập phân.

in (6.0 / 5.0); // kết quả 1.2

Thao tác giữa các dấu phẩy động sẽ tạo ra một số dấu phẩy động mới. Nếu kết quả thực tế là 1.2, kết quả đầu ra của chương trình sẽ giống nhau.

in (6 / 5.0); // kết quả 1.2

in (6,0 / 5); // kết quả 1.2

Cuối cùng nó là hỗn hợp của số nguyên và số dấu phẩy động. Kết quả đầu ra cuối cùng sẽ là 1.2.

• Trên thực tế, bạn phải nhớ rằng mục tiêu của thiết kế quy định này là không làm mất tính chính xác của dữ liệu. Vì vậy, nếu một phần tử là số dấu phẩy động, kết quả cũng sẽ là số dấu phẩy động.

Bước 8: Thiết lập Chức năng & Chức năng Vẽ

Trước đây chúng ta đã nói về một đống kiến thức nền tảng. Bây giờ, chúng ta cuối cùng cũng đến để chơi một thứ gì đó thú vị. Chức năng thiết lập và vẽ tương đương với các chức năng chính của quá trình xử lý. Hai chức năng này rất đặc biệt. Nó có thể kiểm soát các thủ tục của chương trình. Chương trình tương đối phức tạp sẽ bao gồm hai chức năng này vì chúng là khung cơ bản cho chương trình. Sự sắp xếp:

void setup () {

}

void draw () {

}

Cách sử dụng đặc biệt làm cho định dạng gọi của chúng khác với các hàm khác. Chúng ta phải thêm "void" trước tên hàm, nghĩa là không có "giá trị trả về". Phía sau tên hàm, chúng ta phải thêm dấu ngoặc đơn và dấu ngoặc nhọn.

[cceN_cpp theme = "rạng đông"] void setup () {print (1); } void draw () {print (2); } [/cceN_cpp]

Hãy xem một ví dụ:

Khi nhấn nút hoạt động, đầu tiên bảng điều khiển sẽ xuất ra "1" và sau đó liên tục xuất ra "2" cho đến khi bạn nhấn nút dừng xuống hoặc đóng cửa sổ.

Mã trong dấu ngoặc đơn trong hàm thiết lập sẽ được thực hiện chỉ một lần, trong khi mã bên trong hàm vẽ sẽ liên tục chạy tuần hoàn (thực hiện mặc định 60 lần / giây).

Do ký tự này, thiết lập thường được sử dụng để khởi tạo thuộc tính môi trường, chẳng hạn như chiều rộng và chiều cao của màn hình, màu nền và tất cả các loại phép gán của biến. Trong khi chúng ta thường đặt các hàm vẽ vào hàm vẽ để tạo ra đồ họa thay đổi liên tục.

Bước 9: Vòng tròn trong chuyển động ngang

Với chức năng vẽ, chúng ta có thể bắt đầu tạo hoạt ảnh của mình. Phương pháp viết hiệu ứng hoạt hình bằng Xử lý khá “vụng về”. Nó không có bất kỳ lệnh nào tồn tại. Ví dụ, chỉ định một hình dạng nhất định để làm đường cong.

Chúng ta phải tự mình xác định những chi tiết này. Bạn phải cho chương trình biết chắc chắn mỗi khung hình cần loại đồ họa nào.

Viết mã sau vào đó (Bây giờ chúng ta hãy bắt đầu làm điều đó bằng tay):

[cceN_cpp theme = "rạng đông"] int x; int y; void setup () {size (300, 300); x = 0; y = chiều cao / 2; } void draw () {background (234, 113, 107); noStroke (); hình elip (x, y, 50, 50); x = x + 1; }

[/cceN_cpp]

Phần mã này hiển thị một vòng tròn chuyển động. Biến x, y được khai báo trước đây được sử dụng để lưu trữ vị trí của tọa độ. Các nhiệm vụ của nó chạy trong thiết lập chức năng. Mã khóa là mã sau trong hàm rút ra:

x = x + 1

Đừng xem nó như một phương trình toán học, nếu không nó sẽ rất kỳ lạ. Ở đây, "＝" là một ký hiệu để chỉ định. Nó đại diện cho việc đặt các số bên phải vào biến bên trái. Giả sử x là 50, khi mã được chạy, phía bên phải của "＝" bằng 50 + 1, tức là 51. Kết quả cuối cùng sẽ được gán vào biến x. Vì vậy, giá trị của x trở thành 51.

Theo quy trình của chương trình, mỗi lần hàm draw hoạt động một lần, giá trị của x sẽ tăng lên 1. Vì vậy, mỗi khi chúng ta vẽ, hình tròn sẽ di chuyển một hướng pixel theo chiều ngang sang phải, so với khung hình cũ. Do đó, đồ họa trở nên có động lực.

• Để làm cho mã có được khả năng đọc tốt hơn, chúng ta phải dành một khoảng trống nhất định trước mỗi dòng mã trong dấu ngoặc nhọn. Và nó sẽ càng thẳng hàng càng tốt. Nhấn TAB hoặc một vài khoảng trống, nó có thể rút lại.

• Biểu tượng khoảng trống và ngắt dòng trong chương trình sẽ không ảnh hưởng đến chương trình. Vì vậy, nó là ok nếu chúng tôi gõ một nhiều hơn hoặc ít hơn.

Đây là một cách khác đơn giản hơn để diễn đạt nó. Để làm cho vòng tròn biến tăng 1 tự động, chúng ta phải viết nó ở dạng sau.

vòng tròn ＝ vòng tròn ＋1

Khá bất tiện! Nếu tên biến dài hơn, thì chúng ta phải nhập nhiều từ hơn. Vì vậy, những người tiền nhiệm lười biếng của chúng tôi nghĩ ra một ý tưởng như thế này.

vòng tròn ＋＋

Nó không phải là rất đơn giản? Nó có nghĩa là tăng 1 tự động. Tương tự với nó, có - -, có nghĩa là giảm 1 tự động.

Nhưng nếu chúng ta hy vọng số lượng tự động tăng là số khác như 2, chúng ta phải thử một biểu thức khác.

vòng tròn + = 2

Điều này tương đương với

circle = vòng tròn + 2

Tương tự, có - ＝, / =, * =.

Bước 10: Hướng di chuyển

Hình ảnh di chuyển theo hướng nào phụ thuộc vào cách bạn thay đổi tọa độ của mình. Nếu nó được thay đổi thành y ＝ y ＋ 1, đường tròn sẽ di chuyển xuống dưới. Nếu cảx và y tăng 1, đường tròn sẽ di chuyển xuống phía dưới bên phải. Nếu chúng ta viết nó là một biểu tượng dấu trừ, nó sẽ di chuyển theo hướng ngược lại.

[cceN_cpp theme = "rạng đông"] int x, y; // Có thể khai báo nhiều biến cùng lúc, dùng dấu phẩy để phân cách. void setup () {size (300, 300); x = 0; y = 0; } void draw () {background (234, 113, 107); noStroke (); hình elip (x, y, 50, 50); x ++; y ++; }

[/cceN_cpp]

Tốc độ di chuyển

Hãy nhớ mặc định 60 khung hình / giây trong chức năng vẽ? Theo tỷ lệ này, vòng tròn ở trên sẽ di chuyển 60 pixel mỗi giây sang bên phải.

Nếu chúng ta muốn thay đổi tốc độ chuyển động của đồ họa, có hai phương pháp: một là tăng giá trị x mỗi lần vì nó sẽ được thay đổi.

x ＝ x ＋ 10

Nó đã cải thiện tốc độ gấp 10 lần so với bản gốc!

Phương pháp khác là thay đổi tần suất làm mới canvas. tỷ lệ khung hình()

Chức năng này có thể thay đổi tần số phát sóng của canvas. Viết frameRate (10) vào cài đặt chức năng, nó sẽ thay đổi 60 khung hình / giây ban đầu thành 10 khung hình / giây. Tốc độ bị chậm lại 6 lần so với trước đây.

Bước 11: Nền thừa

Tất cả các ví dụ trước đều viết background vào function draw. Bạn đã bao giờ nghĩ viết nó vào thiết lập chức năng chưa? Nó sẽ có bất kỳ sự khác biệt? Bây giờ, hãy cập nhật ví dụ về chuyển động ngang.

[cceN_cpp theme = "rạng đông"] int x, y; void setup () {size (300, 300); nền (234, 113, 107); x = 0; y = chiều cao / 2; } void draw () {noStroke (); hình elip (x, y, 50, 50); x + = 1; } [/cceN_cpp]

Có chuyện gì vậy? Có thể nó không thể hiểu lý do sản xuất của vấn đề một cách đúng đắn. Xóa chức năng noStroke, thêm lại stroke và xem đường chuyển động của hình tròn.

Ồ, đó là do vòng kết nối đã tạo trước đó chưa bị xóa! Bởi vì thiết lập chức năng chỉ hoạt động một lần, nếu chúng ta viết nền phía trên nó, nó sẽ lấp đầy nền chỉ một lần và sau đó nó sẽ không có tác dụng nữa. Nền chức năng giống như công cụ thùng sơn. Sau khi được sử dụng, nó sẽ bao phủ tất cả nội dung trong canvas thay vì chỉ đặt màu nền. Chúng tôi viết nó trước khi vẽ hàm để khung cũ sẽ bị che mỗi khi chúng tôi tạo một mẫu mới. Do đó, vòng tròn có thể chạy như chúng ta mong đợi. Ngoại trừ việc ghi nhớ cách sử dụng của từng chức năng, chúng ta phải nghĩ về vị trí của mã. Rất nhiều thời gian, việc lên hoặc xuống một dòng cho codea và viết nó trong hoặc ngoài dấu ngoặc nhọn, nó sẽ tạo ra các hiệu ứng khá khác nhau. Hướng của mã là hai chiều. Nếu một lỗi xuất hiện, chúng tôi phải hiệu chỉnh trong hai chiều này.

• Phương pháp vẽ không lặp lại này có thể tạo ra hiệu ứng rất đặc biệt nếu được sử dụng đúng cách. Bạn có thể sao chép mã sau và thử.

[cceN_cpp theme = "rạng đông"] void setup () {size (400, 400); } void draw () {ellipse (width / 2-mouseX, height / 2-mouseX, mouseY, mouseY); hình elip (chiều rộng / 2-mouseX, chiều cao / 2 + mouseX, mouseY, mouseY); hình elip (chiều rộng / 2 + mouseX, chiều cao / 2-mouseX, mouseY, mouseY); hình elip (chiều rộng / 2 + mouseX, chiều cao / 2 + mouseX, mouseY, mouseY); } [/cceN_cpp]

Ở đây chúng tôi đã sử dụng biến ma thuật mouseX và mouseY. Vấn đề chúng ta sẽ nói về nó một cách chi tiết.

Bước 12: Vòng tròn lắc

Điều gì sẽ xảy ra nếu tôi muốn làm cho hướng chuyển động của vòng tròn trở nên không đều? Với chức năng ngẫu nhiên một cách thông minh, bạn cũng có thể nhận ra hiệu ứng này. Ngẫu nhiên là một chức năng được sử dụng thường xuyên. Nó có thể được sử dụng để tạo ra chức năng ngẫu nhiên. Nó giống như một tinh thần không theo dõi. Một khi liên quan đến các biến, bạn không thể tưởng tượng điều gì sẽ trở thành tiếp theo.

Định dạng Gọi:

ngẫu nhiên (cao)

Cao đại diện cho giới hạn trên ngẫu nhiên và giới hạn dưới cùng mặc định là 0. Ví dụ: ngẫu nhiên (10). Nó sẽ tạo ra một số từ 0 đến 10 một cách ngẫu nhiên (0 được bao gồm nhưng 10 không được bao gồm).

ngẫu nhiên (thấp, cao)

Nếu chúng ta đặt hai tham số, thì nó sẽ trở về giá trị ngẫu nhiên giữa chúng, ví dụ: ngẫu nhiên (5, 10). Nó sẽ tạo ra một số từ 5 đến 10 một cách ngẫu nhiên (5 được bao gồm nhưng 10 không được bao gồm).

Thí dụ:

[cceN_cpp theme = "rạng đông"] float x;

x = ngẫu nhiên (50, 100);

in (x); [/cceN_cpp]

Mỗi khi chúng ta chạy chương trình, giao diện điều khiển sẽ xuất ra các giá trị khác nhau.

• Lưu ý: Các giá trị được tạo bởi hàm ngẫu nhiên thuộc kiểu dấu phẩy động (kiểu số thập phân). Nếu chúng ta muốn gán một giá trị cho biến số nguyên, chúng ta phải biến đổi nó thông qua hàm int (). Phép biến đổi không tuân theo quy tắc làm tròn mà xóa trực tiếp phần thập phân. Do đó, đầu ra của int (ngẫu nhiên (5)), chỉ có 5 khả năng: 0, 1, 2, 3, 4.

Sau khi chúng ta làm quen với việc sử dụng hàm ngẫu nhiên, chúng ta có thể đi thẳng vào trường hợp bên dưới.

[cceN_cpp theme = "rạng đông"] int x, y; void setup () {size (300, 300); x = chiều rộng / 2; y = chiều cao / 2; } void draw () {background (234, 113, 107); noStroke (); x + = int (ngẫu nhiên (-5, 5)); y + = int (ngẫu nhiên (-5, 5)); hình elip (x, y, 50, 50); }

[/cceN_cpp]

Các giá trị tọa độ được thêm vào trước đây là cố định. Chỉ khi chúng ta tăng một giá trị ngẫu nhiên, vòng tròn sẽ di chuyển theo một hướng không xác định. Với phạm vi ngẫu nhiên lớn hơn, nó rung lắc thường xuyên hơn. Vì sự thay đổi giá trị giữa các khung hình bị trả lại, chuyển động sẽ không mượt mà nữa. Trong khi khung trước ở (150, 150), khung sau sẽ di chuyển đến vị trí (170, 170) trong nháy mắt.

Bước 13: Di chuyển vòng kết nối

Vòng kết nối di cư

Nó sẽ tạo ra chuyển động trơn tru? Tiếng ồn chức năng có thể giúp chúng tôi. Nó có nhịp điệu tốt hơn so với ngẫu nhiên tiêu chuẩn. Và các số ngẫu nhiên được tạo ra liên tục.

Định dạng Gọi:

tiếng ồn （t）

Hàm nhiễu không thể xác định phạm vi đầu ra của nó. Chương trình xác định nó chỉ có thể tạo ra các số dấu phẩy động từ 0 đến 1 và đầu vào cố định chỉ có thể có đầu ra cố định.

[cceN_cpp theme = "rạng đông"] float x = noise (5); float y = nhiễu (5); print (x, y); [/cceN_cpp]

Vì các tham số đầu vào ở trên là 5 nên kết quả đầu ra giống nhau. Vậy làm thế nào để thay đổi kết quả? Câu trả lời là thay đổi động các tham số đầu vào. Thực ra chúng ta có thể coi tiếng ồn như một bản nhạc vô hạn, các thông số đầu vào giống như "thời điểm hiện tại". Nếu đầu vào tham số là liên tục, thì đầu ra cũng sẽ liên tục.

[cceN_cpp theme = "rạng đông"] float x, y; void setup () {size (700, 100); x = 0; nền (0); } void draw () {x + = 1; y = nhiễu (frameCount / 100.0) * 100; noStroke (); hình elip (x, y, 2, 2); }

[/cceN_cpp]

Trong trường hợp này, chúng tôi vẽ đường thay đổi của Y để chúng tôi có thể hiểu nhiễu hàm tốt hơn.

• Trong số đó, frameCount biến sẽ thu được khung hiện tại. Khác với chiều rộng, chiều cao trước đây, nó ổn định không thay đổi. Bên cạnh đó, nó bắt đầu tăng từ 0. Nếu chúng ta hiểu nó bằng đồ họa hoạt hình hiển thị ban đầu, nó hiển thị trang chúng ta đã chuyển đến (thay vì khái niệm thời gian trong chương trình).

• frameCount là biến số nguyên. Chia cho một biến số nguyên khác, chương trình sẽ mặc định xử lý kết quả là một số nguyên. Để cải thiện độ chính xác của kết quả, chúng ta cần thay đổi 100 thành 100.0. Chia cho một số dấu phẩy động, chúng ta cũng sẽ nhận được một số dấu phẩy động.

• Để thay đổi trục Y từ 0 thành 100, chúng ta phải nhân kết quả của nhiễu với 100. Như vậy chúng ta có thể kiểm soát phạm vi giá trị ngẫu nhiên.

Một số bạn giỏi tư duy có thể hỏi "tại sao chúng ta phải chia frameCountby 100? Viết frameCount trực tiếp có ổn không?" Tất nhiên bạn có thể! Nhưng ở đây, để hiển thị tốt hơn các đặc điểm của nhiễu chức năng, chúng tôi làm chậm "tốc độ phát sóng". Ví dụ dưới đây cho thấy giá trị đầu ra thay đổi theo tỷ lệ thay đổi khác nhau.

[cceN_cpp theme = "rạng đông"] float x, y1, y2, y3, y4, y5; void setup () {size (700, 500); x = 0; nền (0); } void draw () {x + = 1; y1 = nhiễu (frameCount) * 100; y2 = nhiễu (frameCount / 10.0) * 100; y3 = nhiễu (frameCount / 100.0) * 100; y4 = nhiễu (frameCount / 1000.0) * 100; y5 = nhiễu (frameCount / 10000.0) * 100; noStroke (); hình elip (x, y1, 2, 2); hình elip (x, y2 + 100, 2, 2); hình elip (x, y3 + 200, 2, 2); hình elip (x, y4 + 300, 2, 2); hình elip (x, y5 + 400, 2, 2); đột quỵ (80); dòng (0, 100, width, 100); dòng (0, 200, width, 200); dòng (0, 300, width, 300); dòng (0, 400, width, 400); }

[/cceN_cpp]

Bạn có thể coi các thông số thay đổi trong nhiễu hàm như một thanh tiến trình. Thay đổi tham số giống như chúng ta di chuyển thanh tiến trình. Vì vậy, khi phạm vi thay đổi của "bản nhạc" này lớn hơn, các đặc tính liên tục trước và sau của giá trị đầu ra sẽ yếu hơn. (Chúng ta có thể tưởng tượng điều gì sẽ xảy ra nếu chúng ta phát một bản nhạc hoặc video với tốc độ gấp 2,5 lần lần tốc độ, 20 lần tốc độ). Khi phạm vi lớn hơn một giá trị nhất định, thì nó không có sự khác biệt lớn đối với chức năng ngẫu nhiên khi tạo giá trị.

Nếu bạn có thể hiểu tất cả các ví dụ trên, thì bạn sẽ cảm thấy không gì có thể dễ dàng hơn để vẽ một vòng tròn di chuyển. Bạn cũng có thể hiểu các nguyên tắc bên trong.

[cceN_cpp theme = "rạng đông"] float x, y; void setup () {size (300, 300); x = 0; } void draw () {background (234, 113, 107); x = nhiễu (frameCount / 100.0 + 100) * 300; y = nhiễu (frameCount / 100.0) * 300; noStroke (); hình elip (x, y, 50, 50); }

[/cceN_cpp]

Bây giờ, chuyển động thú vị hơn giống như một con quay hồi chuyển đang quay.

• Lý do tại sao biến x trong nhiễu hàm phải cộng với 100 là vì để tách chúng ra một khoảng. Nếu các tham số của xy trong nhiễu hàm giống nhau hoặc khá gần nhau, thì sự thay đổi của tọa độ x, y sẽ gần giống nhau. Điều này là để làm cho chuyển động trở nên ngẫu nhiên hơn nhiều.

Bước 14: Vòng tròn được di chuyển bằng chuột

Tiếp theo, cuối cùng chúng ta đến với hai biến mà tôi thích nhất: mouseX và mouseY. Ngay từ cái nhìn đầu tiên của hai khái niệm, đôi mắt của tôi như lấp lánh ánh sáng. Bởi vì nó là cách trực tiếp nhất để tương tác với đồ họa. Chúng tôi có thể tạo ra rất nhiều chương trình thú vị với nó.

Trường hợp khá đơn giản:

[cceN_cpp theme = "rạng đông"] int x, y; void setup () {size (300, 300); x = 0; y = 0; } void draw () {background (234, 113, 107); noStroke (); x = mouseX; y = chuộtY; hình elip (x, y, 50, 50); }

[/cceN_cpp]

mouseX có thể lấy tọa độ x của chuột, trong khi mouseY có thể lấy tọa độ y.

• Hãy thử thay đổi biểu tượng tích cực và tiêu cực, hoặc trao đổi mouseX và mouseY.

Bước 15: Kết thúc

Từ các lệnh quen thuộc này, bạn có thể thực hiện chuyển động của đồ họa. Với nội dung của chương cuối, hãy sử dụng trí tưởng tượng của bạn một cách hợp lý, bạn có thể tạo ra rất nhiều hiệu ứng hoạt hình thú vị.

Trong chương tiếp theo của chúng ta, chúng ta có thể xem nhiều ví dụ phong phú hơn. Đồng thời, chúng tôi sẽ sử dụng các hàm toán học và kết hợp nó với chuyển động đồ họa.

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

Bước 16: Đọ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

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

Nếu cần trợ giúp, bạn có thể liên hệ: [email protected].