Train[love]

ต่อไปนี้จะเป็นการวาดรูปโดยการใช้ Function เข้าช่วยเหมือนเดิมนะค่ะ แต่ในครั้งนี้เราจะทำให้มัน เคลื่อนที่ได้ เป็นแบบ Animation เล็กๆ น้อย เริ่มกันเลยดีกว่า

// ส่วนนี้จะเป็นการประกาศและกำหนดตัวแปร แบบ Global Variable เพื่อให้ function void draw() และ void drawTrain() มองเห็นตัวแปรนี้ด้วย

int x = 20;

void setup (){

size (600,300);//เป็นคำสั่งที่กำหนด canvas ของภาพนี้ โดย มีการกำหนดค่าโดย size(width,height)

}//การทำงานจะเริ่มที่ฟังก์ชันนี้ก่อนเสมอ โดยฟังก์ชั่นนี้จะประกาศ กำหนด แต่ไม่ต้องเรียกใช้ เพราะจะเรียกใช้เองอัตโนมัติ

void draw (){

background (200,89);//เป็นคำสั่งที่ใช้ในการกำหนดสีของพื้นหลัง(อันนี้เทา) โดยการกำหนดค่าจะเป็น background(R,G,B); โดยมีค่าอยู่ในช่วง 0-255

line(1,255,600,255);//คำสั่งที่ใช้วาดเส้นตรง line(x,y,x,y);

line(1,260,600,260);

drawTrain(x);//เรียกใช้user defined function drawTrain() โดยรับค่า x มาใช้ใน function (แบบ parameter)

x= x + 1;//กำหนดให้ค่า x เพิ่มขึ้น ทีละ 1 ทำให้รถไฟเคลื่อนที่ไปข้างหน้า

}//เป็นส่วนของ function void draw() ฟังก์ชั่นนี้ ก็มีการประกาศ กำหนด แต่ไม่ต้องเรียกใช้ เพราะมันจะเรียกใช้เองโดยอัตโนมัติ เช่นเดียวกับfunction setup

void drawTrain(int x){

fill(2);//เป็นคำสั่งที่ใช่ในการใส่สี สีดำ

ellipse(20+x,250,10,10);//เป็นคำสั่งที่ใช้วาดวงรี ellipse(x,y,w,h);

ellipse(50+x,250,10,10);

fill(698,45,6789);

rect(10+x,200,50,50);//1คำสั่งที่ใช้วาดสี่เหลี่ยม rect(x,y,w,h); คันแรก เริ่มที่ x=10

line(60+x,230,80+x,230);

line(60+x,235,80+x,235);

fill(2);

ellipse(90+x,250,10,10);

ellipse(120+x,250,10,10);

fill(240,60);

rect(80+x,200,50,50);//2 คันที่2 เริ่มที่ 80 จาก (50+10+20) ความกว้าง คัน1+ระยะห่าง+จุดเริ่มต้น

line(130+x,230,150+x,230);

line(130+x,235,150+x,235);

fill(2);

ellipse(160+x,250,10,10);

ellipse(190+x,250,10,10);

fill(698,45,6789);

rect(150+x,200,50,50);//3

line(200+x,230,220+x,230);

line(200+x,235,220+x,235);

fill(2);

ellipse(230+x,250,10,10);

ellipse(260+x,250,10,10);

fill(240,60);

rect(220+x,200,50,50);//4

line(270+x,230,290+x,230);

line(270+x,235,290+x,235);

fill(2);

ellipse(300+x,250,10,10);

ellipse(340+x,250,10,10);

fill(225,170,50);

rect(290+x,190,60,60);//head

fill(300,250,100);

rect(300+x,170,10,20);

fill(240,60);

rect(325+x,205,20,20);//window

fill(2);

rect(300+x,210,20,40);//door

}//เป็นการประกาศและกำหนด user defined function(ฟังก์ชั่นที่ผู้ใช้กำหนดขึ้นเอง) โดยเป็นแบบ function with parameter

หมายเหตุ= ถ้าเรานำตัวแปร x ที่เรากำหนด มา + เพิ่มในตำแหน่ง x ก็จะเคลื่อนที่ไปตามแกน x แต่ถ้าเรานำนำตัวแปร x ที่เรากำหนด มา+ เพิ่มตามแนวแกน y ก็จะทำให้เคลื่อนที่ตามแนวแกน y คือ ขึ้นลงนั้นเอง