19 กรกฎาคม 2556

.O. Express way .O.

~ ทาง..ด่วน ~  


Express way  Processing.js code

void setup(){
  size(500,300);   //กำหนดขนาดภาพ
}

void draw(){
  background(0);
  fill(189);
  rect(-10,230,520,100);
  fill(111);
  rect(-10,100,520,20);
  drawWay(30,100,7,80);  //เรียกใช้ฟังก์ชัน drawWay
}

void drawWay(int x, int y, int n, int space){  //สร้างฟังก์ชัน drawWay(int..){..}
  int count = 0;  //ประกาศและกำหนดค่า count = 0
  while(count < n){  //คำสั่งวน loop
    fill(189);
    rect(x,y+20,40,90);
    fill(255,196,33);
    rect(x-25,y,10,20);
    rect(x+15,y,10,20);
    x = x+space;  //ให้เพิ่มค่า x = x+space
    count = count +1;   //เพิ่มค่า count = count+1 แล้ววนกลับไปพิจารณาเงื่อนไขวน loop อีกครั้ง

/* เขียนเป็นลำดับคำสั่งได้เป็น
while(count < n) ---> ..คำสั่งที่กำหนด.. ---> ให้เพิ่มค่า x = x+space ---> ให้ค่าเพิ่ม count = count+1 แล้วจากนั้นก็วนไปพิจารณา while(count < n) อีกครั้งถ้าเป็นจริงตามเงื่อนไขก็ทำ loop ต่อ แต่ถ้าไม่ใช่ก็ออก loop ไปทำตามลำดับคำสั่งต่อไป.. */

  }
}



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

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

- while(int){...} - คำสั่งวน loop
- void setup(){...} - คำสั่งสร้างฟังก์ชัน ที่เรียกใช้เองไม่ต้องเขียนเรียกใช้
- void draw(){...} - คำสั่งสร้างฟังก์ชัน ที่เรียกใช้อัตโนมัติหลัง setup
- background(R,G,B) - กำหนดสีพื้นหลัง ตามค่าสี RGB
- fill(R,G,B)- คำสั่งใส่สีรูปวาดตามค่าสี RGB
 

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

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