~ ป๋องแป๋งๆ ~
PongPang Processing.js code
void setup(){
size(300,300);
}
int x = 0; //ตัวแปร Global
void draw(){
background(255,155,242);
stroke(222);
fill(209,255,255);
rect(20,20,260,260);
int y = 90;
int r = 120;
drawPongpang(x,y,r);
drawface(x,y,r);
x = x+1/10;
}
void drawPongpang(int x, int y, int r){
int p = 18; //ตัวแปร Local
strokeWeight(14);
stroke(72,2,7);
line(x,y,x,y+r*3/2);
strokeWeight(2);
//เส้นเชือก
line(x+r/2-3,y,x+r*2/3,y+2*r/3);
line(x-r/2+3,y,x-r/2-p,y+2*r/3-p/3);
//ลูกเล็กๆ
stroke(0);
fill(0);
ellipse(x+r*2/3,y+2*r/3,p,p);
ellipse(x-r/2-p,y+2*r/3-p/3,p,p);
//หนัง
fill(72,2,7);
ellipse(x,y,r,r);
fill(203,138,84);
ellipse(x-7,y-4,r,r);
ellipse(x+r/2-3,y,8,8);
}
void drawface(int x, int y ,int r){
fill(203,138,84);
arc(x-7,y+r/7,r/3,r/3,0,PI);
fill(0);
ellipse(x-r/4-7,y-15,15,20);
ellipse(x+r/4-7,y-15,15,20);
fill(255);
ellipse(x-r/4-7,y-15,10,10);
ellipse(x+r/4-7,y-15,10,10);
}
>.คำสั่งที่ใช้ในการวาดรูป ประกอบด้วย.<
- 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
- background(R,G,B) - กำหนดสีพื้นหลัง ตามค่าสี RGB
- fill(R,G,B)- คำสั่งใส่สีรูปวาดตามค่าสี RGB
- stroke(R,G,B) - วาดเส้นขอบโดยกำหนดสีเส้นตามค่าสี RGB
- strokeWeight(x)- วาดเส้นหนาโดยใส่ค่าลงไปแทนค่า x
ไม่มีความคิดเห็น:
แสดงความคิดเห็น