HELP ME PLEASE! How to make an array of shapes callable individually?

misty

Hi everyone,

I am trying to create a matrix of circle (5 rows x 9 columns), and I need to make each of this circle callable so that I can interact with each circle individually. The objective of my program is to be able to change the color of the circle based on a certain input. For example when countA =1, I need to be able to change only the grid[0][0] to light yellow, and when count A = 2, I need to be able to change the grid[0][0] to yellow. But when count A = 3 instead of changing grid[0][0], I need to change the grid[0][1] to light yellow, and so on so forth.

My question is: 1. How do I make all these circles callable individually. 2. How do I color all these circles individually.

Below is my code so far:

    class Bubbles{
      int x, y, d;

      Bubbles(int tempX, int tempY, int tempD){
        x = tempX;
        y = tempY;
        d = tempD;
      }

      void display(){
        ellipse(x,y,d,d);
        ellipseMode(CORNER);
      }

      void fColors(int hex){
        fill(hex);
      }
    }

    color[] colors =
    {
      #A2C1C9,
      #0E7796,
      #6FFCCF,
      #FD7169,
      #C95F80

    };

    final int x_axis = 3840/10;
    final int y_axis = 2112/10;
    final int diameter = 340/10;
    final int gap = 75/10;

    Bubbles[][] grid;

    int cols = 9;
    int rows = 5;

    void setup() {
      size(x_axis, y_axis);
      background(255);
      grid = new Bubbles[cols][rows];
      for (int i = 0; i < cols; i++) {
        for (int j = 0; j < rows; j++) {
          grid[i][j] = new Bubbles(i*(x_axis/cols),j*(y_axis/rows),diameter);
        }
      }
    }

    void draw() {
      for (int i = 0; i < cols; i++) {
        for (int j = 0; j < rows; j++) {
          grid[i][j].display();
        }
      }  
     // grid[0][0].fColors(colors[0]);

    }

Chrisir

here you can click on a cell and it randomly changes its col

class Bubbles {
  int x, y, d;
  color col;

  Bubbles(int tempX, int tempY, int tempD, int tempCol) {
    x = tempX;
    y = tempY;
    d = tempD;
    col = tempCol;
  }

  void display() {
    fill(col);
    ellipseMode(CORNER);
    ellipse(x, y, d, d);
  }

  void fColors(int hex) {
    fill(hex);
  }

  boolean near () {
    // is the mouse close to the circle?
    // can return true or false  
    return ( dist (x+d/2, y+d/2, mouseX, mouseY) < d/2 );
  }
  //
} // class

// =============================================

color[] colors =
{
  #A2C1C9, 
  #0E7796, 
  #6FFCCF, 
  #FD7169, 
  #C95F80, 
  #C95080,
};

final int x_axis = 3840/10;
final int y_axis = 2112/10;
final int diameter = 340/10;
final int gap = 75/10;

Bubbles[][] grid;

int cols = 9;
int rows = 5;

// -------------------------------------------------------

void setup() {
  size(x_axis, y_axis);
  //size(1000, 600);
  background(255);
  int k=0;
  grid = new Bubbles[cols][rows];
  for (int i = 0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
      grid[i][j] = new Bubbles(i*(x_axis/cols), j*(y_axis/rows), diameter, colors[k]);
      k++;
      if (k>=colors.length)
        k=0;
    }
  }
} // func 

void draw() {
  for (int i = 0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
      grid[i][j].display();
    }
  }  
  // grid[0][0].fColors(colors[0]);
} // func 

// -------------------------------------------------------

void mousePressed () {
  for (int i = 0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
      if (grid[i][j].near()) 
      {
        grid[i][j].col = colors [int(random(colors.length)) ];
      }
    }
  }
} // func 
//

Chrisir

this is not in use I think

  void fColors(int hex) {
    fill(hex);
  }

Chrisir

explanation

when you instantiate a new cell in setup() I pass the col to the new object, so each cell has one color (similar to x,y and d).

The color I choose in setup is from your list of colors, at the position k.

I increase k so we have a new color every cell; at the end of the color list, k needs to be reset to 0.

The name k was chosen because you i,j and now k, so it's a row.

when displaying one cell

when displaying one cell, we use the color col (in the class, method display)

Greetings, Chrisir ;-)

misty

OMG. You are such a life savior! Thank you very much! :)

Chrisir

Please ask if you need more help.

;-)

Chrisir

Also I placed

ellipseMode(CORNER);

before

ellipse(x, y, d, d);

because settings like ellipseMode(CORNER) or setting color must take place before the actual drawing (the ellipse) to be in use.

misty

I see. Noted with thanks! I am very new to this. I will still have more questions. Really appreciate your help. :)