Railway Processing.js code
void setup(){
size(300,500);
}
int y = 0;
int i = 500; //ประกาศและกำหนด Global ซึ่งจะทำให้ค่าตัวแปรที่อยู่ในฟังก์ชันเคลื่อนที่
/* การเคลื่อนที่ของรางรถไฟเป็นการเรียกใช้ฟังก์ชัน drawRailway สองชุดโดยกำหนดค่าแนวแกน y ต่างกัน นั่นคือตัวแปร y และ i */
void draw(){
background(47,222,95);
drawWay(150); //เรียกใช้ฟังก์ชัน drawWay
drawRailway(95,y,10,50); //เรียกใช้ฟังก์ชัน drawRailway
drawRailway(95,i,10,50);
y = y-2;
i = i-2;
if(y < -500){ //เงื่อนไขที่ถ้า y น้อยกว่า -500 ให้ y = 500;
y = 500;
}
if(i < -500){ //เงื่อนไขที่ถ้า i น้อยกว่า -500 ให้ i = 500;
i = 500;
}
}
void drawRailway(int x, int y, int n, int space){
int count = 0; //ประกาศและกำหนดค่า count = 0
while(count < n){ //คำสั่งวน loop
strokeWeight(2);
fill(0);
rect(x,y,110,15);
y = y+space; //ให้เพิ่มค่า y = y+space
count = count+1; //เพิ่มค่า count = count+1 แล้วกลับไปพิจารณาเงื่อนไขวน loop อีกครั้ง
/* เขียนเป็นลำดับคำสั่งได้เป็น
while(count < n) ---> ..คำสั่งที่กำหนด.. ---> ให้เพิ่มค่า y = y+space ---> ให้ค่า count = count+1 แล้วจากนั้นก็วนไปพิจารณา while(count < n) อีกครั้งถ้าเป็นจริงตามเงื่อนไขก็ทำ loop ต่อ แต่ถ้าไม่ใช่ก็ออก loop ไปทำตามลำดับคำสั่งต่อไป.. */
}
}
void drawWay(int x){ //สร้างฟังก์ชัน drawWay
strokeWeight(10);
fill(180);
rect(x-100,-10,200,520);
strokeWeight(8);
fill(200);
rect(x-40,-10,80,520);
}
>.คำสั่งที่ใช้ในการวาดรูป ประกอบด้วย.<
- ellipse- คำสั่งวาดวงรี (x,y,r,p)
ค่า x,y คือ ค่ากำหนดจุดศูนย์
r คือ ค่าเส้นผ่านศูนย์กลางในแนวแกน x
p คือ ค่าเส้นผ่านศูนย์กลางในแนวแกน y
- rect - คำสั่งวาดสี่เหลี่ยมผืนผ้า (x,y,l,w)
ค่า x,y คือ ตำแหน่งจุดเริ่มวาดรูป จะเป็นมุมบนขวาของรูปสี่เลี่
l คือ ค่าความยาวของรูสี่เหลี่
w คือ ค่าความกว้างของรูปสี่เหลี่
- 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
- strokeWeight(x)- วาดเส้นหนาโดยใส่ค่าลงไปแทนค่า x
ไม่มีความคิดเห็น:
แสดงความคิดเห็น