#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

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

edited May 2016

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]);

}
Tagged:

• edited March 2014

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
//

• this is not in use I think

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

• edited March 2014 Answer ✓

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 ;-)

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

• edited March 2014

;-)

• edited March 2014

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.

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