Book Reading Survey
นี่เป็นตารางแผนภูมิแท่งเปรียบเทียบจำนวนคนอ่านหนังสือ และไม่อ่านหนังสือตั้งแต่ปีพ.ศ. 2549-2552
จำนวนคนอ่านหนังสือ
สีน้ำเงิน
จำนวนคนไม่อ่านหนังสือ
สีฟ้า
เรียงจากซ้ายไปขวา
0-4 จำนวนคนอ่านหนังสือ 60% จำนวนคนไม่อ่านหนังสือ 39%
5-9 จำนวนคนอ่านหนังสือ 65% จำนวนคนไม่อ่านหนังสือ 41%
10-14 จำนวนคนอ่านหนังสือ 45% จำนวนคนไม่อ่านหนังสือ 10%
15-17 จำนวนคนอ่านหนังสือ 33% จำนวนคนไม่อ่านหนังสือ 14%
กราฟที่มากที่สุดจะมีสีดำตรงปลาย
กราฟที่น้อยที่สุดจะมีสีม่วงตรงปลาย
หากกราฟจำนวนคนอ่านหนังสือสูงกว่าค่าเฉลี่ยส่วนที่สูงกว่าจะมีสีครีม
หากกราฟของจำนวนคนไม่อ่านหนังสือสูงกว่าค่าเฉลี่ยส่วนที่สูงกว่าจะมีสีเหลือง เส้นกำกับมีค่า 5%
เรียงจากซ้ายไปขวา
0-4 จำนวนคนอ่านหนังสือ 60% จำนวนคนไม่อ่านหนังสือ 39%
5-9 จำนวนคนอ่านหนังสือ 65% จำนวนคนไม่อ่านหนังสือ 41%
10-14 จำนวนคนอ่านหนังสือ 45% จำนวนคนไม่อ่านหนังสือ 10%
15-17 จำนวนคนอ่านหนังสือ 33% จำนวนคนไม่อ่านหนังสือ 14%
กราฟที่มากที่สุดจะมีสีดำตรงปลาย
กราฟที่น้อยที่สุดจะมีสีม่วงตรงปลาย
หากกราฟจำนวนคนอ่านหนังสือสูงกว่าค่าเฉลี่ยส่วนที่สูงกว่าจะมีสีครีม
หากกราฟของจำนวนคนไม่อ่านหนังสือสูงกว่าค่าเฉลี่ยส่วนที่สูงกว่าจะมีสีเหลือง เส้นกำกับมีค่า 5%
Processing Code
void setup() { //ฟังก์ชั่นหลักที่ใช้ในการกำหนดเรียกใช้งานฟังก์ชั่นต่างๆ
size(600, 700); //ฟังก์ชั่นที่ใช้ในการกำหนดพื้นที่ของพื้นหลัง
หรือ size(width, height)
int [][] percent = { //กำหนด Array สำหรับการสร้างแผนภูมิ หรือเป็นการเก็บค่าตัวแปรไว้หนึ่งชุด
{
60, 39
}
, {
65, 41
}
, {
45, 10
}
, {
33, 14
}
};
int i = 0; //กำหนดตัวแปรจำนวนเต็ม ชนิด Local Variable ไว้ใช้งานเฉพาะในฟังก์ชั่น
int j = 0;
int x = 25;
int [] FBI = new int[2]; //กำหนดตัวแปรจำนวนเต็มตามตำแหน่งใน Array
int [] Max = new int[2];
int a [] = new int[2];
int s = 700;
int [] sum = {100, 100};
int [] unit = new int[2];
int [] dex = new int[2];
background(250, 195, 13); //พื้นหลังสีแสด
while(s >= 0) { //สร้างลูปเพื่อเป็นการกำหนดเงื่อนไขในการสร้างสิ่งที่ระบุไว้ข้างในไปเรื่อยๆ ถ้าเป็นจริง จะเกิดลูปขึ้น อันนี้คือกรณีที่ s มีค่ามากกว่าหรือเท่ากับ 0
stroke(255, 15, 15); //ฟังก์ชั่นเติมสีสำหรับเส้น สามารถเติมตามแม่สี หรือเครื่องหมาย # ตามที่สังเกตจาก Color Selector สีที่ใส่นี้คือ สีแดง
strokeWeight(5); //ฟังก์ชั่นที่ใช้ในการกำหนดความหนาของเส้น
line(0, s, 600, s); //ฟังก์ชั่นที่ใช้ในการวาดเส้น หรือ line(x1, y1, x2, y2)
s = s-50; //ค่า s มีค่าลดลง
}
while(i < percent.length) { //ลูปสำหรับกรณีที่ i มีค่าน้อยกว่าความยาวของ Array ชื่อ percent
while(j < percent[i].length) { //ลูปสำหรับกรณีที่ j มีค่าน้อยกว่าความยาวของ Array ชื่อ percent
a[j] = a[j]+percent[i][j]; //ผลลัพธ์ที่ได้ภายในลูป
j = j+1; //ค่า j มีค่าเพิ่มขึ้นทีละ 1
}
j = 0; //ค่า j กลายเป็น 0
i = i+1; //ค่า i เพิ่มขึ้นทีละ 1
}
i = 0; //ค่า i กลายเป็น 0 หลังจากผ่านลูป
while(i < percent[0].length) { //ในกรณีที่ i มีค่าน้อยกว่า Array ชื่อ percent ที่ตำแหน่ง 0
dex[i] = a[i]/percent.length;
i = i+1;
}
i = 0;
stroke(0); //สีดำ
strokeWeight(1);
while(i < percent.length) {
while(j < percent[i].length) {
if(j == 0) { //ถ้า j มีค่าเท่ากับ 0
fill(27, 13, 250); //เติมสีน้ำเงินให้กับแท่งแผนภูมิ โดย fill() คือฟังก์ชั่นที่ใช้ในการเติมสีให้กับสิ่งต่างๆ สามารถเติมตามแม่สี หรือเครื่องหมาย # ตามที่สังเกตจาก Color Selector
}
else { //กำหนดเงื่อนไขอีกกรณีหนึ่ง
fill(0, 255, 255); //เติมสีฟ้าครามให้กับแท่งแผนภูมิ
}
rect(x, 700-percent[i][j]*10, 50, percent[i][j]*10); //ฟังก์ชั่นที่ใช้ในการวาดรูปสี่เหลี่ยม หรือ rect(x, y, width, height)
if(percent[i][j] > dex[j]) { //ถ้า Array ชื่อ percent ที่ตำแน่ง i และ j มีค่ามากกว่า Array ชื่อ dex ที่ตำแหน่ง i
if(j == 0) {
fill(255, 231, 178); //เติมสีครีมให้กับแท่งแผนภูมิ
}
else {
fill(255, 255, 0); //เติมสีเหลืองให้กับแท่งแผนภูมิ
}
rect(x, 700-percent[i][j]*10, 50,
percent[i][j]*10-dex[j]*10);
}
if(FBI[j] < percent[i][j]) { //ถ้า Array ชื่อ FBI ที่ตำแหน่ง j มีค่าน้อยกว่า Array ชื่อ percent ที่ตำแน่ง i และ j
FBI[j] = percent[i][j];
Max[j] = x;
}
if(sum[j] > percent[i][j]) { //ถ้า Array ชื่อ sum ที่ตำแหน่ง j มีค่ามากกว่า Array ชื่อ percent ที่ตำแน่ง i และ j
sum[j] = percent[i][j];
unit[j] = x;
}
j = j+1;
x = x+50;
}
x = x+50;
j = 0;
i = i+1;
}
i = 0;
while(i < FBI.length){ //ลูปสำหรับกรณีที่ i มีค่าน้อยกว่า ความยาวของ Array ชื่อ FBI
fill(0); //เติมสีดำ
rect(Max[i], 700-FBI[i]*10, 50, 10);
fill(140, 97, 175); //เติมสีม่วงอ่อน
rect(unit[i], 700-sum[i]*10, 50, 10);
i = i+1;
}
fill(36, 175, 9); //เติมสีเขียวเข้ม
textSize(30); //ฟังก์ชั่นที่ใช้ในการกำหนดขนาดของตัวอักษร
text("2549", 40, 70); //ฟังก์ชั่นที่ใช้ในการเขียนตัวอักษร หรือ text(data, x, y)
text("2550", 190, 30);
text("2551", 340, 220);
text("2552", 490, 330);
}
ไม่มีความคิดเห็น:
แสดงความคิดเห็น