~ แว่นตาใส่แล้วมองชั๊ด..ชัด ~
My glasses Processing.js code
void setup(){
size(300,300);
}
//Global
int x = 0;
int y = 100;
void draw(){
background(255,238,216);
drawGlasses(x,y,90); //เรียกใช้ฟังก์ชัน drawGlasses
x = x+1/20;
y = y+1/20;
}
void drawGlasses(int x, int y, int r){
strokeWeight(9); //เส้นหนา
stroke(222);
rect(30,30,240,240);
stroke(0);
noFill();
curve(200,0,x-r/4,y-r/4,x+r/2,y-r,200,200);
curve(300,100,x+29*r/20,y-r/4,x+2*r,y-r,300,200);
line(x,y,x+r+r/5,y);
drawCircle(x,y,r);
drawCircle(x+r+r/5,y,r);
}
void drawCircle(int x, int y, int r){
strokeWeight(2);
stroke(67,26,9);
fill(255,118,255);
ellipse(x,y,r,r);
fill(255,193,184);
ellipse(x,y,6*r/7,6*r/7);
fill(255,249,198);
ellipse(x,y,2*r/3,2*r/3);
fill(214,255,235);
ellipse(x,y,r/2,r/2);
fill(105,255,203);
ellipse(x,y,r/3,r/3);
fill(180,210,255);
ellipse(x,y,r/7,r/7);
}
>.คำสั่งที่ใช้ในการวาดรูป ประกอบด้วย.<
- 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 คือ จุดปลายเส้น
- curve - คำสั่งวาดเส้นโค้ง (s1,s2,x,y,x1,y1,e1,e2);
ค่า x,y ตำแหน่งจุดเริ่มเส้นตามแนวแกน x และแกน y
x1,y1 ตำแหน่งจุดปลายเส้นมแนวแกน x และแกน y
เส้นนี้ได้แบ่งค่าการโค้งเส้นเป็นสี่ส่วน (- , +) คือ
s1 โค้งปลายของจุดเริ่มโค้งขยายในแนวแกน x
s2 โค้งส่วนที่สองของจุดเริ่มโค้งขยายในแนวแกน y
e1 โค้งส่วนที่สามปลายเส้นโค้งขยายในแนวแกน x
e2 โค้งส่วนสุดท้ายอยู่ปลายเส้นโค้งขยายในแนวแกน y
- 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
- noFill - ไม่สีสีรูปภาพ
- fill(R,G,B)- คำสั่งใส่สีรูปวาดตามค่าสี RGB
- stroke(R,G,B) - วาดเส้นขอบโดยกำหนดสีเส้นตามค่าสี RGB
- strokeWeight(x)- วาดเส้นหนาโดยใส่ค่าลงไปแทนค่า x
ไม่มีความคิดเห็น:
แสดงความคิดเห็น