Button

Warning Button

สำหรับเรื่องนี้ เป็นการสร้างปุ่มสำหรับการกด เมื่อกดปุ่มเหล่านี้แล้วจะมีข้อความที่ซ่อนไว้ปรากฎออกมา กำหนดให้กดได้เพียงทีละหนึ่งปุ่ม ในการสร้างปุ่มเหล่านี้ จำเป็นต้องสร้างฟังก์ชั่น และ class ไปพร้อมกัน สำหรับเรื่องนี้ ไม่จำเป็นต้องมีการกำหนดเงื่อนไข โดยปกติแล้ว นิยมกำหนดฟังก์ชั่นสำหรับการสร้างปุ่มเหล่านี้ไว้ใน setup ซึ่งเป็นฟังก์ชั่นที่ใช้ในการเรียกใช้และกำหนดค่า และต้องกำหนดตัวแปรที่ใช้ในการเก็บค่า และกำหนดปุ่ม พร้อมชื่อของปุ่ม ลักษณะของปุ่มสามารถกำหนดได้ตามใจชอบ และข้อความที่เลือกนั้นก็เช่นกัน ก่อนเรียกใช้งาน ต้องมีการกำหนดฟังก์ชั่นที่จะเรียกใช้งานปุ่ม เมื่อคลิกไว้ในฟังก์ชั่นหลัก setup อันดับแรก ควรเขียน class Diagram ออกมาให้ได้ เหมือนแบบนี้

class diagram

name:  Button
attribute:
  name: String
  x: int
  y: int
  w: int
  l: int
  i: int
method
Button(n: String, x: int, y: int )
display()
click()

Processing Code

void setup() {  //ฟังก์ชั่นหลักที่ใช้ในการกำหนดค่า และเรียกใช้สิ่งต่างๆ เป็นฟังก์ชั่นที่ไม่มีการวกกลับ
   size(350, 500);  //ฟังก์ชั่นที่ใช้ในการกำหนดขนาดของพื้นที่ หรือ size(width, height)
 }
 Button a = new Button("Hello", 50, 50);  //ปุ่ม a ที่ตำแหน่งแกน X 50 แกน Y 50 กดแล้วได้คำว่า Hello
 Button b = new Button("Bye", 200, 50);  //ปุ่ม b ที่ตำแหน่งแกน X 200 แกน Y 50 กดแล้วได้คำว่า Bye
 Button c = new Button("Dog", 50, 165);  //ปุ่ม c ที่ตำแหน่งแกน X 50 แกน Y 165 กดแล้วได้คำว่า Dog
 Button d = new Button("Cat", 200, 165);  //ปุ่ม d ที่ตำแหน่งแกน X 200 แกน Y 165 กดแล้วได้คำว่า Cat
 Button e = new Button("Sky", 50, 275);  //ปุ่ม e ที่ตำแหน่งแกน X 50 แกน Y 275 กดแล้วได้คำว่า Sky
 Button f = new Button("Sea", 200, 275);  //ปุ่ม f ที่ตำแหน่งแกน X 200 แกน Y 275 กดแล้วได้คำว่า Sea
 Button g = new Button("Succeed", 50, 385);  //ปุ่ม g ที่ตำแหน่งแกน X 50 แกน Y 385 กดแล้วได้คำว่า Succeed
 Button h = new Button("Fail", 200, 385);  //ปุ่ม h ที่ตำแหน่งแกน X 200 แกน Y 385 กดแล้วได้คำว่า Fail
void draw() {  //ฟังก์ชั่นหลักที่ใช้ในการวาด
  background(mouseY, mouseY, mouseX);  //ฟังก์ชั่นที่ใช้ในการเติมสีให้กับพื้นหลัง โดยสีที่ใส่นี้ให้เป็นไปตามการเคลื่อนไหวของเมาส์บนแกน X และ Y
  a.display();  //เรียกใช้ปุ่ม a
  b.display();  //เรียกใช้ปุ่ม b
  c.display();  //เรียกใช้ปุ่ม c
  d.display();  //เรียกใช้ปุ่ม d
  e.display();  //เรียกใช้ปุ่ม e
  f.display();  //เรียกใช้ปุ่ม f
  g.display();  //เรียกใช้ปุ่ม g
  h.display();  //เรียกใช้ปุ่ม h
}
class Button {  //กำหนด class ชื่อ Button
  String name;  //ใช้ในการเก็บชื่อ
  int x;  //กำหนดตัวแปรชนิดจำนวนเต็ม ตัวนี้ใช้เก็บค่าในแกน X
  int y;  //เก็บค่าในแกน Y
  int w;  //เก็บความกว้าง
  int l;  //เก็บความสูง
  int i;  //เก็บตัวนับ Array
  Button(String n, int x, int y) {
    this.name = n;
    this.x = x;
    this.y = y;
    this.w = 100;
    this.l = 50;
    this.i = 0;
  }
  void display() {  //กำหนดฟังก์ชั่นสำหรับแสดงปุ่ม
    fill(mouseY,  mouseY, mouseX);  //ฟังก์ชั่นที่ใช้ในการเติมสีให้กับสิ่งต่างๆ โดยกำหนดให้เป็นไปตามแม่สี หรือเครื่องหมาย # รวมทั้งฟังก์ชั่น โดยสีที่ใส่ไปนี้ให้ออกมาแบบเป็นไปตามการเคลื่อนไหวของเมาส์
    stroke(random(0, 255), random(0, 255), random(0, 255));  //ฟังก์ชั่นที่ใช้ในการเติมสีให้กับเส้น โดยกำหนดให้เป็นไปตามแม่สี หรือเครื่องหมาย # รวมทั้งฟังก์ชั่น โดยสีที่ใส่ไปนี้ให้ออกมาแบบสุ่มตามฟังก์ชั่น random
    strokeWeight(5);  //ฟังก์ชั่นที่ใช้ในการเพิ่มความหนาของเส้น
    rect(this.x, this.y, this.w, this.l);  //ฟังก์ชั่นที่ใช้ในการวาดรูปสี่เหลี่ยม หรือ rect(x, y, width, height)
    this.click();
   }
   void click() {  //กำหนดฟังก์ชั่นที่ใช้เรียกใช้การคลิก
     if(mousePressed&&mouseX>x&&mouseX<x+w&&mouseY>y&&mouseY<y+l) {
     fill(0);  //เติมสีดำ
     textSize(50);  //ฟังก์ชั่นที่กำหนดขนาดของข้อความ
     text(name, this.x, this.y+100);  //ฟังก์ชั่นที่ใช้ในการสร้างข้อความ หรือ text(data, x, y)
   }
 }
}

Canvas