how to make GUI interacting with single class-objects?

hey there! Let's make an example.. I have a class Circle and my Circle objects are stored inside an ArrayList. I want to be able to select each circle and change its radius independently from a GUI, written with controlP5.

Any idea?



  • Before coding you might think about the problem in more detail.

    For instance

    How will the circle be selected?

    This is not a trivial question you could use the mouse position [mx, my] when the mouse is clicked. Do you select the circle which 'contains' the position [mx, my] but if the circles are allowed to overlap it might be possible that several circles include the mouse position position so how to decide which one to use.

    If the circle radius can be changed then what happens if it reaches 0 (zero) the circle can no longer be selected because it cannot 'contain' the mouse position.

    How do we know which circle has been selected. Might want a visual hint for the currently selected circle!

    Could use the keyboard to select the circle by cycling through the arraylist.

    As you can see there is a lot to think about, but the key to a successful sketch will be a well designed class for the circle and that will be the first coding task.

  • edited November 2015

    For example, you can add a boolean isSelected to your class and inyour gui event write something like

        for (Circle c: cirlces){
        if (c.isSelected)
        c.radius = newRadius;
  • It would be nice to avoid having to loop through the arraylist to find out which one is selected just to change the radius, after all we have to iterate over the arraylist to determine which is selected.

    ArrayList<Circle> circles = new ArrayList<Circle>();
    Circle selected = null;

    Now we loop over the arraylist to find the one that contains the position [x, y] which could be the mouse position if we want

    void findSelected(float x, float y) {
      selected = null;
      for (Circle c: cirlces){
        if(c.contains(x,y)) {
          selected = c;

    Notice that selected will be null if none of the circles contain [x, y]. So in the appropriate controlP5 event handler add the code

    if(selected != null)

    Of course the findSelected method maybe more complex than the one shown here depending on the criteria for selecting circles, see my previous post.

  • first of all, thanks for the replies!

    Circles and related radius are just an example. The objects I need to modify are easy recognizable on the canvas and I can call them with their index. So, for this I thought I could just pass through each object (let's say circles) with a slider that allows me to navigate between circle00, circle01, circleN...

    After selecting the right circle, I'd like to display the set of sliders and buttons that are controlling the features of that precise object (in the example it's just a slider for the radius).

    When I tried to transform a single object in this way I didn't succeed.. All my "circles" got modified in the same way.

    For now I don't have too many objects, but quite some parameters, so I just prepared a p5 group for each object.. Not really elegant but effective for the moment.

    I'm sorry not to be too clear, I might be able to post an extract of the sketch later this week..

    Thanks again!

  • edited November 2015

    you need to store the radius in the class, not outside it

    also, change only radius of the circle that is selected

      circles.get(selectedIndex).radius ++; 

    before doing so, set selectedIndex eg in a for loop

  • I solved it...

    it works...

Sign In or Register to comment.