Animation Table

การทำ อะนิเมชั่น โดยใช้ฟังก์ชั่น void draw() 

ตัวอย่างคำสั่งที่ 1

float x,y;
int tableWidth;
int tableHeight;

void setup(){
  size(500,500);
  background(255, 255, 255, 255);
  tableWidth = 200;
  tableHeight = 100;
  
}
void draw(){
  x = 100;
  y = 100;
  line(x,y,x+tableWidth,y);
  line(x+10,y,x+10,y+tableHeight);
  line(tableWidth+x-10,y,tableWidth+x-10,y+tableHeight);
}

    จากตัวอย่างคำสั่งเมื่อมีการรันโปรแกรม จะทำให้ปรากฏรูปโต๊ะ และมีการเพิ่มขึ้นเรื่อยแต่เรามองเป็นแค่รูปเดียวเพราะมีการกำหนดค่า x,y ตายตัว ทำให้เป็นดังรูป

ตัวอย่างคำสั่งที่ 2

float x,y;
int tableWidth;
int tableHeight;

void setup(){
  size(500,500);
  background(255, 255, 255, 255);
  tableWidth = 200;
  tableHeight = 100;
  x = 1;
  y = 1;
  
}
void draw(){
  x = x+50;
  y = x+50;
  line(x,y,x+tableWidth,y);
  line(x+10,y,x+10,y+tableHeight);
  line(tableWidth+x-10,y,tableWidth+x-10,y+tableHeight);
}

    จากตัวอย่างคำสั่งเมื่อมีการรันโปรแกรมแล้ว จะทำให้รูปโต๊ะเกิดขึ้น และเปลี่ยนจุดที่เกิดขึ้นเรื่อยๆ โดย x,y จะเพิ่มขึ้นทีละ 50 และเพิ่มไปเรื่อยดังรูป

ตัวอย่างคำสั่งที่ 3

float x,y;
int tableWidth;
int tableHeight;

void setup(){
  size(500,500);
  background(255, 255, 255, 255);
  tableWidth = 200;
  tableHeight = 100;
  
}
void draw(){
  line(x,y,x+tableWidth,y);
  line(x+10,y,x+10,y+tableHeight);
  line(tableWidth+x-10,y,tableWidth+x-10,y+tableHeight);
  x=random(500);
  y=random(500);
}

จากตัวอย่างคำสั่ง มีการกำหนดให้ x,y เป็นแบบ random เพื่อที่จะทำให้รูปสามารถเปลี่ยนไปได้หลายที่ทั่วหน้าต่างที่กำหนด ดังรูป

ตัวอย่างคำสั่งที่ 4

float x,y;
int tableWidth;
int tableHeight;

void setup(){
  size(500,500);
  background(255, 255, 255, 255);
  frameRate(5);
  tableWidth = 200;
  tableHeight = 100;
  
}
void draw(){
  background(255, 255, 255, 255);
  line(x,y,x+tableWidth,y);
  line(x+10,y,x+10,y+tableHeight);
  line(tableWidth+x-10,y,tableWidth+x-10,y+tableHeight);
  x=random(500);
  y=random(500);
}

    จากตัวอย่างคำสั่งเมื่อมีการรันโปรแกรมแล้ว จะทำให้รูปโต๊ะมีการขยับไปได้หลายๆที่ โดยการ random ของจุด x,y และโต๊ะมีขนาดเท่าเดิม รูปโต๊ะไม่มีการซ้อนกันแบบตัวอย่างคำสั่งที่ 4 เพราะมีการกำหนดค่า background ในฟังก์ชั่น draw และรูปขยับช้าลง เพราะกำหนดค่า frameRate(5); เป็นคำสั่งที่กำหนดให้การเคลื่อนไหวของรูปช้าหรือเร็ว ถ้าใส่ค่ามากก็จะเคลื่อนไหวเร็วมาก ถ้าใส่ค่าน้อยก็จะเคลื่อนไหวช้าลงตามค่าที่กำหนด

ตัวอย่างคำสั่งที่ 5

float x,y;
int tableWidth;
int tableHeight;

void setup(){
  size(500,500);
  background(255, 255, 255, 255);
  frameRate(5);
  tableWidth = 200;
  tableHeight = 100;
  
}
void draw_table(int x,int y){
  line(x,y,x+tableWidth,y);
  line(x+10,y,x+10,y+tableHeight);
  line(tableWidth+x-10,y,tableWidth+x-10,y+tableHeight);
}

void draw(){
  background(255, 255, 255, 255);
  x=random(500);
  y=random(500);
  int newX = int(x);
  int newY = int(y);
  draw_table(newX,newY);
  
}

    จากตัวอย่างคำสั่งเมื่อมีการรันโปรแกรม จะได้ผลลัพธ์เหมือนกับตัวอย่างที่ 4 แต่ในโปรแกรมมีการเรียกใช้ฟังก์ชั่นที่ใช้วาดรูปโต๊ะ

ฟังก์ชั่น

ฟังก์ชั่น (Function) คือ กลุ่มของคำสั่งที่สามารถใช้เพื่อทำงานเฉพาะอย่าง

ประโยชน์ของฟังก์ชั่น

1. ง่ายต่อการตรวจสอบ การอ่าน และแก้ไขข้อบกพร่อง

ตัวอย่างคำสั่ง
    โปรแกรมที่ไม่ได้ใช้ฟังก์ชั่น

background(255, 255, 255, 255);
size(500, 500);
stroke(229, 95, 16);
line(50, 50, 300, 50);
line(50, 250, 300, 250);
line(50, 50, 50, 250);
line(300, 50, 300, 250);
fill(255, 0, 0);
ellipse(100, 100, 20, 20);  
ellipse(150, 180, 20, 20); 
ellipse(200, 200, 20, 20);
fill(16, 229, 49);
ellipse(100, 180, 30, 30);
ellipse(200, 80, 30, 30);
ellipse(250, 200, 30, 30);

รูปตัวอย่าง

    โปรแกรมที่มีการใช้ฟังก์ชั่น

void draw_square(){
  stroke(229,95,16);
  line(50,50,300,50);
  line(50,250,300,250);
  line(50,50,50,250);
  line(300,50,300,250);
} 

void draw_circle(){
  fill(255,0,0); 
  ellipse(100,100,20,20);  
  ellipse(150,180,20,20); 
  ellipse(200,200,20,20);
  fill(16,229,49);
  ellipse(100,180,30,30);
  ellipse(200,80,30,30);
  ellipse(250,200,30,30);
}

void setup(){
  background(255,255,255,255);
  size(500,500);
  draw_square();  
  draw_circle();     
}

รูปตัวอย่าง

     ดังตัวอย่าง โปรแกรมที่ไม่ได้ใช้ฟังก์ชั่น จะมีคำสั่งติดกันลงมาเรื่อยๆ ทำให้ไม่สามารถรู้ได้ว่าโค้ดบรรทัดไหนเริ่มทำงานส่วนไหน อย่างไร และอ่านได้ลำบาก ส่วนโปรแกรมที่มีการใช้ฟังก์ชั่นทำงานนั้น จะมีการตั้งชื่อฟังชั่นเพื่อบอกว่าฟังก์ชั่นไหนทำงานอย่างไร เช่น void draw_square() จากชื่อจะทำให้รู้ว่าน่าจะเป็นการวาดรูปสี่เหลี่ยม และเมื่อเราต้องการที่จะทำการแก้ไขคำสั่งในภายหลังเราก็สามารถกลับมาแก้ไขได้ตรงจุดนั้นได้โดยไม่ต้องนั่งไล่หาที่ละคำสั่ง

2. สามารถเรียกใช้ซ้ำได้หลายครั้ง

ตัวอย่างคำสั่ง

void draw_circle() {
  take_colorRed();
  ellipse(100, 100, 20, 20); 
  take_colorGreen();
  ellipse(150, 180, 20, 20); 
  take_colorRed();
  ellipse(200, 200, 20, 20);
  take_colorGreen();
  ellipse(100, 180, 30, 30);
  ellipse(200, 80, 30, 30);
  take_colorGreen();
  ellipse(250, 200, 30, 30);
}

void take_colorRed() {
  fill(255, 0, 0);
}
void take_colorGreen() {
  fill(16, 229, 49);
}

     จากตัวอย่าง ในฟังก์ชั่น void draw_circle() จะเป็นการวาดวงกลม และได้มีการเรียกใช้ฟังก์ชั่น take_colorRed(); และ take_colorGreen(); ซึ่งสองฟังก์ชั่นนี้เป็นการทำให้วงกลมที่สร้างมีสีแดงและเขียวดังรูป

3. มีการส่งค่าเพื่อใช้ในฟังก์ชั่น

ตัวอย่างคำสั่ง

void draw_table(int width, int height){  
  line(50,50,50+width,50);
  line(60,50,60,50+height);
  line(width+40,50,width+40,50+height);
}

void setup() {
  background(255, 255, 255, 255);
  size(500, 500);
  draw_table(400,50);  
}

    ดังตัวอย่าง เป็นการส่งค่าเพื่อไปใช้ในฟังก์ชั่น เช่นฟังก์ชั่น draw_table(400,50); ฟังก์ชั่นนี้จะเป็นการวาดรูปโต๊ะและมีการส่งค่าไปสองค่า คือ ความกว้างของโต๊ะ (width) และความสูงของโต๊ะ(height) เมื่อมีการเรียกใช้จะทำการวาดเส้นสามเส้นดังรูป

   เมื่อมีการเปลี่ยนค่าที่ส่งเป็ draw_table(200,100); จะได้ดังรูป

ตัวอย่างคำสั่ง

void draw_table(int x, int y, int width, int height){  
  line(x,y,x+width,y);
  line(x+10,y,x+10,y+height);
  line(width+x-10,y,width+x-10,y+height);
}

void setup() {
  background(255, 255, 255, 255);
  size(500, 500);
  draw_table(100,50,200,100);  
}

     จากตัวอย่าง เป็นโปรแกรมที่วาดรูปโต๊ะ และเมื่อเรียกใช้ฟังก์ชั่น draw_table(100,50,200,100);  เป็นกันส่งค่า x,y,width,height จะทำให้รูปโต๊ะเปลี่ยนที่ไปยังตำแหน่ง x y ที่กำหนดมาจะได้ดังรูป

     เมื่อเปลี่ยนค่าที่ส่งเป็น draw_table(200,100,200,100); จะได้ดังรูป

.org .com .ac

      .com ใช้ทำเว็บไซต์ของบริษัท ห้างร้านโดยทั่วไป รวมทั้งเว็บไซต์ส่วนตัว และมีบางครั้งนำไปใช้ทำเว็บไซต์ (web site) ประเภทอื่นๆ ด้วย

     

       .org ใช้ทำเว็บไซต์ของส่วนราชการ องค์กรเอกชนที่ไม่แสวงหาผลกำไร บางครั้งก็มีการจดทะเบียนนำไปใช้กับเว็บไซต์ประเภทอื่นด้วย

        .ac เป็นเวบไซตืของสถานศึกษาต่างๆ ชื่อของโดเมนที่จดทะเบียนต้องเป็นชื่อของสถานศึกษานั้นๆ หรือชื่อย่อของชื่อสถานศึกษา ใช้สำเนาเอกสารการขออนุญาตก่อตั้งสถานศึกษาเป็นหลักฐาน

ที่มา : http://domain-name.gict.co.th/

วาดรูปโดยใช้ processing

รูปกีฬา - ไม้แบตมินตัน

ตัวอย่างคำสั่ง

size(200, 400);  
background(255, 255, 255);
stroke(3);
fill(0,0,0);
ellipse(100,100,120,150);
fill(255,255,255);
ellipse(100,100,110,140);

line(65,40,130,40);
line(55,50,140,50);
line(50,60,150,60);
line(45,70,155,70);
line(42,80,158,80);
line(41,90,159,90);
line(40,100,160,100);
line(41,110,159,110);
line(42,120,158,120);
line(45,130,155,130);
line(50,140,150,140);
line(55,150,140,150);
line(65,160,130,160);

line(50,70,50,130);
line(55,60,55,140);
line(60,50,60,150);
line(65,40,65,160);
line(70,35,70,165);
line(75,33,75,168);
line(80,30,80,170);
line(85,28,85,173);
line(90,26,90,171);
line(95,25,95,170);
line(100,25,100,170);
line(105,26,105,171);
line(110,28,110,173);
line(115,30,115,170);
line(120,33,120,168);
line(125,35,125,165);
line(130,40,130,160);
line(135,45,135,162);
line(140,50,140,150);
line(145,60,145,140);
line(150,70,150,130);

line(100,170,100,300);
line(105,170,105,300);
line(95,300,95,350);
line(110,300,110,350);
line(95,300,110,300);
line(95,350,110,350);

รูปดนตรี -แคน

ตัวอย่างคำสั่ง

size(500,500);
background(255,255,255);
line(150,200,150,400);
line(155,200,155,400);
ellipse(153,200,5,5);
ellipse(153,400,5,5);
line(155,170,155,400);
line(160,170,160,400);
ellipse(158,170,5,5);
ellipse(158,400,5,5);
line(160,140,160,400);
line(165,140,165,400);
ellipse(163,140,5,5);
ellipse(163,400,5,5);
line(165,110,165,400);
line(170,110,170,400);
ellipse(168,110,5,5);
ellipse(168,400,5,5);
line(170,80,170,400);
line(175,80,175,400);
ellipse(173,80,5,5);
ellipse(173,400,5,5);
line(175,50,175,400);
line(180,50,180,400);
ellipse(178,50,5,5);
ellipse(178,400,5,5);
line(180,30,180,400);
line(185,30,185,400);
ellipse(183,30,5,5);
ellipse(183,400,5,5);
ellipse(170,300,50,20);

รูปศิลปะ - โดเรมอน

ตัวอย่างคำสั่ง

size(300,300);
background(255,255,255);
fill(44,109,245);
ellipse(150,150,150,160);
fill(255,255,255);
ellipse(150,165,120,130);
ellipse(167,108,38,50);
ellipse(129,108,38,50);
fill(0,0,0);
ellipse(135,120,8,8);
ellipse(160,120,8,8);

fill(255 ,0 ,0);
ellipse(148,130,15,15);

stroke(50);
line(148,138,148,200);

line(140,160,100,145);
line(140,165,100,165);
line(140,170,100,185);
line(156,160,200,145);
line(156,165,200,165);
line(156,170,200,185);
stroke(50);
line(100,180,148,200);
line(200,180,148,200);