~ แห่เทียนเข้าพรรษา ~
Candle Festival Processing.js code
//big candle used in the temple during the raining season
void setup(){ //กำหนดขนาด โดยฟังก์ชัน
size(400,300);
}
//กำหนดตัวแปร Global
int x = 400;
int q = 0;
int i = -20;
void draw(){ //ฟังก์ชันวาด
background(206,250,255); //สีพื้นหลัง
drawTree(60,130,40); //เรียกใช้ฟังก์ชันต้นไม้
drawTree(30,200,20);
drawTree(80,200,30);
drawTree(350,200,30);
drawTree(330,160,30);
noStroke(); //ไม่ใส่เส้นขอบ
drawSky(i,50,30); //เรียกใช้ฟังก์ชันก้อนเมฆและดวงอาทิตย์
drawCar(x,220,70,q); //เรียกใช้ฟังก์ชันรถแห่เทียน
i = i+1/30;
if(i>100){ //ในฟังก์ชัน drawSky เงื่อนไข ถ้า i มากกว่า 100 ให้ i = i+1/30
i = -20;
}
q = q+1/2; //ในฟังก์ชัน drawCar int q กำหนดรัศมีควันรถ
if(q>20){ //ในฟังก์ชัน drawCar เงื่อนไข ถ้า q มากกว่า 20 ให้ q = 0
q = 0;
}
x = x-1/3; //ในฟังก์ชัน drawCar int x กำหนดค่า x ทำให้รถเคลื่อน
if(x<-200){ //ในฟังก์ชัน drawCar เงื่อนไข ถ้า x น้อยกว่า -200 ให้ x = 500
x = 500;
}
}
void drawTree(int a, int b, int c){ //กำหนดตัวแแปรใน ฟังก์ชัน drawTree
stroke(162,100,41); //ใส่สีเส้นขอบ
strokeWeight(5); //กำหนดค่าขนาดเส้นขอบ เส้นขอบหนา
line(a,b,a,255); //วาดเส้น
strokeWeight(2); //กำหนดค่าขนาดเส้นขอบ
stroke(26,129,40);
fill(56,201,55); //ใส่สีรูปวาด
ellipse(a,b-c/2,c+c/5,5*c/3); //วงรี
ellipse(a-c/4,b,c,3*c/2);
ellipse(a+c/4,b,c,3*c/2);
rect(0,255,400,60); //วาดสี่เหลี่ยมผืนผ้า
}
void drawSky(int i, int j, int k){
fill(255,15,23);
ellipse(i+k*6,j-k/2,2*k,2*k);
fill(76,99,214);
ellipse(i,j,k,2*k/3);
ellipse(i+k/2,j-k/2,2*k,k);
ellipse(i+k*4,j+k/4,k,2*k/3);
ellipse(i+k*5,j-k/3,2*k,k);
ellipse(i+k*6,j+k/2,2*k,k);
ellipse(i+k*10,j+k/4,k,2*k/3);
ellipse(i+k*12,j-k/5,2*k,k);
ellipse(i+k*11,j+k/2,2*k,k);
}
void drawCar(int x, int y, int r, int q){ //กำหนดตัวแแปรใน ฟังก์ชัน drawCar
int z = y-7*r/4; //กำหนดตัวแแปร local
drawCandle(x,y,r); //เรียกฟังก์ชัน drawCandle
noStroke(); //ไม่ใส่เส้นขอบ
fill(88);
rect(x+7*r/3,y-r/7,r/4,r/8);
ellipse(x+8*r/3,y,q/2,q/2);
ellipse(x+3*r,y-r/8,q,q);
fill(214,28,28);
quad(x-r/4,z,x+r,z,x+r,y-r,x-r/2,y-r); //วาดสี่เหลี่ยมกำหนดค่าสี่มุม
rect(x-r,y-r,7*r/2,r);
fill(200);
rect(x,y-3*r/2,2*r/3,5*r/6);
fill(255,255,64);
rect(x-r,y-2*r/3,r/4,r/4);
strokeWeight(2);
drawCircle(x,y,r); //เรียกฟังก์ชัน drawCircle
drawCircle(x+3*r/2,y,r); //เรียกฟังก์ชัน drawCircle
drawFlower(x,y,r); //เรียกฟังก์ชัน drawFlower
}
void drawCandle(int x, int y, int r){ //กำหนดตัวแแปรใน ฟังก์ชัน drawCandle
int z = y-7*r/4; //กำหนดตัวแแปร local
stroke(255,194,64);
strokeWeight(20);
line(x+5*r/3,z-r/3,x+5*r/3,y-r);
strokeWeight(2);
fill(255,44,64);
line(x+5*r/3,z-2*r/3,x+5*r/3,y-r);
noStroke();
ellipse(x+5*r/3,z-2*r/3,random(15,16),random(17,23));
}
void drawCircle(int x, int y, int r){ //กำหนดตัวแแปรใน ฟังก์ชัน drawCircle
fill(0);
ellipse(x,y,r,r);
fill(111);
ellipse(random(x-1,x+1),y,2*r/3,2*r/3);
}
void drawFlower(int x, int y, int r){ //กำหนดตัวแแปรใน ฟังก์ชัน drawFlower
int p = 20; //กำหนดตัวแแปร local
fill(245,120,252); //Flower 1
ellipse(x+r,y-r,p,p);
ellipse(x+r+p,y-r,p,p);
ellipse(x+r+p/2,y-r-p/2,p,p);
ellipse(x+r+p/2,y-r+p/2,p,p);
fill(255,255,64);
ellipse(x+r+p/2,y-r,p,p);
fill(245,120,252); //Flower 2
ellipse(x+5*r/3,y-r,p/2,p/2);
ellipse(x+5*r/3+p,y-r,p/2,p/2);
ellipse(x+5*r/3+p/2,y-r-p/2,p/2,p/2);
ellipse(x+5*r/3+p/2,y-r+p/2,p/2,p/2);
fill(255,255,64);
ellipse(x+5*r/3+p/2,y-r,p/2,p/2);
fill(245,120,252); //Flower 3
ellipse(x+7*r/3,y-r,p,p);
ellipse(x+7*r/3+p,y-r,p,p);
ellipse(x+7*r/3+p/2,y-r-p/2,p,p);
ellipse(x+7*r/3+p/2,y-r+p/2,p,p);
fill(255,255,64);
ellipse(x+7*r/3+p/2,y-r,p,p);
}
>.คำสั่งที่ใช้ในการวาดรูป ประกอบด้วย.<
- line - คำสั่งวาดเส้น (x,y,x1,y1)
ค่า x,y คือ จุดเริ่มต้น
x1,y1 คือ จุดปลาย
- 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 ต้องวาดตำแหน่งมุมเรียงเป็นลำดับเวียนตามเข็มหรือทวนเข็มนาฬิกา
- 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
- strokeWeight(x)- วาดเส้นหนาโดยใส่ค่าลงไปแทนค่า x
ไม่มีความคิดเห็น:
แสดงความคิดเห็น