Loading...
Logo
Processing Forum
Programming Questions
ferranval
ferranval

2 dimensional array for shapes

in Programming Questions  •  1 year ago  
hey there,

i am doing another sketch, and i have a doubt.

i need to create 3 rows of  9 circles with 40mm of separation among them horizontally and 50 vertically (total 27 circles or ellipses).

i can't adapt this sketch to my work

i attached code

---------------------------------------------------------------------------------

int numCircles = 27;
int [][] circles; //  a two-dimensional array


void setup() {

  size(500, 300);
  smooth();
  noStroke();
  
  circles = new int [numCircles][3]; // define the array, every circle needs three parameters (xPos, yPos, circleDiameter)
  // fill array only once
  for (int i=0; i<numCircles; i++) {
    int circleDiameter = int(20);
    int xPos = int(50); // keep distance from border
    int yPos = int(50); // keep distance from border
    circles[i][0]= xPos;
    circles[i][1]= yPos;
    circles[i][2]= circleDiameter;
  }
}
void draw() {
  for (int i=0; i<numCircles; i++) {
    fill(0);
    ellipse(circles[i][0], circles[i][1], circles[i][2],circles[i][2]);
  }
}



Replies(5)

quarks
quarks

Re: 2 dimensional array for shapes

1 year ago
Change these lines

circles[i][0]= xPos;
circles[i][1]= yPos;

to

circles[i][0]= xPos + (i % 9) * 50;
circles[i][1]= yPos + (i / 9) * 40;



ferranval
ferranval

Re: 2 dimensional array for shapes

1 year ago
right on the money!!!!!!!!!!!!!


many thanks quarks.

would be possible to interact with the mouse?

imagine that this a a value scale (it will go on top of an image). you select one circle with the mouse and it change color from black to grey.


many thanks
ferranval
ferranval

Re: 2 dimensional array for shapes

1 year ago
i integrated the mousePressed from the reference. however it changes all the circle at the same time. what i need is only change the color of the circle chosen or clicked. 


int numCircles = 27;
int [][] circles; // use a two-dimensional array

PImage b;

int value = 0;

void setup () {

  size(512, 350);
  smooth();
  noStroke();
  
  b = loadImage("manikin.jpg");
      imageMode(CENTER);  
      image(b, width/2, height/2, width, height);
  
  circles = new int [numCircles][3]; // define the array, every circle needs three parameters (xPos, yPos, circleDiameter)
  // fill array only once
  for (int i=0; i<numCircles; i++) {
    int circleDiameter = int(20);
    int xPos = int(109); // keep distance from border
    int yPos = int(67); // keep distance from border
    circles[i][0]= xPos + (i % 9) * 38;
    circles[i][1]= yPos + (i / 9) * 135;
    circles[i][2]= circleDiameter;
  }
}
 


void draw() {  
  
  for (int i=0; i<numCircles; i++) {
    fill(value);
    ellipse(circles[i][0], circles[i][1], circles[i][2],circles[i][2]);
  }    
}


void mousePressed() {
  if(value == 0) {
    value = 255;
  } else {
    value = 0;
  }
}

calsign
calsign

Re: 2 dimensional array for shapes

1 year ago
You need custom values for each circle...
Such as another array, like so:

Copy code
  1. int[] values;

Or another value in your two dimensional array.

You would initialize this with every circle...
Then modify it with some form of circle collision:

If the distance ( dist()) between the circle's center ( circles[i][0], circles[i][1]) and the mouse location ( mouseX, mouseY) is less than the circle's radius ( circles[i][2] / 2), then the mouse is inside the circle.

For example:

Copy code
  1. for(int i = 0; i < numCircles; i ++) {
  2.   if(dist(circles[i][0], circles[i][1], mouseX, mouseY) < circles[i][2] / 2) {
  3.     if(circles[i][3] == 0) {
  4.       circles[i][3] = 255;
  5.     } else {
  6.       circles[i][3] = 0;
  7.     }
  8.   }
  9. }

However, at some point, the code becomes a confusing mess...
And it's time to start using OOP.
I'll leave that up to you...
ferranval
ferranval

Re: 2 dimensional array for shapes

1 year ago
dear all,


it works!!!

but sometimes highlights 3 or 4 circles. why is it?

in addition. would be possible println wich circle has been pressed. something like. 
row=1, column =2
row=2, column=4
row=3 column=6


i attach code


int numCircles = 27;
int [][] circles; // use a two-dimensional array
int [] values;


PImage b;

int value = 0;

void setup () {

  size(512, 350);
  smooth();
  noStroke();
  
  b = loadImage("manikin.jpg");
      imageMode(CENTER);  
      image(b, width/2, height/2, width, height);
  
  circles = new int [numCircles][3]; // define the array, every circle needs three parameters (xPos, yPos, circleDiameter)
  // fill array only once
  for (int i=0; i<numCircles; i++) {
    int circleDiameter = int(20);
    int xPos = int(109); // keep distance from border
    int yPos = int(67); // keep distance from border
    circles[i][0]= xPos + (i % 9) * 38;
    circles[i][1]= yPos + (i / 9) * 135;
    circles[i][2]= circleDiameter;
  }

}
 


void draw() {  
   
  for (int i=0; i<numCircles; i++) {
    fill(value);
    ellipse(circles[i][0], circles[i][1], circles[i][2],circles[i][2]);
  }    
  
     
  for(int i = 0; i < numCircles; i ++) {
  if(dist(circles[i][0], circles[i][1], mouseX, mouseY) < circles[i][2] / 2) {
    if(circles[i][2] == 0) {
      circles[i][2] = 255;
    } else {
      circles[i][2] = 0;
    }
  }
  }  
}

void mousePressed() {
  if(value == 0) {
    value = 255;
  } else {
    value = 0;
  }
}

Top Reply

Statistics

  • 5 Replies
  • 387  Views
  • 1 Followers

Tags

No tags available for this topic.

Actions

Related Posts