My Sport 3

Volleyball

สำหรับภาพนี้ ผมเอาภาพกีฬาวอลเล่ย์บอลที่ผมวาดใหม่ไปสอดไว้ในภาพเดิมที่เคยวาดไว้ ผมเอาภาพกีฬาวอลเล่ย์บอลไปแทรกไว้ในโทรทัศน์ ในการวาด อันดับแรก ผมใช้ฟังก์ชั่นหลัก void setup() ในการกำหนดพื้นที่ แล้วจึงกำหนดตัวแปรชนิด Global variables ไว้ 1 ตัว หลังจากนั้นจึงเริ่มใช้ฟังก์ชั่นหลัก void draw() ซึ่งใช้ในการวาดรูป โดยผมแยกเอาไว้แล้วว่า ส่วนไหนวาดอะไร ผมใช้ฟังก์ชั่นวงรี สี่เหลี่ยม และเส้น ส่วนการตกแต่งนั้น ยังคงใช้ฟังก์ชั่น fill() ตามด้วยเครื่องหมาย # มีเพียงวงรีรูปเดียวเท่านั้นที่มีการใช้ตัวแปร พร้อมกำหนดเงื่อนไขโดยใช้ฟังก์ชั่น if() ให้สามารถขยายใหญ่ได้ตลอดเวลา การทำแบบนี้ไม่ยากมากนัก ขอเชิญทุกคนลองทำกันได้

Processing Code

void setup() {  //ฟังก์ชั่นหลักที่ใช้ในการกำหนด มีได้เพียงหนึ่งชุดเท่านั้น
  size(300, 300); //ฟังก์ชั่นที่ใช้ในการกำหนดขนาด หรือ size(width, height)
}

int k=0; //ตัวแปรชนิด Global variables และเป็นจำนวนเต็ม
void draw() {  //ฟังก์ชั่นหลักที่ใช้ในการวาด มีได้เพียงหนึ่งชุดเท่านั้น
  background(100, 255, 93); //ฟังก์ชั่นที่ใช้ในการกำหนดพื้นหลัง โดยกำหนดค่าตามแม่สี   
  //draw the television
  fill(#B79B9B); //ฟังก์ชั่นที่ใช้ในการเติมสีตามค่าของแม่สี หรือเครื่องหมาย #  
  rect(42, 50, 220, 150);
  fill(#FFE203);
  rect(49, 57, 205, 120); //ฟังก์ชั่นที่ใช้ในการวาดรูปสี่เหลี่ยม หรือ rect(x, y, width,  height)
 
  //draw all buttons on TV
  fill(#5357E5);
  ellipse(52, 190, 15, 15); //ฟังก์ชั่นที่ใช้ในการวาดวงรี หรือ ellipse(x, y, width, height)
  fill(#020203);
  ellipse(52, 190, 8, 8);
  ellipse(70, 190, 15, 10);
  ellipse(88, 190, 15, 10);
  ellipse(106, 190, 15, 10);
  ellipse(124, 190, 15, 10);
  fill(#7F7F83);
  rect(134, 182, 120, 18);
  fill(#3E3E40);
  rect(169, 195, 50, 5);

  //light from this TV
  fill(#FFFC98);
  ellipse(150, 120, k+70, k);
  k = k+2;
  if (k > 141){
       k = 0;
  } //เงื่อนไขที่ใช้ในการกำหนดความเร็วให้กับตัวแปร และทิศทางตามค่าที่กำหนด
 
  //draw the person who is watching
  fill(#FFA61F);
  ellipse(150, 230, 50, 50);
  line(150, 255, 150, 300);
  line(150, 265, 75, 195);
  line(150, 265, 250, 230);
 
  //draw the Volleyball Game
  fill(#FFFFFF);
  ellipse(90, 95, 60, 60);
  ellipse(90, 95, 40, 40);
  ellipse(90, 95, 20, 20);
  line(90, 95, 90, 125);
  line(64, 78, 90, 95);
  line(116, 78, 90, 95);
  fill(#FFC15D);
  ellipse(220, 95, 60, 60);
  fill(#FFFFFF);
  ellipse(205, 95, 20, 15);
  fill(#030202);
  ellipse(205, 95, 10, 10);
  fill(#FFFFFF);
  ellipse(234, 95, 20, 15);
  fill(#030202);
  ellipse(234, 95, 10, 10);
  fill(#F2120A);
  ellipse(220, 115, 30, 15);
  fill(#E2E320);
  ellipse(220, 72, 50, 25);
  line(220, 124, 220, 177);
  line(220, 130, 130, 100);
  line(220, 130, 130, 160); //ฟังก์ชั่นที่ใช้ในการวาดเส้น หรือ line(x1, y1, x2, y2) กำหนดตามพิกัดต่างๆ บนรูปที่เราจะวาด
}
หมายเหตุ สังเกตได้ว่า เครื่องหมาย // เป็นการบอกว่า ฟังก์ชั่นชุดนี้ไม่่ใช้งาน และฟังก์ชั่นหลักที่ใข้ยังเป็น function without parameter 

Canvas