Update turned into class based

CM2030 Graphics Programming/Topic 1/1.5.1/sketch.js

@@ -3,22 +3,44 @@ let locX = 200;
 let locY = 200;
 let w = 200;
 let h = 100;
+let myButton = null;
 
 function setup() {
     createCanvas(900, 600);
+    myButton = new Button(200, 200, 200, 100);
 }
 
 function draw()
 {
     background(220);
-    if(state == true) fill (255);
+    myButton.draw();
-    else fill(0);
 
-    rect(locX, locY, w, h);
 }
 
 function mousePressed()
 {
-    if(mouseX > locX && mouseX < locX + w && mouseY > locY && mouseY < locY + h)
+    myButton.flick(mouseX, mouseY);
-        state = !state;
+}
+
+class Button
+{
+    constructor(x, y, w, h)
+    {
+        this.state = false;
+        this.locX = x;
+        this.locY = y;
+        this.w = w;
+        this.h = h;
+    }
+    draw()
+    {
+        if(this.state == true) fill (255);
+        else fill(0);
+        rect(locX, locY, w, h);
+    }
+    flick(x, y)
+    {
+        if(x > this.locX && x < this.locX + this.w && y > this.locY && y < this.locY + this.h)
+            this.state = !this.state;
+    }
 }