คำแนะนำการเขียนโปรแกรมที่น่าสนใจสำหรับนักออกแบบ - ทำให้ภาพของคุณดำเนินไป (ตอนที่หนึ่ง): 16 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:09

วิ่ง! วิ่ง! วิ่ง!

การเขียนโปรแกรมไม่ใช่เรื่องยาก จุดสำคัญคือการหาจังหวะของคุณและทำมันทีละตัว

ก่อนอ่านบทนี้ ฉันหวังว่าคุณคงคุ้นเคยกับวิธีการวาดฟังก์ชันพื้นฐานแล้ว มิฉะนั้นคุณจะรู้สึกเวียนหัวและสับสนกับฟังก์ชันหัวโต 2 ฟังก์ชัน ได้แก่ การตั้งค่าและการวาด

เนื่องจากเราต้องการสร้างโมชั่นกราฟิก เราจึงต้องรู้ว่าแอนิเมชั่นถูกสร้างขึ้นมาอย่างไร

ภาพด้านบนดูค่อนข้างน่าสนใจและเผยให้เห็นหลักการใช้งานแอนิเมชั่นด้วยสายตา

แอนิเมชั่นคือเวทมนตร์ มันเป็นเวทย์มนตร์เกี่ยวกับการโกงด้วยภาพ อย่างไรก็ตามในข้อมูลนี้ระเบิดอายุวิดีโอน้ำท่วมเราคุ้นเคยกับมันแล้ว ไม่กี่คนที่จะแปลกใจว่าการดูแอนิเมชั่นเป็นเรื่องที่น่าทึ่ง

หลักการเดียวกันนี้สามารถนำไปใช้กับแอนิเมชั่นการวาดด้วยโปรแกรม เราต้องพิจารณาถึงวิธีการวาดกราฟิกต่างๆ ในแต่ละเฟรม และโปรแกรมจะเปลี่ยนหน้าโดยอัตโนมัติในขณะที่เราเสริมแอนิเมชั่นที่เสร็จสมบูรณ์ในหัวของเรา ในบทต่อไป เราจะพูดถึงวิธีรับรู้การเคลื่อนไหวกราฟิกพื้นฐาน ก่อนหน้านั้นเราจำเป็นต้องรู้ความรู้พื้นฐานเกี่ยวกับตัวแปรก่อน

ขั้นตอนที่ 1: ตัวแปร

ตัวแปรคือคอนเทนเนอร์สำหรับข้อมูล สามารถใช้ซ้ำได้ภายในโปรแกรม

ตัวอย่างเช่น:

[cceN_cpp ธีม="รุ่งอรุณ"] ขนาด(500, 500); วงรี(100, 250, 50, 50); วงรี(200, 250, 50, 50); วงรี(300, 250, 50, 50); วงรี(400, 250, 50, 50);

[/cceN_cpp]

โค้ดส่วนนี้ไม่ได้ใช้ตัวแปรใดๆ มันวาดวงกลมสี่วงในหน้าจอ เราจะพบว่ามีความกว้างและความสูงเท่ากัน เมื่อเป็นเหมือนเดิมแล้ว เพื่อลดการป้อนข้อมูลซ้ำ เราสามารถกำหนดเครื่องหมายเพื่อแสดงแทนได้ เครื่องหมายนี้เป็นตัวแปร

นี่คือรหัสหลังจากเพิ่มตัวแปร:

[cceN_cpp ธีม="รุ่งอรุณ"] ขนาด(500, 500); int a = 50; วงรี(100, 250, a, a); วงรี(200, 250, a, a); วงรี(300, 250, a, a); วงรี(400, 250, a, a);

[/cceN_cpp]

เราได้รับผลลัพธ์ที่เหมือนกันโดยสิ้นเชิง!

เนื่องจากเราได้กำหนดตัวแปร a เราจึงสามารถเปลี่ยนพารามิเตอร์ได้อย่างสะดวก ถ้าเราเปลี่ยน a=50 เป็น a=100 ความกว้างและความสูงของวงกลมทั้งหมดจะกลายเป็น 100 เท่ากัน ดังนั้นเราจึงไม่ต้องเปลี่ยนพารามิเตอร์ทีละรายการ ตัวแปรเป็นสิ่งประดิษฐ์ที่ดีจริงๆ

ขั้นตอนที่ 2: การสร้างตัวแปร

ก่อนใช้ตัวแปร เราต้องสร้างคำสั่งและกำหนดประเภทข้อมูลก่อน

int ฉัน;

ฉัน＝ 50;

ประโยคแรกของรหัสได้สร้างคำสั่งสำหรับตัวแปร i int เป็นสัญลักษณ์ที่ใช้ประกาศตัวแปรเป็นหลัก เมื่อประกาศจะสำรองห้องไว้ในหน่วยความจำคอมพิวเตอร์ซึ่งเทียบเท่ากับการสร้าง "กล่อง" ที่ใช้เพื่อกู้คืนข้อมูลจำนวนเต็มโดยเฉพาะ ประโยคที่สองหมายถึงการมอบหมาย 50 เพื่อดำเนินการโดยตัวแปร i หลังจากใช้ประโยคนี้ ข้อมูลจะถูกเก็บไว้ในตัวแปร i อย่างเสถียร หรือคุณอาจขี้เกียจที่จะรวมสองประโยคข้างต้นเป็นหนึ่งเดียวและทำงานมอบหมายให้เสร็จสิ้นในขณะที่พูด

int ฉัน＝ 50;

ค่อนข้างอิสระในการตั้งชื่อตัวแปร แต่บางครั้งเราต้องใส่ใจกับบางสิ่ง

ขั้นตอนที่ 3: กฎการตั้งชื่อของตัวแปร

• ต้องเป็นการผสมผสานระหว่างตัวอักษรและขีดเส้นใต้ อาจเป็นสัญลักษณ์หรือคำก็ได้

• กรณีที่สำคัญ. ชื่อและชื่อสามารถยืนแทนตัวแปรต่างๆ

• พยายามตั้งชื่อให้ง่ายที่สุดเพื่อให้คุณเข้าใจได้ในคราวเดียว อักขระเริ่มต้นต้องเป็นตัวอักษรแทนที่จะเป็นตัวเลขหรืออักขระพิเศษ

• ไม่มีคำสำคัญอย่าง int, float

ต่อไปนี้เป็นข้อความที่ไม่ถูกต้อง

int $a;

int 89b;

นี่คือข้อความที่ถูกต้อง:

int r;

int super_24;

int openTheDoor;

ขั้นตอนที่ 4: ประเภทตัวแปร

ยกเว้นการประกาศข้อมูลจำนวนเต็ม เราสามารถประกาศข้อมูลทศนิยม (เรียกอีกอย่างว่าข้อมูลทศนิยม) ด้วยคำสำคัญลอย

ลอย b = 0.5

เราต้องจำไว้ว่าเราใช้ข้อมูลประเภทใดสำหรับคำสั่งของเรา หากเราใช้คีย์เวิร์ด int การมอบหมายหลังไม่สามารถเขียน i＝0.5 หรืออะไรทำนองนั้นได้ มิฉะนั้นโปรแกรมจะกลายเป็นข้อผิดพลาด แต่ถ้าเราเขียนตรงกันข้ามก็ไม่เป็นไร ตัวอย่างเช่น float i=5 เป็นไวยากรณ์ที่ถูกต้อง แต่โปรแกรมจะรับรู้ว่าเป็นเลขทศนิยม

ตัวแปรบางตัวถูกกำหนดโดยระบบแล้ว เราไม่ต้องประกาศด้วยตัวเอง เช่นเดียวกับ "ความกว้าง ความสูง" ที่อ้างถึงก่อนหน้านี้ จะได้รับความกว้างและความสูงของหน้าจอคอมพิวเตอร์โดยอัตโนมัติ ความถี่ในการใช้งานสูงเช่นนี้ที่นักออกแบบกำหนดโดยตรงให้เป็นตัวแปรเริ่มต้นเพื่อให้เราใช้งานได้สะดวกยิ่งขึ้น

ขั้นตอนที่ 5: ตัวดำเนินการ

ต่อไปนี้เป็นตัวดำเนินการของการประมวลผล:

+ บวก

- ลบ

* ทวีคูณ

หาร

％ โมดูลัสของเศษเหลือ

คุณต้องคุ้นเคยกับตัวดำเนินการเหล่านี้ทั้งหมด ยกเว้น % มันดูค่อนข้างแปลกเพราะผลลัพธ์มันเหลืออยู่ 9%3 คือ 0 ในขณะที่ 9%5 คือ 4

สามารถใช้ตัวดำเนินการระหว่างการกำหนดและตัวแปรได้

[cceN_cpp theme="dawn"] int a = 1; //ประกาศตัวแปรจำนวนเต็ม a การมอบหมายคือ 1. int b = 2; //ประกาศตัวแปรจำนวนเต็ม b การมอบหมายคือ 2. int c; //ประกาศตัวแปรจำนวนเต็ม c c = a + b; //บวกสองการมอบหมายและกำหนดผลลัพธ์ให้กับค พิมพ์ (c); //ตัวแปรเอาต์พุต c.

[/cceN_cpp]

ขั้นตอนที่ 6: ผลการดำเนินการ:

ผลลัพธ์ผลลัพธ์จะไม่ปรากฏบนหน้าต่าง แต่ในคอนโซลที่ด้านล่าง

วิธีการเขียนบรรทัดที่สี่ดูค่อนข้างแปลก แต่เป็นรูปแบบทั่วไปที่ใช้บ่อยในระหว่างการมอบหมายคอมพิวเตอร์ ด้านซ้ายของสัญลักษณ์เท่ากับควรเป็นตัวแปรที่กำหนดขั้นสุดท้าย ในขณะที่ด้านขวาควรเป็นกระบวนการดำเนินการ

ฟังก์ชันการพิมพ์ในบรรทัดที่ 5 สามารถพิมพ์ตัวแปรในคอนโซล ซึ่งมักใช้เพื่อทดสอบเงื่อนไขของข้อมูลที่ส่งออก

ขั้นตอนที่ 7: กฎการดำเนินงาน

จุดที่ยุ่งยากในการประมวลผลคือเราต้องชี้แจงประเภทของตัวแปรให้ชัดเจน เราต้องให้ความสนใจเป็นพิเศษกับกระบวนการของเลขทศนิยมและประเภทจำนวนเต็ม

พิมพ์ (6 / 5); // ผลลัพธ์ 1

การดำเนินการระหว่างจำนวนเต็มจะมีจำนวนเต็มใหม่ 6 หารด้วย 5 คือ 1.2. แต่ผลลัพธ์ของโปรแกรมคือ 1 ซึ่งขัดกับสัญชาตญาณของเรา โปรแกรมจะไม่จัดการกับรอบ แต่จะลบตัวเลขหลังจุดทศนิยม

พิมพ์ (6.0 / 5.0); // ผลลัพธ์ 1.2

การดำเนินการระหว่างจุดลอยตัวจะส่งผลให้จำนวนจุดลอยตัวใหม่ ถ้าผลลัพธ์จริงคือ 1.2 ผลลัพธ์ของโปรแกรมจะเหมือนกัน

พิมพ์ (6 / 5.0); // ผลลัพธ์ 1.2

พิมพ์ (6.0 / 5); // ผลลัพธ์ 1.2

ในที่สุดก็เป็นส่วนผสมของจำนวนเต็มและเลขทศนิยม ผลลัพธ์สุดท้ายจะเป็น 1.2

• ที่จริงแล้ว คุณต้องจำไว้ว่าเป้าหมายของการออกแบบกฎระเบียบนี้คือการไม่สูญเสียความถูกต้องของข้อมูล ดังนั้นหากองค์ประกอบหนึ่งเป็นเลขทศนิยม ผลลัพธ์จะเป็นเลขทศนิยมด้วย

ขั้นตอนที่ 8: ตั้งค่าฟังก์ชัน & ฟังก์ชันวาด

ก่อนหน้านี้เราได้พูดถึงกองความรู้พื้นฐาน ในที่สุดเราก็มาเล่นอะไรที่น่าสนใจกัน การตั้งค่าและวาดฟังก์ชันเทียบเท่ากับฟังก์ชันหลักของการประมวลผล ฟังก์ชันทั้งสองนี้มีความพิเศษมาก สามารถควบคุมขั้นตอนของโปรแกรมได้ โปรแกรมที่ค่อนข้างซับซ้อนจะรวมฟังก์ชันทั้งสองนี้ไว้ด้วยเพราะเป็นเฟรมพื้นฐานสำหรับโปรแกรม รูปแบบ:

การตั้งค่าเป็นโมฆะ (){

}

ถือเป็นโมฆะวาด (){

}

การใช้งานพิเศษทำให้รูปแบบการเรียกใช้แตกต่างจากฟังก์ชันอื่นๆ เราต้องเติม "void" ก่อนชื่อฟังก์ชัน ซึ่งหมายถึง no "returned value" ด้านหลังชื่อฟังก์ชัน เราต้องใส่วงเล็บและวงเล็บปีกกา

[cceN_cpp theme="dawn"] การตั้งค่าเป็นโมฆะ (){ พิมพ์ (1); } วาดเป็นโมฆะ (){ พิมพ์ (2); } [/cceN_cpp]

ลองมาดูตัวอย่าง:

เมื่อกดปุ่มการทำงาน คอนโซลจะส่งออก "1" ก่อน จากนั้นจึงส่งออก "2" อย่างต่อเนื่อง จนกว่าคุณจะกดปุ่มหยุดหรือปิดหน้าต่าง

รหัสภายในวงเล็บในฟังก์ชันการตั้งค่าจะถูกใช้งานเพียงครั้งเดียว ในขณะที่โค้ดภายในฟังก์ชันการวาดจะทำงานอย่างต่อเนื่อง (การใช้งานเริ่มต้น 60 ครั้ง/วินาที)

เนื่องจากอักขระนี้ การตั้งค่ามักจะใช้เพื่อเริ่มต้นคุณสมบัติของสภาพแวดล้อม เช่น ความกว้างและความสูงของหน้าจอ สีพื้นหลัง และการกำหนดตัวแปรทุกประเภท ในขณะที่เรามักจะใส่ฟังก์ชันการวาดลงในฟังก์ชัน draw เพื่อสร้างกราฟิกที่เปลี่ยนแปลงอย่างต่อเนื่อง

ขั้นตอนที่ 9: วงกลมในการเคลื่อนไหวในแนวนอน

ด้วยการวาดฟังก์ชัน เราสามารถเริ่มสร้างแอนิเมชั่นของเราได้ วิธีการเขียนเอฟเฟกต์แอนิเมชั่นด้วยการประมวลผลค่อนข้าง “อึดอัด” มันไม่มีคำสั่งใด ๆ ที่มีอยู่ ตัวอย่างเช่น กำหนดรูปร่างบางอย่างเพื่อทำเป็นเส้นโค้ง

เราต้องกำหนดรายละเอียดเหล่านี้ด้วยตัวเอง คุณต้องบอกโปรแกรมว่าแต่ละเฟรมต้องการกราฟิกประเภทใด

เขียนรหัสต่อไปนี้ลงไป (ตอนนี้เริ่มลงมือทำ):

[cceN_cpp theme="dawn"] int x; int y; การตั้งค่าเป็นโมฆะ () { ขนาด (300, 300); x = 0; y = ความสูง/2; } วาดเป็นโมฆะ () { พื้นหลัง (234, 113, 107); ไม่มีจังหวะ (); วงรี(x, y, 50, 50); x = x+1; }

[/cceN_cpp]

โค้ดส่วนนี้แสดงวงกลมเคลื่อนที่ ตัวแปรที่ประกาศไว้ก่อนหน้านี้ x, y ใช้เพื่อเก็บตำแหน่งของพิกัด การมอบหมายทำงานในการตั้งค่าฟังก์ชัน รหัสคีย์เป็นรหัสต่อไปนี้ภายในฟังก์ชันวาด:

x = x + 1

อย่ามองว่าเป็นสมการทางคณิตศาสตร์ มิฉะนั้น มันจะแปลกมาก ที่นี่ "＝" เป็นสัญลักษณ์ของการมอบหมาย มันหมายถึงการวางตัวเลขที่ถูกต้องลงในตัวแปรด้านซ้าย สมมติว่า x คือ 50 เมื่อโค้ดเริ่มทำงาน ด้านขวาของ "＝" จะเท่ากับ 50+1 นั่นคือ 51 ผลลัพธ์สุดท้ายจะถูกกำหนดเป็นตัวแปร x ดังนั้นค่าของ x จึงกลายเป็น 51

ทำตามขั้นตอนของโปรแกรม ทุกครั้งที่วาดฟังก์ชันทำงานครั้งเดียว ค่าของ x จะเพิ่มขึ้น 1 ดังนั้นทุกครั้งที่เราวาด วงกลมจะย้ายทิศทางพิกเซลในแนวนอนไปทางขวา เมื่อเทียบกับเฟรมเดิม ดังนั้นกราฟิกจึงเคลื่อนไหวได้

• เพื่อให้โค้ดอ่านง่ายขึ้น เราต้องสำรองห้องหนึ่งไว้ก่อนโค้ดแต่ละบรรทัดในวงเล็บปีกกา และจะต้องจัดแนวให้มากที่สุด กด TAB หรือช่องว่างหลาย ๆ อันก็สามารถดึงกลับได้

• สัญลักษณ์ของช่องว่างและตัวแบ่งบรรทัดในโปรแกรมจะไม่มีผลกับโปรแกรม ไม่เป็นไรถ้าเราพิมพ์มากหรือน้อย

นี่เป็นอีกวิธีที่ง่ายกว่าในการแสดงออก เพื่อให้วงกลมตัวแปรเพิ่มขึ้น 1 โดยอัตโนมัติ เราต้องเขียนให้อยู่ในรูปแบบต่อไปนี้

วงกลม ＝ วงกลม ＋1

ค่อนข้างไม่สะดวก! ถ้าชื่อตัวแปรยาวกว่านั้น เราต้องพิมพ์คำเพิ่มเติม ดังนั้นรุ่นก่อน ๆ ที่ขี้เกียจของเราจึงคิดแนวคิดแบบนี้

วงกลม＋＋

มันไม่ง่ายมากเหรอ? หมายถึงเพิ่ม 1 โดยอัตโนมัติ ในทำนองเดียวกันมี - - ซึ่งหมายถึงลดลง 1 โดยอัตโนมัติ

แต่ถ้าเราหวังว่าปริมาณการเพิ่มขึ้นอัตโนมัติเป็นตัวเลขอื่นเช่น 2 เราต้องลองนิพจน์อื่น

วงกลม += 2

นี่เท่ากับ

วงกลม = วงกลม + 2

ในทำนองเดียวกันมี －＝, /=, *=

ขั้นตอนที่ 10: ทิศทางการเคลื่อนไหว

ทิศทางที่กราฟิกจะเคลื่อนที่นั้นขึ้นอยู่กับว่าคุณเปลี่ยนพิกัดอย่างไร หากเปลี่ยนเป็น y＝y＋1 วงกลมจะเลื่อนลง ถ้าทั้งx และ y เพิ่มขึ้น 1 วงกลมจะเลื่อนลงด้านล่างขวา ถ้าเราเขียนว่า ti เป็นเครื่องหมายลบ มันจะเคลื่อนที่ไปในทิศทางตรงกันข้าม

[cceN_cpp theme="dawn"] int x, y; //ประกาศตัวแปรหลายตัวพร้อมกันได้ ใช้ลูกน้ำคั่น การตั้งค่าเป็นโมฆะ () { ขนาด (300, 300); x = 0; y = 0; } วาดเป็นโมฆะ () { พื้นหลัง (234, 113, 107); ไม่มีจังหวะ (); วงรี(x, y, 50, 50); x++; ย++; }

[/cceN_cpp]

อัตราการเคลื่อนไหว

จำค่าเริ่มต้น 60 เฟรมต่อวินาทีในการวาดฟังก์ชันหรือไม่ ตามอัตรานี้ วงกลมด้านบนจะเลื่อนไปทางขวา 60 พิกเซลต่อวินาที

หากเราต้องการเปลี่ยนอัตราการเคลื่อนไหวกราฟิก มีสองวิธี: วิธีหนึ่งคือการเพิ่มค่า x ทุกครั้งเนื่องจากจะมีการเปลี่ยนแปลง

x＝x＋10

ได้ปรับปรุงความเร็วเป็น 10 เท่าเมื่อเทียบกับของเดิม!

อีกวิธีคือเปลี่ยนความถี่ในการรีเฟรชผืนผ้าใบ อัตราเฟรม()

ฟังก์ชันนี้สามารถเปลี่ยนความถี่ในการออกอากาศของแคนวาสได้ เขียน frameRate (10) ลงในการตั้งค่าฟังก์ชัน มันจะเปลี่ยน 60 เฟรมดั้งเดิมต่อวินาทีเป็น 10 เฟรมต่อวินาที ความเร็วจะลดลง 6 เท่าจากเดิม

ขั้นตอนที่ 11: พื้นหลังที่ถูกมองข้าม

ตัวอย่างก่อนหน้านี้ทั้งหมดเขียนพื้นหลังลงในฟังก์ชันวาด คุณเคยคิดที่จะเขียนมันลงในการตั้งค่าฟังก์ชันหรือไม่? มันจะมีความแตกต่างกันหรือไม่? ตอนนี้ เรามาอัปเดตตัวอย่างการเคลื่อนที่ในแนวนอนกัน

[cceN_cpp theme="dawn"] int x, y; การตั้งค่าเป็นโมฆะ () { ขนาด (300, 300); พื้นหลัง(234, 113, 107); x = 0; y = ความสูง/2; } วาดเป็นโมฆะ () { noStroke (); วงรี(x, y, 50, 50); x += 1; } [/cceN_cpp]

เกิดอะไรขึ้น? บางทีก็ไม่สามารถเข้าใจเหตุผลในการผลิตปัญหาได้อย่างถูกต้อง ลบฟังก์ชัน noStroke เพิ่มจังหวะอีกครั้ง และดูเส้นทางการเคลื่อนที่ของวงกลม

อ้อ เป็นเพราะวงที่สร้างไว้ก่อนหน้านี้ยังไม่ถูกลบ! เนื่องจากการตั้งค่าฟังก์ชันทำงานเพียงครั้งเดียว หากเราเขียนพื้นหลังด้านบน พื้นหลังจะเติมพื้นหลังเพียงครั้งเดียว และหลังจะไม่มีผลใดๆ อีกต่อไป พื้นหลังของฟังก์ชันเป็นเหมือนเครื่องมือถังสี เมื่อใช้แล้วจะครอบคลุมเนื้อหาทั้งหมดในผืนผ้าใบแทนการตั้งค่าสีพื้นหลังเท่านั้น เราเขียนมันก่อนการวาดฟังก์ชัน เพื่อให้เฟรมเดิมถูกปิดทุกครั้งที่เราสร้างรูปแบบใหม่ ดังนั้นวงกลมสามารถวิ่งได้ตามที่เราคาดไว้ ยกเว้นการจำการใช้งานแต่ละฟังก์ชัน เราต้องนึกถึงตำแหน่งของโค้ด หลายครั้งที่ขึ้นหรือลงบรรทัดสำหรับ codea และเขียนมันภายในหรือออกจากวงเล็บปีกกาจะสร้างผลกระทบที่แตกต่างกันมาก ทิศทางของรหัสเป็นแบบสองมิติ หากเกิดข้อผิดพลาด เราต้องสอบเทียบในสองมิตินี้

• วิธีการวาดที่ไม่ซ้ำนี้สามารถสร้างเอฟเฟกต์พิเศษได้หากใช้อย่างเหมาะสม คุณสามารถคัดลอกรหัสต่อไปนี้และได้ลอง

[cceN_cpp theme="dawn"] การตั้งค่าเป็นโมฆะ (){ ขนาด (400, 400); } การวาดเป็นโมฆะ (){ วงรี (ความกว้าง/2-mouseX, ความสูง/2-mouseX, mouseY, mouseY); วงรี(ความกว้าง/2-mouseX, ความสูง/2+mouseX, mouseY, mouseY); วงรี(กว้าง/2+mouseX, ความสูง/2-mouseX, mouseY, mouseY); วงรี(ความกว้าง/2+เมาส์X, ความสูง/2+เมาส์X, เมาส์Y, เมาส์Y); } [/cceN_cpp]

ที่นี่เราใช้ตัวแปรวิเศษ mouseX และ mouseY ต่อไปเราจะพูดถึงรายละเอียด

ขั้นตอนที่ 12: วงกลมสั่น

จะทำอย่างไรถ้าฉันต้องการทำให้ทิศทางการเคลื่อนที่ของวงกลมไม่สม่ำเสมอ? ด้วยฟังก์ชันสุ่มอย่างชาญฉลาด คุณสามารถรับรู้ถึงเอฟเฟกต์นี้ได้เช่นกัน Random เป็นฟังก์ชันที่ใช้บ่อย สามารถใช้เพื่อสร้างฟังก์ชันสุ่ม มันเหมือนวิญญาณที่ไร้ร่องรอย เมื่อเกี่ยวข้องกับตัวแปรแล้ว คุณไม่สามารถจินตนาการได้เลยว่าจะเป็นอย่างไรต่อไป

เรียกใช้รูปแบบ:

สุ่ม(สูง)

สูงหมายถึงขีดจำกัดบนแบบสุ่ม และขีดจำกัดล่างเริ่มต้นคือ 0 ตัวอย่างเช่น สุ่ม(10) มันจะสร้างตัวเลขตั้งแต่ 0 ถึง 10 แบบสุ่ม (รวม 0 แต่ไม่รวม 10)

สุ่ม(ต่ำ,สูง)

หากเราตั้งค่าพารามิเตอร์ไว้ 2 ตัว พารามิเตอร์จะย้อนกลับเป็นค่าสุ่มระหว่างพารามิเตอร์ ตัวอย่างเช่น สุ่ม (5, 10) มันจะสร้างตัวเลขจาก 5 ถึง 10 แบบสุ่ม (รวม 5 แต่ไม่รวม 10)

ตัวอย่าง:

[cceN_cpp theme="dawn"] float x;

x = สุ่ม(50, 100);

พิมพ์(x); [/cceN_cpp]

ทุกครั้งที่เรารันโปรแกรม คอนโซลจะแสดงผลค่าต่างๆ

• หมายเหตุ: ค่าที่สร้างโดยฟังก์ชันสุ่มเป็นของประเภททศนิยม (ประเภทเลขทศนิยม) หากเราต้องการกำหนดค่าให้กับตัวแปรจำนวนเต็ม เราต้องแปลงค่าผ่านฟังก์ชัน int() การแปลงจะไม่เป็นวงกลม แต่จะลบส่วนทศนิยมออกโดยตรง ดังนั้นเอาต์พุตของ int (สุ่ม (5)) จึงมีความเป็นไปได้เพียง 5 อย่างเท่านั้น: 0, 1, 2, 3, 4

หลังจากที่เราคุ้นเคยกับการใช้ฟังก์ชัน Random แล้ว เราสามารถเข้ามาในกรณีด้านล่างนี้ได้โดยตรง

[cceN_cpp theme="dawn"] int x, y; การตั้งค่าเป็นโมฆะ () { ขนาด (300, 300); x = ความกว้าง/2; y = ความสูง/2; } วาดเป็นโมฆะ () { พื้นหลัง (234, 113, 107); ไม่มีจังหวะ (); x += int(สุ่ม(-5, 5)); y += int(สุ่ม(-5, 5)); วงรี(x, y, 50, 50); }

[/cceN_cpp]

ค่าพิกัดที่เพิ่มไว้เดิมได้รับการแก้ไขแล้ว เฉพาะในกรณีที่เราเพิ่มค่าสุ่ม วงกลมจะเคลื่อนที่ไปในทิศทางที่ไม่แน่นอน ด้วยช่วงสุ่มที่ใหญ่กว่า มันสั่นบ่อยขึ้น เนื่องจากค่าที่เปลี่ยนไประหว่างเฟรมจะถูกตีกลับ การเคลื่อนไหวจะไม่ราบรื่นอีกต่อไป ในขณะที่เฟรมเดิมอยู่ที่ (150, 150) เฟรมหลังจะย้ายไปที่ตำแหน่ง (170, 170) ภายในชั่วพริบตา

ขั้นตอนที่ 13: การโยกย้าย Circle

แวดวงการย้ายถิ่น

มันจะสร้างการเคลื่อนไหวที่ราบรื่นหรือไม่? ฟังก์ชั่นเสียงรบกวนสามารถช่วยเราได้ มีจังหวะที่ดีกว่าการสุ่มแบบมาตรฐาน และตัวเลขสุ่มที่สร้างแบบสุ่มอย่างต่อเนื่อง

เรียกใช้รูปแบบ:

เสียงรบกวน (t)

เสียงรบกวนจากฟังก์ชันไม่สามารถกำหนดช่วงเอาต์พุตได้ โปรแกรมกำหนดว่าสามารถสร้างตัวเลขทศนิยมจาก 0 ถึง 1 เท่านั้นและอินพุตคงที่สามารถมีเอาต์พุตคงที่เท่านั้น

[cceN_cpp theme="dawn"] float x = เสียงรบกวน(5); ลอย y = เสียงรบกวน(5); พิมพ์(x, y); [/cceN_cpp]

เนื่องจากพารามิเตอร์อินพุตข้างต้นเป็น 5 ดังนั้นผลลัพธ์ที่ได้จึงเหมือนกันแล้วจะเปลี่ยนผลลัพธ์ได้อย่างไร คำตอบคือเปลี่ยนพารามิเตอร์อินพุตแบบไดนามิก ที่จริงแล้ว เราถือว่าเสียงรบกวนเป็นแทร็กเสียงที่ไร้ขีดจำกัด พารามิเตอร์อินพุตก็เหมือนกับ "เวลาปัจจุบัน" หากอินพุตพารามิเตอร์ต่อเนื่อง เอาต์พุตก็จะต่อเนื่องเช่นกัน

[cceN_cpp theme="dawn"] ลอย x, y; การตั้งค่าเป็นโมฆะ () { ขนาด (700, 100); x = 0; พื้นหลัง(0); } ถือเป็นโมฆะ (){ x += 1; y = สัญญาณรบกวน (frameCount/100.0)*100; ไม่มีจังหวะ (); วงรี(x, y, 2, 2); }

[/cceN_cpp]

ในกรณีนี้ เราวาดเส้นทางการเปลี่ยนแปลงของ Y เพื่อให้เราเข้าใจสัญญาณรบกวนของฟังก์ชันได้ดีขึ้น

• ในหมู่มัน ตัวแปร frameCount จะได้รับเฟรมปัจจุบัน ต่างจากความกว้าง ความสูง แบบที่แล้ว ก็ทรงตัวได้ไม่มีเปลี่ยนแปลง นอกจากนี้ มันเริ่มเพิ่มขึ้นจาก 0 หากเราเข้าใจโดยการแสดงภาพกราฟิกเคลื่อนไหวครั้งแรกของเรา มันจะแสดงหน้าที่เราได้เปิดดู (แทนที่จะเป็นแนวคิดเรื่องเวลาในโปรแกรม)

• frameCount เป็นตัวแปรจำนวนเต็ม หารด้วยตัวแปรจำนวนเต็มอื่น โปรแกรมจะใช้ค่าเริ่มต้นในการประมวลผลผลลัพธ์ให้เป็นจำนวนเต็มเพื่อปรับปรุงความแม่นยำของผลลัพธ์ เราต้องเปลี่ยน 100 เป็น 100.0 หารด้วยเลขทศนิยม เราจะได้เลขทศนิยมด้วย

• ในการเปลี่ยนแกน Y จาก 0 เป็น 100 เราต้องคูณผลลัพธ์ของสัญญาณรบกวนด้วย 100 ดังนั้นเราจึงสามารถควบคุมช่วงค่าแบบสุ่มได้

พวกคุณบางคนที่คิดเก่งอาจถามว่า "ทำไมเราต้องหาร frameCountby 100? เขียน frameCount โดยตรงเลยดีไหม" แน่นอนคุณสามารถ! แต่ในที่นี้ เพื่อแสดงคุณลักษณะของเสียงรบกวนของฟังก์ชันได้ดียิ่งขึ้น เราจึงชะลอ "อัตราการแพร่ภาพ" ตัวอย่างด้านล่างแสดงการเปลี่ยนแปลงมูลค่าการส่งออกภายใต้อัตราการเปลี่ยนแปลงที่แตกต่างกัน

[cceN_cpp theme="dawn"] ลอย x, y1, y2, y3, y4, y5; การตั้งค่าเป็นโมฆะ () { ขนาด (700, 500); x = 0; พื้นหลัง(0); } ถือเป็นโมฆะ (){ x += 1; y1 = สัญญาณรบกวน (frameCount)*100; y2 = สัญญาณรบกวน (frameCount/10.0)*100; y3 = สัญญาณรบกวน (frameCount/100.0)*100; y4 = สัญญาณรบกวน (frameCount/1000.0)*100; y5 = สัญญาณรบกวน (frameCount/10000.0)*100; ไม่มีจังหวะ (); วงรี(x, y1, 2, 2); วงรี(x, y2+100, 2, 2); วงรี(x, y3+200, 2, 2); วงรี(x, y4+300, 2, 2); วงรี(x, y5+400, 2, 2); จังหวะ (80); เส้น (0, 100, กว้าง, 100); เส้น (0, 200, กว้าง, 200); เส้น (0, 300, กว้าง, 300); เส้น (0, 400, กว้าง, 400); }

[/cceN_cpp]

คุณสามารถถือว่าพารามิเตอร์ที่เปลี่ยนแปลงภายในเสียงรบกวนของฟังก์ชันเป็นแถบความคืบหน้าได้ เปลี่ยนพารามิเตอร์เหมือนเราย้ายแถบความคืบหน้า ดังนั้นเมื่อขอบเขตการเปลี่ยนแปลงของ "แทร็กเสียง" นี้ใหญ่ขึ้น ลักษณะต่อเนื่องของค่าเอาต์พุตจะอ่อนลง (เราสามารถจินตนาการได้ว่าจะเกิดอะไรขึ้นถ้าเราออกอากาศเพลงหรือวิดีโอด้วยความเร็ว 2 เท่า 5 ครั้งความเร็ว 20 เท่า) เมื่อขอบเขตมีขนาดใหญ่กว่าค่าใดค่าหนึ่ง ก็ไม่มีความแตกต่างกันมากในการทำงานแบบสุ่มที่การสร้างมูลค่า

หากคุณเข้าใจตัวอย่างทั้งหมดข้างต้น คุณจะรู้สึกว่าไม่มีอะไรง่ายไปกว่านี้อีกแล้วในการวาดวงกลมอพยพ คุณสามารถเข้าใจหลักการภายในได้เช่นกัน

[cceN_cpp theme="dawn"] ลอย x, y; การตั้งค่าเป็นโมฆะ () { ขนาด (300, 300); x = 0; } วาดเป็นโมฆะ () { พื้นหลัง (234, 113, 107); x = สัญญาณรบกวน(frameCount/100.0 + 100)*300; y = สัญญาณรบกวน(frameCount/100.0)*300; ไม่มีจังหวะ (); วงรี(x, y, 50, 50); }

[/cceN_cpp]

ตอนนี้ การเคลื่อนไหวมีความน่าสนใจมากขึ้น เช่นเดียวกับไจโรที่หมุนได้

• สาเหตุที่ตัวแปร x ภายในสัญญาณรบกวนของฟังก์ชันต้องบวก 100 เป็นเพราะเพื่อแยกพวกมันออกจากกันในระยะห่าง หากพารามิเตอร์ของ xy ภายในฟังก์ชัน noise เท่ากันหรือใกล้เคียงกัน การเปลี่ยนแปลงของพิกัด x, y จะใกล้เคียงกัน นี่คือการทำให้การเคลื่อนไหวกลายเป็นเรื่องสุ่มมากขึ้น

ขั้นตอนที่ 14: วงกลมย้ายโดยเมาส์

ต่อไป เรามาถึงสองตัวแปรที่ฉันชอบมากที่สุด: mouseX และ mouseY เมื่อแรกเห็นสองแนวคิด ดวงตาของฉันเป็นประกายด้วยแสง เพราะมันเป็นวิธีที่ตรงที่สุดในการโต้ตอบกับกราฟิก เราสามารถสร้างโปรแกรมที่น่าสนใจได้มากมาย

กรณีนี้ค่อนข้างง่าย:

[cceN_cpp theme="dawn"] int x, y; การตั้งค่าเป็นโมฆะ () { ขนาด (300, 300); x = 0; y = 0; } วาดเป็นโมฆะ () { พื้นหลัง (234, 113, 107); ไม่มีจังหวะ (); x = เมาส์X; y = เมาส์Y; วงรี(x, y, 50, 50); }

[/cceN_cpp]

mouseX สามารถรับพิกัด x ของเมาส์ได้ ในขณะที่ mouseY สามารถรับพิกัด y ได้

• ลองเปลี่ยนสัญลักษณ์บวกและลบหรือแลกเปลี่ยน mouseX และ mouseY

ขั้นตอนที่ 15: สิ้นสุด

จากคำสั่งที่คุ้นเคยเหล่านี้ คุณอาจทำการเคลื่อนที่ของกราฟิกได้ ด้วยเนื้อหาของบทที่แล้ว ใช้จินตนาการของคุณอย่างเหมาะสม คุณสามารถสร้างเอฟเฟกต์แอนิเมชั่นที่น่าสนใจมากมาย

ในบทต่อไป เราจะเห็นตัวอย่างมากมาย ในขณะเดียวกัน เราจะใช้ฟังก์ชันทางคณิตศาสตร์และรวมเข้ากับการเคลื่อนไหวแบบกราฟิก

บทความนี้มาจากนักออกแบบ Wenzy

ขั้นตอนที่ 16: การอ่านแบบสัมพัทธ์:

คำแนะนำการเขียนโปรแกรมที่น่าสนใจสำหรับนักออกแบบ -- การประมวลผลการสัมผัสเบื้องต้น

คำแนะนำการเขียนโปรแกรมที่น่าสนใจสำหรับนักออกแบบ -- สร้างโปรแกรมการประมวลผลครั้งแรกของคุณ

บทความนี้มาจาก:

หากคุณต้องการความช่วยเหลือ คุณสามารถติดต่อ: [email protected]