Table Tennis
ในการวาดรูปนี้ อันดับแรกผมใช้คำสั่ง void setup เพื่อกำหนดพื้นที่ ผมทำพื้นที่เป็นสี่เหลี่ยมผืนผ้าแนวตั้ง เพื่อสร้างโต๊ะปิงปองได้ง่ายขึ้น ต่อมาใช้คำสั่ง void draw ในการวาดสนาม ไม้ปิงปอง และลูก ในการตกแต่งสีนั้นผมยังคงใช้คำสั่ง fill() ที่มีเครื่องหมาย # เป็นตัวกำกับจาก Color Selector ต่อมาผมทำ background โดยใช้แม่สีสามสีมาผสมกัน ในการวาดสนามนั้น ผมนำรูปสี่เหลี่ยมผืนผ้า 3 รูปที่มีขนาดต่างกัน มาซ้อนกัน หลังจากนั้นผมวาดรูปไม้ปิงปองสองไม้วางไว้คนละฝั่งของสนาม เพื่อแทนผู้เล่นสองคน อันดับแรกวาดรูปวงรีให้เป็นด้านหน้า และด้านหลังของไม้ปิงปอง นำรูปสี่เหลี่ยมเล็กๆ ซ้อนไว้ด้านหลังเป็นฐาน ต่อจากนั้นวาดรูปสี่เหลี่ยมผืนผ้า ไว้ด้านล้างของรูปสี่เหลี่ยมติดขอบเพื่อให้เป็นที่จับไม้ปิงปอง สุดท้าย ในการทำลูกปิงปอง ผมให้ลูกปิงปองเคลื่อนไหวไปที่ตำแหน่งใดก็ได้ตามแกน X และแกน Y โดยใช้คำสั่ง mouseX และ mouseY ตรงส่วนที่ระบุตำแหน่งของวงกลม ผมใช้ตัวแปรทั้งหมด 9 ตัว หรืออาจใช้มากกว่านั้นก็ได้ มาแทนตัวเลขที่ระบุไว้ในคำสั่ง void draw ตัวแปรแต่ละตัวจะกำหนดค่าเท่าไรก็ได้ บางจุด ผมก็สร้างเป็นสมการเพื่อให้ตัวเลขนั้นตรงกับค่าที่ผมระบุไว้ในตอนแรก โดยเลือกใช้ตัวแปรที่กำหนดไว้ มาบวกกับค่าตัวเลขที่ต้องเพิ่มขึ้นอีก ในการทำชิ้นงานชิ้นนี้ของผม มีเพียงเท่านี้ ขอให้ทุกคนลองมาทำกันดูนะครับ
Processing Code
void setup() {size(300, 400); //size(width, height)
}
int x = 15;
int y = 20;
int w = 25;
int z = 30;
int f = 35;
int h = 50;
int s = 100;
int k = 200;
int j = 300;
void draw() {
background(250, 210, 101);
//draw the table tennis court
fill(#FFFFFF);
rect(x, x, k+68, j+70); //rect(X, Y, width, height)
fill(#093103);
rect(z, z, k+36, j+40);
fill(#0208F0);
rect(x, s+88, k+68, y);
//draw the first player
fill(#050505);
rect(z+4, f+5, z+2, f+5);
fill(#1D501A);
ellipse(h, h, h, h+10); //ellipse(X, Y, width, height)
fill(#F2E76E);
rect(f+7, h+30, x, w);
//draw the second player
fill(#050505);
rect(k+34, k+91, z+2, f+5);
fill(#EA1114); //คำสั่งชุดนี้ใช้เพื่อเติมสีที่เราต้องการ โดยใช้แม่สี หรือเครื่องหมาย #
ellipse(k+50, j, h, h+10);
fill(#F2E76E);
rect(k+42, j+31, x, w); //บางส่วนมีการบวกตัวเลขกับตัวแปรเพื่อให้มีค่าตามที่ต้องการ
//draw the table tennis ball
fill(#F2B302);
ellipse(mouseX, mouseY, w, w); //ทำให้ลูกเคลื่อนไหวได้ตามแกน X และ Y
}
ไม่มีความคิดเห็น:
แสดงความคิดเห็น