Cymbals‏ (Music)

//Gobal variable  //เป็นการประกาศตัวแปรที่อยู่นอกฟังก์ชั่น เพื่อให้ครอบคลุมทุกฟังก์ชัน เป็นส่วนหนึ่งที่ทำให้ภาพเกิดการเคลื่อนไหว โดยประกาศ และกำหนดตัวแปรอยู่นอกฟังก์ชัน แล้วไปเรียกใช้ในฟังก์ชันแทน
float count = 250.0; //เป็นบรรทัดที่ประกาศ และกำหนดตัวแปร โดย float คือค่าของตัวแปรที่เป็นทศนิยม และสามารถเขียนให้อยู่ในรูปเลขยกกำลังได้ หลักการคือนำค่าทางด้านขวาของเครื่องหมาย = ไปใส่ให้ทางด้านซ้ายเรียกว่า Assingment Operator ในที่นี้หมายถึง นำ 250.0 ซึ่งเป็นทศนิยม ทางด้านขวาของเครื่องหมาย = ไปใส่ค่าให้กับตัวแปรทางด้านซ้าย คือตัวแปร count นั่นเอง

void setup () { //เป็นการประกาศฟังก์ชั่น setup ซึ่ง void ที่อยู่ข้างหน้าคือ การกำหนดว่าจะไม่มีการเรียกค่าเดิมมาใช้อีก
  size (500, 500); //เป็นการกำหนดขนาดของcanvas โดย size (ขนาดของแกนx, ขนาดของแกนy);
}
void draw () { //เป็นการประกาศฟังก์ชั่น draw ซึ่ง void ที่อยู่ข้างหน้าคือ การกำหนดว่าจะไม่มีการเรียกค่าเดิมมาใช้อีก
  background (255, 000, 051);  //เป็นการเพิ่มสีให้กับพื้นหลัง โดย background(สีแดง, สีเขียว, สีน้ำเงิน); ค่าของสีแต่ละตัวมีได้สูงสุดไม่เกิน 255 และต่ำสุดที่ 000
 
  //Local variable //เป็นการประกาศตัวแปรที่อยู่ในฟังก์ชั่น เพื่อให้ใช้เฉพาะในฟังก์ชัน เป็นส่วนหนึ่งที่ทำให้ภาพเกิดการเคลื่อนไหว โดยประกาศ และกำหนดตัวแปรอยู่นอกฟังก์ชันไว้ แล้วมาเรียกใช้ในฟังก์ชันนี้
  int r = 150; เป็นบรรทัดที่ประกาศ และกำหนดตัวแปร โดย int คือค่าของตัวแปรที่เป็นจำนวนเต็ม หลักการคือนำค่าทางด้านขวาของเครื่องหมาย = ไปใส่ให้ทางด้านซ้ายเรียกว่า Assingment Operator ความหมายคือ นำ 150 ซึ่งเป็นจำนวนเต็ม ทางด้านขวาของเครื่องหมาย = ไปใส่ค่าให้กับตัวแปรทางด้านซ้าย คือตัวแปร r นั่นเอง
  int c = 500;
  int x1 = 145;
  int x2 = 360;
 
  //draw Human วาดรูปคนที่อยู่ด้านหลังของฉาบ
  //draw Body วาดตัวคน
  rect (145, count+20, 200, 300, c); //เป็นการสร้างรูปสีเหลี่ยม โดย rect (จุดเริ่มต้นของการวาดสี่เหลี่ยมตามแกนx, จุดเริ่มต้นของการวาดสี่เหลี่ยมตามแกนy, ค่าขนาดความกว้างตามแกนx, ค่าขนาดความกว้างตามแกนy, ค่าความโค้งมนของมุมสี่เหลี่ยมทั้งสี่ด้าน);
 
  //draw Arms วาดแขนคนทั้งสองข้าง
  rect (15, count+100, 100, 30, c, c, c-200, c-200);
  rect (385, count+100, 100, 30, c, c, c-200, c-200);
 
//draw Hair วาดผมของคน
  fill (102, 051, 000); //เป็นการเติมสีให้กับรูปร่างที่เราสร้าง โดยfill(ค่าของสีแดง, ค่าของสีเขียว, ค่าของสีน้ำเงิน);
  rect (50, count-350, 400, 300, 300, 300, 100, 100);
 
  //draw Face วาดหน้าคน
  stroke (051, 000, 000); //คือคำสั่งเกี่ยวกับการเติมสีเส้น โดย stroke (ค่าของสีแดง, ค่าของสีเขียว, ค่าของสีน้ำเงิน);
  strokeWeight (10); //เป็นการกำหนดความหนาของเส้น โดยstrokeWeight(ค่าความหนาของเส้น);
  fill (225, 225, 153);
  ellipse (250, count-150, r+200, r+200); //คือคำสั่งที่ใช้ในการวาดรูปทรงกลม หรือทรงรีก็ได้ โดย ellipse (ค่าxที่เป็นจุดศูนย์กลางวงกลม, ค่าyที่เป็นจุดศูนย์กลางวงกลม, ขนาดความยาวของวงกลมตามแกนx, ขนาดความยาวของวงกลมตามแกนy); ถ้าขนาดความยาวของวงกลมตามแกนx กับ ขนาดความยาวของวงกลมตามแกนy เท่ากันจะเป็นวงกลม แต่ถ้าไม่จะเป็นวงรี
 
  //draw Eyeglasses วาดแว่นตาของคน
  stroke (000, 000, 000);
  strokeWeight (10);
  fill (051, 204, 255);
  ellipse (145, count-150, r, r);
  ellipse (345, count-150, r, r);
  noFill (); //คือคำสั่งที่ใช้ยกเลิกการเติมสีให้กับรูปร่าง
  curve (220, count-50, 220, count-150, 270, count-150, 270, count-50); //เป็นคำสั่งที่ใช้สร้างเส้นโค้ง โดย curve (จุดxเริ่มต้นกำหนดความโค้ง, จุดyเริ่มต้นกำหนดความโค้ง, จุดแรกที่จะเริ่มวาดโค้งพิกัดx, จุดแรกที่จะเริ่มวาดโค้งพิกัดy, จุดสุดท้ายที่จะเริ่มวาดโค้งพิกัดx, จุดสุดท้ายที่จะเริ่มวาดโค้งพิกัดy, จุดxสิ้นสุดกำหนดความโค้ง, จุดyสิ้นสุดกำหนดความโค้ง);
 
  //draw mouth วาดปากของคน
  fill (255, 051, 102);
  curve (200, count-250, 200, count-50, 290, count-50, 290, count-250);
 
  //draw Left Cymbal วาดฉาบด้านซ้าย
  //draw Catch1 วาดที่จับอันที่1
  stroke (225, 102, 000);
  strokeWeight (5);
  fill (255, 102, 102);
  quad (x1, count, x1, count, 10, count+100, 25, count+130); //เป็นการสร้างรูปสี่เหลี่ยมใดๆ โดย quad (ค่าxที่เป็นจุดแรกของสี่เหลี่ยม, ค่าyที่เป็นจุดแรกของสี่เหลี่ยม, ค่าxที่เป็นจุดที่สองของสี่เหลี่ยม, ค่าyที่เป็นจุดที่สองของสี่เหลี่ยม, ค่าxที่เป็นจุดที่สามของสี่เหลี่ยม, ค่าyที่เป็นจุดที่สามของสี่เหลี่ยม, ค่าxที่เป็นจุดสุดท้ายของสี่เหลี่ยม, ค่าyที่เป็นจุดสุดท้ายของสี่เหลี่ยม);

  //draw Circle1 วาดวงกลมส่วนประกอบของฉาบ อันที่1
  stroke (225, 225, 000);
  strokeWeight (5);
  fill (255, 204, 051);
  ellipse (x1, count, r, r+200);
  fill (255, 255, 000);
  ellipse (x1, count, r-50, r+150);
  fill (255, 225, 102);
  ellipse (x1, count, r-100, r-30);
 
  //draw center of cymbals1 วาดจุดตรงกลางของฉาบ อันที่1
  stroke (225, 102, 000);
  strokeWeight (10);
  point (x1, count); //เป็นคำสั่งที่ใช้ในการสร้างจุด โดยที่ point (พิกัดจุดแกนx, พิกัดจุดแกนy);
 
  //draw Right Cymbal วาดฉาบด้านขวา
  //draw Circle2 วาดวงกลมส่วนประกอบของฉาบ อันที่2
  stroke (225, 225, 000);
  strokeWeight (5);
  fill (255, 204, 051);
  ellipse (x2, count, r, r+200);
  fill (255, 255, 000);
  ellipse (x2, count, r-50, r+150);
  fill (255, 225, 102);
  ellipse (x2, count, r-100, r-30);
 
  //draw center of cymbals2 วาดจุดตรงกลางของฉาบ อันที่2
  stroke (225, 102, 000);
  strokeWeight (10);
  point (x2, count);
 
  //draw Catch2  วาดที่จับอันที่2
  stroke (225, 102, 000);
  strokeWeight (5);
  fill (255, 102, 102);
  quad (x2, count, x2, count, 490, count+100, 475, count+130);
 
  //draw Hand of human วาดมือของคน
  stroke (000, 000, 000);
  strokeWeight (10);
  fill (225, 225, 153);
  ellipse (15, count+100, r-100, r-100);
  ellipse (485, count+100, r-100, r-100);
 
  count = count+0.5;  //เป็นการกำหนดค่า ให้ตัวแปรที่เป็นGobal เปลี่ยน เพื่อให้เกิดการเคลื่นไหว
  if (count > 500.0) {
    count = 250.0;
  } //เป็นการสร้างเงื่อนไข ให้กับการเคลื่อนที่ โดยที่ if (กำหนดค่าที่เปลี่ยนแปลงไปภายใต้เงื่อนไข) { กำหนดค่าที่ต้องการให้เปลี่ยนเมื่อเงื่อนไขสมบรูณ์; }โดยในที่นี้หมายถึง ถ้า ค่าในตัวแปร count มากกว่า 500.0 ให้ count มีค่าเท่ากับ 250.0

}