รั้วๆ Processing.js code
void setup(){
size(500,300);
}
int u = 300; //กำหนดตัวแปร Global
int v = 0;
void draw(){
int p = u+v; //ค่า p หาได้จากค่า u+v
noStroke();
fill(90-p/3,250-p,252-p/2);
rect(0,0,500,140);
fill(232,69,28);
ellipse(250,p,50,50);
fill(97,234,88);
rect(0,140,500,165);
stroke(0);
fill(31,196,20);
ellipse(50,140,90,90);
ellipse(80,140,50,50);
drawStick(30,150,6,80);
if(u > -300){ //เงื่อนไขที่ถ้า u มากกว่า -300 ให้ u = u-1/2 ตอนที่ค่า u ค่อยๆลดลง ค่า v จะหยุดนิ่ง
u = u-1/2;
}else if(v >600){
/*เงื่อนไขที่ถ้า v มากกว่า 600 ให้กลับสู่ค่าเริ่มต้น ในช่วงนี้ค่า u หยุดที่ -300 แล้วค่า v หยุดที่ 600 จาก p = u+v จะได้ p = 300 กลับสู่ค่าเริ่มต้นที่ */
v = 0;
u = 300;
}else{
v = v+1/2;
//เงื่อนไขที่ ถ้า v ไม่มากกว่า 600 ให้ v = v+1/2 ตอนนี้ค่า v จะค่อยๆมากขึ้น ค่า u จะหยุดที่ -300 }
}
**ดังที่กำหนดจะทำให้ภาพดวงอาทิตย์เคลื่อนขึ้นลงตามเงื่อนไข**
void drawStick(int x, int y, int n, int space){ //สร้างฟังก์ชัน drawStick
int r = 40; //แปรตัวแปร Local
int l = 90;
int count = 0;
noStroke();
fill(255,219,173);
rect(x-r/2,y+r/3,400+2*r,r/2);
rect(x-r/2,y+l-r,400+2*r,r/2);
while(count < n){ //คำสั่งวน loop โดยการกำหนดค่า count<n แล้วจะวาด
noStroke();
fill(255,146,232);
triangle(x,y,x+r,y,x+r/2,y-r/2);
rect(x,y,r,l);
fill(216,31,183);
ellipse(x+r/2,y+r/3,r/2,r/2);
x = x+space; //เพิ่มค่า x = x+space
count = count+1; //เพิ่มค่า count
}
}
>.คำสั่งที่ใช้ในการวาดรูป ประกอบด้วย.<
- ellipse- คำสั่งวาดวงรี (x,y,r,p)
ค่า x,y คือ ค่ากำหนดจุดศูนย์
r คือ ค่าเส้นผ่านศูนย์กลางในแนวแกน x
p คือ ค่าเส้นผ่านศูนย์กลางในแนวแกน y
- rect - คำสั่งวาดสี่เหลี่ยมผืนผ้า (x,y,l,w)
ค่า x,y คือ ตำแหน่งจุดเริ่มวาดรูป จะเป็นมุมบนขวาของรูปสี่เลี่
l คือ ค่าความยาวของรูสี่เหลี่
w คือ ค่าความกว้างของรูปสี่เหลี่
- triangle - คำสั่งวาดสามเหลี่ยม (x,y,x1,y1,x2,y2)
ค่า x,y คือ ตำแหน่งมุมของรูปสามเหลี่
x1,y1 คือ ตำแหน่งมุมของรูปสามเหลี่
x2,y2 คือ ตำแหน่งมุมของรูปสามเหลี่
- void - คำสั่งสร้างฟังก์ชัน เช่น
void drawCircle(){
....
} ต้องเขียนเรียกใช้
- void setup(){...} - คำสั่งสร้างฟังก์ชัน ที่เรียกใช้เองไม่ต้องเขียนเรี
- void draw(){...} - คำสั่งสร้างฟังก์ชัน ที่เรียกใช้อัตโนมัติหลัง setup
- Global - เป็นตัวแปรที่กำหนดค่าอยู่นอกฟั
ตัวอย่าง int x = 0; //Global variable
void setup(){
ellipse(x,100,50,50);
x = x+1; //กำหนดให้เมื่อวาดรูปแล้วค่า x = x+1 ไปเรื่อยๆ
}
- while - คือคำสั่งทำซ้ำๆ โดยกำหนดค่าตัวแปร
เช่น ตัวอย่าง กำหนดค่า ตัวแปร count และ n กำหนดให้ค่า count<n จะวนทำซ้ำๆใน loop จนกระทั่งค่า count >= n จึงจะออกจาก loop
แต่!!! ถ้าเราไม่กำหนดค่า n โปรแกรมก็จะวน loop ไปเรื่อยๆ เราเรียกการทำซ้ำไปเรื่อยๆไม่หยุดว่า
ติด infinite loop
การทำงานของคำสั่ง while วน loop ของภาพนี้
เป็น flowchart ได้ดังนี้ -------------------->
- background(R,G,B) - กำหนดสีพื้นหลัง ตามค่าสี RGB
- fill(R,G,B)- คำสั่งใส่สีรูปวาดตามค่าสี RGB
- noStroke() - คำสั่งไม่วาดเส้นขอบของรูป
ไม่มีความคิดเห็น:
แสดงความคิดเห็น