~ เป่าขลุ่ยให้ตัวเพลงฟัง T^T ~
My Pipe Processing.js code
void setup(){ size(300,300);
}
int y = -20; //ตัวแปร Global
int x = -20;
void draw(){
int r = 7; //ตัวแปร Local
background(234,254,255);
strokeWeight(2);
fill(255,153,85);
rect(25,25,250,250);
drawPipe(x,y,r,170);
drawBoom(x,r,y+100);
y = y+1/3; //กำหนดให้ตัวแปร y = y+1/3 บวกเพิ่มไปเรื่อยๆ
x = x+1/3; //กำหนดให้ตัวแปร x = x+1/3 บวกเพิ่มไปเรื่อยๆ
if(x>150){
x = 150; //เงื่อนไข ถ้า x มากกว่า 150 ให้ x = 150
}
if(y>130){
y = 130; //เงื่อนไข ถ้า y มากกว่า 130 ให้ y = 130
}
}
void drawBoom(int x, int r,int s){
//boom
strokeWeight(random(3,4));
fill(255,232,random(0,255));
triangle(x,s,x-r*3/2,s+r*4,x+r*3/2,s+r*4);
triangle(x-5,s-r,x-5*r,s-5,x-r*4,s+r*3/2);
triangle(x+5,s-r,x+r*5,s-5,x+r*4,s+3*r/2);
}
void drawPipe(int x, int y, int r, int h){
int q = 15;
//pipe
strokeWeight(3);
fill(44,232,165);
quad(x-3*r/2,y-h/2,x+3*r/2,y-h/2,x+3*r/2,y+h/2,x-3*r/2,y+h/2);
ellipse(x,y-h/2,3*r,r);
strokeWeight(2);
fill(132,242,181);
ellipse(x,y-4*q,r,r);
ellipse(x,y-3*q,r,r);
ellipse(x,y-2*q,r,r);
ellipse(x,y-q,r,r);
ellipse(x,y,r,r);
ellipse(x,y+q,r,r);
ellipse(x,y+q*2,r,r);
ellipse(x,y+4*q,r,r);
}
>.คำสั่งที่ใช้ในการวาดรูป ประกอบด้วย.<
- line - คำสั่งวาดเส้น (x,y,x1,y1)
ค่า x,y คือ จุดเริ่มต้น
x1,y1 คือ จุดปลาย
- ellipse- คำสั่งวาดวงรี (x,y,r,p)
ค่า x,y คือ ค่ากำหนดจุดศูนย์
r คือ ค่าเส้นผ่านศูนย์กลางในแนวแกน x
p คือ ค่าเส้นผ่านศูนย์กลางในแนวแกน y
- rect - คำสั่งวาดสี่เหลี่ยมผืนผ้า (x,y,l,w)
ค่า x,y คือ ตำแหน่งจุดเริ่มวาดรูป จะเป็นมุมบนขวาของรูปสี่เลี่
l คือ ค่าความยาวของรูสี่เหลี่
w คือ ค่าความกว้างของรูปสี่เหลี่
- quad - คำสั่งวาดรูปสี่เหลี่ยม (x,y,x1,y1,x2,y2,x3,y3)
ค่า x,y คือ ตำแหน่งมุมบนรูปสี่เหลี่
x1,y1 คือ ตำแหน่งมุมที่สองบนรูปสี่เหลี่
x2,y2 คือ ตำแหน่งมุมที่สามบนรูปสี่เหลี่
x3,y3 คือ ตำแหน่งมุมที่สี่บนรูปสี่เหลี่
ในการใน quad ต้องวาดตำแหน่งมุมเรียงเป็นลำดั
- triangle - คำสั่งวาดสามมเหลี่ยม (x,y,x1,y1,x2,y2)
ค่า x,y คือ ตำแหน่งมุมของรูปสามเหลี่
x1,y1 คือ ตำแหน่งมุมของรูปสามเหลี่
x2,y2 คือ ตำแหน่งมุมของรูปสามเหลี่
- strokeWeight(x)- วาดเส้นหนาโดยใส่ค่าลงไปแทนค่า x
- 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
- random - คือคำสั่งที่ทำให้ค่าเลื่อนที่
เหมือนการสั่น เช่น
ellipse(90,90,random(9,20),
เปลี่ยนค่าไปมาระหว่าง 9-20 เกิดเป็นการสั่นในแนวแกน x
fill(random(255,0)); //เป็นการกำหนดค่าให้สี่รู
- 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
}
}
- if,else - เป็นการสร้างเงื่อนไขแบบให้เลื
ตัวอย่าง int x = 10; //Global variable
int u = 0;
void setup(){
size(200,200);
ellipse(x+u,100,50,50);
if(x < 190){
x = x+1; // เงื่อนไข ถ้า x น้อยกว่า 200 ให้ x = x+1
}else{
if(u < -180){ // เงื่อนไข ถ้า x น้อยกว่า -180 ให้กลับสู่ค่าเริ่มต้น
x = 10;
u = 0;
}else{
u = u-1; // เงื่อนไข ถ้า x ไม่น้อยกว่า -180 ให้ u = u-1
}
}
}
- background(R,G,B) - กำหนดสีพื้นหลัง ตามค่าสี RGB
- background(R,G,B) - กำหนดสีพื้นหลัง ตามค่าสี RGB
- strokeWeight(x)- วาดเส้นหนาโดยใส่ค่าลงไปแทนค่า x
- fill(R,G,B)- คำสั่งใส่สีรูปวาดตามค่าสี RGB
ไม่มีความคิดเห็น:
แสดงความคิดเห็น