~ ออกกำลังกายแขน หุหุ ~
My glasses Processing.js code
void setup(){
size(300,300);
}
int r = 0; //ตัวแปร Global
int i = 0;
int j = 0;
void draw(){
background(255,162,235);
noStroke();
fill(249,255,162);
ellipse(150,150,r,r);
fill(165,255,255);
ellipse(150,150,i,i);
fill(255,207,162);
ellipse(150,150,j,j);
drawWeight(150,150);
r = r+1/3; //ค่า r จะเพิ่มขึ้นทีละ 1/3 ไปเรื่อยๆ
i = i+1/6; //ค่า i จะเพิ่มขึ้นทีละ 1/6 ไปเรื่อยๆ
j = j+1/9; //ค่า j จะเพิ่มขึ้นทีละ 1/9 ไปเรื่อยๆ
}
void drawWeight(int x, int y){
//weight..back..
fill(0);
ellipse(x-80,y-30,70,80);
ellipse(x+40,y+30,90,50);
fill(118,117,118);
ellipse(x-77,y-30,50,60);
ellipse(x+40,y+28,70,35);
//holder
fill(0);
ellipse(x-77,y-30,15,15);
ellipse(x+40,y+28,15,15);
fill(0);
quad(x-77,y-37,x-7,y+23,x-7,y+37,x-77,x-23);
quad(x+33,y-70,x+33,y+30,x+47,y+30,x+47,y-70);
//weight..front..
fill(0);
ellipse(x-10,y+30,70,80);
ellipse(x+40,y-70,90,50);
fill(118,117,118);
ellipse(x-7,y+30,50,60);
ellipse(x+40,y-72,70,35);
}
>.คำสั่งที่ใช้ในการวาดรูป ประกอบด้วย.<
- ellipse- คำสั่งวาดวงรี (x,y,r,p)
ค่า x,y คือ ค่ากำหนดจุดศูนย์กลางวงกลมในแนวแกน x และแกน y ตามลำดับ
r คือ ค่าเส้นผ่านศูนย์กลางในแนวแกน x
p คือ ค่าเส้นผ่านศูนย์กลางในแนวแกน y
- quad - คำสั่งวาดรูปสี่เหลี่ยม (x,y,x1,y1,x2,y2,x3,y3)
ค่า x,y คือ ตำแหน่งมุมบนรูปสี่เหลี่ ยมในแนวแกน x และแกน y ตามลำดับ
x1,y1 คือ ตำแหน่งมุมที่สองบนรูปสี่เหลี่ ยมในแนวแกน x และแกน y ตามลำดับ
x2,y2 คือ ตำแหน่งมุมที่สามบนรูปสี่เหลี่ ยมในแนวแกน x และแกน y ตามลำดับ
x3,y3 คือ ตำแหน่งมุมที่สี่บนรูปสี่เหลี่ ยมในแนวแกน x และแกน y ตามลำดับ
ในการใน quad ต้องวาดตำแหน่งมุมเรียงเป็นลำดั บเวียนตามเข็มหรือทวนเข็มนาฬิกา
- 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
- noStroke() - คำสั่งไม่วาดเส้นขอบของรูป
ไม่มีความคิดเห็น:
แสดงความคิดเห็น