~ วิ่งๆ วอร์มร่างกาย อิอิ ~
run run Processing.js code
void setup(){
size(300,300);
}
void drawCartoon(int t,int x,int y,int r,int k,int p,int q,int f){
noStroke();
//ground
fill(20,193,23);
rect(0,250,300,50);
//hair
fill(0);
ellipse(x+t,y,r,k);
ellipse(x+t,y+2*k/3,3*k/4,4*r/5);
//arm
quad(x+t-40,y+k/3,x+t-10,y+k/3,x+t-50,y+5*y/4,x+t-80,y+5*y/4);
quad(x+t+40,y+k/3,x+t+10,y+k/3,x+t+50,y+5*y/4,x+t+80,y+5*y/4);
ellipse(x+t-65,y+5*y/4,k/3,k/4);
ellipse(x+t+65,y+5*y/4,k/3,k/4);
//foot
ellipse(x+t-35,y+177-f,r/3,k/5);
ellipse(x+t+35,y+173+f,r/3,k/5);
//body
fill(252,217,252);
ellipse(x+t,y+2*k/3,2*k/3,2*r/3);
stroke(0);
ellipse(x+t,y+k/4,2*r/3,2*k/3);
fill(0);
arc(x+t,y+4*k/5,60,60,0,PI);
//face
fill(255);
rect(x+t-45,y+10,30,40);
rect(x+t+15,y+10,30,40);
line(x+t-15,y+30,x+t+15,y+30);
line(x+t-45,y+30,x+t-60,y+25);
line(x+t+45,y+30,x+t+60,y+25);
ellipse(x+t,y+k/3,8,8);
fill(0);
ellipse(x+t-30,y+k/5,p,q);
ellipse(x+t+30,y+k/5,p,q);
fill(255);
line(x+t-20,y+3*k/7,x+t+20,y+3*k/7);
noStroke();
ellipse(x+t-25,y+35,10,10);
ellipse(x+t+35,y+35,10,10);
}
//Global
int x = 10;
int t = 0;
int q = 30;
int f = 0;
void draw(){
background(149,252,255);
drawCartoon(t,x,90,200,150,20,q,f);
q = q-1/6;
f = f+1/2;
if(q < 0){ //เงื่อนไข ถ้า q น้อยกว่า 30 ให้ q = 30
q = 30;
}
if(f > 4){ //เงื่อนไข ถ้า f มากกว่า 4 ให้ f = 0
f = 0;
}
if(x < 290){
x = x+1; //เงื่อนไข ถ้า x น้อยกว่า 290 ให้ x = x+1
}else{
if(t < -280){ //เงื่อนไข ถ้า t น้อยกว่า -280 ให้กลับสู่ค่าเริ่มต้น
t = 0;
x = 10;
}else{
t = t-1; //เงื่อนไข ถ้า t ไม่น้อยกว่า -280 ให้ t = t-1
}
}
}
>.คำสั่งที่ใช้ในการวาดรูป ประกอบด้วย.<
- 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
- 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 คือ จุดปลาย
- arc - คำสั่งวาดเส้นโค้ง (x,y,Rx,Ry,มุมเริ่ม,มุมสุดท้าย)
ค่า x,y คือ ตำแหน่งจุดศูนย์กลางของเส้นโค้ง
Rx,Ry คือ ค่าความยาวของเส้นผ่านศูนย์กลางในแนวแกน x และแกน y ตามลำดับ
มุมเริ่มต้น คือ ค่ามุมเริ่มต้นในการวาด (0-PI,0-PI/2,0,PI/2,PI)
มุมสุดท้าย คือ ค่ามุมสุดท้ายที่เส้นโค้งวาดไปถึง (PI/2,PI,TWO_PI-PI/2,TWO_PI)
ในการวาดจะวนไปตามเข็มนาฬิกา และจะวนจากมุมน้อยไปยังมุมที่มากกว่า โดยเริ่มที่มุม 0 แล้วเวียนตาเข็มนาฬิกา
ดังนั้นในการวาดถ้าต้องการมุมที่น้อยกว่า 0
เช่น จาก TWO_PI-PI/2 (มุม 270) ไป PI/2 เราต้องใช้มุมเริ่มต้นเป็น 0-PI/2 และมุมสุดท้ายเป็น PI
- 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
- if - การใช้เงื่อนไข
ตัวอย่าง int x = 0; //Global variable
void setup(){
ellipse(x,100,50,50);
x = x+1; //กำหนดให้เมื่อวาดรูปแล้วค่า x = x+1 ไปเรื่อยๆ
if(x>100){
x = 0; // เงื่อนไข ถ้า x>100 ค่า x จะเท่ากับ 0
}
}
- background(R,G,B) - กำหนดสีพื้นหลัง ตามค่าสี RGB
- fill(R,G,B)- คำสั่งใส่สีรูปวาดตามค่าสี RGB
- noStroke() - คำสั่งไม่วาดเส้นขอบของรูป
- stroke(R,G,B) - วาดเส้นขอบโดยกหนดสีเส้นตามค่าสี RGB
ไม่มีความคิดเห็น:
แสดงความคิดเห็น