ART:Arts of SHAPE & FORM(เปลี่ยนสีพื้นหลังโดยเลื่อนเมาส์)

ART

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

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

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

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

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

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

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

arc เป็นการวาดส่วนโค้งของทรงกลม (x,y,ความกว้าง,ความสูง,มุมเริ่มต้น, มุมสิ้นสุด) โดย x,y คือจุดศูนย์กลางของวงกลม และมุมจะกำหนดในค่าของ PI=180 องศา TWO_PI=360 องศา 0=0องศา

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

triangle เป็นการวาดรูปสามเหลี่ยมที่กำหนดจุดทั้งสามจุด(x1y1x2,y2,x3,y3)

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

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

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

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

void setup() {//มีการเรียกใช้ฟังก์ชั่นและคำสั่งภายในโดยอัตโนมัติ เราไม่ต้องเรียกใช้อีก

size(300, 300);

}

void draw () {

//เปลี่ยนสี background

background (53,mouseX,mouseY);//จะเปลี่ยนสีเมื่อเลื่อนเมาส์ไปมา โดยการกำหนด(mouseX)เปลี่ยนสีเมื่อ มีการเลื่อนเมาส์ไปตามแนวแกน X และ(mouseY)เปลี่ยนสีเมื่อมีการเลื่อนเมาส์ไปตามแนวแกน Y

//รูปทรงกระบอก

int x;//การประกาศ

x=220;//กำหนด

int y=70;//ประกาศพร้อมกำหนด

int d=y-10;//ประกาศพร้อมกำหนด(เส้นผ่านศูนย์กลางของรัศมี) ข้อสังเกตเราสามารถกำหนด y-10 ได้เลยเพราะเราได้ประกาศและกำหนดค่า y เอาไว้แล้วโดยจะดึงเอาค่า y ที่ได้ประกาศและกำหนดไว้มาคำนวณให้เราไปในตัวเพื่อที่เรานำค่านั้นไปใช้ได้เลย

rect(x,y,d,90); //การเรียกใช้

ellipse(x+30,y,d,5); //การเรียกใช้ ข้อสังเกต x+30 ใช้ได้เพราะได้ประกาศและกำหนดตัวแปรเอาไว้แล้ว โดยจะทำการดึงเอาค่าที่ได้ประกาศและกำหนดนั้นมาใช้และคำนวณให้เราไปด้วยในตัว

arc(x+30,y+90,d,15,0,PI);//ข้อสังเกต PI ไม่ได้ประกาศและกำหนดเอามาใช้ได้อย่างไร นำมาใช้ได้PIมีค่าในตัวของมันอยู่แล้ว(system variable)

rect(x-20,y+50,d,75);

ellipse(x+30-20,y+50,d,12);

arc(x+30-20,y+50+75,d,20,0,PI);

//กล่องสี่เหลี่ยมและสามเหลี่ยมที่ซ้อนกันอยู่

int x1=x-140;//80

int x2=x1+60;//140

int y1=y+50;//120

int y2=y+35;//105

int y3=y2+95;//200

int y4=y1+100;//220

//กล่องสี่เหลี่ยม

quad(x1,y1,x2,y2,x2,y3,x1,y4);//รูปสี่เหลี่ยมด้านหน้าสุดที่ติดกับทรงกรวย โดยเริ่มจากมุมบนซ้ายไปบนขวาไปล่างขวาและไปล่างขวา

quad(x1,y1,x2,y2,x2-65,y2-25,x1-60,y1-30);//รูปสี่เหลี่ยมด้านบน โดยเริ่มจากการกำหนดจุดล่างซ้ายไปล่างขวาไปบนขวาและไปบนซ้าย

quad(x1-60,y1-30,x1,y1,x1,y4,x1-60,y4-50);//รูปสี่เหลี่ยมด้านข้างที่ถูสามเหลี่ยมทับ โดยเริ่มจากการกำหนดจุดบนซ้ายไปบนขวาไปล่างขวาและไปล่างซ้ายของรูป

//กล่องสามเหลี่ยม

quad(x1,y1+10,x1,y4-30,x1-30,y4-30+10,x1-30,y1+15);//รูปสี่เหลี่ยมด้านหน้าโดยเริ่มจากการกำหนดจุดบนขวาไปล่างขวาไปล่างซ้ายและไปบนซ้ายของรูป

quad(x1,y1+10,x1-30,y1+15,x1-75,y1-10,x1-50,y1-15);//รูปสี่เหลี่ยมด้านบนโดยเริ่มจากการกำหนดจุดล่างขวาไปบนขวาไปบนซ้ายและไปล่างซ้ายของรูป

triangle(x1-75,y1-10,x1-30,y4-30+10,x1-30,y1+15);//รูปสามเหลี่ยมโดยเริ่มจากการกำหนดจุดบนซ้ายไปล่างขวาและไปบนขวา

//รูปทรงกลม

int r=65;//ประกาศและกำหนดตัวแปร r

ellipse(x1,y1-50,r,r);//

//รูปทรงกรวย

triangle(x+20,y+50+85,x+20-120,y+50+85,x+20-60,y+15);//รูปสามเหลี่ยมโดยเริ่มจากการกำหนดจุดล่างขวาไปบนและไปล่างซ้าย

arc(x+20-60,y+50+84,2*d,50,0,PI);//ส่วนของเส้นโค้ง

}