Curtains (impression)

//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, 255, 000); //เป็นการเพิ่มสีให้กับพื้นหลัง โดย background(สีแดง, สีเขียว, สีน้ำเงิน); ค่าของสีแต่ละตัวมีได้สูงสุดไม่เกิน 255 และต่ำสุดที่ 000

  //Local variable //เป็นการประกาศตัวแปรที่อยู่ในฟังก์ชั่น เพื่อให้ใช้เฉพาะในฟังก์ชัน เป็นส่วนหนึ่งที่ทำให้ภาพเกิดการเคลื่อนไหว โดยประกาศ และกำหนดตัวแปรอยู่นอกฟังก์ชันไว้ แล้วมาเรียกใช้ในฟังก์ชันนี้
  int x =0; เป็นบรรทัดที่ประกาศ และกำหนดตัวแปร โดย int คือค่าของตัวแปรที่เป็นจำนวนเต็ม หลักการคือนำค่าทางด้านขวาของเครื่องหมาย = ไปใส่ให้ทางด้านซ้ายเรียกว่า Assingment Operator ความหมายคือ นำ 0 ซึ่งเป็นจำนวนเต็ม ทางด้านขวาของเครื่องหมาย = ไปใส่ค่าให้กับตัวแปรทางด้านซ้าย คือตัวแปร x นั่นเอง
  int y = 400; ความหมายคือ นำ 400 ซึ่งเป็นจำนวนเต็ม ทางด้านขวาของเครื่องหมาย = ไปใส่ค่าให้กับตัวแปรทางด้านซ้าย คือตัวแปร y นั่นเอง

  //draw Stage เป็นการวาดเวที ซึ่งอยู่ทางด้านล่างสุดของภาพ
  stroke (102, 051, 000); //คือคำสั่งเกี่ยวกับการเติมสีเส้น โดย stroke (ค่าของสีแดง, ค่าของสีเขียว, ค่าของสีน้ำเงิน);
  strokeWeight (15); //เป็นการกำหนดความหนาของเส้น โดยstrokeWeight(ค่าความหนาของเส้น);
  fill (051, 000, 000); //เป็นการเติมสีให้กับรูปร่างที่เราสร้าง โดยfill(ค่าของสีแดง, ค่าของสีเขียว, ค่าของสีน้ำเงิน);
  rect (x, y, 500, 100, 5); //เป็นการสร้างรูปสีเหลี่ยม โดย rect (จุดเริ่มต้นของการวาดสี่เหลี่ยมตามแกนx, จุดเริ่มต้นของการวาดสี่เหลี่ยมตามแกนy, ค่าขนาดความกว้างตามแกนx, ค่าขนาดความกว้างตามแกนy, ค่าความโค้งมนของมุมสี่เหลี่ยมทั้งสี่ด้าน);

  //draw Human เป็นการวาดคนที่ยืนอยู่หลังผ้าม่าน
  stroke (000, 000, 000);
  strokeWeight (15);
  fill (255, 153, 051);
  ellipse (250, 200, 100, 100); //คือคำสั่งที่ใช้ในการวาดรูปทรงกลม หรือทรงรีก็ได้ โดย ellipse (ค่าxที่เป็นจุดศูนย์กลางวงกลม, ค่าyที่เป็นจุดศูนย์กลางวงกลม, ขนาดความยาวของวงกลมตามแกนx, ขนาดความยาวของวงกลมตามแกนy); ถ้าขนาดความยาวของวงกลมตามแกนx กับ ขนาดความยาวของวงกลมตามแกนy เท่ากันจะเป็นวงกลม แต่ถ้าไม่จะเป็นวงรี
  line (250, 250, 250, 350); //เป็นการสร้างเส้น โดย line (ค่าพิกัดจุดเริ่มของx, ค่าพิกัดจุดเริ่มของy, ค่าพิกัดจุดสิ้นสุดของx, ค่าพิกัดจุดสิ้นสุดของy); แต่ในกรณีนี้ใช้การกำหนดค่าเพิ่มขึ้น หรือลดลง จากตัวแปรที่มีอยู่ แทนการใส่ค่าไปตรงๆ เพื่อสะดวกในการปรับเปลี่ยน
  line (250, 300, 150, 250);
  line (250, 300, 350, 250);
  line (250, 350, 220, 400);
  line (250, 350, 280, 400);
  strokeWeight (10);
  ellipse (150, 250, 30, 30);
  ellipse (350, 250, 30, 30);
  ellipse (220, 400, 50, 30);
  ellipse (280, 400, 50, 30);
 
  //draw Front Curtain เป็นการสร้างม่านที่อยูข้างหน้า ที่สามารถเคลื่อนไหวได้
  stroke (000, 000, 000);
  strokeWeight (10);
  fill (153, 000, 000);
  rect (x, x, count, y); //เป็นการสร้างรูปสีเหลี่ยม โดย rect (จุดเริ่มต้นของการวาดสี่เหลี่ยมตามแกนx, จุดเริ่มต้นของการวาดสี่เหลี่ยมตามแกนy, ค่าขนาดความกว้างตามแกนx, ค่าขนาดความกว้างตามแกนy);
  rect (500, x, -count, y);

  count = count -0.8; //เป็นการกำหนดค่า ให้ตัวแปรที่เป็นGobal เปลี่ยน เพื่อให้เกิดการเคลื่นไหว
if (count<0) {
   count = 250;
 } //เป็นการสร้างเงื่อนไข ให้กับการเคลื่อนที่ โดยที่ if (กำหนดค่าที่เปลี่ยนแปลงไปภายใต้เงื่อนไข) { กำหนดค่าที่ต้องการให้เปลี่ยนเมื่อเงื่อนไขสมบรูณ์; }โดยในที่นี้หมายถึง ถ้า ค่าในตัวแปร count น้อยกว่า 0 ให้ count มีค่าเท่ากับ 250
 
  //draw Above Curtain เป็นการวาดม่านที่อยู่ด้านบน
  stroke (153, 000, 153);
  strokeWeight (10);
  fill (255, 000, 000);
  arc(50, x, 200, 150, 0, PI); //เป็นการสร้างวงกลมที่ไม่จำเป็นต้องเต็มวง โดย arc(ค่าxที่เป็นจุดศูนย์กลางวงกลม, ค่าyที่เป็นจุดศูนย์กลางวงกลม, ขนาดความยาวของวงกลมตามแกนx, ขนาดความยาวของวงกลมตามแกนy, จุดที่เริ่มต้นวาดวงกลม, จุดสิ้นสุดการวาดวงกลม);
  arc(250, x, 200, 150, 0, PI);
  arc(450, x, 200, 150, 0, PI);
 
  stroke (102, 255, 000);
  strokeWeight (10);
  fill (204, 000, 000);
  arc(-50, x, 200, 150, 0, PI);
  arc(150, x, 200, 150, 0, PI);
  arc(350, x, 200, 150, 0, PI);
  arc(550, x, 200, 150, 0, PI);
}