Sing A Song
สำหรับภาพนี้ ผมเอาภาพที่ผมเคยวาดไว้ก่อนหน้านี้มาสอดแทรกทำเป็นพื้นหลัง อันดับแรก ผมกำหนดตัวแปรชนิด Global variables ที่จะใช้ ซึ่งเป็นทศนิยม ต่อจากนั้นผมจึงใช้ฟังก์ชั่นหลัก void setup() ในการกำหนดขนาดของพื้นที่ ต่อมาผมใช้ฟังก์ชั่นหลัก void draw() ในการวาดรูป ผมกำหนดฟังก์ชั่น background() ให้มีสีตามที่ผมต้องการตามค่าของแม่สี รูปที่ผมวาดนั้นส่วนใหญ่ใช้วงรี สี่เหลี่ยมและเส้น แต่ละส่วนที่ผมจะวาดนั้น ผมแยกไว้แล้วว่า ส่วนไหนวาดอะไร ภาพที่ผมเอามาสอดเอาไว้เป็นพื้นหลังนั้นมีการกำหนดเงื่อนไขที่ใช้ในการขยายใหญ่ตลอดเวลา เพื่อให้ดูเหมือนกับเสียงเพลงที่ไพเรา ภาพที่เหลือนอกเหนือจากนั้น เป็นภาพนิ่งทั้งหมด ในการตกแต่งภาพนั้น ผมยังคงใช้ฟังก์ชั่น fill() ตามด้วยเครื่องหมาย # ในการเติมสีตามที่ต้องการ ที่จริง ภาพนี้ก็ถือว่าไม่ยากมากนัก ขอเชิญทุกคนลองทำกันได้
Processing Code
float r=0;float r2=0;
float r3=0;
float r4=0;
float r5=0;
float r6=0;
float r7=0; //ตัวแปรเหล่านี้เป็น Global variables และเป็นค่าที่ติดทศนิยม
void setup() { //ฟังก์ชั่นหลักที่ใช้ในการกำหนด มีได้เพียงหนึ่งฟังก์ชั่นเท่านั้น
size(300, 300); //ฟังก์ชั่นที่ใช้ในการกำหนดขนาดพื้นที่ หรือ size(width, height)
}
void draw() { //ฟังก์ชั่นหลักที่ใช้ในการวาด มีได้เพียง 1 ชุัดในงานแต่ละชิ้นเท่านั้น
background(59, 149, 255); //ฟังก์ชั่นนี้ใช้ในการกำหนดสีของพื้นหลัง
//draw rainbow water
fill(#FF0303);//ฟังก์ชั่นที่ใช้ในการกำหนดสีตามเครื่องหมาย # หรือค่าของแม่สี
ellipse(150, 150, r, r); //ฟังก์ชั่นในการวาดวงรี หรือ ellipse(x, y, width, height)
fill(#FFAB03);
ellipse(150, 150, r2, r2);
fill(#FFEB03);
ellipse(150, 150, r3, r3);
fill(#4BED0C);
ellipse(150, 150, r4, r4);
fill(#0D0AFF);
ellipse(150, 150, r5, r5);
fill(#7D0CC9);
ellipse(150, 150, r6, r6);
fill(#FA0FFF);
ellipse(150, 150, r7, r7);
r=r+5.0;
r2=r2+4.5;
r3=r3+4.0;
r4=r4+3.5;
r5=r5+3.0;
r6=r6+2.5;
r7=r7+2.0; //กำหนดความเร็วให้กับตัวแปรที่นำไปแทนค่าในวงรีด้านบน
if(r>300) {
r=0;
} else
if(r2>300) {
r2=0;
}
if(r3>280) {
r3=0;
}
if(r4>260) {
r4=0;
}
if(r5>240) {
r5=0;
}
if(r6>220) {
r6=0;
}
if(r7>200) {
r7=0; //กำหนดระยะการขยายออกของวงรีแต่ละวง โดยใช้ฟังก์ชั่น if()
} //ฟังก์ชั่นที่ใช้ในการกำหนดเงื่อนไขให้กับตัวแปรให้เปลี่ยนค่าไปตามที่กำหนดเรื่อยๆ และยังเป็นการเพิ่มความเร็วให้กับตัวแปรโดยการบวกตัวเลขในแต่ละสมการด้านบนก่อนฟังก์ชันชุดนี้
//draw the person who is watching
fill(#FFE96C);
ellipse(150, 100, 70, 70);
fill(#FFFFFF);
ellipse(135, 95, 23, 15);
fill(#030303);
ellipse(135, 95, 10, 10);
fill(#FFFFFF);
ellipse(165, 95, 23, 15);
fill(#030303);
ellipse(165, 95, 10, 10);
fill(#FF0B03);
ellipse(150, 120, 35, 20);
fill(#AB0ACB);
ellipse(150, 70, 60, 30);
line(150, 134, 150, 250);
line(150, 140, 60, 180);
line(150, 140, 250, 180);
line(150, 250, 250, 290);
line(150, 250, 60, 290); //ฟังก์ชั่นที่ใช้ในการวาดเส้น หรือ line(x1, y1, x2, y2) กำหนดตามพิกัดต่างๆ บนรูปที่เราจะวาด
//draw the microphone
fill(#7B777C);
ellipse(150, 170, 30, 30);
fill(#030303);
rect(135, 180, 31, 10); //ฟังก์ชั่นที่ใช้ในการวาดรูปสี่เหลี่ยม หรือ rect(x, y, width, height)
fill(#B1ABB2);
rect(138, 190, 24, 43);
fill(#030303);
rect(145, 233, 10, 80);
}
หมายเหตุ สังเกตได้ว่า เครื่องหมาย // เป็นการบอกว่า ฟังก์ชั่นชุดนี้ไม่่ใช้งาน และฟังก์ชั่นหลักที่ใข้ยังเป็น function without parameter
ไม่มีความคิดเห็น:
แสดงความคิดเห็น