MUSIC:DRUMMER BY FUNCTION

คำอธิบาย

size ใช้ในการกำหนดขนาดของ Canvas (กว้างxยาว)หากไม่กำหนด Canvas จะมีขนาด100x100

background เป็นการกำหนดสีของพื้นหลัง

int … เป็นการประกาศตัวแปร[x, y,หรือ r] เพื่อที่จะกำหนดและเรียกใช้ต่อไป

-การกำหนด = ค่าที่กำหนด เรียกว่า literal เป็นค่าที่ไม่ใช่ตัวแปร สามารถนำไปใช้ได้ในทันที Ex. 10,20, 20+30 โดยที่ค้าข้างขวาจะเป็นตัวกำหนดตัวแปรข้างซ้าย

-การเรียกใช้ = จะทำโดยการนำเอาตัวแปรที่ประกาศและกำหนดนั้นไปไว้ตรงบริเวณที่ต้องการ

rect เป็นการวาดรูปสี่เหลี่ยมมุมฉากที่กำหนด มุมเพียงจุดเดียว ความกว้างและความยาวในทิศทางบวก

ellipse เป็นการวาดรูปวงกลมวงรีที่ต้องกำหนด(x,y,ความกว้างม,ความยาว)โดย x,y คือจุดศูนย์กลางของวงกลม

line เป็นการวาดเส้นตรงโดยการกำหนดจุดสองจุด

fill เป็นคำสั่งการใส่สีของรูป

triangle เป็นการวาดรูปสามเหลี่ยมที่กำหนดจุดทั้งสามจุด(x1y1x2,y2,x3,y3)

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

void draw เป็นฟังก์ชั่นอัตโนมัติที่ไม่ต้องมีการเรียกใช้ จะทำงานซ้ำๆตามที่ได้ให้ค่าเอาไว้

void setup(){//ฟังก์ชันในการประกาศ กำหนดค่า และเป็นสำหรับพื้นฐาน animation มีการเรียกใช้โดยอัตโนมัติ เราไม่ต้องมีการเรียกใช้อีกและยังเป็นฟังก์ชั่นที่จะทำงานก่อนฟังก์ชั่นอื่นๆเสมอไม่ว่าจะวางไว้บนสุดหรือล่างสุดก็จะทำงานก่อนเป็นอันดับเเรก

size(300,300);//กำหนดขนาดของ canvas

background(185);//พื้นหลังสีเทา

}

int r=90;

int w=60;

void drawDrum(){//เป็นฟังก์ชั่นที่เรากำหนดหรือสร้างขึ้นมาเอง(user defined function)

//กลองด้านหน้า

fill(#71AF15);//การใส่สีโดยการใช้โค้ดสี

ellipse(145, 195, r, r);//กลองด้านหน้า

fill(185);//สีเทา

ellipse(150, 210, r, r);//ขอบกลองด้านหน้าเป็นขอบสีเทา

fill(0);//สีดำ

ellipse(150, 210, r-5, r-5);//กลองด้านหน้าที่เป็นสีดำ

line(145, 135, 145, 156);//เส้นเชื่อมต่อระหว่างกลองตามแนวแกน y

line(141, 135, 141, 156);//เส้นเชื่อมต่อระหว่างกลองตามแนวแกน y

line(126, 135, 159, 135);//เส้นเชื่อมต่อระหว่างกลองตามแนวแกน x

line(126, 132, 159, 132);//เส้นเชื่อมต่อระหว่างกลองตามแนวแกน x

fill(#548919);//การใส่สีโดยการใช้โค้ดสี

rect(40, 125, w, 75);//กลองด้านหลังด้านซ้ายที่สูงๆ

rect(195,150, w, 30);//กลองด้านหลังด้านขวา

}

int x1= 10;

int x2= 62;

int x3= 110;

int y1= 250;

int y2= 220;

void drawLegDrum(){//เป็นฟังก์ชั่นที่เรากำหนดหรือสร้างขึ้นมาเอง(user defined function)

//ขาตั้งกลอง

fill(0);

triangle(x1, y1, x2, y2, x3, y1);//ขาตั้งกลองด้านซ้าย

triangle(x1+170, y1, x2+170, y2, x3+170, y1);//ขาตั้งกลองด้านขวา

fill(185);

triangle(18, y1, 62, y2, 102, y1);//ขาตั้งกลองด้านซ้าย

triangle(188, y1, 232, y2, 272, y1);//ขาตั้งกลองด้านขวา

int Y=250;

int W= 5;

int H= -170;

fill(0);

rect(230, Y, W, H);//ขาตั้งกลอง

rect(60, Y, W, H-20);//ขาตั้งกลอง

}

void drawChape(){//เป็นฟังก์ชั่นที่เรากำหนดหรือสร้างขึ้นมาเอง(user defined function)

//ฉาบ

fill(#A07534);//การใส่สีโดยการใช้โค้ดสี

int R1=80;//การประกาศและกำหนด

int R2=10;

ellipse(230, 100, R1, R2);//ฉาบ

ellipse(60, 80, R1, R2);//ฉาบ

}

void drawBackDrum(){//เป็นฟังก์ชั่นที่เรากำหนดหรือสร้างขึ้นมาเอง(user defined function)

fill(#94ED37);//การใส่สีโดยการใช้โค้ดสี

int y= 145;//การประกาศและกำหนด

int w1= 40;

int h= -45;

rect(126, y, -w1, h);//กลองด้านบนซ้าย

rect(159, y, w1, h);//กลองบนขวา

}

void draw(){//ฟังก์ชั่นอัตโนมัติที่ไม่ต้องมีการเรียกใช้ จะทำงานซ้ำๆตามที่ได้ให้ค่าเอาไว้

drawDrum();//เรียกใช้ฟังก์ชั่นชื่อ drawDrum

drawLegDrum();//เรียกใช้ฟังก์ชั่นชื่อ drawLegDrum

drawChape();//เรียกใช้ฟังก์ชั่นชื่อ drawChape ซึ่งเป็นฟังก์ชั่นที่เราได้สร้างขึ้นมาเอง(สามารถดูได้ที่ด้านบน)

drawBackDrum();//เรียกใช้ฟังก์ชั่นชื่อ drawBackDrum ซึ่งเป็นฟังก์ชั่นที่เราสร้างขึ้นมาเอง

}