How to set up a Class

[vsquared]

How do you set up a class? Unable to find an example.

_wndW = 400
_wndH = 400

class Button:
# constructor
    def __init__(self, x, y, w, h):
        self.x = x
        self.y = y
        self.w = w
        self.h = h
    
    def display(self):
        rect(self.x, self.y, self.w, self.h)

def setup():
    global btn
    size(_wndW,_wndH)
    btn = Button(100,60,110,30)
    
def draw():
    background(209)
    btn.display()

Edited to add self as display and rect parameters.

[hx2A]

Hi @vsquared !

There is an example of py5 in class mode documented on the website. That isn't going to tell you everything you need to know about object oriented programming in Python though. There are lots of good resources for that available online, and I recommend reading them to help you here.

[vsquared]

Thanks. That's the documentation I couldn't find.

[vsquared]

This works on my mac:

# Uses Imported mode for py5
_wndW = 400
_wndH = 200

class Button:
# constructor
    def __init__(self, x, y, w, h,rounded, title, btnColor, txtColor):
        self.x = x
        self.y = y
        self.w = w
        self.h = h
        self.rounded = rounded
        self.title = title
        self.btnColor = btnColor
        self.txtColor = txtColor
    
    def display(self):
#  Rect background color
        fill(self.btnColor)
        stroke_weight(2)
        rect(self.x,self.y,self.w,self.h,self.rounded)
#  Text color
        fill(self.txtColor)
        text_size(16)
        text_align(CENTER,CENTER)
        text(self.title, self.x, self.y, self.w, self.h)

def setup():
    global btn
    size(_wndW,_wndH)
    get_surface().set_title("Custom Button Class")
    btn = Button(130,60,110,30,15, "Button",color(245,250,13), color(0))
    
def draw():
    background(209)
    btn.display()
    
def mouse_pressed():
    if((mouse_x > btn.x) and (mouse_x < btn.x + btn.w) and (mouse_y > btn.y) and (mouse_y < btn.y + btn.h)):
        print("btn hit.")

Output:

[hx2A]

That works! A Button class is a good way to manage this because it modularizes that code. What if you had multiple buttons though? The mouse_pressed() function could get unwieldy. Would you like some suggestions for what to do there?

[vsquared]

What if you had multiple buttons though?

I've always just used a separate if(mouse coordinates fall inside btn rect): for each button. Do you know a better way?

On second thought I've also used arrays or ArrayList and just iterated through the array with 'for' loops. I used this in Processing (should be easily ported to py5):

void mousePressed() {
 for (int i = 0; i < btn.length; i++) {
  if((mouseX >= btn[i].x) && (mouseX <= btn[i].x + btn[i].w) && (mouseY >= btn[i].y) && (mouseY <= btn[i].y + btn[i].h)) {
   println("btnID = ",i);
  }
 }  
}

[hx2A]

I would suggest creating a list of buttons and every time you create a new one, append the new button to the list.

Then your mouse_pressed() function could iterate through the list of buttons and for each compare the button coordinates with mouse_x and mouse_y. You could also add a method to the button class that takes mouse_x and mouse_y as parameters and either responds to a click or does nothing.

This could be a programming design pattern to experiment with and learn from.

[vsquared]

What's the difference between a 'list' and an 'array' which is how I
currently do it? Here's an example:

# Uses Imported mode for py5
_wndW = 600
_wndH = 700

_cols = 6
_rows = 20

btn = []

class Button:
# constructor
    def __init__(self, x, y, w, h,rounded, title, btnColor, txtColor):
        self.x = x
        self.y = y
        self.w = w
        self.h = h
        self.rounded = rounded
        self.title = title
        self.btnColor = btnColor
        self.txtColor = txtColor
    
    def display(self):
#  Rect background color
        fill(self.btnColor)
        stroke_weight(3)
        rect(self.x,self.y,self.w,self.h,self.rounded)
#  Text color
        fill(self.txtColor)
        text_size(16)
        text_align(CENTER,CENTER)
        text(self.title, self.x, self.y, self.w, self.h)


def setup():
    global btn
    size(_wndW,_wndH)
    id = 0
    l = 40
    t = 40
    w = 80
    h = 24
    hg = 5
    vg = 5
    for k in range(_rows):
        for j in range(_cols):
            left = l + j*(w+vg)
            top = t + k*(h+hg)
            button = Button(left,top,w,h,15,str(id),color(245,250,13),color(0))
            btn.append(button)
            id+=1
            
def draw():
    for i in range(_cols*_rows):
        btn[i].display()
        
def mouse_pressed():
    for i in range(_cols*_rows):
        if((mouse_x > btn[i].x)and(mouse_x < btn[i].x + btn[i].w)and(mouse_y > btn[i].y)and(mouse_y < btn[i].y + btn[i].h)):
            print("btnID",i)

[hx2A]

You could create a list called buttons that you append each new button to. Then in mouse_pressed() you could have a for btn in buttons: for loop without needing to index into something.

[vsquared]

Is there a reference for 'list'? I've used ArrayLists in Processing; is this the same thing? Looks like I'm still going to have to check the mouse coordinates against the btn coordinates. At first glance you're talking about changing one line of code and substituting another.

[hx2A]

A Python list is similar conceptually to a Java ArrayList, but is a Python data structure.

I was suggesting that you would do something similar to this:

def mouse_pressed():
    for b in btn:
        if((mouse_x > b.x)and(mouse_x < b.x + b.w)and(mouse_y > b.y)and(mouse_y < b.y + b.h)):
            print(b.title)

One of the neat things about lists is you can iterate through objects in the list instead of having to use range and and index into the list. This approach is easier to read, at least for me, but of course you may disagree and prefer your way. I thought it might be helpful to suggest another way to introduce you to a different way of coding that and learning more about lists.

[vsquared]

It's 4 lines of code either way, but I'll check out Python lists because I don't know anything about them. Thanks for the suggestion.