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 แต่ในโปรแกรมมีการเรียกใช้ฟังก์ชั่นที่ใช้วาดรูปโต๊ะ