ArrayList of Arrays for Interactive Shapes

Processing Beginners
1

I have created an ArrayList of arrays. Each array in the ArrayList should contain the mouseX and mouseY positions for one drawing frame. The ArrayList is to be expanded by one element(array) each frame.

However, when accessing the ArrayList with a for-loop, all the elements in the list have the same value. What am I missing?

int[] pos = new int[2]; // mouseX and mouseY position
ArrayList<int[]> polygon = new ArrayList<int[]>(); // List containing many points with mouseX/mouseY positions

void setup() {
  size(500, 500, P2D);
  background(255);
  strokeWeight(1);
  stroke(1);
  fill(255,0,0);
}

void draw() {
  if (mousePressed) {
    pos[0] = mouseX;
    pos[1] = mouseY;
    // Add current mouseX/mouseY-Array to Array-List
    polygon.add(pos);
 
    // Show contents of shape
    for(int i = 0; i < polygon.size(); i++) {
      println("POLYGON "+ i + "   :   " + polygon.get(i)[0], polygon.get(i)[1]);
    }
  }
}

void mouseReleased(){
  polygon.clear();
}

Here’s the output from the console:

processing01|344x324

Thanks a lot!
-Jascha!

1 Like
2

it seems you have to re-new pos

 if (mousePressed) {
    pos = new int[2];
    pos[0] = mouseX;
    pos[1] = mouseY;

Full code:


int[] pos = new int[2]; // mouseX and mouseY position
ArrayList<int[]> polygon = new ArrayList<int[]>(); // List containing many points with mouseX/mouseY positions

void setup() {
  size(500, 500, P2D);
  background(255);
  strokeWeight(1);
  stroke(1);
  fill(255, 0, 0);
}

void draw() {
  if (mousePressed) {
    pos = new int[2];
    pos[0] = mouseX;
    pos[1] = mouseY;
    // Add current mouseX/mouseY-Array to Array-List
    polygon.add(pos);
  }
}

void mouseReleased() {
  //  polygon.clear();
}

void keyPressed() {
  // Show contents of shape

  for (int i = 0; i < polygon.size(); i++) {
    println("POLYGON "+ i + "   :   " + polygon.get(i)[0], polygon.get(i)[1]);
  }
}
3 Likes
3

Wow, that was fast, thanks a lot Chrisir!

Do you have any clue as to why that is the case? Shouldn’t overwriting elements of an array work without redeclaring the array?

For example:

int[] array = new int[2];

void draw() {
  array[0] = -1;
  array[1] = -2;
  println(array);

  array[0] = 5;
  array[1] = 6;
  println(array);
  print("\n ____________\n\n");
}

The code above outputs:

[0] -1
[1] -2
[0] 5
[1]

[0] -1
[1] -2
[0] 5
[1] 6

[0] -1
[1] -2
[0] 5
[1] 6

etc.

1 Like
4

An array is also an object and has a reference.

If you add() the same array to your ArrayList, you’ll end up w/ an ArrayList filled w/ 1 object only!

3 Likes
5 
pos[0] = mouseX;
pos[1] = mouseY;
// Add current mouseX/mouseY-Array to Array-List
polygon.add(pos);

But doesn’t the above code replace the array’s content so that the same array but with different numbers inside (the mouse position in each frame) is added every frame?

6

The key here is “same array”. If you’re adding the same array (polygon.add(pos);), changing its content will reflect everywhere within polygon.

Containers don’t store whole objects, but just their references (memory address).

3 Likes
7

Hello,

I added some points and a print to explore your code.
You can draw to the screen while mouse is pressed.

Your code with my few modifications:

int[] pos = new int[2]; // mouseX and mouseY position
ArrayList<int[]> polygon = new ArrayList<int[]>(); // List containing many points with mouseX/mouseY positions

void setup() 
  {
  size(500, 500, P2D);
  background(0);
  strokeWeight(1);
  stroke(1);
  fill(255,0,0);
  }

void draw() 
  {
  if (mousePressed) 
    {
    pos[0] = mouseX;
    pos[1] = mouseY;
    // Add current mouseX/mouseY-Array to Array-List
    polygon.add(pos);
    println(polygon.size());
 
    // Show contents of shape
    for(int i = 0; i < polygon.size(); i++) 
      {
      //println("POLYGON "+ i + "   :   " + polygon.get(i)[0], polygon.get(i)[1]);
      }
  
// GLV added this to plot points:
    for(int i=0; i < polygon.size(); i++)
      {
      stroke(255, 255, 0);
      strokeWeight(3);
      point(polygon.get(i)[0], polygon.get(i)[1]);
      }
    }
  }

void mouseReleased()
  {
  polygon.clear();
  background(0);
  }

image
image502Ă—527 3.12 KB

:)

1 Like