My Score's Bar Chart
สำหรับภาพนี้ เป็นภาพแรกที่ผมลองทำแผนภูมิแท่ง โดยการใช้ฟังก์ชั่นในการวน loop และ Array เพียงไม่กี่ชุด และยังไม่มีข้อความใดๆ อันดับแรก ผมกำหนดให้ฟังก์ชั่นที่ใช้ในการวน loop นั้นอยู่ในฟังก์ชั่นหลัก void setup พร้อมกับการกำหนดขนาด และพื้นหลัง ตัวแปรทั้งหมดที่ใช้เป็นแบบ local variable ซึ่งทำงานได้เพียงในฟังก์ชั่นชุดนี้ ก่อนที่จะประกาศใช้ฟังก์ชั่นสร้างแผนภูมิ ชื่อ drawBarchart นั้น ผมต้องสร้างฟังก์ชั่นชุดนี้ พร้อมกับฟังก์ชั่นที่ใช้สร้างแผนภูมิขึ้นมาก่อน ผมใช้ฟังก์ชั่นใหม่ที่ชื่อว่า quad() ในการวาด สีของแผนภูมิจะเปลี่ยนไปเรื่อยๆ ตามฟังก์ชั่น fill() ทุกครั้งที่เปิดขึ้นหน้าขึ้นมาดู หรือทุกครั้งที่นำไป Run ในโปรแกรม และต้องกำหนดระยะห่างให้เหมาะสม หลังจากที่ผมสร้างฟังก์ชั่นชุดนี้เสร็จแล้ว จึงค่อยนำไปเรียกใช้ในฟังก์ชั่นหลัก void setup ภายใต้เงื่อนไขในการวน loop เท่าที่ผมทำมามีเพียงเท่านี้ นี่เป็นเพียงการสร้างแผนภูมิแบบง่ายๆ สำหรับผมแล้ว แผนภูมินี้เหมือนกับสถิติคะแนนของผมค่อยๆ สูงขึ้นไปเรื่อยๆ ขอเชิญทุกคนลองทำกันได้Processing Code
void setup() { //ประกาศสิ่งที่ต้องการให้คงที่ไม่มีการทำซ้ำ มีได้เพียง 1 ชุดในงานชิ้นหนึ่งเท่านั้นsize(200, 400); //กำหนดขนาดของภาพ หรือ Output ดูได้จาก size(width, height)
background(200, 200, 150); //ใช้ใส่สีให้กับพื้นหลังของภาพ โดยใช้ค่าตามแม่สี หรือเครื่องหมาย # สีที่ใส่นี่คือ สีเหลืองอ่อนค่อนข้างดำ
int x = 10; /*ประกาศตัวแปร x ขึ้นมาเป็นจำนวนเต็ม โดยให้มีค่าเท่ากับ 10 ซึ่งเป็นตัวแปรแบบ local variable*/
int y = 0; /*ประกาศตัวแปร y ขึ้นมาเป็นจำนวนเต็ม โดยให้มีค่าเท่ากับ 0 ซึ่งเป็นตัวแปรแบบ local variable*/
int space = 39; /*ประกาศตัวแปร space ขึ้นมาเป็นจำนวนเต็ม โดยให้มีค่าเท่ากับ 39 ซึ่งเป็นตัวแปรแบบ local variable ใช้กำหนดระยะความห่างของแผนภูมิแต่ละแท่ง*/
int i = 0; /*ประกาศตัวแปร i ขึ้นมาเป็นจำนวนเต็ม โดยให้มีค่าเท่ากับ 0 ซึ่งเป็นตัวแปรแบบ local variable*/
int posts [] = {20, 70, 30, 70, 36}; /*ประกาศตัวแปร posts ขึ้นมา เป็น Array จำนวนเต็ม ซึ่งเป็นตัวแปรแบบ local variable*/
while (i < posts.length) { /*ตรวจสอบเงื่อนไขเพื่อทำการวน loop หาก i น้อยกว่าความยาวของ posts.length*/
drawBarchart(x, y, space); //เรียกใช้ฟังก์ชั่นชื่อว่า drawBarchart พร้อมด้วยตัวแปรใน parameter เพื่อให้แทนค่าได้สะดวกขึ้น
x = x + space; //กำหนดระยะห่างระหว่างแผนภูมิ ยิ่งค่า space เพิ่มขึ้น ยิ่งห่างกันมากขึ้น
y = y+posts[i]; //บวกค่า y เพิ่มทีละ posts[i]
i = i+1; //ทำการบวก 1 ไปเรื่อยๆ จนกว่า i จะไม่น้อยกว่า posts.length ถือเป็นการตรวจสอบ
}
}
void drawBarchart(int x, int y, int space) { //สร้างฟังก์ชั่นที่ชื่อว่า drawBarchart พร้อมด้วยฟังก์ชั่นที่อยู่ใน parameter สำหรับการแทนค่าในฟังก์ชั่นชุดนี้
fill(random(0, 255), random(0, 255), random(0, 255)); //เติมสีตามค่าของแม่สีแบบสุ่มเลือกไปเรื่อยๆ ตามฟังก์ชั่น random และค่าที่กำหนดไว้
ไม่มีความคิดเห็น:
แสดงความคิดเห็น