Bar Chart 2

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 หน่วย*/
}

Canvas

Calculate Max/Min/Average

Calculate Max/Min/Avg

เมื่อเราได้รับค่า n ที่เป็นตัวแปรชุดมาแล้ว ให้เราตรวจสอบค่าทีละตัว ซึ่งชุดตัวแปรเหล่านี้ เราสามารถกำหนดให้เป็นตัวเลขใดก็ได้ หรือให้มีกี่ตัวก็ได้ โดยอันดับแรก ให้ count = 0 และวน loop (count < n.length) โดยที่ *n.length คือขนาดของ array* ถ้า max < n[count] ให้เก็บค่า n[count] ไว้ใน max ถ้าไม่ใช่ให้ตรวจสอบว่า min > n[count] ให้เก็บค่า n[0] ไว้ใน min แล้วให้ sum เก็บค่าผลบวกของ n[0] แล้ว count = count+1 จะทำการวน loop ทำให้เราสามารถตรวจสอบค่าตัวแปรชุดนี้ได้ครบทุกตัว เมื่อออกจาก loop แล้วให้ sum หารด้วย n.length ซึ่งจะมีค่าเท่ากับขนาดของ Array พอดี และ count เริ่มต้นที่ 0 หลังจากนั้นแล้ว ลองตรวจสอบดูว่า ผลที่ได้มาทั้งหมดนั้นจะแสดงออกมาทางจอหรือไม่ และค่าทั้งหมดที่แสดงออกมานั้นถูกต้องตามที่เราคิดไว้หรือไม่ หากไม่ใช่ ควรลองทำการแก้ไขใหม่อีกครั้ง จนกว่าโปรแกรมนั้นจะ Run ได้

Processing Code

int n [] = {380, 250, 196, 486, 176};  /*ประกาศ Array ที่มีชื่อว่า n เป็นจำนวนเต็ม เพื่อเก็บข้อมูลสถิติ*/
int max = n[0];  /*ประกาศตัวแปร max เป็นจำนวนเต็ม เพื่อเก็บค่าที่มากที่สุดของข้อมูลใน Array*/
int min = n[0];  /*ประกาศตัวแปร min เป็นจำนวนเต็ม เพื่อเก็บค่าที่มากที่สุดของข้อมูลใน Array*/
int count = 0;  /*ประกาศตัวแปร count เป็นจำนวนเต็ม เพื่อใช้ในการตรวจสอบ และเป็นค่าที่เราต้องหา*/
float sum = 0;  /*ประกาศตัวแปร sum เพื่อหาผลรวมทั้งหมด โดยที่จะเป็นทศนิยม*/
float avg;  /*ประกาศตัวแปร avg ซึ่งเป็นทศนิยม ในการหาค่าเฉลี่ย*/

while(count < n.length) {  /*ตรวจสอบเงื่อนไขเพื่อทำการวน loop หาก count น้อยกว่าความยาวของ n.length*/
  if(max < n[count]) {  /*ตรวจสอบเงื่อนไข ว่า n[count] มากกว่า max หรือไม่ หากเป็นจริง จะทำตามคำสั่งด้านล่าง*/
    max = n[count];  /*นำค่า n[count] มาใส่ใน max*/
  }
  if(min > n[count]) {  /*ตรวจสอบเงื่อนไข ว่า n[count] น้อยกว่า min หรือไม่ หากเป็นจริง จะทำตามคำสั่งด้านล่าง*/
    min = n[count];  /*นำค่า n[count] มาใส่ใน min*/
  }
  sum = sum+n[count];  /*นำค่า sum+n[count] มาใส่ใน sum*/
  count = count+1;  //ทำการบวก 1 ไปเรื่อยๆ จนกว่า count จะไม่น้อยกว่า n.length ถือเป็นการตรวจสอบ
}
avg = sum/n.length;  /*นำค่า sum/n.length มาใส่ใน average*/
println("max="+max+", min="+min+", and average="+avg);  //แสดงผลที่ได้ออกมาในบรรทัดเดียวกันทางจอ โดยการพิมพ์ค่า max, min และ average จากการคำนวณได้

Canvas

Binary Calculation

Binary Calculation For True/False

สำหรับรูปนี้ ในตอนแรกผมกำหนดตัวแปรให้มีค่าต่างๆ เป็นชุดๆ หนึ่ง ทั้งหมดสองชุด แล้วจึงกำหนด Array ที่ตัวแปรเหล่านี้นำไปใช้แทนมาอีกสองชุด รวมทั้ง Array ที่ใช้สำหรับแสดงผลลัพธ์ต่างๆ ออกมา แล้วหลังจากนั้นจึงกำหนดตัวแปรสำหรับการหาค่านี้ไปเรื่อยๆ แล้วจึงสร้างเงื่อนไขสำหรับตรวจสอบใน loop โดยใช้ฟังก์ชั่น for และ if ซ้อนกันสองเงื่อนไข หลังจากจึงกำหนดฟังก์ชั่น for สำหรับตรวจสอบเงื่อนไขใน loop อีกครั้ง แล้วกำหนดฟังก์ชั่นให้แสดงผลลัพธ์ออกมาทางจอ สำหรับเรื่องนี้ ผมก็อธิบายได้เท่านี้ ถ้าลอง Run บน blog แล้วจะเห็นเป็นตัวเลข แต่ถ้าลอง Run ในโปรแกรมที่สร้าง Code จะเห็นเป็นตัวอักษร ขอเชิญทุกคนลองทำกันดู เพื่อให้เข้าใจกันเองได้มากขึ้น

Processing Code

int CN1 [] = {1, 1, 0, 1, 0, 0, 0, 1, 1};
int CN2 [] = {1, 0, 1, 0, 1, 0, 1, 0, 0};  /*ประกาศ Array 2 ชุดโดยให้ตัวเลขพวกนี้สามารถแทนค่าของ Array ชนิด boolean 2 ชุดข้างล่างนี้ในภายหลัง*/
boolean G [] = {true, false, false, true, true, false, false};  /*Binary (110100011)*/
boolean H [] = {false, true, false, true, false, true, false};  /*Binary (101010100)*/
boolean result [] = new boolean [G.length];  /*สร้างตัวแปร Array ชนิด boolean ขึ้นมาชื่อว่า result ไว้เก็บค่า G^H*/
int i;  /*ประกาศตัวแปร i ขึ้นมาเป็นจำนวนเต็ม ซึ่งเป็นตัวแปรแบบ Global variable*/  

for(i = G.length-1; i >= 0; i--) {   /*ให้ค่าเริ่มต้นของ i = G.length-1 ตรวจสอบเงื่อนไขว่า i >= 0 หรือไม่ ทุกครั้งก่อนออกจาก loop i ลบไปทีละ 1*/
  result[i] = G[i]^H[i];  /*นำค่า G[i]^H[i]มาใส่ในตัวแปร result[i]*/
  if(G[i] == false&&H[i] == true) {   /*G[i] เป็นเท็จ และ H[i] เป็นจริงหรือไม่*/
    if(i-1 >= 0) {  /*i-1มากกว่าหรือเท่ากับ 0 หรือไม่ ถ้าใช่ G[i-1] เป็นเท็จ*/
    G[i-1] = false;
    }
  }
}

for(i = 0; result.length > i; i++)  /*ให้ค่าเริ่มต้นของ i = 0 ตรวจสอบเงื่อนไขว่า i น้อยกว่าความยาวของ result หรือไม่ ทุกครั้งก่อนออกจาก loop i บวกเพิ่มไปทีละ 1*/
println(result[i]);  //แสดงค่า result[i] ที่ได้ออกมาทางจอ โดยการพิมพ์ค่าออกมา

Canvas

110100011 

101010100

    0100010

 

Binary Display

BINARY DISPLAY ONE PLUS ONE

 สำหรับรูปนี้ เป็นการคำนวณค่าของ Binary ที่ค่อยๆ เพิ่่มขึ้น ทั้งหมดนี้อยู่ในฟังก์ชั่นหลักรวมกันเพียง 1 ชุด ตอนแรกในการทำ นับว่ายากมาก เพราะว่า ผมยังไม่ค่อยรู้จักตัวแปรชนิดนี้ ตอนแรกผมก็ลองกำหนดฟังก์ชั่นหลักมาก่อนเพียงหนึ่งฟังก์ชั่น แล้วใช้ฟังก์ชั่นย่อยลงไปเรื่อยๆ แต่ก่อนนั้น ผมกำหนดตัวแปร และ Array ที่รวมกลุ่มของค่า Binary ไว้ เมื่อเปรียบเทียบกันแล้ว จะได้ true = 1 และ false = 0 ผลลัพธ์ที่ออกมาจึงแสดงสองคำนี้สลับกันไปตามที่จัดไว้ในตัวแปร Array ชนิด boolean หลังจากนั้นจึงประกาศตัวแปรที่เราต้องหา หรือนำไปใช้ในวงเล็บของ boolean ชนิดนี้ หลังจากนั้นจึงประกาศตัวแปรสำหรับวงกลม หลังจากนั้นจึงกำหนดเงื่อนไขในการวน loop และเงื่อนไขธรรมดา แต่ละเงื่อนไขนั้นแตกต่างกันออกไป สุดท้ายผมได้เขียนผลลัพธ์ไว้ด้านล่างเหมือนกับบวกตัวเลขในแนวตั้ง ซึ่งเป็นผลลัพธ์ที่เปรียบเทียบกันกับตัวเลข สำหรับผมแล้ว ในเรื่องนี้ ผมยังคงศึกษาอยู่ คงอธิบายได้เท่านี้ ขอเชิญทำกันได้

Processing Code

void setup() {  //ประกาศสิ่งที่ต้องการให้คงที่ไม่มีการทำซ้ำ มีได้เพียง 1 ชุดในงานชิ้นหนึ่งเท่านั้น
  size(340, 100);  //กำหนดขนาดของภาพ หรือ Output ดูได้จาก size(width, height)
  background(116, 196, 255);  //ใช้ใส่สีให้กับพื้นหลังของภาพ โดยใช้ค่าตามแม่สี หรือเครื่องหมาย # สีที่ใส่นี่คือ สีฟ้าอมเขียวอ่อน
  boolean [] T = {true, true, false, false, false, false};  /*เทียบเหมือนกับ BINARY 110000*/ 
  boolean [] K = {true, false, false, true, false, true};  /*เทียบเหมือนกับ BINARY 100101*/
  boolean [] result = new boolean [T.length];  /*สร้างตัวแปร Array ชนิด boolean ขึ้นมาชื่อว่า result ไว้เก็บค่า T^K*/  
  boolean [] translate = new boolean [T.length];  /*สร้างตัวแปร Array ชนิด boolean ขึ้นมาชื่อว่า translate ไว้เก็บค่าตัวที่ทด*/
  boolean [] TK = new boolean [T.length];  /*สร้างตัวแปร Array ชนิด boolean ขึ้นมาชื่อว่า TK ไว้เก็บค่าคำตอบ*/ 
  int i;  /*ประกาศตัวแปร i ขึ้นมาเป็นจำนวนเต็ม ซึ่งเป็นตัวแปรแบบ local variable*/
  boolean z = false;  /*สร้างตัวแปรชนิด boolean ขึ้นมาชื่อว่า z = false*/ 
  int d = 42;  /*เส้นผ่านศูนย์กลางของวงกลม*/ 
  int x = d, y = 50;  /*ประกาศตัวแปร x และ y ขึ้นมาเป็นจำนวนเต็ม โดยให้มีค่าเท่ากับ d และ 50 ตามลำดับ ซึ่งเป็นตัวแปรแบบ local variable*/ 

for(i = T.length-1; i >= 0; i--) {  /*ให้ค่าเริ่มต้นของ i = T.length-1 ตรวจสอบเงื่อนไขว่า i >= 0 หรือไม่ ทุกครั้งก่อนออกจาก loop i ลบไปทีละ 1*/
  result[i] = T[i]^K[i];  /*นำค่า T[i]^K[i] มาใส่ในตัวแปร result[i]*/ 
  if(T[i]&K[i] == true) {  /*T[i]&K[i] เป็น true หรือไม่*/ 
    if(i-1 >= 0) {  /*i-1 มากกว่าหรือเท่ากับ 0 หรือไม่*/
    translate[i-1] = false;  /*กำหนดให้ translate ตัวที่ i-1 มีค่าเป้น false*/
    } else z = true;  /*ให้ z = true*/ 
  }
}

if(z == true) {  /*หาก F=true เติมสีเขียวอ่อน*/
  fill(#2BF511);  
  ellipse(x, y, d, d);  /*วาดวงกลมที่มีจุดกึ่งกลางที่ (x, y) และมีเส้นผ่านศูนย์กลางเป็น d หน่วย*/   
}

for(i = 0; T.length>i; i++) {  /*ให้ค่าเริ่มต้นของ i=0 ตรวจสอบเงื่อนไขว่า i น้อยกว่าความยาวของ T หรือไม่ ทุกครั้งก่อนออกจาก loop i บวกเพิ่มไปทีละ 1*/
  TK[i] = result[i]^translate[i];  /*กำหนดให้ result[i]^translate[i] มีค่าเป็น TK[i]*/ 
  if(TK[i] == true) {  /*หาก TK[i] = true ให้เติมสีเขียวอ่อน*/
  fill(#2BF511); 
  } else{  /*หากไม่ใช่ ให้เติมสีแดง*/
  fill(#FF030B);
}
  x+=d;  /* ทำการบวกค่า x เพิ่มทีละ d*/
  ellipse(x, y, d, d);  //วาดวงกลมที่มีจุดกึ่งกลางที่ (x, y) และมีเส้นผ่านศูนย์กลางเป็น d หน่วย
  }
}

Canvas

  110000 

  100101

1010101

Bar Chart 1

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 และค่าที่กำหนดไว้

   quad(x, 405, x+25, 405, x+25, 200-y, x, 200-y);  //ฟังก์ชั่นที่ใช้ในการวาดรูปสี่เหลี่ยมด้านขนาน โดยดูการตั้งพิกัดเพื่อวาดได้จาก (x1, y1, x2, y2, x3, y3, x4, y4) พิกัดของรูปนี้ดูได้ในวงเล็บ เพราะความกว้าง และความยาว รวมทัั้งรูปร่างจะเป็นไปตามพิกัดเหล่านี้

}

Canvas

Some UFO

UFO Calling Help

สำหรับรูปนี้ เป็นภาพที่ตอนแรก UFO กำลังบินไปเรื่อยๆ พร้อมกัน 3 ลำ แต่ตอนย้อนกลับมา ก็มีมาเพิ่มอีก 3 ลำ เหมือนกับว่า UFO สาม 3 ลำแรกกำลังส่งสัญญาณขอความช่วยเหลือ เพื่อเรียกพวกพ้องมา ในการสร้างนั้น ผมใช้ตัวแปรชุดมาช่วยในการสร้าง UFO หลายลำ โดยการเรียกใช้ while เพื่อวน loop ในการเรียกฟังก์ชั่น UFO ทำให้สร้าง UFO ได้หลายลำ ตามเงื่อนไขที่กำหนดไว้ อันดับแรก ผมต้องกำหนดตัวแปร พร้อมกับฟังก์ชั่นที่เป็น Array จากนั้นจึงใช้ฟังก์ชั่น void setup เพื่อกำหนดขนาดของพื้นที่ด้วยฟังก์ชั่น size() หลังจากนั้นจึงสร้างฟังก์ชั่นสำหรับการวาด UFO มาก่อน แล้วจึงค่อยประกาศเรียกใช้ ในการสร้างนั้นต้องใช้ฟังก์ชั่นในการวน loop และเงื่อนไขมาก ภาพนี้ตอนแรกไม่ค่อยเหมือนกับที่ผมคิดไว้ แต่ผมก็เริ่มดัดแปลงให้เข้ากับผลงานที่น่าจะดีที่สุด ลองทำกันดูนะครับ

Processing Code

int x1 = 30;  /*ประกาศตัวแปร x1 ขึ้นมาเป็นจำนวนเต็ม โดยให้มีค่าเท่ากับ 30 ซึ่งเป็นตัวแปรแบบ Global variable*/ 
int x2 = 170;  /*ประกาศตัวแปร x2 ขึ้นมาเป็นจำนวนเต็ม โดยให้มีค่าเท่ากับ 170 ซึ่งเป็นตัวแปรแบบ Global variable*/   
int x3 = 30;  /*ประกาศตัวแปร x3 ขึ้นมาเป็นจำนวนเต็ม โดยให้มีค่าเท่ากับ 30 ซึ่งเป็นตัวแปรแบบ Global variable*/
int y[] = {50, 100, 150};  /*กำหนด Array ของจำนวนเต็มชื่อ y*/
int i = 0;  /*ประกาศตัวแปร i ขึ้นมาเป็นจำนวนเต็ม โดยให้มีค่าเท่ากับ 0 ซึ่งเป็นตัวแปรแบบ Global variable*/

void setup() {  //ประกาศสิ่งที่ต้องการให้คงที่ไม่มีการทำซ้ำ มีได้เพียง 1 ชุดในงานชิ้นหนึ่งเท่านั้น
  size(200, 200);  //กำหนดขนาดของภาพ หรือ Output ดูได้จาก size(width, height)
}

void draw() {
  background(random(190), random(50), random(180));  //ใช้ใส่สีให้กับพื้นหลังของภาพ โดยใช้ค่าตามแม่สี หรือเครื่องหมาย # สีที่ใส่นี่คือ สีนั้นจะเปลี่ยนไปเรื่อยๆ ตามค่าความเข้มของแม่สีในฟังก์ชั่น random ซึ่งเรากำหนดไว้ในวงเล็บ
  UFO();  //ประกาศใช้ฟังก์ชั่นที่ชื่อ UFO ด้วยการใช้ฟังก์ชั่นหลัก void draw
}

void UFO() {  //สร้างฟังก์ชั่นที่ชื่อ UFO ก่อนเรียกใช้งาน
  while(i < y.length) {  /*ตรวจสอบเงื่อนไขเพื่อทำการวน loop หาก i น้อยกว่าความยาวของ Array ชื่อ y*/
    if(x1 >= 30 && x1 <= 170) {  /*ถ้า x1 >= 30 && x1 <= 170 เป็นจริง ก็จะเข้ามาทำคำสั่งข้างในเงื่อนไขนี้*/
     fill(#EFF711);  //เติมสีเหลืองอ่อน
     ellipse(x1, y[i], 35, 35);   //วาดวงกลมที่มีจุดศูนย์กลางที่ (x1, y[i]) และมีเส้นผ่านศูนย์กลางเป็น 35 หน่วย
     fill(#919393);  //เติมสีเทาเข้ม
     ellipse(x1, y[i]+5, 70, 20);  //วาดวงรีที่มีจุดศูนย์กลางที่ (x1, y[i]+5) และมีความกว้างเป็น 70 หน่วย และความสูงเป็น 35 หน่วย
    x1 = x1+1;  //ค่า x1 เพิ่มทีละ 1
    }
    if(x1 > 170){  /*ถ้า x1 > 170 เป็นจริง ก็จะเข้ามาทำคำสั่งข้างในเงื่อนไขนี้*/ 
     fill(#19F70A);  //เติมสีเขียวอ่อน
     ellipse(x2, y[i], 35, 35);  //วาดวงกลมที่มีจุดศูนย์กลางที่ (x2, y[i]) และมีเส้นผ่านศูนย์กลางเป็น 35 หน่วย
     fill(#FFFFFF);  //เติมสีขาว
     ellipse(x2, y[i]+5, 70, 20);  //วาดวงรีที่มีจุดศูนย์กลางที่ (x2, y[i]+5) และมีความกว้างเป็น 70 หน่วย และความสูง 20 หน่วย
      x2 = x2-1;  //ค่า x2 ลดลงทีละ 1
    }
    if(x1 > 110){  /*ถ้า x1 > 110 เป็นจริง ก็จะเข้ามาทำคำสั่งข้างในเงื่อนไขนี้*/ 
     fill(random(62), random(250), random(255));  //เติมสีโดยการสุ่มเปลี่ยนสีไปเรื่อยๆ ตามค่าความเข้มของสีที่ใส่ไว้ในฟังก์ชั่น random
     ellipse(x3, y[i], 35, 35);  //วาดวงกลมที่มีจุดศูนย์กลางที่ (x3, y[i]) และมีเส้นผ่านศูนย์กลางเป็น 35 หน่วย
     fill(#F0BE18);  //เติมสีเหลืองเข้ม
     ellipse(x3, y[i]+5, 70, 20);  //วาดวงรีที่มีจุดศูนย์กลางที่ (x3, y[i]+5) และมีความกว้างเป็น 70 หน่วย และความสูง 20 หน่วย
      x3 = x3-1;  //ค่า x3 ลดลงทีละ 1
    }
    if(x1 >= 170 && x2 <= 30){  /*ถ้า x1 >= 170 && x1 <= 30 เป็นจริง ก็จะเข้ามาทำคำสั่งข้างในเงื่อนไขนี้*/
    x1 = 30;
    x2 = 170;
    x3 = 150;  //เมื่อผ่านเข้ามาในเงื่อนไขนี้แล้ว ค่าตัวแปรทั้ง 3 ตัวนี้จะมีค่าตามตัวเลขที่ระบุไว้ในเงื่อนไข
    }
    i = i+1;  //ทำการบวก 1 ไปเรื่อยๆ จนกว่า i จะไม่น้อยกว่า y.length ถือเป็นการตรวจสอบ
  }
  if(i == y.length){  /*หากค่า i เท่ากับ y.length จึงจะผ่านเข้ามาในเงื่อนไขนี้ได้*/
    i = 0;  //ตั้งค่าใหม่ให้ i = 0
  }
}

Canvas

Calculate Max & Min

Calculate Max and Min Numbers of Homemovies in Thailand

นี่เป็นจำนวนของคนที่ดูภาพยนตร์ที่บ้านในปัจจุบัน อย่างที่เห็น จำนวนของผู้คนที่กำลังหันมาชมภาพยนตร์ที่บ้านในตอนนี้สูงขึ้นมาก อาจเกินกว่าที่ผมประมาณไว้ สำหรับในการคำนวณค่าสูงสุดและค่าต่ำสุดในครั้งนี้ ผมได้ลองนำค่าสูงสุด และค่าต่ำสุดมาเปรียบเทียบ และคำนวณหาในโปรแกรม สำหรับการคำนวณแบบนี้ อาจถือได้ว่าไม่ยากเท่าไร หากยังคงรู้จักการใช้เงื่อนไข หรือฟังก์ชั่น if และฟังก์ชั่นในการวนซ้ำ หรือ while อันดับแรก ผมต้องประกาศตัวแปรแต่ละตัวที่ต้องใช้ และตัวแปรที่ประกาศเป็น Array รวมทั้งค่าสูงสุด และค่าสูงสุด ทั้งหมดนี้ผมประกาศให้เป็นจำนวนเต็ม หรือบางคนสามารถใช้เป็นทศนิยมก็ได้ ต่อมาจึงเริ่มสร้างฟังก์ชั่นที่ใช้ในการวนซ้ำ เพื่อกำหนดเงื่อนไขที่ตนต้องใช้ แล้วจึงกำหนดเงื่อนไขไว้ข้างในอีก โดยสองเงื่อนไขใน loop ที่ผมใช้ แต่ละชุดประกอบด้วยค่าสูงสุด และค่าต่ำสุดที่ใช้ในการคำนวณ แล้วรวมอยู่ในเงื่อนไข หลังจากที่ใช้ทำฟังก์ชั่นเงื่อนไขชุดนี้เสร็จแล้ว ผมจึงสร้างฟังก์ชั่นที่ใช้ในการตรวจสอบค่า Array แต่ละช่องไว้ จากนั้นจึงปิดวงเล็บ ต่อมาผมจึงป้อนคำสั่งในการพิมพ์ค่าสูงสุด และต่ำสุด ตามลำดับ ซึ่งจะแสดงตามผลที่ได้ในเงื่อนไขออกมาบนจอ

Processing Code

int max = 0;  /*ประกาศตัวแปร max เพื่อใช้ในการตรวจสอบค่าในมากที่สุด Array*/
int min = 2500000;  /*ประกาศตัวแปร min เพื่อใช้ในการตรวจสอบค่าน้อยที่สุด*/
int i = 0;  /*ประกาศตัวแปร i โดยเริ่มนับจากช่องแรกใน Array*/
int homemovies[] ={85600, 2189583, 452398, 929386, 2469000};  /*ประกาศ Array ที่มีชื่อ homemovies เพื่อเก็บข้อมูลตัวเลข*/

while(i < homemovies.length) {  /*เมื่อเงื่อนไขตรงตาม loop ใน while โดย i เริ่มต้นที่ 0 และทำไปเรื่อยๆ จนกว่าจะมีค่าน้อยกว่า homemovies.length หรือก็คือจำนวนช่องที่เก็บค่าใน Array ซึ่งจาก homemovies[i] จะมีทั้งหมด 0-4 เมื่อทำจนครบตามเงื่อนไข จึงจะออกจาก loop while*/
      if(max < homemovies[i]) {  /*ทำการตรวจสอบเงื่อนไข โดยเงื่อนไขว่า ให้ max ที่รับมาต้องมาค่าน้อยกว่า ตัวเลขในช่องที่ทำการตรวจสอบเงื่อนไข ซึ่งถ้าเลขใน i ของ Array มีค่าน้อยกว่าก็จะผิดเงื่อนไขและไม่ทำงานในเงื่อนไขนี้*/
       max = homemovies[i];  //กำหนดให้ตัวแปร max มีค่าเท่ากับตัวเลขใน i ของ Array ซึ่งมาจากเงื่อนไขถ้าไม่ตรงเงื่อนไข ตัวแปลก็จะมีค่าคงเดิม
      }
      if(min > homemovies[i]) {  /*ทำการตรวจสอบเงื่อนไข โดยเงื่อนไขว่า ให้ min ที่รับมาต้องมาค่ามากกว่าตัวเลขในช่องที่ทำการตรวจสอบเงื่อนไข  ซึ่งถ้าเลขใน i ของ Array มีค่ามากกว่าก็จะผิดเงื่อนไขและไม่ทำงานในเงื่อนไขนี้*/
       min = homemovies[i];  //กำหนดให้ตัวแปร min มีค่าเท่ากับตัวเลขใน i ของ Array ซึ่งมาจากเงื่อนไขถ้าไม่ตรงเงื่อนไข ตัวแปรก็จะมีค่าคงเดิม
      }
      i=i+1;  //เพิ่มค่า i ทีละ 1 เพื่อให้ while ทำการตรวจสอบค่าใน Array ทีละช่อง
}
println("Max = "+max);  //แสดงค่า max โดยการพิมพ์ออกมาบนจอ
println("Min = "+min);  //แสดงค่า min โดยการพิมพ์ออกมาบนจอเช่นกัน

สำหรับเรื่องนี้ก็มีฟังก์ชั่นชุดใหม่ที่ผมยังไม่เคยลองใช้มาก่อน การทำ Array ยากจริงจนแทบไม่รู้ว่า ตัวเองควรจะเริ่มตรงไหน พอได้เห็นของคนอื่นแล้วลองเอามาทำดูแล้ว เรื่องนี้จึงไม่น่ายากเกินไป

Canvas

My Express Way

Express Way

ภาพนี้เป็นรูปทางด่วนที่ผมออกแบบให้อยู่บนสะพาน ในการสร้างทางด่วนแบบนี้ สามารถเขียนได้หลายแบบ อาจจะเขียนโดยใช้ line อย่างเดียวก็ได้ แต่ต้องเขียน line ซ้ำกันหลายๆ ตัว นอกจากนี้ผมยังได้สร้างถนนที่เป็นสายยาวๆ บนเส้น line ทั้งหมดที่ใช้แทนเสา พร้อมทั้งตกแต่งโดยใช้ฟังก์ชั่น fill() ตามด้วยเครื่องหมาย # หรืออาจใช้ค่าของแม่สีแทนก็ได้ การนำฟังก์ชั่น while เข้ามาช่วยในการเขียนโค้ดจะทำให้เขียนได้หลายๆ ตัวพร้อมกันโดยใช้ line เพียงตัวเดียว จะทำงานโดยทำตามเงื่อนไขที่เราตั้งไว้ จาก code ใน while จะตั้งไว้ว่า while(count < n)โดยที่ค่า n = 35 และ count = count + 1 ค่า count จะทำการ +1 ไปเรื่อยตลอดจนค่า count จะมีค่าไม่น้อยกว่า n และในขณะเดียวกันระยะห่างของเส้นแต่ละเส้นต้องมีค่าเท่ากันคือ space = 53 กำหนดโดย x = x + space ดังโค้ด สำหรับรูปนี้ เพื่อให้ดูเหมือนจริงมากขึ้น ผมจึงได้สร้างฟังก์ชั่นที่ใช้สร้างรถยนต์ เพื่อสร้างรถยนต์ไว้สองคัน แต่ให้เป็นภาพนิ่ง หรือไม่ได้กำหนดเงื่อนไขอะไรไว้ แต่เดิมในการสร้างภาพนี้ ไม่ได้ยากเท่าไร หากรู้จักการใช้ฟังก์ชั่น while() เพื่อให้วาดได้เร็วขึ้น หรือใช้ฟังก์ชั่นอื่นหลายๆ ชุดมารวมกัน ขอเชิญทุกคนลองทำกันได้

Processing Code

void setup() {  //ประกาศสิ่งที่ต้องการให้คงที่ไม่มีการทำซ้ำ มีได้เพียง 1 ชุดในงานชิ้นหนึ่งเท่านั้น
  size(500, 500);  //กำหนดขนาดของภาพ หรือ Output ดูได้จาก size(width, height)
  background(99, 213, 252);  //ใช้ใส่สีให้กับพื้นหลังของภาพ โดยใช้ค่าตามแม่สี หรือเครื่องหมาย # สีที่ใส่นี่คือ สีฟ้าอ่อน
}

int count = 0;  //กำหนดตัวแปรนี้เพื่อใช้ในการนับ
int x = 10; 
int space = 53;  //ใช้เพื่อกำหนดระยะห่าง
int n = 35;  //กำหนดค่าตัวแปรเหล่านี้ได้โดยการใช้ฟังก์ชั่น int ซึ่งมีการกำหนดจำนวนเต็ม 3 ขั้นตอน คือ ประกาศ กำหนด และเรียกใช้ โดยตัวแปร 1 ตัวเก็บค่าได้เพียงค่าเดียว ค่าข้างขวากำหนดตัวแปรข้างซ้าย การที่เรากำหนดตัวแปรไว้นอกฟังก์ชั่นหลักแบบนี้ เรียกว่าเป็นตัวแปรชนิด Global variable ซึ่งใช้แทนได้ทั้งฟังก์ชั่น และเป็นพื้นฐาน animation
void draw() {  //การใช้ฟังก์ชั่น void เป็นการใช้ฟังก์ชั่นแบบไม่มีการส่งค่ากลับ และเราใช้ void draw() เป็นการใช้ฟังก์ชั่นในการประกาศว่า เราต้องการจะวาดอะไรลงไป
  while(count < n) {  //กำหนดเงื่อนไขในวงเล็บ เมื่อเป็นจริงจะทำคำสั่งภายในซ้ำๆ จนกระทั่งเงื่อนไขเป็นเท็จ อันนี้ในกรณี count < n
  strokeWeight(10);  //กำหนดความหน้าของเส้น โดยการใส่ค่าลงในวงเล็บ
  stroke(0);  //กำหนดสีของเส้น โดยใช้แม่สี หรือเครื่องหมาย # โดยสีที่ผมใส่คือสีดำ
  line(0, 100, 200, 100);  //ใช้ในการวาดเส้น
  line(x, 200, x, 500);
  count = count + 1;  //ทำการบวก 1 ไปเรื่อยๆ จนกว่า count จะไม่น้อยกว่า n
  x = x + space;  //กำหนดระยะห่างของค่า x ตามค่าของ space
 }

 //draw the road
 fill(#AEB4B7);  //คำสั่งที่ใช้เติมสีให้กับรูปทรงต่างๆ ที่เราวาด สีที่ใส่นี่คือสีเทาอ่อน
 rect(0, 200, 600, 20);  //ใช้ในการวาดรูปสี่เหลี่ยม
 fill(#7B8386);  //สีเทาเข้ม
 rect(0, 120, 600, 80);
 fill(#AEB4B7);  //สีเทาอ่อน
 rect(0, 100, 600, 20);
 line(0, 160, 100, 160);
 line(130, 160, 230, 160);
 line(260, 160, 360, 160);
 line(390, 160, 490, 160);

 //draw bushes
 stroke(#089808);  //สีเขียวอ่อน
 fill(#108E10);  //สีเขียว
 ellipse(0, 480, 100, 80);  //ใช้ในการวาดวงรี
 ellipse(100, 480, 140, 100);
 ellipse(160, 480, 100, 100);
 ellipse(230, 480, 100, 80);
 ellipse(320, 480, 150, 120);
 ellipse(380, 480, 90, 100);
 ellipse(460, 480, 140, 80);

 //draw cars
 stroke(0);  //สีดำ
 fill(#E01919);  //สีแดง
 rect(50, 80, 120, 80);
 fill(#FFCA08);  //สีเหลือง
 rect(280, 80, 120, 80);
 fill(#0A0A09);  //สีดำ
 ellipse(80, 160, 40, 40);
 ellipse(140, 160, 40, 40);
 ellipse(310, 160, 40, 40);
 ellipse(370, 160, 40, 40);
}

อธิบายเพิ่มเติม

ฟังก์ชั่นทั้งหมดที่ผมใช้ มีดังนี้
1. void setup() ใช้เพื่อประกาศค่าตัวแปรต่างๆ และ กำหนดค่าของตัวแปรต่างๆ โดยจะไม่มีการทำซ้ำ
2. void draw() ใช้เพื่อประกาศต่าตัวแปรต่างๆ และกำหนดค่าของตัวแปรต่างๆ โดยเป็นการทำซ้ำ (loop)
3. size() กำหนดขนาดของกรอบ หรือพื้นหลังที่ใช้สร้าง code ดูได้จาก size(width, height)
4. stroke() กำหนดค่าสีของเส้นโดยการใช้แม่สี หรือเครื่องหมาย #
5. background() กำหนดสีของพื้นหลังโดยการใช้แม่สี
6. strokeWeight() กำหนดขนาดของเส้นโดยการใส่ตัวเลข หรือค่าที่ต้องการลงในวงเล็บ
7. while() ใช้ในการวน loop โดยกำหนดเงื่อนไขที่ต้องการ เพื่อให้มีการทำซ้ำ
8. line() ใช้ในการวาดเส้นตรง โดยดูได้จาก line(x1, y1, x2, y2) กำหนดค่าตามพิกัดแต่ละจุด
9. rect ใช้ในการวาดรูปสี่เหลี่ยม โดยดูได้จาก rect(x, y, width, height)
10. ellipse ใช้ในการวาดรูปวงรี โดยดูได้จาก ellipse(x, y, width, height)
11. fill() ใช้ในการเติมสีให้กับสิ่งต่างๆ ที่ระบุไว้ด้านล่างของฟังก์ชั่นนี้ โดยใช้สีตามแม่สี หรือเครื่องหมาย #
12. int คือฟังก์ชั่นที่ใช้ในการกำหนดค่าตัวแปรที่เป็นจำนวนเต็ม
13. // คือฟังก์ชั่นที่มักตามด้วยหน้าฟังก์ชั่นใดๆ แล้วทำให้ฟังก์ชั่นนั้นไม่ทำงาน หรือยกเลิกการทำงานของฟังก์ชั่นหนึ่งได้
หลังจากที่เราวาด หรือเขียนฟังก์ชั่นทั้งหมดเสร็จแล้ว ผลที่ได้ก็เป็นแบบนี้

Canvas

My Curve Stitching

Flower Stitching

ภาพนี้เป็นดอกไม้ที่อยู่ในวังวนของ Curve Stitching โดยที่ผมให้เส้นโค้งทั้งหมดที่ห่างจากกันทั้งหมดนั้นเป็นเหมือนกลีบดอกไม้ อันดับแรกของการสร้างภาพนี้ ผมต้องกำหนดตัวแปรชนิด Global variable มา 6 ตัว เพื่อให้การเขียนภาพนั้นง่ายขึ้น ต่อจากนั้นจึงเริ่มใช้ฟังก์ชั่น void setup() ในการกำหนดค่าต่างๆ โดยใช้ฟังก์ชั่น size() เพื่อการกำหนดขนาดของกรอบ, background เพื่อการตกแต่งพื้นหลังตามแม่สี และ while() เพื่อกำหนดเงื่อนไขในการทำซ้ำ รวมทั้งฟังก์ชั่นที่ใช้ในการวาดเส้น และตกแต่งเส้น หรือ stroke() และค่าของตัวแปรที่เปลี่ยนไป ซึ่งรวมอยู่ในฟังก์ชั่น while() ต่อจากนั้นผมใช้ฟังก์ชั่นหลัก void draw() ในการวาดสิ่งที่ต้องการวาด สำหรับฟังก์ชั่นชุดนี้ ผมใช้ตัวแปรชนิด Vocal variable กับฟังก์ชั่น int เพื่อให้แทนค่าตัวเลขได้ง่ายขึ้น ฟังก์ชั่น fill() ในการตกแต่งสีตามเครื่องหมาย # หรือแม่สี และ ellipse ในการวาดวงรี ผมใช้ฟังก์ชั่นชุดนี้ในการวาดเกสรดอกไม้ ในรูปนี้นั้น การนำฟังก์ชั่น while เข้ามาช่วยในการเขียน code จะทำให้เขียนได้หลายๆ ตัวพร้อมกันโดยใช้ line 4 เส้นเพื่อการวาดเส้นโค้งรอบๆ จะทำงานโดยทำตามเงื่อนไขที่เราตั้งไว้ จาก code ใน while จะตั้งไว้ว่า while(count < n)โดยที่ค่า n = 2,000 และ count = count + 1 ค่า count จะทำการ +1 ไปเรื่อยตลอดจนค่า count จะมีค่าไม่น้อยกว่า n และในขณะเดียวกันระยะห่างของเส้นแต่ละเส้นต้องมีค่าเท่ากันคือ 10 กำหนดโดย r = r + 10 สำหรับรูปนี้ เป็นภาพนิ่ง ไม่ได้กำหนดเงื่อนไขอะไรไว้มาก แต่เดิมในการสร้างภาพนี้ ไม่ได้ยากเท่าไร หากรู้จักการใช้ฟังก์ชั่น while() เพื่อให้วาดได้หลายเส้น

Processing Code

int xPos = 0;  //กำหนดระยะห่างระหว่างแกน X
int yPos = 0;  //กำหนดระยะห่างระหว่างแกน Y
int r = 10;  //กำหนดระยะห่างระหว่างเส้น
int n = 2000;  //กำหนดจำนวนเส้น
int h = 500;  //กำหนดความสูง หรือใช้แทนค่าอื่นได้  
//กำหนด ค่าตัวแปรเหล่านี้ได้โดยการใช้ฟังก์ชั่น int ซึ่งมีการกำหนดจำนวนเต็ม 3 ขั้นตอน คือ ประกาศ กำหนด และเรียกใช้ โดยตัวแปร 1 ตัวเก็บค่าได้เพียงค่าเดียว ค่าข้างขวากำหนดตัวแปรข้างซ้าย การที่เรากำหนดตัวแปรไว้นอกฟังก์ชั่นหลักแบบนี้ เรียกว่าเป็นตัวแปรชนิด Global variable ซึ่งใช้แทนได้ทั้งฟังก์ชั่น
int count = 0;  //กำหนดให้มีการนับการกระทำในเงื่อนไข
void setup() {  //ประกาศสิ่งที่ต้องการให้คงที่ไม่มีการทำซ้ำ มีได้เพียง 1 ชุดในงานชิ้นหนึ่งเท่านั้น
  size(500, 500);  //กำหนดขนาดของภาพ หรือ Output ดูได้จาก size(width, height)
  background(255, 15, 63);  //ใช้ใส่สีให้กับพื้นหลังของภาพ โดยใช้ค่าตามแม่สี หรือเครื่องหมาย # สีที่ใส่นี่คือ สีแดงอ่อน
  while(count < n) {  //กำหนดเงื่อนไขในวงเล็บ เมื่อเป็นจริงจะทำคำสั่งภายในซ้ำๆ จนกระทั่งเงื่อนไขเป็นเท็จ อันนี้ในกรณี count < n
      stroke(26, 256, 62);  //กำหนดสีของเส้น โดยใช้แม่สี หรือเครื่องหมาย # โดยสีที่ผมใส่คือสีเขียวอ่อน
      line(xPos, yPos-5+r, xPos+r, h);  //ใช้ในการวาดเส้น
      line(h, yPos-5+r, xPos+r, 0);
      line(xPos, h-r, xPos+r, yPos);
      line(xPos+r, h, h, h-r);
      r = r + 10;  //กำหนดระยะห่างระหว่างเส้น
      count = count + 1;  //ทำการบวก 1 ไปเรื่อยๆ จนกว่า count จะไม่น้อยกว่า n
 }
}

void draw() {  //การ ใช้ฟังก์ชั่น void เป็นการใช้ฟังก์ชั่นแบบไม่มีการส่งค่ากลับ และเราใช้ void draw() เป็นการใช้ฟังก์ชั่นในการประกาศว่า เราต้องการจะวาดอะไรลงไป และเป็นฟังก์ชั่นหลักมีได้เพียง 1 ชุด
  int k = 150;
  int p = 250;  //ตัวแปรชนิด Vocal variable แทนค่าได้เฉพาะในฟังก์ชั่นนี้
  fill(#FF8E03);  //คำสั่งที่ใช้เติมสีให้กับรูปทรงต่างๆ ที่เราวาด สีที่ใส่นี่คือสีส้ม
  ellipse(p, p, p, p);  //ใช้ในการวาดวงรี
  fill(#FFD500);  //สีเหลือง
  ellipse(p, p, k, k);
}

อธิบายเพิ่มเติม

ฟังก์ชั่นทั้งหมดที่ผมใช้ มีดังนี้
1. void setup() ใช้เพื่อประกาศค่าตัวแปรต่างๆ และ กำหนดค่าของตัวแปรต่างๆ โดยจะไม่มีการทำซ้ำ
2. void draw() ใช้เพื่อประกาศต่าตัวแปรต่างๆ และกำหนดค่าของตัวแปรต่างๆ โดยเป็นการทำซ้ำ (loop)
3. size() กำหนดขนาดของกรอบ หรือพื้นหลังที่ใช้สร้าง code ดูได้จาก size(width, height)
4. stroke() กำหนดค่าสีของเส้นโดยการใช้แม่สี หรือเครื่องหมาย #
5. background() กำหนดสีของพื้นหลังโดยการใช้แม่สี
6. while() ใช้ในการวน loop โดยกำหนดเงื่อนไขที่ต้องการ เพื่อให้มีการทำซ้ำ
7. line() ใช้ในการวาดเส้นตรง โดยดูได้จาก line(x1, y1, x2, y2) กำหนดค่าตามพิกัดแต่ละจุด
8. ellipse ใช้ในการวาดรูปวงรี โดยดูได้จาก ellipse(x, y, width, height)
9. fill() ใช้ในการเติมสีให้กับสิ่งต่างๆ ที่ระบุไว้ด้านล่างของฟังก์ชั่นนี้ โดยใช้สีตามแม่สี หรือเครื่องหมาย #
10. int คือฟังก์ชั่นที่ใช้ในการกำหนดค่าตัวแปรที่เป็นจำนวนเต็ม
หลังจากที่เราวาด หรือเขียนฟังก์ชั่นทั้งหมดเสร็จแล้ว ผลที่ได้ก็เป็นแบบนี้

Canvas

My Mobile

Flowing Mobile

นี่คือภาพ Mobile ภาพแรกที่ผมทำขึ้นไว้ก่อนหน้านี้ มาดัดแปลงให้มีลักษณะเหมือนกับปลิวตามลม ในภาพนี้มีการใช้ฟังก์ชั่นใหม่ และฟังก์ชั่นที่เคยใช้มารวมกัน อันดับแรก ผมกำหนดตัวแปรชนิด Global variable ร่วมกับฟังก์ชั่น int มา 6 ตัว ต่อจากนั้นจึงใช้ฟังก์ชั่น void setup() ในการกำหนดค่าต่างๆ ของฟังก์ชั่น เช่น size() เพื่อการกำหนดขนาดของกรอบ, background เพื่อการกำหนดสีของพื้นหลัง และ while() เพื่อการกำหนดเงื่อนไขที่ต้องการให้วนซ้ำ เป็น loop ใน while() นี้กำหนดเงื่อนไขที่สร้างเองเป็น function with parameter และเงื่อนไข if() หลังฟังก์ชั่นนี้แล้ว ผมก็สร้างเส้น พร้อมกำหนดสี และน้ำหนักของเส้นเพิ่มเติม สุดท้าย ผมก็สร้างฟังก์ชั่นที่มีชื่อว่า DrawWind เพื่อให้ฟังก์ชั่นใน while() นั้นระบุได้ ในชุดนี้ ผมใช้ฟังก์ชั่น stroke เพื่อการเติมสีในเส้น, strokeWeight เพื่อกำหนดความหนาของเส้น, line ในการวาดเส้น และ point หรือจุด เพื่อให้เป็นจุดตามเส้นใน line ที่ใช้เป็นสายของ Mobile ให้สายของเส้นเรียงตั้งแต่ต่ำไปสูง แล้วค่อยสูงลงต่ำอีกที เหมือนกับสายของ Mobile ที่ปลิวไปด้านหลังกับลม นี่เป็นเพียงภาพนิ่ง ดังนั้งวิธีการทำจึงไม่ยากเท่าไร ขอเชิญทุกคนลองทำกันได้

Processing Code

int xPosition = 30;  //กำหนดตำแหน่ง หรือพิกัดตามแกน X
int yPosition = 100;  //กำหนดตำแหน่ง หรือพิกัดตามแกน Y
int green = 50;
int yellow = 255;
int count = 0;  //กำหนดเพื่อการนับ
int space = 30;  //กำหนดตัวแปร เพื่อการใช้กำหนดระยะห่าง
//กำหนด ค่าตัวแปรเหล่านี้ได้โดยการใช้ฟังก์ชั่น int ซึ่งมีการกำหนดจำนวนเต็ม 3 ขั้นตอน คือ ประกาศ กำหนด และเรียกใช้ โดยตัวแปร 1 ตัวเก็บค่าได้เพียงค่าเดียว ค่าข้างขวากำหนดตัวแปรข้างซ้าย การที่เรากำหนดตัวแปรไว้นอกฟังก์ชั่นหลักแบบนี้ เรียกว่าเป็นตัวแปรชนิด Global variable ซึ่งใช้แทนได้ทั้งฟังก์ชั่น 
void setup() {  //ประกาศสิ่งที่ต้องการให้คงที่ไม่มีการทำซ้ำ มีได้เพียง 1 ชุดในงานชิ้นหนึ่งเท่านั้น
  size(500, 500);  //กำหนดขนาดของภาพ หรือ Output ดูได้จาก size(width, height)
  background(223, 255, 44);  //ใช้ใส่สีให้กับพื้นหลังของภาพ โดยใช้ค่าตามแม่สี หรือเครื่องหมาย # สีที่ใส่นี่คือ สีเหลืองอ่อน

  while(xPosition < width) {  //กำหนดเงื่อนไขที่ต้องการให้ทำซ้ำเป็น loop ในกรณีที่เป็นจริง จะทำต่อไปเรื่อยๆ จนกระทั่งเป็นเท็จ อันนี้ในกรณี อันนี้ในกรณี xPosition < width
    DrawWind(xPosition, yPosition, green, yellow);  //เงื่อนไขที่สร้างเอง และเรียกใช้แล้ว
    if(xPosition > 100)  //สร้างเงื่อนไข ถ้าค่า xPosition > 100 ให้เข้าเงื่อนไข
    yPosition = yPosition - 20;  //ค่า yPosition ลดลงไปเรื่อยๆ ทีละ 20 จะทำให้รูปวิ่งขึ้นไปข้างบน
    else  //กำหนดเงื่อนไขอีกกรณีหนึ่ง หรือมากกว่านั้น
    yPosition = yPosition + 130;  //ค่า yPosition เพิ่มขึ้นไปเรื่อยๆ ทีละ 130 จะทำให้รูปวิ่งลงไปข้างล่าง
    xPosition = xPosition + space;  //กำหนดระยะห่างของ xPosition ตามค่า space
    green = green + 70;
    yellow = yellow - 90;  //สำหรับการกำหนดสีของฟังก์ชั่นสองตัวนี้ โดยสีมีค่าลดลง และเพิ่มขึ้น
    count = count + 1;  //ทำการบวก 1 ไปเรื่อยๆ จนกว่า count จะไม่น้อยกว่า width
  }
  stroke(0);  //กำหนดสีของเส้น โดยใช้แม่สี หรือเครื่องหมาย # โดยสีที่ผมใส่คือสีดำ
  strokeWeight(10);  //กำหนดความหน้าของเส้น โดยการใส่ค่าลงในวงเล็บ
  line(20, 100, 480, 100);  //ใช้ในการวาดเส้น
  line(250, 100, 250, 0);
}

void DrawWind (int xPosition, int yPosition, float green, float yellow) {  //ฟังก์ชั่นที่สร้างขึ้นเอง โดยมี int xPosition, int yPosition, float green และ float yellow มาร่วมด้วย
  strokeWeight(8);
  stroke(green, 0, yellow);  //กำหนดค่าสีตามแม่สี สีจะเปลี่ยนไปเรื่อยๆ ตามค่าตัวแปร
  line(xPosition, 100, xPosition, yPosition);
  strokeWeight(20);
  point(xPosition, yPosition);  //ใช้วาดจุดไว้ตามตำแหน่งในพิกัด หรือค่าตัวแปร
}

อธิบายเพิ่มเติม

ฟังก์ชั่นทั้งหมดที่ผมใช้ มีดังนี้
1. void setup() ใช้เพื่อประกาศค่าตัวแปรต่างๆ และ กำหนดค่าของตัวแปรต่างๆ โดยจะไม่มีการทำซ้ำ
2. void draw() ใช้เพื่อประกาศต่าตัวแปรต่างๆ และกำหนดค่าของตัวแปรต่างๆ โดยเป็นการทำซ้ำ (loop)
3. size() กำหนดขนาดของกรอบ หรือพื้นหลังที่ใช้สร้าง code ดูได้จาก size(width, height)
4. stroke() กำหนดค่าสีของเส้นโดยการใช้แม่สี หรือเครื่องหมาย #
5. background() กำหนดสีของพื้นหลังโดยการใช้แม่สี
6. strokeWeight() กำหนดขนาดของเส้นโดยการใส่ตัวเลข หรือค่าที่ต้องการลงในวงเล็บ
7. while() ใช้ในการวน loop โดยกำหนดเงื่อนไขที่ต้องการ เพื่อให้มีการทำซ้ำ
8. line() ใช้ในการวาดเส้นตรง โดยดูได้จาก line(x1, y1, x2, y2) กำหนดค่าตามพิกัดแต่ละจุด
9. if() คือฟังก์ชั่นที่ใช้ในการกำหนดเงื่อนไข
10. else ใช้ในการกำหนดเงื่อนไขที่มีมากกว่านั้นว่าเงื่อนไขในเป็นจริง หรือเท็จ
11. fill() ใช้ในการเติมสีให้กับสิ่งต่างๆ ที่ระบุไว้ด้านล่างของฟังก์ชั่นนี้ โดยใช้สีตามแม่สี หรือเครื่องหมาย #
12. int คือฟังก์ชั่นที่ใช้ในการกำหนดค่าตัวแปรที่เป็นจำนวนเต็ม
13. float คือฟังก์ชั่นที่ใช้ในการกำหนดค่าตัวแปรที่ติดทศนิยม
14. void DrawWind คือฟังก์ชั่นที่เราสร้างขึ้นเอง ต้องเรียกใช้เท่านั้นถึงจะทำงาน
15. point คือฟังก์ชั่นที่ใช้ในการวาดจุด
หลังจากที่เราวาด หรือเขียนฟังก์ชั่นทั้งหมดเสร็จแล้ว ผลที่ได้ก็เป็นแบบนี้

Canvas

My Railway

Railway

นี่คือรูปที่สองที่ผมลองใช้ loop ในการทำ โดยเพิ่มฟังก์ชั่นที่ยังไม่เคยใช้เข้าไปด้วย ผมยังทำให้รางรถไฟสามารถยาวขึ้น หรือขยายขึ้นได้ตามค่าของตัวแปรที่ใช้แทนในเงื่อนไขซึ่งกำหนดในฟังก์ชั่น while()
อันดับแรก ผมกำหนดตัวแปรชนิด Global variable ร่วมกับฟังก์ชั่น int มา 6 ตัว ต่อจากนั้นจึงใช้ฟังก์ชั่น void setup() ในการกำหนดค่าต่างๆ ของฟังก์ชั่น เช่น size() เพื่อการกำหนดขนาดของกรอบ และ background เพื่อการกำหนดสีของพื้นหลัง ต่อมาผมสร้างฟังก์ชั่นที่ชื่อ void drawRailway() ซึ่งต้องเรียกใช้ด้วยฟังก์ชั่น void draw() ในภายหลัง ในฟังก์ชั่นชุดนี้ ผมใช้ฟังก์ชั่น while() เพื่อการกำหนดเงื่อนไขที่ต้องการให้วนซ้ำ เป็น loop เพื่อสร้างรางรถไฟได้ง่ายขึ้น ใน while() นี้กำหนดเงื่อนไขที่สร้างเองเป็นการวาดกล่องสี่เหลี่ยมที่ใช้เป็นแผ่นไม้รองรับรางรถไฟตามเงื่อนไขใน while() และเส้นที่ใช้เป็นรางรถไฟ พร้อมกับตัวแปรที่ต้องมีค่าเปลี่ยนไป ในฟังก์ชั่นนี้ ผมกำหนดสี และน้ำหนักของเส้นเพิ่มเติม แต่สำหรับแผ่นไม้ที่รองรับรางรถไฟนั้น ผมกำหนดให้ไม่มีขอบด้วยฟังก์ชั่น noStroke สุดท้าย ผมก็เรียกใช้ฟังก์ชั่นโดยใช้ void draw() เพื่อให้ผลลัพธ์แสดงออกมา นี่เป็นภาพนิ่ง ดังนั้งวิธีการทำจึงไม่ยากเท่าไร ขอเชิญทุกคนลองทำได้

Processing Code

int x = 50;  //กำหนดตำแหน่งตามแกน X
int y = 20;  //กำหนดตำแหน่งตามแกน Y
int width = 30;  //กำหนดความกว้าง
int height = 70;  //กำหนดความสูง
int n = 10;  //กำหนดจำนวนเส้น หรือแผ่นไม้
int i = 0;  //กำหนดเพื่อการนับ
//กำหนด ค่าตัวแปรเหล่านี้ได้โดยการใช้ฟังก์ชั่น int ซึ่งมีการกำหนดจำนวนเต็ม 3 ขั้นตอน คือ ประกาศ กำหนด และเรียกใช้ โดยตัวแปร 1 ตัวเก็บค่าได้เพียงค่าเดียว ค่าข้างขวากำหนดตัวแปรข้างซ้าย การที่เรากำหนดตัวแปรไว้นอกฟังก์ชั่นหลักแบบนี้ เรียกว่าเป็นตัวแปรชนิด Global variable ซึ่งใช้แทนได้ทั้งฟังก์ชั่น 
void setup() {  //ประกาศสิ่งที่ต้องการให้คงที่ไม่มีการทำซ้ำ มีได้เพียง 1 ชุดในงานชิ้นหนึ่งเท่านั้น
  size(500, 100);  //กำหนดขนาดของภาพ หรือ Output ดูได้จาก size(width, height)   
  background(241, 242, 17);  //ใช้ใส่สีให้กับพื้นหลังของภาพ โดยใช้ค่าตามแม่สี หรือเครื่องหมาย # สีที่ใส่นี่คือ สีเหลือง
}

void drawRailway() {  //ฟังก์ชั่นที่สร้างเอง ชื่อว่า drawRailway
  while(i < n) {  //กำหนดเงื่อนไขที่ต้องการให้ทำซ้ำเป็น loop ในกรณีที่เป็นจริง จะทำต่อไปเรื่อยๆ จนกระทั่งเป็นเท็จ อันนี้ในกรณี i < n 
  noStroke();  //กำหนดว่า รูปทรงที่เราระบุนั้นไม่มีขอบ
  fill(144, 101, 6);  //คำสั่งที่ใช้เติมสีให้กับรูปทรงต่างๆ ที่เราวาด สีที่ใส่นี่คือสีน้ำตาล
  rect(x, y, width, height);  //ใช้ในการวาดรูปสี่เหลี่ยม
  strokeWeight(10);  //กำหนดความหน้าของเส้น โดยการใส่ค่าลงในวงเล็บ  
  stroke(10);  //กำหนดสีของเส้น โดยใช้แม่สี หรือเครื่องหมาย # โดยสีที่ผมใส่คือสีดำ  
  line(x-15, y+10, x+45, y+10);  //ใช้ในการวาดเส้น
  line(x-15, y+58, x+45, y+58);
  x=x+40;  //ใช้ในการเพิ่มระยะห่างในแกน X
  i=i+1;  //ทำการบวก 1 ไปเรื่อยๆ จนกว่า i จะไม่น้อยกว่า n
  }
}

void draw() {  //การ ใช้ฟังก์ชั่น void เป็นการใช้ฟังก์ชั่นแบบไม่มีการส่งค่ากลับ และเราใช้ void draw() เป็นการใช้ฟังก์ชั่นในการประกาศว่า เราต้องการจะวาดอะไรลงไป และเป็นฟังก์ชั่นหลักมีได้เพียง 1 ชุด     
  drawRailway();  //ตัวแปรที่เราต้องการเรียกใช้
}

อธิบายเพิ่มเติม

ฟังก์ชั่นทั้งหมดที่ผมใช้ มีดังนี้
1. void setup() ใช้เพื่อประกาศค่าตัวแปรต่างๆ และ กำหนดค่าของตัวแปรต่างๆ โดยจะไม่มีการทำซ้ำ
2. void draw() ใช้เพื่อประกาศต่าตัวแปรต่างๆ และกำหนดค่าของตัวแปรต่างๆ โดยเป็นการทำซ้ำ (loop)
3. size() กำหนดขนาดของกรอบ หรือพื้นหลังที่ใช้สร้าง code ดูได้จาก size(width, height)
4. stroke() กำหนดค่าสีของเส้นโดยการใช้แม่สี หรือเครื่องหมาย #
5. background() กำหนดสีของพื้นหลังโดยการใช้แม่สี
6. strokeWeight() กำหนดขนาดของเส้นโดยการใส่ตัวเลข หรือค่าที่ต้องการลงในวงเล็บ
7. while() ใช้ในการวน loop โดยกำหนดเงื่อนไขที่ต้องการ เพื่อให้มีการทำซ้ำ
8. line() ใช้ในการวาดเส้นตรง โดยดูได้จาก line(x1, y1, x2, y2) กำหนดค่าตามพิกัดแต่ละจุด
9. rect ใช้ในการวาดรูปสี่เหลี่ยม โดยดูได้จาก rect(x, y, width, height)
10. int คือฟังก์ชั่นที่ใช้ในการกำหนดค่าตัวแปรที่เป็นจำนวนเต็ม
11. noStroke คือฟังก์ชั่นที่ใช้ในการระบุรูปทรงที่เราต้องการว่า ไม่มีขอบ
12. fill() ใช้ในการเติมสีให้กับสิ่งต่างๆ ที่ระบุไว้ด้านล่างของฟังก์ชั่นนี้ โดยใช้สีตามแม่สี หรือเครื่องหมาย #
หลังจากที่เราวาด หรือเขียนฟังก์ชั่นทั้งหมดเสร็จแล้ว ผลที่ได้ก็เป็นแบบนี้

Canvas

My Bridges

Rainbow Bridges

นี่เป็นสะพานแขวนรูปแรกที่ผมทำขึ้น โดยการนำภาพที่ทำไว้ก่อนหน้านี้มาดัดแปลง ในครั้งนี้ ผมได้เพิ่มสะพานแขวนเป็นสองรูปในหนึ่งภาพ อันดับแรกผมกำหนดตัวแปรชนิด Global variable มา 2 ตัว แล้วกำหนดขนาดของพื้นที่ด้วย size() และสีของพื้นหลังด้วย background ต่อมาผมจึงใช้ฟังก์ชั่น while() ในการกำหนดเงื่อนไขที่ต้องการให้ทำซ้ำ ในฟังก์ชั่นนี้ ผมใช้ฟังก์ชั่นในการเขียนเส้น ตกแต่งเส้น และกำหนดความหนา รวมทั้งฟังก์ชั่นกำหนดเงื่อนไข if() และ else สำหรับเงื่อนไขที่มากกว่าหนึ่ง ในการสร้างสายของสะพานทั้งสอง หลังจากฟังก์ชั่น while() แล้ว ผมก็กำหนดระยะห่างระหว่างเส้นที่ใช้เป็นสายสะพานด้วย x = x+10 ถ้าเปลี่ยนตัวเลขตรงนี้ให้เพิ่มขึ้น จะยิ่งมีความห่างของเส้นมากขึ้น สุดท้าย ผมก็ออกแบบเสา 2 ต้น และถนนที่เป็นสะพานด้วยฟังก์ชั่นในการเขียนเส้น หรือ line และตกแต่งสีด้วย stroke รวมทั้งเพิ่มความหนาด้วย strokeWeight ในชุดนี้ ไม่มีการใช้ฟังก์ชั่น void ให้ยุ่งยาก ถึงแม้ว่า เราจะไม่ใช้ฟังก์ชั่นนี้ ก็ยังสามารถทำให้เงื่อนไขเหล่านี้ทำงานได้ สำหรับภาพนี้อาจจะยุ่งยากเล็กน้อย แต่ถ้าเข้าใจการใช้เงื่อนไข หรือฟังก์ชั่น if() และ while() ซึ่งจำเป็นสำหรับการทำ loop แล้ว จะไม่ยากเลย ใครๆ อาจต้องการออกแบบสะพานแบบนี้ให้มีรูปร่างต่างออกไปก็ได้

Processing Code

int x = 0;  //กำหนดค่าตัวแปรที่ใช้แทนตัวเลขบางตัว และเพื่อให้ใช้ในเงื่อนไขได้
int y = 50;  //กำหนด ค่าตัวแปรเหล่านี้ได้โดยการใช้ฟังก์ชั่น int ซึ่งมีการกำหนดจำนวนเต็ม 3 ขั้นตอน คือ ประกาศ กำหนด และเรียกใช้ โดยตัวแปร 1 ตัวเก็บค่าได้เพียงค่าเดียว ค่าข้างขวากำหนดตัวแปรข้างซ้าย การที่เรากำหนดตัวแปรไว้นอกฟังก์ชั่นหลักแบบนี้ เรียกว่าเป็นตัวแปรชนิด Global variable ซึ่งใช้แทนได้ทั้งฟังก์ชั่น 
size(500, 250);  //กำหนดขนาดของภาพ หรือ Output ดูได้จาก size(width, height)  
background(142, 210, 255);  //ใช้ใส่สีให้กับพื้นหลังของภาพ โดยใช้ค่าตามแม่สี หรือเครื่องหมาย # สีที่ใส่นี่คือ สีฟ้าคราม

while(x <= 500) {  //กำหนดเงื่อนไขที่ต้องการให้ทำซ้ำเป็น loop ในกรณีที่เป็นจริง จะทำต่อไปเรื่อยๆ จนกระทั่งเป็นเท็จ อันนี้ในกรณี x <= 500 
  strokeWeight(2);  //กำหนดความหน้าของเส้น โดยการใส่ค่าลงในวงเล็บ
  stroke(65, 196, 10);  //กำหนดสีของเส้น โดยใช้แม่สี หรือเครื่องหมาย # โดยสีที่ผมใส่คือสีเขียวอ่อน
  if(x > 250) {  //กำหนดเงื่อนไข ถ้า x > 250 จึงจะเข้าเงื่อนไขได้
  line(375, y, x, 200);  //ใช้ในการวาดเส้น
  }else if(x >= 0 && x <= 500) {  //อีกเงื่อนไขหนึ่ง ในกรณี x >= 0 และ x <= 500
    line(125, y, x, 200);
  }
  x = x+10;  //กำหนดระยะห่างในแนวแกน X
}

  strokeWeight(10);
  stroke(240, 165, 2);  //สีเหลือง
  line(125, y, 125, 300);
  line(375, y, 375, 300);
  stroke(155);  //สีเทาอ่อน
  line(0, 200, 500, 200);

อธิบายเพิ่มเติม

ฟังก์ชั่นทั้งหมดที่ผมใช้ มีดังนี้
1. size() กำหนดขนาดของกรอบ หรือพื้นหลังที่ใช้สร้าง code ดูได้จาก size(width, height)
2. stroke() กำหนดค่าสีของเส้นโดยการใช้แม่สี หรือเครื่องหมาย #
3. background() กำหนดสีของพื้นหลังโดยการใช้แม่สี
4. strokeWeight() กำหนดขนาดของเส้นโดยการใส่ตัวเลข หรือค่าที่ต้องการลงในวงเล็บ
5. while() ใช้ในการวน loop โดยกำหนดเงื่อนไขที่ต้องการ เพื่อให้มีการทำซ้ำ
6. line() ใช้ในการวาดเส้นตรง โดยดูได้จาก line(x1, y1, x2, y2) กำหนดค่าตามพิกัดแต่ละจุด
7. if() คือฟังก์ชั่นที่ใช้ในการกำหนดเงื่อนไข
8. else ใช้ในการกำหนดเงื่อนไขที่มีมากกว่าหนึ่ง และแยกว่าเงื่อนไขในเป็นจริง หรือเท็จ
9. int คือฟังก์ชั่นที่ใช้ในการกำหนดค่าตัวแปรที่เป็นจำนวนเต็ม
หลังจากที่เราวาด หรือเขียนฟังก์ชั่นทั้งหมดเสร็จแล้ว ผลที่ได้ก็เป็นแบบนี้

Canvas

 

UFO flying back and forth

Shining UFO

ภาพนี้เป็นภาพ UFO เคลื่อนไหวไปกลับ อันดับแรกผมกำหนดตัวแปรซึ่งเป็น Global variables มาใช้ 2 ตัว จากนั้นจึงใช้ฟังก์ชั่น void setup() ในการกำหนดพื้นที่ จากนั้นจึงสร้างฟังก์ชั่นที่สร้างเอง เพื่อวาดรูป UFO ในการวาดนั้น ผมใช้วงรี หรือฟังก์ชั่น ellipse ในการวาด ส่วนการเติมสียังคงใช้ฟังก์ชั่น fill() ที่ตามด้วยเครื่องหมาย # กับค่าที่ระบุจาก Color Selector หลังจากนั้นจึงใช้ฟังก์ชั่น void draw() ในการเรียกใช้งานฟังก์ชั่นที่สร้างขึ้น และผมยังใช้ฟังก์ชั่น background() ในการกำหนดพื้นหลัง โดยผมให้พื้นหลังมีการเปลี่ยนสีไปเรื่อยๆ ตามพิกัดบนแกน X และ Y หรือ mouseX และ mouseY พื้นหลังจึงเปลี่ยนสีไปเรื่อยๆ ตราบเท่าที่เราขยับเมาส์ไปบนภาพ ส่วนการทำให้เคลื่อนไหว ผมใช้ฟังก์ชั่น if() ในการกำหนดเงื่อนไข โดยใช้ฟังก์ชั่น 2 ตัวที่กำหนดและใส่ไว้ในวงรี เพื่อให้ UFO เคลื่อนที่ไปข้างหน้า และกลับตามค่าที่ระบุในเงื่อนไข อันที่จริง การสร้างภาพนี้ไม่ยากเท่าไร แค่รู้จักการใช้ตัวแปร และฟังก์ชั่นที่ควรนำมาใช้ 

Processing Code

int x = 70; //int ใช้กับตัวแปรที่มีค่าเป็นจำนวนเต็ม
int y = 0; //ฟังก์ชั่นเหล่านี้เป็น Global variables ใช้ได้ทุกฟังก์ชั่นในงานชิ้นนี้
void setup() {  //ฟังก์ชั่นหลักที่ใช้ในการกำหนด มีได้เพียงหนึ่งฟังก์ชั่นเท่านั้น
  size(400, 200); //ฟังก์ชั่นที่ใช้ในการกำหนดขนาดพื้นที่ หรือ size(width, height)
}

void drawUFO() {  //ฟังก์ชั่นที่สร้างขึ้นเอง ชื่อ drawUFO
  fill(#FAEE0A); //ฟังก์ชั่นที่ใช้ในการเติมสีตามค่าของแม่สี หรือเครื่องหมาย #
  ellipse(x+y, 95, 50, 60); //ฟังก์ชั่นที่ใช้ในการวาดวงรี หรือ ellipse(x, y, width, height)
  fill(#A5790A);
  ellipse(x+y, 100, 140, 30);
}

void draw() {  //ฟังก์ชั่นหลักที่ใช้ในการวาด มีได้เพียงหนึ่งฟังก์ชั่นเท่านั้น
  background(mouseY, mouseY, mouseX); //ฟังก์ชั่นที่ใช้ในการกำหนดพื้นหลัง โดยกำหนดค่าตามแม่สี ใช้ฟังก์ชั่น mouseX และ mouseY เพื่อให้ค่าของสีเปลี่ยนไปตามแกน X และ Y ไปเรื่อยๆ ตามเมาส์
  drawUFO();
  if(x<340) {
  x=x+3; //ฟังก์ชั่นที่กำหนดเงื่อนไขให้ UFO เคลื่อนที่ไปข้างหน้าตามค่า x เลขที่บวกคือเพิ่มความเร็ว
  }else if(y<-293) {
      x = 70; //ฟังก์ชั่นที่กำหนดเงื่อนไขให้ UFO เคลื่อนที่ไปข้างหลังตามค่า y เลขที่บวกคือเพิ่มความเร็ว
      y = 0;
      }else{
  y=y-3;
  } //else คือฟังก์ชั่นที่ขยายโครงสร้างของฟังก์ชั่น if() ตามด้วยโปรแกรมที่จะให้เลือกระหว่างคำสั่ง 2 ชุดหรือมากกว่านั้น และจะระบุคำสั่งที่ปฏิบัติ เมื่อประโยคในฟังก์ชั่น if() ผิดพลาด
} //เรียกใช้ฟังก์ชั่นที่สร้างขึ้นด้วยฟังก์ชั่นหลัก void draw() หากไม่มีฟังก์ชั่นชุดนี้ ฟังก์ชั่นที่สร้างขึ้นจะไม่ทำงาน
หมายเหตุ สังเกตได้ว่า เครื่องหมาย // เป็นการบอกว่า ฟังก์ชั่นชุดนี้ไม่่ใช้งาน และฟังก์ชั่นหลักที่ใข้ยังเป็น function without parameter 

Canvas

My Art 4

My House

นี่เป็นภาพชิ้นแรกที่ผมใช้ตัวแปรชนิด Global variables และเป็นภาพบ้านชิ้นแรก ผมใช้คำสั่งที่เป็นฟังก์ชั่นหลัก 2 ชนิด คือ void setup() ซึ่งใช้ในการกำหนด และ void draw() ซึ่งใช้ในการวาด ฟังก์ชั่นชนิดนี้จะมีได้แค่อย่างละ 1 ชุดในงานหนึ่งชิ้น นอกนั้นเป็นฟังก์ชั่นชุดย่อย นอกจากนี้ผมยังได้สร้างฟังก์ชั่นขึ้นมาเอง แต่ยังคงใช้ไม่ได้ ถ้าหากเรายังไม่เรียกใช้ ตัวแปรที่ผมนำมาใช้แทนตัวเลขนี้เป็นตัวแปรชนิด Global variables แต่ยังคงไม่มี Vocal เนื่องจากชนิดนี้ใช้ได้เพียงในแต่ละฟังก์ชั่น นอกจากนั้น ในแต่ละค่าที่นำตัวแปรไปแทน ยังคงมีการบวกหรือลบด้วยตัวเลขเพื่อให้ได้ค่าที่ต้องการ และผมยังคงใช้คำสั่ง fill() ในการตกแต่งภาพ และคำสั่ง หรือฟังก์ชั่นที่ใช้ในการวาดรูปทรง เช่น ellipse, rect, line และ triangle สำหรับฟังก์ชั่นที่สร้างขื้นเองนั้น เมื่อเราจะเรียกใช้งานต้องใช้ฟังก์ชั่น void draw() เหมือนอย่างที่เห็น

Processing Code

int d=50;
int k=100;
int m=200; //บางจุดต้องมีการบวกหรือลบด้วยตัวเลข เพื่อให้ได้ค่าที่ต้องการ
int w=300; //ตัวแปรเหล่านี้เป็น Global variables ซึ่งใช้แทนได้ทั้งฟังก์ชั่นในชิ้นงานนี้
void setup() {     //ฟังก์ชั่นหลักใช้ในการติดตั้ง มีได้เพียง 1 ชุดเท่านั้น
  size(300, 300); //ฟังก์ชั่นนี้ใช้ในการกำหนดขนาดพื้นที่ หรือ size(width, height)
  background(110, 223, 252); //ฟังก์ชั่นนี้ใช้ในการกำหนดสีของพื้นที่
}

void drawHouse() {   //ฟังก์ชั่นที่เราสร้างขึ้นเอง ชื่อ drawHouse
  // draw the ground
  fill(#D6B018); //ฟังก์ชั่นที่ใช้ในการกำหนดสีตามเครื่องหมาย # หรือค่าของแม่สี
  ellipse(k+50, m+90, w+20, k+70);

  //draw the house
  fill(#F7F70C);
  rect(d+25, k+10, k+50, k+60);
  fill(#BF8613);
  rect(k+90, d-10, d-10, d+30); //ฟังก์ชั่นที่ใช้ในการวาดรูปสี่เหลี่ยม หรือ rect(x, y, width,  height)
  fill(#FF120A);
  triangle(d-20, k+20, k+45, d-30, m+70, k+20);//ฟังก์ชั่นที่ใช้ในการวาดรูปสามเหลี่ยม หรือ triangle(x1, y1, x2, y2, x3, y3) ต้องดูตามพิกัดต่างๆ ตามค่าในรูป
 
  //draw the door
  fill(#FFFFFF);
  rect(k+25, m, d, d+20);
  fill(#E0D500);
  ellipse(k+35, m+40, d-40, d-40); //ฟังก์ชั่นในการวาดวงรี หรือ ellipse(x, y, width, height)
 
  //draw windows
  fill(#6CBEFF);
  rect(d+30, m+10, d-10, d);
  line(k, m+60, k, m+10); //ฟังก์ชั่นที่ใช้ในการวาดเส้น หรือ line(x1, y1, x2, y2) กำหนดตามพิกัดต่างๆ บนรูปที่เราจะวาด
  line(d+30, m+35, k+20, m+35);
  rect(k+80, m+10, d-10, d);
  line(m, m+60, m, m+10);
  line(k+80, m+35, m+20, m+35); 
  rect(k+80, k+30, d-10, d);
  line(m, k+30, m, k+80);
  line(k+80, k+55, m+20, k+55);
  rect(d+30, k+30, d-10, d);
  line(k, k+80, k, k+30);
  line(d+30, k+55, k+20, k+55);
 
  //draw bushes
  fill(#099B08);
  ellipse(d-20, m+50, d+30, d-10);
  ellipse(m+70, m+50, d+30, d-10);
}

void draw() {   //นี่ก็เป็นฟังก์ชั่นหลักเหมือนกัน มีได้เพียง 1 ชุัดในงานแต่ละชิ้นเท่านั้น
  drawHouse();
} //นี่คือการเรียกใช้ฟังก์ชั่นที่เราสร้างขึ้น พิมพ์ void draw() แล้วตามด้วยชื่อฟังก์ชั่น ถ้าไม่สร้างฟังก์ชั่นชุดนี้ ถือว่าเรายังคงไม่เรียกใช้ฟังก์ชั่น

หมายเหตุ สังเกตได้ว่า เครื่องหมาย // เป็นการบอกว่า ฟังก์ชั่นชุดนี้ไม่่ใช้งาน และฟังก์ชั่นหลักที่ใข้ยังเป็น function without parameter 

Canvas

 

My Love/Passion 2

Lightsaber

ภาพนี้เป็นรูปดาบพลังแสงจากหนังเรื่อง Star Wars ที่ผมชอบ ผมได้นำมาสร้างเป็นรูปในโปรแกรมนี้ ผมกำหนดตัวแปรซึ่งเป็น Global Variables เพื่อให้แทนตัวเลขได้ทั้งหมดในฟังก์ชั่นทุกชุด และต้องมีการบวกหรือลบด้วยตัวเลขบ้าง ใช้ฟังก์ชั่นหลัก 2 ชนิดคือ void setup() ซึ่งใช้ในการกำหนดค่าต่างๆ และ void draw() ซึ่งใช้ในการวาด และฟังก์ชั่นที่สร้างขึ้นเอง ซึ่งต้องใช้ฟังก์ชั่นที่วาด หรือ void draw() ในการเรียกใช้ และผมยังใช้ฟังก์ชั่นย่อยหลายตัว เช่น rect, line และ triangle ในการวาดรูปทรงที่ผมสร้างขึ้น หรือผมใช้สี่เหลี่ยม สามเหลี่ยม และเส้นในการวาด ในการตกแต่งภาพนั้น ผมยังคงใช้ฟังก์ชั่น fill() ที่ต้องใช้ตามค่าของแม่สี หรือเครื่องหมาย # และ background() ในการกำหนดสีของพื้นหลังตามค่าของแม่สีที่ใส่ในวงเล็บ เราสามารถดูค่าของสีได้จาก Color Selector ผลที่ได้ก็เป็นอย่างที่เห็น ขอเชิญทุกคนลองทำกันได้นะครับ

Processing Code

int a=50;
int b=100;
int c=200; //บางจุดต้องมีการบวกหรือลบด้วยตัวเลข เพื่อให้ได้ค่าที่ต้องการ
int d=300; //ตัวแปรเหล่านี้เป็น Global variables ซึ่งสามารถแทนได้ในทุกฟังก์ชั่น ถ้าเป็น Vocal Variables จะอยู่ในฟังก์ชั่น และแทนได้แค่ในฟังก์ชั่นนั้น
void setup() {  //ฟังก์ชั่นหลักซึ่งใช้ในการกำหนดขนาด หรือพื้นหลัง มีได้เพียง 1 ฟังก์ชั่นเท่านั้น
  size(500, 300); //ฟังก์ชั่นที่ใช้ในการกำหนดขนาดของพื้นที่ หรือ size(width, height)
  background(255, 240, 98); //ฟังก์ชั่นที่ใช้ในการกำหนดพื้นหลังให้มีสีต่างๆ ตามค่าของแม่สี
}

void drawLightsaber() {  //ฟังก์ชั่นที่สร้างขึ้นเอง ชื่อ drawLightsaber
  fill(#CBBFBF); //ฟังก์ชั่นที่ใช้ในการเติมสีด้วยเครื่องหมาย # หรือค่าของแม่สี
  rect(a-40, b+30, b, a-20); //ฟังก์ชั่นที่ใช้ในการวาดรูปสี่เหลี่ยม หรือ rect(x, y, width, height)
  fill(#FFFFFF);
  rect(a+35, b+30, a-30, a-40);
  fill(#030303);
  rect(a+10, b+30, a-30, a-20);
  fill(#A7A6A6);
  rect(a-40, b+30, a-20, a-20);
  line(a-40, b+35, a-10, b+35); //ฟังก์ชั่นที่ใช้ในการวาดเส้น หรือ line(x1, y1, x2, y2) ตั้งค่าตามพิกัดที่กำหนดในแต่ละจุด
  line(a-40, b+40, a-10, b+40);
  line(a-40, b+45, a-10, b+45);
  line(a-40, b+50, a-10, b+50);
  line(a-40, b+55, a-10, b+55);
  fill(#CECECE);
  rect(b+10, b+35, a-15, a-30);
  fill(#897D7D);
  rect(b+25, b+35, a-40, a-30);
  fill(#030303);
  rect(b+45, b+30, a-30, a-20);
  fill(#1254DE);
  rect(b+65, b+35, d+10, a-30);
  triangle(d+175, b+35, d+175, b+55, d+190, b+44); //ฟังก์ชั่นที่ใช้ในการวาดรูปสามเหลี่ยม หรือ triangle(x1, y1, x2, y2, x3, y3) ต้องตั้งค่าตามพิกัดที่กำหนดในแต่ละจุด ให้ได้รูปที่ต้องการ
}

void draw() {  //ฟังก์ชั่นหลักที่ใช้ในการวาด มีได้เพียง 1 ฟังก์ชั่นเท่านั้น
  drawLightsaber();
} //เรียกใช้ฟังก์ชั่นที่สร้างเอง หากไม่สร้างฟังก์ชั่นนี้ จะยังไม่สามารถสร้างฟังก์ชั่นที่เราทำขึ้นได้

หมายเหตุ สังเกตได้ว่า เครื่องหมาย // เป็นการบอกว่า ฟังก์ชั่นชุดนี้ไม่่ใช้งาน และฟังก์ชั่นหลักที่ใข้ยังเป็น function without parameter  

Canvas

My Music 2

Phiang aw Flute

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

Processing Code

float r=0;
float r2=0;
float r3=0;
float r4=0;
float r5=0;
float r6=0; //ฟังก์ชั่นเหล่านี้เป็นฟังก์ชั่นชนิด Global variables ใช้กับฟังก์ชั่นได้ทุกชุดในงานชิ้นนี้
float r7=0; //float คือฟังก์ชั่นที่ใช้กับจำนวนที่มีทศนิยม
void setup() {  //ฟังก์ชั่นหลักที่ใช้ในการกำหนดขนาด และพื้นหลัง มีได้เพียง 1 ชุดเท่านั้น
  size(400, 400); //ฟังก์ชั่นที่ใช้ในการกำหนดขนาด หรือ size(width, height)
  background(114, 237, 250); //ฟังก์ชั่นที่ใช้ในการกำหนดพื้นหลังให้มีสีตามแม่สีได้
}

void drawFlute() {  //ฟังก์ชั่นที่เราสร้างขึ้น ชื่อ drawFlute
  fill(#FF0303); //ฟังก์ชั่นที่ใช้ในการเติมสีตามค่าของแม่สี หรือเครื่องหมาย #
  ellipse(203, 200, r, r); //ฟังก์ชั่นที่ใช้ในการวาดวงรี หรือ ellipse(x, y, width, height)
  fill(#FFAB03);
  ellipse(203, 200, r2, r2);
  fill(#FFEB03);
  ellipse(203, 200, r3, r3);
  fill(#4BED0C);
  ellipse(203, 200, r4, r4);
  fill(#0D0AFF);
  ellipse(203, 200, r5, r5);
  fill(#7D0CC9);
  ellipse(203, 200, r6, r6);
  fill(#FA0FFF);
  ellipse(203, 200, r7, r7);
  fill(#FFFFFF);
  ellipse(203, 200, 120, 120);
  r=r+9.0;
  r2=r2+8.5;
  r3=r3+8.0;
  r4=r4+7.5;
  r5=r5+7.0;
  r6=r6+6.5;
  r7=r7+6.0; //เงื่อนไขในการกำหนดการหดตัว หรือขยายตัวของวงรีที่สร้างขึ้น และมีตัวแปรเหล่านี้อยู่ ตัวเลขที่นำไปบวกสามารถเพิ่มความเร็วได้ แต่ถ้านำไปลบจะทำให้ฟังก์ชั่นกระทำในทิศตรงข้าม
  if(r>600) {
    r=0;
  } else
  if(r2>600) {
    r2=0;
  }
  if(r3>600) {
    r3=0;
  }
  if(r4>600) {
    r4=0;
  }
  if(r5>600) {
    r5=0;
  }
  if(r6>600) {
    r6=0;
  }
  if(r7>600) {
    r7=0;
  } //ฟังก์ชั่นเงื่อนไขในการกำหนดขนาด และทิศทางของตัวแปร
  int w=10;
  int x=50;
  int y=100; //ตัวแปรเหล่านี้เป็น Vocal variables ใช้ได้เฉพาะในฟังก์ชั่นชุดนี้
  int z=200; //int ใช้กับตัวแปรที่เป็นจำนวนเต็ม
  fill(#FFD752);
  ellipse(z+5, x, x, x+10);
  rect(y+80, x, x, z+100);
  fill(#FFD752);
  ellipse(z+5, z+140, x, x+10);
  fill(#F0B905);
  ellipse(z+5, z+140, w+25, w+35);
  fill(#020303);
  ellipse(z+5, x, w, w);
  ellipse(z+5, y, w, w);
  ellipse(z+5, y+25, w, w);
  ellipse(z+5, y+50, w, w);
  ellipse(z+5, y+75, w, w);
  ellipse(z+5, z, w, w);
  ellipse(z+5, z+25, w, w);
}

void draw() {  //ฟังก์ชั่นหลักที่่ใช้ในการวาด มีได้เพียง 1 ฟังก์ชั่นเท่านั้น
  drawFlute();
} //เรียกใช้ฟังก์ชั่นที่สร้างขึ้น หากไม่มีฟังก์ชั่นนี้ ฟังก์ชั่นที่สร้างขึ้นจะไม่สามารถใช้งานได้

หมายเหตุ สังเกตได้ว่า เครื่องหมาย // เป็นการบอกว่า ฟังก์ชั่นชุดนี้ไม่่ใช้งาน และฟังก์ชั่นหลักที่ใข้ยังเป็น function without parameter  

Canvas