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

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

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

ขั้นตอนที่ 1: การเคลื่อนไหวและฟังก์ชัน

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

นี่อะไร? ตอนนี้เพียงเก็บคำถามนี้ไว้ก่อนแล้วค่อยรู้และนำไปใช้

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

จากภาพด้านบนคุณสามารถจดจำฟังก์ชันได้กี่ฟังก์ชัน? พวกเขามีความสัมพันธ์แบบไหนกับการเคลื่อนไหว? ทีนี้ลองหาฟังก์ชันกำลังสองจากมัน เพิ่มพารามิเตอร์แบบสุ่มแล้วดูว่าจะเกิดอะไรขึ้น ตัวอย่างเช่น y = x² / 100

นี่คือลักษณะของภาพฟังก์ชัน คัดลอกรหัสด้านล่าง

[cceN_cpp theme="dawn"] ลอย x, y; การตั้งค่าเป็นโมฆะ () { ขนาด (300, 300); พื้นหลัง(0); x = 0; } วาดเป็นโมฆะ () { จังหวะ (255); จังหวะน้ำหนัก(2); y = pow(x, 2) / 100.0; //ฟังก์ชัน pow จะกลับไปเป็นยกกำลังที่ n ของหมายเลขการกำหนด (x, 2) หมายถึงกำลังสองของ x พารามิเตอร์ตัวแรกคือตัวเลขฐานและตัวที่สองคือดัชนี จุด(x, y); x++; } [/cceN_cpp]

เอฟเฟกต์การวิ่ง

จากนั้นเลือกฟังก์ชัน sin สูตร: y = 150 + บาป(x)

คัดลอกรหัสต่อไปนี้

[cceN_cpp theme="dawn"] ลอย x, y; การตั้งค่าเป็นโมฆะ () { ขนาด (300, 300); พื้นหลัง(0); x = 0; } วาดเป็นโมฆะ (){ y = ความสูง/2 + บาป (เรเดียน (x)) * 150; //ฟังก์ชันเรเดียนแปลง x เป็นมุม x++; จังหวะ (255); จังหวะน้ำหนัก(2); จุด(x, y); } [/cceN_cpp]

เอฟเฟกต์การวิ่ง

นี่คือกราฟิกที่เราได้รับหลังจากใช้งานโค้ด และนั่นคือเส้นทางการเคลื่อนไหวของพวกเขา เทียบกับตัวก่อนๆ เห็นผลชัดเจน ภาพฟังก์ชันสอดคล้องกับแทร็กการเคลื่อนไหวจริง ๆ ! มันค่อนข้างง่ายพอสมควร คุณแค่ต้องแทนที่ค่าของ x, y เป็นพิกัด แทร็กเดิมที่เราวาดนั้นเทียบเท่ากับกราฟิกของฟังก์ชัน y = x² / 100 ในขณะที่แทร็กหลังเท่ากับกราฟิกของฟังก์ชัน y = 150 + sin(x) แต่ในโปรแกรม ทิศทางของแกน y จะตรงกันข้าม ดังนั้น เมื่อเทียบกับกราฟิกต้นฉบับ แทร็กจะกลับหัวกลับหาง ฉันเดาว่าคุณต้องมีความรู้สึกว่าคำถามยากๆ ที่หลอกหลอนคุณมาเป็นเวลานานจะได้รับการแก้ไขทันที น่าทึ่งมากที่ฟังก์ชันอันยอดเยี่ยมเหล่านี้ที่เราเคยเรียนรู้มาก่อนสามารถนำมาใช้เพื่อควบคุมการเคลื่อนไหวกราฟิกได้!

ขั้นตอนที่ 2: การเขียนฟังก์ชัน

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

ดังนั้น สูตรด้านล่างในโปรแกรมจึงเขียนได้ดังนี้

y = x² → y = pow(x, 2) หรือ y = sq(x)

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

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

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

y ＝logₑ² → y = บันทึก(2)

y = e² → y = ประสบการณ์(2)

y = √5 → y = sqrt(5)

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

ฟังก์ชันตรีโกณมิติ

ตอนนี้ มาทำความรู้จักกับงานเขียนเกี่ยวกับฟังก์ชันตรีโกณมิติกันดีกว่า

เราต้องให้ความสนใจว่าในโปรแกรมอินพุตของพารามิเตอร์ฟังก์ชันที่สัมพันธ์กับมุมใช้เรเดียน ดังนั้น sin90° จะถูกเขียนเป็นบาป (PI／2) หากคุณไม่คุ้นเคยกับวิธีนี้ คุณสามารถใช้ฟังก์ชัน randians เพื่อแปลงมุมเป็นเรเดียนก่อน แล้วจึงเขียน sin(เรเดียน(90))

การใช้องศาฟังก์ชันค่อนข้างตรงกันข้าม สามารถเปลี่ยนเรเดียนเป็นมุมได้ ป้อน print(degrees(PI/2)) ลงในพื้นที่แก้ไขโดยตรง และดูว่าคุณจะได้อะไร

ขั้นตอนที่ 3: ควบคุมการเคลื่อนไหวกราฟิกด้วยฟังก์ชันตรีโกณมิติ

นี่เป็นกรณีที่คุณจะเห็นผลจริงของการเคลื่อนไหวกราฟิก

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

ฟังก์ชัน sin เป็นฟังก์ชันเป็นระยะ ค่าต่ำสุดคือ －1 และค่าสูงสุดคือ 1 ความสูงของหน้าจอคือ 300 อ้างถึง y = sin(เรเดียน(x)) * 150 + 150 ดังนั้นช่วงการเปลี่ยนแปลงของค่า y จะถูกควบคุมอย่างดีภายใน 0 ถึง 300.

วงเวียนหมุน

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

อันที่จริงพวกเขาได้เปิดเผยความสัมพันธ์ระหว่างพิกัดเส้นรอบวงและฟังก์ชันตรีโกณมิติทางสายตา การเคลื่อนไหวในภาพด้านบนขับเคลื่อนโดยตัวแปรอิสระที่เพิ่มขึ้นอย่างต่อเนื่อง θ. ด้านซ้ายเป็นภาพของฟังก์ชัน sin และ cos และด้านขวาหมายถึงจุดที่เคลื่อนที่เป็นวงกลมหลังจากทำการแมปแล้ว มันไม่ฉลาดมากเหรอ? ไม่ใช่เรื่องลึกลับอีกต่อไป คุณสามารถใช้รหัสเพื่อรับรู้

ตัวอย่างง่ายๆ:

[cceN_cpp theme="dawn"] ลอย x, y, r, R, มุม; การตั้งค่าเป็นโมฆะ () { ขนาด (300, 300); ร = 20; //เส้นผ่านศูนย์กลางวงกลม R = 100; //รัศมีของเส้นทางการเคลื่อนที่ x = 0; มุม = 0; y = ความสูง/2; } วาดเป็นโมฆะ () { พื้นหลัง (234, 113, 107); แปล(กว้าง/2,สูง/2); // ย้ายจุดเดิมไปที่กึ่งกลางหน้าจอ ไม่มีจังหวะ (); x = R * cos(มุม); y = R * บาป(มุม); วงรี(x, y, r, r); มุม += 0.05; } [/cceN_cpp]

ดู! วงกลมหมุนปรากฏขึ้น! ที่นี่ตัวแปรอิสระไม่มีค่าคงที่เพิ่มขึ้นบิตกลายเป็นมุม (เท่ากับ θ ในภาพ) เป็นที่ยืนสำหรับมุม ในหมู่มัน xy มีค่าสัมประสิทธิ์การคูณ R ซึ่งนำไปสู่การขยายรัศมีการเคลื่อนที่ของวงกลม (R สำหรับรัศมี) หากไม่คูณ R เส้นทางการเคลื่อนที่จะถูกจำกัดภายในช่วงตั้งแต่ -1 ถึง 1

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

y = (นิพจน์ที่ไม่รู้จักของ x?);

x＋＋;

เราจึงต้องเปลี่ยนความคิด เลือกมุมอื่นเป็นตัวแปรอิสระ จากนั้นใช้ฟังก์ชัน sin และ cos เพื่อแปลงเป็นพิกัดแนวนอนและแนวตั้ง

x = R * cos(มุม);

y = R * บาป(มุม);

มุม += 0.05;

บางท่านอาจสงสัยว่าทำไมจึงแสดงเส้นทางการเคลื่อนที่ของวงกลมได้ ตามคำจำกัดความของฟังก์ชันตรีโกณมิติ เราสามารถให้เหตุผลง่ายๆ ว่าฟังก์ชันนั้นทำอัตราส่วนของด้านตรงข้ามกับด้านตรงข้ามมุมฉาก ฟังก์ชัน cos คืออัตราส่วนของด้านประชิดด้านตรงข้ามมุมฉาก ไม่ว่าจุดวงกลมจะอยู่ที่ใด r (รัศมี) จะไม่เปลี่ยนแปลง ดังนั้นเราจึงสามารถสรุปนิพจน์ของพิกัด x และพิกัด y ได้

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

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

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

เหล่านี้เป็นภาพที่สัมพันธ์กันอย่างใกล้ชิดกับฟังก์ชันตรีโกณมิติ

ขั้นตอนที่ 4: ระบบพิกัดการเคลื่อนไหว

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

ฟังก์ชันแปล

ฟังก์ชันแปลที่เราเคยพูดถึงก่อนหน้านี้ ใช้เพื่อย้ายระบบพิกัดของกราฟิกในแนวนอน

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

แปล (a, b)

พารามิเตอร์แรกหมายถึงการย้ายไปยังทิศทางบวกของแกน x สำหรับพิกเซล พารามิเตอร์ที่สองหมายถึงการเคลื่อนที่ไปยังทิศทางบวกของแกน y สำหรับพิกเซล b

เปรียบเทียบรหัสทั้งสองและพยายามค้นหาความแตกต่าง (เพื่อลดความซับซ้อนของโค้ด เราสามารถลบขนาดฟังก์ชัน ความกว้างและความสูงของหน้าจอโดยค่าเริ่มต้นคือ 100)

ก่อนที่เราจะใช้:

วงรี(0, 0, 20, 20);

หลังจากที่เราใช้:

แปล(50, 50);

วงรี(0, 0, 20, 20);

ฟังก์ชั่นหมุน

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

หมุน (ก)

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

ก่อนใช้:

วงรี(50, 50, 20, 20);

หลังการใช้งาน:

หมุน(เรเดียน(30));

วงรี(50, 50, 20, 20);

เอฟเฟกต์ในโปรแกรมคือการทำให้วงกลมหมุนรอบจุดศูนย์กลางพิกัดในทิศทางตามเข็มนาฬิกาเป็นเวลา 30 องศา

ขนาดฟังก์ชัน

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

มาตราส่วน (ก)

ฟังก์ชันนี้สามารถซูมออกระบบพิกัดได้ ค่านี้มีไว้สำหรับการปรับขนาด เมื่อพารามิเตอร์เกิน 1 ให้ซูมเข้า หากต่ำกว่า 1 ให้ซูมออก

ก่อนใช้:

วงรี(0, 0, 20, 20);

หลังการใช้งาน:

ขนาด(4);

วงรี(0, 0, 20, 20);

วงกลมในภาพด้านบนขยายเป็นสี่เท่าของขนาดดั้งเดิม นอกจากนี้ คุณสามารถใช้สองพารามิเตอร์เพื่อซูมออกในทิศทางแกน x และแกน y แยกกันได้

มาตราส่วน (4, 2);

วงรี(0, 0, 20, 20);

การทับซ้อนของฟังก์ชันการแปลง

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

แปล(40, 10);

แปล(10, 40);

วงรี(0, 0, 20, 20);

ผลสุดท้ายจะเท่ากับ

แปล(50, 50);

วงรี(0, 0, 20, 20);

เหมือนกับฟังก์ชั่นการหมุน

หมุน(เรเดียน(10));

หมุน(เรเดียน(20));

วงรี(50, 50, 20, 20);

เท่ากับ

หมุน(เรเดียน(30));

วงรี(50, 50, 20, 20);

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

ก่อนใช้:

วงรี(50, 50, 50, 20);

หลังการใช้งาน:

แปล(50, 50);

หมุน(เรเดียน(45));

วงรี(0, 0, 50, 20); //เพื่อให้เห็นการเปลี่ยนแปลงของมุมการหมุน เราได้ทำวงรี

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

การเคลื่อนที่ในแนวนอนและการเคลื่อนที่แบบวงกลม

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

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

[cceN_cpp ธีม="รุ่งอรุณ"]

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

พิกัดวงกลมไม่เปลี่ยน แต่ระบบพิกัดเปลี่ยน

หมุนการเคลื่อนไหว

[cceN_cpp theme="dawn"] float r, R, มุม; การตั้งค่าเป็นโมฆะ () { ขนาด (300, 300); ร = 20; //ขนาดวงกลม R = 100; //รัศมีของการติดตามการเคลื่อนไหว } การวาดเป็นโมฆะ () { พื้นหลัง (234, 113, 107); แปล(กว้าง/2,สูง/2); // ย้ายจุดเดิมไปที่กึ่งกลางหน้าจอ หมุน(มุม); ไม่มีจังหวะ (); วงรี(0, R, r, r); มุม += 0.05; } [/cceN_cpp]

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

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

เข้าถึงสถานะพิกัด

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

ตัวอย่าง:

[cceN_cpp ธีม="รุ่งอรุณ"] pushMatrix(); // Store พิกัดระบบแปลสถานะ (50, 50); วงรี(0, 0, 20, 20); popMatrix(); // อ่านสถานะระบบพิกัด rect(0, 0, 20, 20); [/cceN_cpp]

ในตัวอย่างนี้ ก่อนใช้ translate(50, 50) เราใช้ฟังก์ชัน pushMatrix.to เก็บสถานะปัจจุบันของระบบพิกัด ในขณะเดียวกันก็เป็นสถานะเริ่มต้น หลังจากที่เราวาดวงกลมแล้วใช้ popMatrix มันจะกลับมาที่สถานะนี้ ในเวลานี้ ใช้ฟังก์ชัน rect คุณจะพบว่ามันไม่ได้รับผลกระทบจากการแปลฟังก์ชัน แทนที่จะวาดสี่เหลี่ยมที่มุมบนซ้ายของจุดเดิม

นอกจากนี้ ฟังก์ชัน pushMatrix และ popMatrix ยังอนุญาตให้ทำรัง

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

pushMatrix();

pushMatrix();

popMatrix();

popMatrix();

เพื่อแสดงความสัมพันธ์โดยสัญชาตญาณ เราเลือกรูปแบบการย่อ

การเคลื่อนไหวแบบผสมผสานหรือการเคลื่อนไหวในการเคลื่อนไหว?

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

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

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

และมีการเคลื่อนที่เป็นวงกลมและพิกัดระบบพิกัด

[cceN_cpp theme="dawn"] ลอย x, y, มุม; การตั้งค่าเป็นโมฆะ () { ขนาด (300, 300); พื้นหลัง(234, 113, 107); ไม่มีจังหวะ (); } วาดเป็นโมฆะ (){ มุม += 0.01; x = บาป(มุม) * 100; y = cos(มุม) * 100; แปล(กว้าง / 2, สูง / 2); pushMatrix(); มาตราส่วน (1 + 0.1 * บาป (มุม * 10)); วงรี(x, y, 5, 5); popMatrix(); } [/cceN_cpp]

อย่าหลงกลมัน! จุดวงกลมกำลังเคลื่อนที่เป็นวงกลม ไม่ยากถ้าเราเปรียบเทียบกับการปรับขนาดด้วยกล้องวิดีโอ กล้องวิดีโอเคลื่อนที่ไปข้างหน้าหรือข้างหลังอย่างต่อเนื่องกำลังยิงจุดที่เป็นวงกลม

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

ขั้นตอนที่ 6: การใช้งานที่ครอบคลุม

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

[cceN_cpp theme="dawn"] ลอย x1, y1, x2, y2, r, R; มุมลอย 1, มุม 2; การตั้งค่าเป็นโมฆะ () { ขนาด (300, 300); r = 12; R = 120; มุม 1 = 0; มุม2 = PI/4; } วาดเป็นโมฆะ () { พื้นหลัง (234, 113, 107); ไม่มีจังหวะ (); แปล(กว้าง / 2, สูง / 2); มุม 1 += 0.02; มุม2 += 0.06; x1 = R *บาป(มุม1); y1 = R* cos(มุม1); x2 = R/2 *บาป(มุม2); y2 = R/2 *cos(มุม2); วงรี(x1, y1, r/2, r/2); วงรี(x2, y2, r, r); วงรี(-x1, -y1, r/2, r/2); วงรี(-x2, -y2, r, r); วงรี(x1, -y1, r/2, r/2); วงรี(x2, -y2, r, r); วงรี(-x1, y1, r/2, r/2); วงรี(-x2, y2, r, r); จังหวะ (255); สโตรกเวท(3); เส้น(x1, y1, x2, y2); บรรทัด (-x1, -y1, -x2, -y2); บรรทัด(x1, -y1, x2, -y2); บรรทัด (-x1, y1, -x2, y2); } [/cceN_cpp]

ตัวอย่างนี้ไม่มีความรู้ใด ๆ นอกเหนือจากบทก่อนหน้าของเราที่แนะนำ

ตรงกับแต้มไหน ? ตรงกับเส้นไหน? ฉันไม่สามารถคิดออกเกินไป แต่ฉันจำได้ว่ามันมาจากส่วนเล็ก ๆ ของรหัส

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

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

ขั้นตอนที่ 7: END

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

[cceN_cpp theme="dawn"] float browX, earD, eyeD, faceD; การตั้งค่าเป็นโมฆะ () { ขนาด (500, 500); } วาดเป็นโมฆะ () { พื้นหลัง (200, 0, 0); browX = 150 + บาป (frameCount / 30.0) *20; earD = 180 + บาป (frameCount / 10.0) *20; eyeD = 60 + บาป (frameCount/30.0) *50; ใบหน้าD = 300; จังหวะน้ำหนัก(8); วงรี (175, 220, earD, earD); วงรี(กว้าง - 175, 220, earD, earD); ตรง (100, 100, faceD, faceD); เส้น (browX, 160, 220, 240); เส้น(ความกว้าง-คิ้วX, 160, ความกว้าง-220, 240); กรอก(สุ่ม(255), สุ่ม(255), สุ่ม(255)); วงรี(175, 220, ตาD, ตาD); วงรี(กว้าง-175, 220, ตาD, ตาD); กรอก (255); จุด(กว้าง/2,สูง/2); สามเหลี่ยม(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]

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

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

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

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

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

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

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

หากคุณมีคำถามใดๆ คุณสามารถส่งอีเมลไปที่ [email protected]

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