ในหน้านี้ถ้ามีใจก็สามารถช่วยสนับสนุนเงินทองกันได้ครับ ถ้ายังไม่สะดวกก็เลือก No Donation แล้วก็กด Download ได้เลย
การสนับสนุนก็สามารถทำได้ตลอดนะครับ ใช้ดีก็ช่วยๆกันหน่อย จะได้มีแรงมาทำงานดีๆให้เราได้ใช้กัน
เลือกตามนี่ครับ ใช้รุ่น 2.0.3 ตอนนี้รุ่นที่สูงกว่าไม่แนะนำ ยังพบปัญหาตอนใช้ Android mode
ไฟล์ที่ได้ไม่จำเป็นต้องติดตั้งครับ แตกไฟล์แล้วก็วางในที่ที่ต้องการได้เลย ส่วนตัวของผมจะสร้างโฟลเดอร์ขึ้นเพื่อเก็บทั้งตัวโปรแกรม ซอร์สโค๊ดไว้ในที่เดียวกัน อันนี้แล้วแต่สะดวกครับ
เปิดโปรแกรมได้เลยครับ จะเห็นหน้าต่างคุ้นๆ เหมือน Arduino เป๊ะ
เอาหละเริ่มต้นเขียนโปรแกรมเลย ผมยังไม่อธิบายส่วนอื่นๆ อยากให้เห็นว่ามันทำงานยังไงก่อน พิมพ์ตามนี้เลยครับ
void setup(){
size(400,400);
}
void draw(){
background(128);
stroke(color(255,128,0));
strokeWeight(5);
rect(150,150,100,100,5);
}
ตัวอักษรเล็กใหญ่ตามนั้นเลยนะครับ
ดูแล้วเหมือนตอนเขียนโปรแกรม Arduino นะ ต่างกันตรงที่จาก loop() มาใช้คำว่า draw() แทน การทำงานมันก็จะวนทำจากบรรทัดแรกถึงบรรทัดสุดท้ายแล้วก็วนกลับไปทำบรรทัดแรก
ส่วนของ setup() ก็เป็นการเตรียมการ ในที่นี้เป็นการเตรียมหน้าต่างขนาดกว้าง 400 สูง 400
กดปุ่ม Run ได้เลย ปุ่มเดียวกับใน Arduino นั่นแหละ
จะได้หน้าต่างขนาด 400 x 400
พื้นหลังสีเทาจากคำสั่ง background(128) จริงแล้วในวงเล็บสามารถใช้คำสั่ง color(r,g,b) ได้ โดยที่ r คือ ระดับของสีแดง g ตือระดับของสีเขียว และ b คือระดับของสีน้ำเงิน ดูตัวอย่างใน stroke ได้ครับ
stroke เป็นการกำหนดสีของเส้นขอบ จริงแล้วจะกำหนดของอะไรก็แล้วแต่ที่มีเส้น เช่น เส้นตรง เส้นรอบรูปวงกลม ในที่นี้กำหนดเป็นสีส้ม ก็เกิดจากการผสมสีแดงขนาด 255 สีเหลืองขนาด 128 และไม่ใช้สีน้ำเงิน อันนี้ทดลองเปลี่ยนดูเองได้ครับ
strokeWeight เป็นการกำหนดน้ำหนักหรือขนาดของเส้น ในที่นี้กำหนดให้เท่ากับ 5
เมื่อกำหนดองค์ประกอบแล้วก็วาดรูปสี่เหลี่ยม โดยตัวแปรไล่ไปตามลำดับตามนี้
ตำแหน่งมุมซ้ายบน x = 150, y = 150
ขนาดกว้าง 100 และ สูง 100
ความมนของมุมเท่ากับ 5
rect(x,y,width,height,radius)
ทดลองเปลี่ยนค่าตามชอบใจได้เลย
ทีนี้ลองมาทำอะไรให้มันรู้ถึงความสามารถของ Processing กันสักตัวอย่างนึง
ก่อนอื่นต้องรู้คำสั่งเพิ่มเติมกันอีกนิด ได้แก่ mouseX และ mouseY ทั้งสองคำสั่งเป็นการอ่านค่าปัจจุบันของตำแหน่งที่ mouse อยู่ เราจะเอาทั้งสองคำสั่งไปใส่ไว้ในคำสั่ง rect ตามนี้
rect(mouseX, mouseY, 100, 100, 5);
ลองดูครับว่าจะมีอะไรเกิดขึ้น
ครับเมื่อ draw() วนกลับมาก็จะอ่านค่าตำแหน่งของ mouse แล้วก็จะนำมาใช้เป็นค่าตำแหน่งของรูปสี่เหลี่ยม ทีนี้จะเกิดอะไรขึ้นถ้าลองใส่ comment ที่คำสั่ง background(128);
// background(128);
สิ่งที่เกิดขึ้นก็คือมีรูปสี่เหลี่ยมเต็มไปหมด ก็เพราะว่าไม่ได้ทำการเคลียร์หน้าจอนั่นเอง
ทีนี้อยากให้ใช้คำสั่งอื่น เพิ่มเข้าไป เช่น line, elipse โดยคำสั่งเป็นตามนี้
line(x1, y1, x2, y2);
x1,y1 ตำแหน่งมุมบนซ้าย และ x2,y2 ตำแหน่งมุมล่างขวา
ellipse(x,y,width,height);
ค่าตัวแปรเหมือนกับคำสั่ง rect
เรื่องของ Processing เบื้องต้น ขอเป็นเท่านี้ก่อน อยากให้ทดลองทำดูให้คุ้นชินก่อน ค่อยใส่ตัวช่วยอื่นต่อ แล้วพบกันครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น