12 กรกฎาคม 2556

..@-@ UFO [ Lab3 ] @-@..


~ ยานแม่ท่องอวกาศ =.= ~


UFO Processing.js code


void setup(){
  size(300,300);
}

int x = 95;
int u = 0;
void draw(){
  background(155);
  fill(random(0,33));
  strokeWeight(5);
  stroke(222);
  rect(20,20,260,260);
  drawUFO(x+u,155,90);
  if(x < 205){
    x = x+1;  //เงื่อนไข ถ้า x น้อยกว่า 205 ให้ x = x+1
  }else if(u < -110){  //เงื่อนไข ถ้า y น้อยกว่า -110 ให้กลับสู่ค่าเริ่มต้น
      x = 95;
      u = 0;
    }else{
      u = u-1;  //เงื่อนไข ถ้า y ไม่น้อยกว่า -110 ให้ y = y-1
    }
}

void drawUFO(int x, int y, int r){
  stroke(255,243,191);
  strokeWeight(2);
  line(x,y,x,y-r*2/3);
  fill(255,0,0);
  ellipse(x,y-r*2/3,random(9,15),random(9,15));
  fill(0,240,198);
  ellipse(x,y-6,r,r*3/4);
  fill(255,170,232);
  ellipse(x,y,r*5/3,r/2);
  strokeWeight(8);
  line(x+r*6/7,y,x-r*6/7,y);
}



>.คำสั่งที่ใช้ในการวาดรูป ประกอบด้วย.<

- ellipse- คำสั่งวาดวงรี (x,y,r,p)
   ค่า x,y คือ ค่ากำหนดจุดศูนย์กลางวงกลมในแนวแกน x และแกน y ตามลำดับ
         r   คือ ค่าเส้นผ่านศูนย์กลางในแนวแกน x
         p  คือ ค่าเส้นผ่านศูนย์กลางในแนวแกน y
      
- rect - คำสั่งวาดสี่เหลี่ยมผืนผ้า (x,y,l,w)
   ค่า x,y คือ ตำแหน่งจุดเริ่มวาดรูป จะเป็นมุมบนขวาของรูปสี่เลี่ยมที่วาดได้
          l   คือ ค่าความยาวของรูสี่เหลี่ยมในแนวแกน x โดยวาดไปทางขวาของจุดเริ่ม
        w   คือ ค่าความกว้างของรูปสี่เหลี่ยมในแนวแกน y โดยวาดลงล่างไปตามแนวแกน y

- line - คำสั่งวาดเส้น (x,y,x1,y1)
   ค่า x,y   คือ จุดเริ่มต้น
      x1,y1 คือ จุดปลาย

- Local - ประกาศตัวแปรที่อยู่ในฟังก์ชัน
   ตัวอย่าง  void draw(){
                     int x = 100;
                     ellipse(x,100,50,50);
                   }
          อาจเขียนเป็น
                  void drawCiecle(int x){
                     ellipse(x,100,50,50);
                   } //ต้องเขียนเรียกใช้ฟังก์ชัน    

- Global - เป็นตัวแปรที่กำหนดค่าอยู่นอกฟังก์ชัน จะทำให้ภาพเคลื่อนไหวได้เมื่อกำหนดให้ค่าเปลี่ยน
   ตัวอย่าง  int x = 0; //Global variable
                  void setup(){
                     ellipse(x,100,50,50);
                     x = x+1; //กำหนดให้เมื่อวาดรูปแล้วค่า x = x+1 ไปเรื่อยๆ
                  }
            
- void - คำสั่งสร้างฟังก์ชัน เช่น
       void drawCircle(){
          ....
       } ต้องเขียนเรียกใช้
    
- void setup(){...} - คำสั่งสร้างฟังก์ชัน ที่เรียกใช้เองไม่ต้องเขียนเรียกใช้

- void draw(){...} - คำสั่งสร้างฟังก์ชัน ที่เรียกใช้อัตโนมัติหลัง setup



- random - คือคำสั่งที่ทำให้ค่าเลื่อนที่จากตัวหนึ่งไปอีกค่าหนึ่งอย่างเร็วๆกลับไปกลับมา         
เหมือนการสั่น เช่น 
     ellipse(90,90,random(9,20),10); //จะได้วงรีที่มีความยาวของเส้นผ่านศูนย์กลางในแนวแกน x    เปลี่ยนค่าไปมาระหว่าง 9-20 เกิดเป็นการสั่นในแนวแกน x
     fill(random(255,0)); //เป็นการกำหนดค่าให้สี่รูวาดเปลี่ยนไปมาอย่างรวดเร็ว ระหว่างสีขาวไปดำกลับ   ไปกลับมา
           
- if - การใช้เงื่อนไข
   ตัวอย่าง  int x = 0; //Global variable
                  void setup(){
                    ellipse(x,100,50,50);
                    x = x+1; //กำหนดให้เมื่อวาดรูปแล้วค่า x = x+1 ไปเรื่อยๆ
                    if(x>100){ 
                       x = 0; // เงื่อนไข ถ้า x>100 ค่า x จะเท่ากับ 0
                    }
                  }

- if,else - เป็นการสร้างเงื่อนไขที่ให้เลือกอย่างใดอย่างหนึ่ง
   ตัวอย่าง int x = 10; //Global variable
                 int u = 0;
                 void setup(){
                   size(200,200);
                   ellipse(x+u,100,50,50);
                   if(x < 190){
                   x = x+1; // เงื่อนไข ถ้า x น้อยกว่า 200 ให้ x = x+1
                 }else{
                     if(u < -180){  // เงื่อนไข ถ้า x น้อยกว่า -180 ให้กลับสู่ค่าเริ่มต้น
                        x = 10;
                        u = 0;
                     }else{
                        u = u-1;  // เงื่อนไข ถ้า x ไม่น้อยกว่า -180 ให้ u = u-1
                     }
                   }
                 }
    
- background(R,G,B) - กำหนดสีพื้นหลัง ตามค่าสี RGB

- fill(R,G,B)- คำสั่งใส่สีรูปวาดตามค่าสี RGB

- stroke(R,G,B) - วาดเส้นขอบโดยกำหนดสีเส้นตามค่าสี RGB

- strokeWeight(x)- วาดเส้นหนาโดยใส่ค่าลงไปแทนค่า x

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

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