วันพฤหัสบดีที่ 25 กรกฎาคม พ.ศ. 2556

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


ไม่มีความคิดเห็น:

แสดงความคิดเห็น