mobile Processing.js code
void setup(){
size(500,400);
}
void draw(){
int x = 250; //ประกาศและกำหนดค่าตัวแปร Local int space = 50;
int count = 0;
int n = 5;
int y = 140;
int i = x;
int r = 10;
int c = 340;
background(0);
while(count < n){
stroke(133,239,252);
fill(random(0,139),250,random(0,155));
line(x,0,x,y);
line(i,0,i,y);
drawStar(x,y,10,4);
drawStar(i,y,10,4);
fill(245,250,random(0,222));
drawCircle(x,c,r,3);
drawCircle(i,c,r,3);
c = c-10;
y = y-10;
x = x-space;
i = i+space;
count = count +1; //เพิ่มค่า count = count+1 แล้วกลับไปพิจารณาเงื่อนไขวน loop อีกครั้ง
/* เขียนเป็นลำดับคำสั่งได้เป็น
while(count < n) ---> ..วาด drawStar และ drawCircle เรียกใช้อย่างละ 2 ฟังก์ชันเพราะต้องการภาพ mobile ให้ขึ้นไปทั้งสองข้างตรงนี้ใส่สีรูปวาดเป็น random เพื่อให้สีระยิบระยับวิ๊งๆ..
---> ให้ c ค่า ลดลง (อยู่ในฟังก์ชัน drawCircle) เป็น c = c-10
---> ให้ y ค่าลดลง (อยู่ในฟังก์ชัน drawStar) เป็น y = y-10
---> ให้ x ค่าลดลง (อยู่ในฟังก์ชัน drawStar และ drawCircle) เป็น x = x-space
---> ให้ y ค่าลดลง (อยู่ในฟังก์ชัน drawStar และ drawCircle) เป็น i = i-space
---> ให้ค่า count = count+1 แล้วจากนั้นก็วนไปพิจารณา while(count < n) อีกครั้งถ้าเป็นจริงตามเงื่อนไขก็ทำ loop ต่อ แต่ถ้าไม่ใช่ก็ออก loop ไปทำตามลำดับคำสั่งต่อไป.. */
}
}
void drawStar(int x, int y, int h, int n){ //สร้างฟังก์ชัน drawStar
int count = 0;
while(count < n){
int k = 2*h;
int l = y+80;
strokeWeight(2);
stroke(133,239,252);
line(x,y+2*k/3,x,l);
noStroke();
triangle(x,y,x-2*h/3,y+k,x,y+2*k/3);
triangle(x,y,x+2*h/3,y+k,x,y+2*k/3);
triangle(x,y+2*k/3,x-h,y+k/3,x+h,y+k/3);
h = h+5;
y = y+40;
count = count+1; //เพิ่มค่า count = count+1 แล้วกลับไปพิจารณาเงื่อนไขวน loop อีกครั้ง
/* เขียนเป็นลำดับคำสั่งได้เป็น
while(count < n) ---> ..วาดสามเหลี่ยม (เป็นรูปดาว) ..
---> ให้เพิ่มค่า h = h+10 จะทำให้เมื่อวน loop รอบต่อไปดาวจะใหญ่ขึ้น
---> ให้เพิ่มค่า y = y+10 จะทำให้เมื่อวน loop รอบต่อไปภาพจะขยับลงมาข้างล่าง
---> ให้ค่า count = count+1 แล้วจากนั้นก็วนไปพิจารณา while(count < n) อีกครั้งถ้าเป็นจริงตามเงื่อนไขก็ทำ loop ต่อ แต่ถ้าไม่ใช่ก็ออก loop ไปทำตามลำดับคำสั่งต่อไป.. */
}
}
void drawCircle(int x, int y, int r, int n){ //สร้างฟังก์ชัน drawCircle
int count = 0;
while(count < n){
stroke(0);
ellipse(x,y,r,r);
y = y+10;
r = r+10;
count = count+1; //เพิ่มค่า count = count+1 แล้วกลับไปพิจารณาเงื่อนไขวน loop อีกครั้ง
/* เขียนเป็นลำดับคำสั่งได้เป็น
while(count < n) ---> ..วาดวงกลม..
---> ให้เพิ่มค่า y = y+10 จะทำให้เมื่อวน loop รอบต่อไปภาพจะขยับลงมาข้างล่าง
---> ให้เพิ่มค่า r = r+10 จะทำให้เมื่อวน loop รอบต่อไปวงกลมจะใหญ่ขึ้น
---> ให้ค่า count = count+1 แล้วจากนั้นก็วนไปพิจารณา while(count < n) อีกครั้งถ้าเป็นจริงตามเงื่อนไขก็ทำ loop ต่อ แต่ถ้าไม่ใช่ก็ออก loop ไปทำตามลำดับคำสั่งต่อไป.. */
}
}
>.คำสั่งที่ใช้ในการวาดรูป ประกอบด้วย.<
- ellipse- คำสั่งวาดวงรี (x,y,r,p)
ค่า x,y คือ ค่ากำหนดจุดศูนย์
r คือ ค่าเส้นผ่านศูนย์กลางในแนวแกน x
p คือ ค่าเส้นผ่านศูนย์กลางในแนวแกน y
- Global - เป็นตัวแปรที่กำหนดค่าอยู่นอกฟั
ตัวอย่าง int x = 0; //Global variable
void setup(){
ellipse(x,100,50,50);
x = x+1; //กำหนดให้เมื่อวาดรูปแล้วค่า x = x+1 ไปเรื่อยๆ
}
- random - คือคำสั่งที่ทำให้ค่าเลื่อนที่
เหมือนการสั่น เช่น
fill(random(0,255)); //เป็นการกำหนดค่าให้สี่รู
- void - คำสั่งสร้างฟังก์ชัน
เช่น
void drawCircle(){
...
} ต้องเขียนเรียกใช้
- while(int){...} - คำสั่งวน loop
- void setup(){...} - คำสั่งสร้างฟังก์ชัน ที่เรียกใช้เองไม่ต้องเขียนเรี
- void draw(){...} - คำสั่งสร้างฟังก์ชัน ที่เรียกใช้อัตโนมัติหลัง setup
- background(R,G,B) - กำหนดสีพื้นหลัง ตามค่าสี RGB
- fill(R,G,B)- คำสั่งใส่สีรูปวาดตามค่าสี RGB
- noStroke() - คำสั่งไม่วาดเส้นขอบของรูป
- stroke(R,G,B) - วาดเส้นขอบโดยกำหนดสีเส้นตามค่
- noStroke() - คำสั่งไม่วาดเส้นขอบของรูป
- stroke(R,G,B) - วาดเส้นขอบโดยกำหนดสีเส้นตามค่
ไม่มีความคิดเห็น:
แสดงความคิดเห็น