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

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

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

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

ขั้นตอนที่ 1: อ่านรูปภาพ

ก่อนที่เราจะเริ่มต้น เรามาดูวิธีการโหลดภาพย้อนหลังกันก่อน

ขั้นตอนที่ 2: ฟังก์ชั่นที่เกี่ยวข้องกับรูปภาพ

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

อย่าลืมจัดเก็บแหล่งที่มาของรูปภาพลงในไฟล์ข้อมูลก่อนเรียกใช้โปรแกรม

ขั้นตอนที่ 3: การโหลดเพลง เล่น & หยุด

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

ตัวอย่างโค้ด (10-1):

[cceN_cpp theme="dawn"] นำเข้า processing.sound.*;

เสียงไฟล์เสียง;

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

ขนาด (640, 360);

พื้นหลัง (255);

เสียง = ไฟล์เสียงใหม่ (นี่คือ "1.mp3");

}

โมฆะวาด () {

}

ถือเป็นโมฆะ keyPressed () {

//เล่นเสียง

ถ้า (คีย์ == 'p') {

เสียง. เล่น ();

}

//หยุดเสียง

ถ้า (คีย์ == 's') {

เสียงหยุด ();

}

} [/cceN_cpp]

การตระเตรียม:

การประมวลผลเองไม่มีคลังเสียงใดๆ คุณต้องดาวน์โหลดด้วยตัวเอง ดังนั้น ก่อนเขียนโค้ด คุณควรเตรียมการดังต่อไปนี้

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

อย่างไรก็ตาม หากเราใช้ฟังก์ชันนี้ในประเทศของเรา (ในประเทศจีน) เราไม่สามารถดาวน์โหลดได้โดยเชื่อมต่อเว็บโดยตรง เราต้องเริ่มต้น VPN แม้ว่าเราจะเริ่มมัน มันก็จะมีเงื่อนไขที่ไม่เสถียร ดังนั้นคุณต้องอดทนลองหลายครั้ง นี่เป็นวิธีการโหลดที่สะดวกที่สุด หากคุณไม่สามารถติดตั้งได้ คุณต้องดาวน์โหลดจากเว็บไซต์ทางการด้วยตนเอง (https://processing.org/reference/libraries/) เนื่องจากวิธีการติดตั้งด้วยตนเองนั้นซับซ้อนมาก เราจะมาพูดถึงเรื่องนี้ในบทอื่นต่อไป

รหัสอธิบาย:

คลังเสียงสามารถทำงานได้อย่างถูกต้องหลังจากการเตรียมการเสร็จสิ้น จัดการโค้ดด้านบน คลิก RUN จากนั้นจะทำงาน กดปุ่ม "P" เพื่อเล่นเพลง "S" เพื่อหยุดเพลง

ถ้าเคยลงโปรแกรมต้องโหลดก่อนครับ ในตอนเริ่มต้น เราต้องเพิ่มประโยค "import processing.sound.*" "นำเข้า" เป็นคำสำคัญหมายถึงการโหลดตามตัวอักษร เพิ่มชื่อห้องสมุดหลัง "นำเข้า" จากนั้นระบบจะโหลดไลบรารี หางมักจะตามหลังเครื่องหมาย "*" ดังนั้นจึงจะโหลดคลาสที่เกี่ยวข้องกับไลบรารีทั้งหมดลงในโปรแกรมโดยไม่ต้องเพิ่มทีละรายการด้วยตนเอง

ในประโยคที่สอง " SoundFile sound; " ได้ประกาศออบเจกต์เสียง SoundFile นั้นคล้ายกับ PImage

ภายในการตั้งค่าฟังก์ชัน " sound = new SoundFile(this, "1.mp3"); " ใช้เพื่อสร้างวัตถุและกำหนดเส้นทางการอ่าน ที่นี่เราได้เริ่มใช้คลาสแนวคิดใหม่แล้ว ตอนนี้เราไม่ได้พูดถึงมันอย่างลึกซึ้ง เราจำเป็นต้องรู้ว่ามันเป็นวิธีการเขียนแบบตายตัว และพารามิเตอร์สุดท้ายคือการกรอกที่อยู่ของแหล่งเพลง

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

แหล่งที่มาของเสียงจะถูกจัดเก็บไว้ในไฟล์ข้อมูลภายใต้แค็ตตาล็อก Sketchfile เดียวกัน (พร้อมคำต่อท้าย pde) หากไม่มี คุณสามารถสร้างได้ด้วยตนเอง

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

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

การประมวลผลรองรับรูปแบบเสียงทั่วไป เช่น mp3, wav, ogg เป็นต้น

ขั้นตอนที่ 4: การควบคุมความเร็วของเพลง

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

เว็บไซต์วิดีโอ:

ตัวอย่างโค้ด (10-2):

[cceN_cpp theme="dawn"] นำเข้า processing.sound.*;

เสียงไฟล์เสียง;

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

ขนาด (640, 360);

พื้นหลัง (255);

เสียง = ไฟล์เสียงใหม่ (นี่คือ "1.mp3");

}

โมฆะวาด () {

ความเร็วลอย = mouseX/(ลอย)ความกว้าง * 3;

อัตราเสียง (ความเร็ว);

float vol = mouseY/(float)ความสูง * 4;

sound.amp(โวล);

}

เป็นโมฆะ keyPressed () {

//เล่นเสียง

ถ้า (คีย์ == 'p') {

เสียง. เล่น ();

}

//หยุดเสียง

ถ้า (คีย์ == 's') {

เสียงหยุด ();

}

} [/cceN_cpp]

รหัสอธิบาย:

ฟังก์ชัน.rate() ควบคุมความเร็วในการเล่นเสียง ค่าในวงเล็บเป็นตัวกำหนดความเร็วในการเล่นที่เร็วและช้า เมื่อค่าเป็น 1 ความเร็วในการเล่นเป็นปกติ เมื่อเกิน 1 แล้วเร่ง; ในขณะที่ต่ำกว่า 1 แล้วชะลอตัวลง

ฟังก์ชัน.amp() ควบคุมระดับเสียง ค่าในวงเล็บเป็นตัวกำหนดปริมาณ เมื่อเป็น 1 ค่าระดับเสียงเป็นปกติ เมื่อเกิน 1 ให้เพิ่มระดับเสียง ในขณะที่ต่ำกว่า 1 แล้วลดระดับเสียง

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

ขั้นตอนที่ 5: เล่นวิดีโอและหยุด

ในการประมวลผล การโหลดวิดีโอจะคล้ายกับการโหลดเสียง คุณต้องดาวน์โหลดไลบรารีวิดีโอก่อน (https://processing.org/reference/libraries/video/index.html)

ตัวอย่างโค้ด (10-3):

[cceN_cpp theme="dawn"] นำเข้า processing.video.*;

ภาพยนตร์ mov;

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

ขนาด (640, 360);

พื้นหลัง(0);

mov = หนังใหม่ (นี่ "1.mov");

}

โมฆะ movieEvent (ภาพยนตร์ภาพยนตร์) {

mov.read();

}

โมฆะวาด () {

รูปภาพ(mov, 0, 0, 640, 360);

}

ถือเป็นโมฆะ keyPressed () {

ถ้า (คีย์ == 'p') {

mov.play();

}

ถ้า (คีย์ == 's') {

mov.stop();

}

ถ้า (คีย์ == 'd') {

mov.หยุดชั่วคราว();

}

} [/cceN_cpp]

ภาพหน้าจอวิดีโอ:

รหัสอธิบาย:

ประโยคแรก " import processing.video.*; " ใช้เพื่อโหลดไลบรารีวิดีโอ

ประโยคที่สอง " Movie mov; " ใช้เพื่อประกาศวัตถุวิดีโอ ในหมู่มัน หน้าที่ของ " ภาพยนตร์ " คล้ายกับภาพ

ในการตั้งค่าฟังก์ชัน ผลกระทบของ " mov = new Movie(this, "1.mov"); " คือการสร้างวัตถุและกำหนดเส้นทางการอ่าน พารามิเตอร์สุดท้ายจะต้องกรอกที่อยู่ของแหล่งวิดีโอ

Behine setup, movieEvent แสดงถึงเหตุการณ์วิดีโอ ใช้เพื่ออัปเดตและอ่านข้อมูลวิดีโอ "mov.read()" ในเหตุการณ์หมายถึงอ่าน

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

ฟังก์ชัน.play() หมายถึง เล่น ฟังก์ชัน.stop() หมายถึง หยุด และจะรีเซ็ตวิดีโอ ฟังก์ชัน.pause() หมายถึงการหยุดชั่วคราว มันจะขัดจังหวะการเล่นปัจจุบัน ซึ่งจะดำเนินต่อไปจนกว่าฟังก์ชัน.play() จะถูกเรียกใช้

ขั้นตอนที่ 6: การควบคุมความเร็ววิดีโอ

ตัวอย่างโค้ด (10-4):

[cceN_cpp theme="dawn"] นำเข้า processing.video.*;

หนัง mov;

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

ขนาด (640, 360);

พื้นหลัง(0);

mov = หนังใหม่ (นี่ "transit.mov");

}

โมฆะ movieEvent (ภาพยนตร์ภาพยนตร์) {

mov.read();

}

โมฆะวาด () {

รูปภาพ(mov, 0, 0, ความกว้าง, ความสูง);

float newSpeed = mouseX/(float)ความกว้าง * 4;

mov.speed(ใหม่ความเร็ว);

}

ถือเป็นโมฆะ keyPressed () {

ถ้า (คีย์ == 'p') {

mov.play();

}

ถ้า (คีย์ == 's') {

mov.stop();

}

ถ้า (คีย์ == 'd') {

mov.หยุดชั่วคราว();

}

}

[/cceN_cpp]

รหัสอธิบาย:

ฟังก์ชัน.speed() สามารถใช้เพื่อควบคุมความเร็วในการเล่นวิดีโอ เมื่อค่าพารามิเตอร์เป็น 1 ความเร็วในการเล่นเป็นปกติ เมื่อค่าเกิน 1 แล้วเร่ง; ในขณะที่ต่ำกว่า 1 แล้วชะลอตัวลง

เนื่องจากเราได้สร้างตัวแปรท้องถิ่น newSpeed และนำเข้าไปยังฟังก์ชัน setSpeed () พิกัดของเมาส์จะส่งผลต่อความเร็วในการเล่นวิดีโอโดยตรง

สำหรับตัวอย่างเพิ่มเติมเกี่ยวกับวิดีโอ คุณสามารถอ้างถึง Libraries - Video in the case library

ขั้นตอนที่ 7: การประมวลผลเหตุการณ์ทั่วไป

ก่อนหน้านี้เราได้แนะนำเหตุการณ์ keyPressed() เท่านั้น มันจะถูกเรียกใช้หลังจากกดแป้นพิมพ์ ต่อไปนี้ เราจะแนะนำกิจกรรมทั่วไปอื่นๆ ในการประมวลผลให้คุณ

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

กระแสเหตุการณ์

เราสามารถใช้ตัวอย่างเพื่อทราบลำดับการดำเนินการของเหตุการณ์

ตัวอย่างโค้ด (10-5):

[cceN_cpp theme="dawn"] การตั้งค่าเป็นโมฆะ () {

อัตราเฟรม(2);

println(1);

}

โมฆะวาด () {

println(2);

}

เป็นโมฆะ mousePressed () {

ปริ้นเตอร์(3);

}

โมฆะ mouseMoved () {

ปริ้นเตอร์(4);

}

โมฆะ mouseReleased () {

พิมพ์(5);

}

ถือเป็นโมฆะ keyPressed () {

พิมพ์(6);

}

ปล่อยคีย์เป็นโมฆะ () {

พิมพ์(7);

} [/cceN_cpp]

รหัสอธิบาย:

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

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

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

กิจกรรมจะดำเนินการตามลำดับ หลังจากนำโค้ดทั้งหมดในเหตุการณ์ปัจจุบันไปใช้แล้ว โค้ดจะรันโค้ดในเหตุการณ์ถัดไปเท่านั้น

ขั้นตอนที่ 8: ตัวอย่างที่ครอบคลุม - คีย์บอร์ดเพลง

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

เว็บไซต์วิดีโอ:

ตัวอย่างโค้ด (10-6):

[cceN_cpp theme="dawn"] นำเข้า processing.sound.*;

เสียงไฟล์เสียง1, เสียง2, เสียง3, เสียง4, เสียง5;

บูลีน key1, key2, key3, key4, key5;

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

ขนาด (640, 360);

พื้นหลัง (255);

ไม่มีจังหวะ ();

sound1 = ไฟล์เสียงใหม่ (นี่คือ "do.wav");

sound2 = ไฟล์เสียงใหม่ (นี่ "re.wav");

sound3 = ไฟล์เสียงใหม่ (นี่คือ "mi.wav");

sound4 = ไฟล์เสียงใหม่ (นี่ "fa.wav");

sound5 = ไฟล์เสียงใหม่ (นี่ "so.wav");

}

โมฆะวาด () {

พื้นหลัง(255, 214, 79);

โหมดแก้ไข (CENTER);

ลอย w = ความกว้าง * 0.1;

ลอย ชั่วโมง = ความสูง * 0.8;

ถ้า (คีย์1) {

กรอก (255);

} อื่น {

เติม(238, 145, 117);

}

ตรง(กว้าง/6,สูง/2,w,h);

ถ้า (คีย์2) {

กรอก (255);

} อื่น {

กรอก (246, 96, 100);

}

ตรง(กว้าง/6 * 2,สูง/2,w,h);

ถ้า (คีย์3) {

กรอก (255);

} อื่น {

กรอก(214, 86, 113);

}

ตรง(กว้าง/6 * 3,สูง/2,w,h);

ถ้า (คีย์4) {

กรอก (255);

} อื่น {

กรอก (124, 60, 131);

}

ตรง(กว้าง/6 * 4,สูง/2,w,h);

ถ้า (key5) {

กรอก (255);

} อื่น {

กรอก(107, 27, 157);

}

ตรง(กว้าง/6 * 5,สูง/2,w,h);

}

เป็นโมฆะ keyPressed () {

ถ้า (คีย์ == 'a') {

sound1.play();

คีย์ 1 = จริง;

}

ถ้า (คีย์ == 's') {

sound2.play();

key2 = จริง;

}

ถ้า (คีย์ == 'd') {

sound3.play();

คีย์ 3 = จริง;

}

ถ้า (คีย์ == 'f') {

sound4.play();

key4 = จริง;

}

ถ้า (คีย์ == 'g') {

sound5.play();

key5 = จริง;

}

}

ปล่อยคีย์เป็นโมฆะ () {

ถ้า (คีย์ == 'a') {

key1 = เท็จ;

}

ถ้า (คีย์ == 's') {

key2 = เท็จ;

}

ถ้า (คีย์ == 'd') {

key3 = เท็จ;

}

ถ้า (คีย์ == 'f') {

key4 = เท็จ;

}

ถ้า (คีย์ == 'g') {

key5 = เท็จ;

}

} [/cceN_cpp]

รหัสอธิบาย:

เราจำเป็นต้องสร้างออบเจ็กต์เสียงหลายออบเจกต์เพื่ออ่านข้อมูลเสียงสัมพัทธ์เพื่อเล่นเสียงที่แตกต่างกันเมื่อมีการทริกเกอร์คีย์ที่แตกต่างกัน

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

ค่าบูลีน 5 ค่าที่ประกาศในส่วนหัวจะใช้เพื่อตรวจหาสถานะของคีย์

ขั้นตอนที่ 9: ตัวอย่างที่ครอบคลุม - จานสีเพลง 1

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

เว็บไซต์วิดีโอ:

ตัวอย่างโค้ด(10-7):

[cceN_cpp theme="dawn"] นำเข้า processing.sound.*;

เสียงไฟล์เสียง1, เสียง2, เสียง3, เสียง4, เสียง5;

บูลีน isDragging;

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

ขนาด (640, 360);

พื้นหลัง(255, 214, 79);

ไม่มีจังหวะ ();

sound1 = ไฟล์เสียงใหม่ (นี่คือ "do.wav");

sound2 = ไฟล์เสียงใหม่ (นี่ "re.wav");

sound3 = ไฟล์เสียงใหม่ (นี่คือ "mi.wav");

sound4 = ไฟล์เสียงใหม่ (นี่ "fa.wav");

sound5 = ไฟล์เสียงใหม่ (นี่ "so.wav");

}

โมฆะวาด () {

ถ้า (กำลังลาก) {

กรอก(107, 27, 157, 100);

วงรี(mouseX, mouseY, 16, 16);

}

}

เป็นโมฆะ mouseDragged () {

isDragging = จริง;

ถ้า (mouseX > 100 && mouseX <105) {

sound1.play();

}

ถ้า (mouseX > 200 && mouseX <205) {

sound2.play();

}

ถ้า (mouseX > 300 && mouseX < 305) {

sound3.play();

}

ถ้า (mouseX> 400 && mouseX <405) {

sound4.play();

}

ถ้า (mouseX > 500 && mouseX < 505) {

sound5.play();

}

}

โมฆะ mouseReleased () {

isDragging = เท็จ;

} [/cceN_cpp]

รหัสอธิบาย:

เราหวังว่าเมื่อเรากดเมาส์แล้วลากเท่านั้น เราก็จะวาดรูปได้ ดังนั้นเราจึงจำเป็นต้องสร้างตัวแปรบูลีน isDragging เพื่อรับสถานะปัจจุบัน

เมื่อลากเมาส์ isDragging จะกลายเป็นค่าจริงเพื่อให้ฟังก์ชันการวาดภายใน Draw ทำงาน มันจะทิ้งร่องรอยไว้บนหน้าจอ เมื่อเราปล่อยเมาส์ isDragging จะกลายเป็นค่าเท็จ ดังนั้นฟังก์ชันการวาดภาพในการวาดฟังก์ชันจะหยุดการดำเนินการ

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

ขั้นตอนที่ 10: ตัวอย่างที่ครอบคลุม --Music Palette 2 (เวอร์ชันที่อัปเดต)

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

คุณสามารถดูวิดีโอในลิงค์ด้านล่าง:

v.qq.com/x/page/w03226o4y4l.html

ตัวอย่างโค้ด (10-8):

[cceN_cpp theme="dawn"] นำเข้า processing.sound.*;

เสียงไฟล์เสียง1, เสียง2, เสียง3, เสียง4, เสียง5;

บูลีน isDragging;

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

ขนาด (640, 360);

พื้นหลัง(255, 214, 79);

ไม่มีจังหวะ ();

sound1 = ไฟล์เสียงใหม่ (นี่คือ "do.wav");

sound2 = ไฟล์เสียงใหม่ (นี่ "re.wav");

sound3 = ไฟล์เสียงใหม่ (นี่คือ "mi.wav");

sound4 = ไฟล์เสียงใหม่ (นี่ "fa.wav");

sound5 = ไฟล์เสียงใหม่ (นี่ "so.wav");

}

โมฆะวาด () {

ถ้า (กำลังลาก) {

จังหวะ(107, 27, 157, 100);

จังหวะน้ำหนัก(10);

บรรทัด (mouseX, mouseY, pmouseX, pmouseY);

}

}

เป็นโมฆะ mouseDragged () {

isDragging = จริง;

ถ้า ((mouseX - 100) * (pmouseX - 100) < 0) {

sound1.play();

}

ถ้า ((mouseX - 200) * (pmouseX - 200) < 0) {

sound2.play();

}

ถ้า ((mouseX - 300) * (pmouseX - 300) < 0) {

sound3.play();

}

ถ้า ((mouseX - 400) * (pmouseX - 400) < 0) {

sound4.play();

}

ถ้า ((mouseX - 500) * (pmouseX - 500) < 0) {

sound5.play();

}

}

โมฆะ mouseReleased () {

isDragging = เท็จ;

} [/cceN_cpp]

รหัสอธิบาย:

ที่นี่เราใช้สองตัวแปร pmouseX และ pmouseY ที่ดำเนินการในระบบการประมวลผลเอง พวกมันคล้ายกับ mouseX และ mouseY แต่สิ่งที่พวกเขาได้รับคือพิกัดของเมาส์ในเฟรมสุดท้าย

ในการวาดฟังก์ชัน เราได้ใช้ฟังก์ชัน line() เพื่อแทนที่ฟังก์ชันเดิม ellipse() ทำให้พิกัดของเฟรมสุดท้ายเชื่อมต่อกับพิกัดของเฟรมปัจจุบันโดยตรง เราสามารถวาดเส้นตรงหรือเส้นโค้งที่เชื่อมโยงกัน

ในกรณีที่ mouseDragged เราได้ออกแบบเงื่อนไขการเรียกใหม่โดยการตัดสินว่าพิกัดของเฟรมสุดท้ายและเฟรมปัจจุบันอยู่ด้านเดียวกันหรือไม่ เพื่อให้ทราบว่ามีการข้ามพิกัดบางจุดหรือไม่ ใช้เงื่อนไขนี้เป็นตัวอย่าง: " if ((mouseX - 100) * (pmouseX - 100) < 0) " จากค่าบวกและค่าลบที่เกิดจาก " mouseX - 100 " เราสามารถรู้ได้ว่า mouseX อยู่ทางขวาหรือซ้ายของพิกัดแนวนอน 100 ในทำนองเดียวกันกับ "pmouseX - 100" ดังนั้นเมื่อจุดสองจุดที่อยู่ด้านหน้าและด้านหลังไม่อยู่ในด้านเดียวกัน ค่าบวกคูณค่าลบ จะได้รับจำนวนลบใหม่ ดังนั้นเงื่อนไขการดำเนินการจึงเป็นที่พอใจ

ข้างต้นเป็นนิพจน์แบบง่าย ซึ่งใช้อัลกอริธึมทางคณิตศาสตร์อย่างชาญฉลาด ค่าลบสองค่าคูณจะสร้างค่าบวก คุณยังสามารถแบ่งออกเป็นสองสถานการณ์เพื่อหารือแยกกัน อย่างไรก็ตาม การเขียนเงื่อนไขการตัดสินนั้นซับซ้อนกว่ามาก เงื่อนไขการตัดสิน "if ((mouseX = 100) || (mouseX > 100 && pmouseX <= 100))" เทียบเท่ากับเงื่อนไขการกำหนดของซอร์สโค้ด

ขั้นตอนที่ 11: ฟังก์ชันสัมพัทธ์เกี่ยวกับการควบคุมเสียงและวิดีโอ

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

สำหรับการแนะนำเพิ่มเติม คุณสามารถอ้างถึงเอกสารจากเว็บไซต์ทางการ

เสียง (https://processing.org/reference/libraries/sound/index.html)

วิดีโอ (https://processing.org/reference/libraries/video/index.html)

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

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

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

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

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

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

คำแนะนำการเขียนโปรแกรมที่น่าสนใจสำหรับ Designer–Program Process Control- Loop Statement

คำแนะนำการเขียนโปรแกรมที่น่าสนใจสำหรับนักออกแบบ -- การควบคุมกระบวนการโปรแกรม -- คำชี้แจงเงื่อนไข (ส่วนที่หนึ่ง)

คำแนะนำการเขียนโปรแกรมที่น่าสนใจสำหรับนักออกแบบ -- การควบคุมกระบวนการโปรแกรม -- คำชี้แจงเงื่อนไข (ตอนที่ 2)

คำแนะนำการเขียนโปรแกรมที่น่าสนใจสำหรับนักออกแบบ -- ฟังก์ชันที่กำหนดเองและการเรียกซ้ำเศษส่วน

คำแนะนำการเขียนโปรแกรมที่น่าสนใจสำหรับนักออกแบบ -- ฟังก์ชันที่กำหนดเองและการเรียกซ้ำเศษส่วน

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

ขั้นตอนที่ 13: แหล่งที่มา

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

หากคุณมีคำถามใด ๆ คุณสามารถติดต่อ: [email protected]