Top Five of Popular Sports in Thailand
สำหรับในรูปนี้ ผมได้นำเอากีฬาแต่ละชนิดที่เป็นที่นิยมมากที่สุด เรียงติดกัน 5 อันดับ แล้วนำมาทำเป็นแผนภูมิแท่ง นอกจากนี้ผมยังได้ทำโดยใช้ Array เพื่อให้สร้างแผนภูมิได้ง่ายขึ้น และยังมีการตกแต่งไว้ด้วยฟังก์ชั่นที่เคยใช้มาก่อนหน้านี้ โดยกีฬาที่ผมนำมาใช้เปรียบเทียบคือ บาสเก็ตบอล วอลเล่ย์บอล แบดมินตัน ฟุตบอล และเทนนิส สำหรับเพื่อให้อธิบายได้ง่ายขึ้น ผมจึงแยกสีแต่ละชุดในบรรทัดแต่ละบรรทัดที่อธิบายไว้ สำหรับในรูปนี้มีการเปรียบเทียบค่าต่างๆ และการแทนค่า รวมทั้งการใช้ตัวเลขที่สลับซับซ้อนมาก ฟังก์ชั่นแต่ละชุด ผมได้ทำการอธิบายไว้แล้ว ขอเชิญลองทำกันได้Processing Code
void setup() { //ประกาศสิ่งที่ต้องการให้คงที่ไม่มีการทำซ้ำ มีได้เพียง 1 ชุดในงานชิ้นหนึ่งเท่านั้นsize(390, 400); //กำหนดขนาดของภาพ หรือ Output ดูได้จาก size(width, height)
background(240, 255, 80); //ใช้ใส่สีให้กับพื้นหลังของภาพ โดยใช้ค่าตามแม่สี หรือเครื่องหมาย # สีที่ใส่นี่คือ สีเหลืองอ่อน
//Top five of Popular Sports in Thailand
float Basketball = 95.61; /*ประกาศตัวแปร Basketball ขึ้นมาเป็นจำนวนทศนิยม โดยให้มีค่าเท่ากับ 95.61 ซึ่งเป็นตัวแปรแบบ local variable*/
float Volleyball = 92.27; /*ประกาศตัวแปร Volleyball ขึ้นมาเป็นจำนวนทศนิยม โดยให้มีค่าเท่ากับ 92.27 ซึ่งเป็นตัวแปรแบบ local variable*/
float Badminton = 94.53; /*ประกาศตัวแปร Badminton ขึ้นมาเป็นจำนวนทศนิยม โดยให้มีค่าเท่ากับ 94.53 ซึ่งเป็นตัวแปรแบบ local variable*/
float Football = 98.27; /*ประกาศตัวแปร Football ขึ้นมาเป็นจำนวนทศนิยม โดยให้มีค่าเท่ากับ 98.27 ซึ่งเป็นตัวแปรแบบ local variable*/
float Tennis = 80.11; /*ประกาศตัวแปร Tennis ขึ้นมาเป็นจำนวนทศนิยม โดยให้มีค่าเท่ากับ 80.11 ซึ่งเป็นตัวแปรแบบ local variable*/
int x = 15; /*ประกาศตัวแปร x ขึ้นมาเป็นจำนวนเต็ม โดยให้มีค่าเท่ากับ 15 ซึ่งเป็นตัวแปรแบบ local variable*/
float number [] = {Basketball, Volleyball, Badminton, Football, Tennis}; /*ประกาศตัวแปร number ขึ้นมา เป็น Array จำนวนทศนิยม สำหรับเก็บค่าเปอร์เซ็นต์ของกีฬาที่เป็นที่นิยม ซึ่งเป็นตัวแปรแบบ local variable*/
String sports [] = {"Basketball", "Volleyball", "Badminton", "Football", "Tennis"}; /*ประกาศตัวแปร sports ขึ้นมา เป็น Array ชนิด string สำหรับเก็บชื่อของกีฬา ซึ่งเป็นตัวแปรแบบ local variable*/
int i; /*ประกาศตัวแปร i ขึ้นมาเป็นจำนวนเต็ม ซึ่งเป็นตัวแปรแบบ local variable*/
float sum = 0; /*ประกาศตัวแปร sum ขึ้นมาเป็นจำนวนทศนิยม โดยให้มีค่าเท่ากับ 0 ซึ่งเป็นตัวแปรแบบ local variable*/
float avg = 0; /*ประกาศตัวแปร avg ขึ้นมาเป็นจำนวนทศนิยม โดยให้มีค่าเท่ากับ 0 ซึ่งเป็นตัวแปรแบบ local variable*/
int y; /*ประกาศตัวแปร y ขึ้นมาเป็นจำนวนเต็ม ซึ่งเป็นตัวแปรแบบ local variable*/
for(i = 0, y = 280; i < number.length; i++, y+=15) { /*กำหนดให้ค่าเริ่มต้น i = 0 และ y = 280 และตรวจสอบเงื่อนไข i ว่ามีค่าน้อยว่าความยาวของ number หรือไม่ โดยทุกครั้งก่อนออกจาก loop จะทำการเพิ่มค่า i ทีละ 1 และเพิ่มค่า y ทีละ 15*/
if(i == 0) {
fill(180, 155, 250); //หาก i=0 เติมสีม่วงอ่อน
}
if(i == 1) fill(255, 3, 7); //หาก i = 1 เติมแดง
if(i == 2) fill(9, 170, 58); //หาก i = 2 เติมเขียว
if(i == 3) fill(198, 147, 4); //หาก i = 3 เติมสีทอง
if(i == 4) fill(166, 2, 199); //หาก i = 4 เติมสีม่วง
rect(x, 200-number[i], 25, number[i]); /*สี่เหลี่ยมแผนภูมิแท่ง กำหนดให้จุดเริ่มต้นที่ (x, 100-number[i]) และกว้างแนวนอนเป็น 25 ยาวแนวตั้งเป็น number[i]*/
text(number[i]+"%", x, 175-number[i]); /*แสดงข้อความเกี่ยวกับเปอร์เซ็นต์ของแต่ละแผนภูมิ*/
text(sports[i], 20, y); /*แสดงข้อความเกี่ยวกับกีฬา*/
rect(10, y-5, 6, 6); /*สี่เหลี่ยมสีที่บอกอธิบายแต่ละว่าจังหวัดใดกำหนดให้จุดเริ่มต้นที่ (10, y-5) และกว้างแนวนอนและยาวแนวตั้งเป็น 6 หน่วย*/
x+=47; //บวกค่า x เพิ่มทีละ 47
sum+=number[i]; //บวกค่า sum เพิ่มทีละ number[i]
}
avg = sum/number.length; /*หาค่าเฉลี่ยโดยการเอาค่า sum มาหารด้วยจำนวนตัวทั้งหมดใน Array number*/
fill(0, 64, 255); //เติมสีน้ำเงิน
rect(x, 200-avg, 25, avg); /*สี่เหลี่ยมแผนภูมิแท่ง กำหนดให้จุดเริ่มต้นที่ (x, 200-avg) และกว้างแนวนอนเป็น 25 หน่วย และยาวแนวตั้งเป็น avg หน่วย*/
text(avg+"%", x, 175-avg); /*แสดงข้อความเกี่ยวกับเปอร์เซ็นต์ของแท่ง avg*/
text("Average", 20, y); /*แสดงข้อความ "Average"*/
rect(10, y-5, 6, 6); /*สี่เหลี่ยมสีที่บอกอธิบายแต่ละว่ากีฬาใดกำหนดให้จุดเริ่มต้นที่ (10, y-5) และกว้างแนวนอนและยาวแนวตั้งเป็น 6 หน่วย*/
}
ไม่มีความคิดเห็น:
แสดงความคิดเห็น