My Art 5

Sunset

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

Processing Code

void setup() {  //ฟังก์ชั่นหลักที่ใช้ในการกำหนด มีได้เพียงหนึ่งฟังก์ชั่นเท่านั้น

  size(400, 400); //ฟังก์ชั่นที่ใช้ในการกำหนดขนาดพื้นที่ หรือ size(width, height)

}

int y=0; //ตัวแปรตัวนี้เป็นจำนวนเต็ม และ Global variables ซึ่งใช้แทนได้ทั้งฟังก์ชั่นในชิ้นงานนี้

void draw() {  //ฟังก์ชั่นหลักที่ใช้ในการวาด มีได้เพียง 1 ชุัดในงานแต่ละชิ้นเท่านั้น

  background(350-y,360-y,320-y); //ฟังก์ชั่นนี้ใช้ในการกำหนดสีของพื้นหลัง

  //draw the sun

  fill(#F20C10); //ฟังก์ชั่นที่ใช้ในการกำหนดสีตามเครื่องหมาย # หรือค่าของแม่สี

  ellipse(200, y, 60, 60); //ฟังก์ชั่นในการวาดวงรี หรือ ellipse(x, y, width, height)

  y=y+1;

  if(y>350) {

     y=0;

  } //ฟังก์ชั่นที่ใช้ในการกำหนดเงื่อนไขให้กับตัวแปรให้เปลี่ยนค่าไปตามที่กำหนดเรื่อยๆ และยังเป็นการเพิ่มความเร็วให้กับตัวแปรโดยการบวกตัวเลขในสมการ y=y+1

 

  //draw mountains

  fill(#0E760A);

  ellipse(15, 340, 370, 250);

  ellipse(385, 340, 370, 250);

  fill(#C99F35);

  rect(0, 340, 400, 300); //ฟังก์ชั่นที่ใช้ในการวาดรูปสี่เหลี่ยม หรือ rect(x, y, width,  height)

 

  //draw clouds

  fill(#BCEEFF);

  ellipse(290, 100, 100, 30);

  ellipse(0, 50, 120, 50);

  ellipse(80, 120, 150, 30);

  ellipse(380, 40, 125, 60);

  ellipse(350, 180, 160, 40);

  ellipse(50, 180, 120, 35);

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

Canvas