~ ดอกบัวในแจกัน (มั้ง) นะ ~
Lotus in a Jade Vase Processing.js code
void setup(){
size(300,300);
noStroke();
}
void drawFlower(int x,int y,int l,int h,int p,int r){
//stem
fill(130,252,94);
quad(x-2,y-h,x+2,y-h,x+2,y-h/2,x-2,y-h/2);
quad(x-48,y-h-p/2,x-52,y-h-p/2,x-5,y-h/2,x+2,y-h/2);
quad(x+48,y-h,x+52,y-h,x+5,y-h/2,x-2,y-h/2);
quad(x+2*l-3,y-2*h/3,x+2*l+3,y-2*h/3,x+5,y-h/2,x-3,y-h/2);
quad(x-2*l-3,y-2*h/3,x-2*l+3,y-2*h/3,x+5,y-h/2,x-3,y-h/2);
//vase
fill(27,240,159);
quad(x-l/3,y-h/2,x+l/3,y-h/2,x+l/3,y-2*h/5,x-l/3,y-2*h/5);
quad(x-l/3,y-2*h/5,x+l/3,y-2*h/5,x+l,y-h/4,x-l,y-h/4);
quad(x-l,y-h/4,x+l,y-h/4,x+2*l/5,y+h/2,x-2*l/5,y+h/2);
quad(x-2*l/5,y+h/2,x+2*l/5,y+h/2,x+l/2,y+4*h/7,x-l/2,y+4*h/7);
//Petal
fill(255,178,251);
ellipse(x,y-h,p,p);
triangle(x-p/2,y-h,x+p/2,y-h,x,y-h-p);
ellipse(x-50,y-h-p/2,p+6,p+6);
triangle(x-p/2-50,y-h-p/2,x+p/2-58,y-h-p,x-70,y-h-3*p/2);
ellipse(x+50,y-h,p,p);
triangle(x-p/2+50,y-h-5,x+p/2+50,y-h,x+70,y-h-p);
//leaf
fill(26,184,45);
ellipse(x+2*l,y-2*h/3,r+l/2,r-l/3);
ellipse(x-2*l,y-3*h/4,r+l,r);
}
int y = 450;
void draw(){
background(0);
drawFlower(mouseX,y,40,120,40,50);
y = y-1;
if(y<-100){
y = 450; //เงื่อนไข ถ้า y น้อยกว่า -100 y จะเท่ากับ 450
}
}
>.คำสั่งที่ใช้ในการวาดรูป ประกอบด้วย.<
- 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 ต้องวาดตำแหน่งมุมเรียงเป็นลำดับเวียนตามเข็มหรือทวนเข็มนาฬิกา
- triangle - คำสั่งวาดสามเหลี่ยม (x,y,x1,y1,x2,y2)
ค่า x,y คือ ตำแหน่งมุมของรูปสามเหลี่ยมในแนวแกน x และแกน y ตามลำดับ
x1,y1 คือ ตำแหน่งมุมของรูปสามเหลี่ยมในแนวแกน x และแกน y ตามลำดับ
x2,y2 คือ ตำแหน่งมุมของรูปสามเหลี่ยมในแนวแกน x และแกน y ตามลำดับ
- Global - เป็นตัวแปรที่กำหนดค่าอยู่นอกฟังก์ชัน จะทำให้ภาพเคลื่อนไหวได้เมื่อกำหนดให้ค่าเปลี่ยน
ตัวอย่าง int x = 0; //Global variable
void setup(){
ellipse(x,100,50,50);
x = x+1; //กำหนดให้เมื่อวาดรูปแล้วค่า x = x+1 ไปเรื่อยๆ
}
- Local - ประกาศตัวแปรที่อยู่ในฟังก์ชัน
ตัวอย่าง void draw(){
int x = 100;
ellipse(x,100,50,50);
}
อาจเขียนเป็น
void drawCiecle(int x){
ellipse(x,100,50,50);
}แต่ต้องเขียนเรียกใช้ฟังก์ชัน
- void - คำสั่งสร้างฟังก์ชัน เช่น
void drawCircle(){
....
} ต้องเขียนเรียกใช้
- void setup(){...} - คำสั่งสร้างฟังก์ชัน ที่เรียกใช้เองไม่ต้องเขียนเรียกใช้
- void draw(){...} - คำสั่งสร้างฟังก์ชัน ที่เรียกใช้อัตโนมัติหลัง setup
- mouseX,mouseY - กำหนดค่าตัวแปรตามการเลื่อนเมาส์
ตัวอย่าง void draw(){
int x = mouseX;
int y = mouseY;
ellipse(x,y,50,50);
} //จะได้รูปวงกลมที่เลื่อนไปตามเมาส์ แต่จะมีสีดำตามวงกลมที่เคลื่อน
เราต้องกำหนดสีพื้นหลัง
- 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() - คำสั่งไม่วาดเส้นขอบของรูป
ไม่มีความคิดเห็น:
แสดงความคิดเห็น