SPORT:Shooting action

คำอธิบาย

size ใช้ในการกำหนดขนาดของ Canvas (กว้างxยาว)หากไม่กำหนด Canvas จะมีขนาด100x100

background เป็นการกำหนดสึของพื้นหลัง

fill เป็นการกำหนดสีของรูปที่เราวาด

stroke เป็นการกำหนดสีของเส้น

strokeWeight เป็นการกำหนดขนาดของเส้น

int … เป็นการประกาศตัวแปร[x, y,หรือ r] เพื่อที่จะกำหนดและเรียกใช้ต่อไป

-การกำหนด = ค่าที่กำหนด เรียกว่า literal เป็นค่าที่ไม่ใช่ตัวแปร สามารถนำไปใช้ได้ในทันที Ex. 10,20, 20+30 โดยที่ค้าข้างขวาจะเป็นตัวกำหนดตัวแปรข้างซ้าย

-การเรียกใช้ = จะทำโดยการนำเอาตัวแปรที่ประกาศและกำหนดนั้นไปไว้ตรงบริเวณที่ต้องการ

rect เป็นการวาดรูปสี่เหลี่ยมมุมฉากที่กำหนด มุมเพียงจุดเดียว ความกว้างและความยาว

ellipse เป็นการวาดรูปวงกลมวงรีที่ต้องกำหนด(x,y,ความกว้างม,ความยาว)โดย x,y คือจุดศูนย์กลางของวงกลม

quad เป็นการวาดที่สามารถกำหนดมุมได้สี่มุมโดยกำหนดเป็นจุด x,y (x1,y1,x2,y2,x3,y3,x4,y4)โดยการกำหนดจุดนั้นจะกระทำโดยการเวียนในทิศตามเข็นหรือทวนเข็มนาฬิกา

void setup เป็นฟังก์ชันในการประกาศ กำหนดค่า และเป็นสำหรับพื้นฐาน animation มีการเรียกใช้โดยอัตโนมัติ เราไม่ต้องมีการเรียกใช้อีกและยังเป็นฟังก์ชั่นที่จะทำงานก่อนฟังก์ชั่นอื่นๆเสมอไม่ว่าจะวางไว้บนสุดหรือล่างสุดก็จะทำงานก่อนเป็นอันดับเเรก

void draw เป็นฟังก์ชั่นอัตโนมัติที่ไม่ต้องมีการเรียกใช้ จะทำงานซ้ำๆตามที่ได้ให้ค่าเอาไว้

mouseX คือ ตัวแปรที่มีอยู่ในระบบอยู่แล้ว ที่ระบุตำแหน่งของเมาส์ตามแนวแกน X

mouseY คือ ตัวแปรที่มีอยู่ในระบบอยู่แล้ว ที่ระบุตำแหน่งของเมาส์ตามแนวแกน Y

void setup(){//void setup เป็นฟังก์ชันในการประกาศ กำหนดค่า และเป็นสำหรับพื้นฐาน animation มีการเรียกใช้โดยอัตโนมัติ เราไม่ต้องมีการเรียกใช้อีกและยังเป็นฟังก์ชั่นที่จะทำงานก่อนฟังก์ชั่นอื่นๆเสมอไม่ว่าจะวางไว้บนสุดหรือล่างสุดก็จะทำงานก่อนเป็นอันดับเเรก

size(300,300);//ขนาดของ canvas

}

void draw(){//void draw เป็นฟังก์ชั่นอัตโนมัติที่ไม่ต้องมีการเรียกใช้ จะทำงานซ้ำๆตามที่ได้ให้ค่าเอาไว้

background(0);//พื้นหลังมีสีดำ

int x=175;//กำหนดจุด x ตามแนวแกน x

int y=130;//กำหนดจุด y ตามแนวแกน y

int r=235;//กำหนดค่าความกว้างความสูงของวงกลม

//เป้ายิงปืน

ellipse(x+mouseX,y+mouseY,r,r);//วงกลมสีขาวด้านนอกสุด

ellipse(x+mouseX,y+mouseY,r-25,r-25);//วงกลมสีขาวตรงกลาง

ellipse(x+mouseX,y+mouseY,r-50,r-50);//วงกลมสีขาวที่ติดกับวงกลมสีดำ

fill(0);//กำหนดเพื่อให้ได้รูปสีดำ

stroke(153);//กำหนดเพื่อให้เส้นของรูปมีสีเทา

ellipse(x+mouseX,y+mouseY,r-75,r-75);//วงกลมสีดำวงนอกสุด

ellipse(x+mouseX,y+mouseY,r-100,r-100);//วงกลมสีเทาถัดเข้าไป

ellipse(x+mouseX,y+mouseY,r-125,r-125);//วงกลมสีเทาถัดเข้าไป

ellipse(x+mouseX,y+mouseY,r-150,r-150);//วงกลมสีเทาถัดเข้าไป

ellipse(x+mouseX,y+mouseY,r-175,r-175);//วงกลมสีดำวงสุดท้าย

fill(255,5,5);//กำหนดเพื่อให้ได้รูปเป็นสีแดง

ellipse(x+mouseX,y+mouseY,r-200,r-200);

ellipse(x+mouseX,y+mouseY,r-232,r-232);

//จะเปลี่ยนตำแหน่งเมื่อเลื่อนเมาส์ซ้ายขวาและขึ้นลง โดยการกำหนด(mouseX)จะเปลี่ยนตำแหน่งไปตามแนวแกนX เมื่อมีการเลื่อนเมาส์ไปตามแนวแกน X และ(mouseY)จะเปลี่ยนตำแหน่งไปตามแนวแกน y เมื่อมีการเลื่อนเมาส์ไปตามแนวแกน Y โดยบวกเพิ่มจากจุดแกนที่ได้ประกาศและกำหนดเอาไว้ใน int

//ด้ามปืนและที่ลั่นไกปืน

int x1=240;

int y1=195;

int x2=y1;

int y2=x2;

int x4=220;

int y3=100;

int y4=y3;

int x3=175;

fill(80,75,75);//สีเทา

quad(x3-50,y3,x3,y3,x3+20,y3+40,x3-30,y3+40);//ที่ลั่นไกปืนสีเทา

quad(x1,y1,x2,y2,x3,y3,x4,y4);//ด้ามปืนสีเทา

fill(0);//สีดำ

quad(x1,y1,x2+8,y2,x3+8,y3,x4,y4);//ด้ามปืนสีดำ

quad(x3-45,y3,x3-3,y3,x3+8,y3+35,x3-25,y3+35);//ที่ลั่นไกปืนสีดำ

//body ของปืน

int X=50;

int Y=60;

int h=50;

int w=185;

fill(186,180,181);//สีเทาอ่อน

rect(X,Y,w,h);//bodyสีเทาอ่อน

fill(0);//สีดำ

rect(X,Y+25,w,h-25);//bodyสีดำ

rect(X,Y,-w+160,h-30);//ปากกระบอกปืน

fill(80,75,75);//สีเทาเข้ม

rect(X,Y+20,w-120,h-20);//อยู่ใกล้ๆกับปากกระบอกปืน

//text

strokeWeight(5);//ขนาดของตัวอักษร

line(20,255,35,250);

line(20,255,35,265);

line(35,265,10,285);

fill(250);//กำหนดสีของภาพที่วาด

ellipse(random(0,250),random(0,250),25,25);//random เป็นสุ่มเอาอย่างใดอย่างหนึ่ง ในที่นี้ใช้ random ในการกำหนดตำแหน่ง x และ y โดยจำกัดขอบเขตการสุ่มอยู่ที่ 0 ถึง 250

}