# Simple ArrayIndex problem

**URL:** <https://discourse.processing.org/t/simple-arrayindex-problem/19434>\
**Category:** Beginners\
**Created:** [April 5, 2020, 3:20pm UTC](https://discourse.processing.org/t/simple-arrayindex-problem/19434 "2020-04-05T15:20:20Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![vjjv](https://avatars.discourse-cdn.com/v4/letter/v/df705f/32.png) [@vjjv](https://discourse.processing.org/u/vjjv)\
**Post date:** [April 5, 2020, 3:20pm UTC](https://discourse.processing.org/t/simple-arrayindex-problem/19434/1 "2020-04-05T15:20:20Z")

</div>

Hi!  
I`ve a simple problem, but i couldnt find a solution.  
Im building a function that generate points, and i want to draw a line between those points, building a triangle:

```auto
float size = 200;
ArrayList<PVector>positions;
float angle = 120;

void setup(){
  size(1000, 1000);
  positions = new ArrayList<PVector>();
  
    for(int i = 0; i < 3; i++){
        float x = size*sin(radians(120)*i);
        float y = size*cos(radians(120)*i);      
        positions.add(new PVector(x, y));
    }
}

void draw(){
  
  
translate(500, 500);
for(int i = 0; i < positions.size(); i++){
  PVector a = positions.get(i);
  PVector b = positions.get(i+1); // NEXT POINT - here is the problem-
  
   line(a.x ,a.y, b.x, b.y);
  ellipse(a.x, a.y, 10, 10);
}
}

```

i understand that i+1 eventually goes to exceed the array size. How can i get a index+1 position in array without go more that the size in the array?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 5, 2020, 4:05pm UTC](https://discourse.processing.org/t/simple-arrayindex-problem/19434/2 "2020-04-05T16:05:13Z")

</div>

Hello,

Examine this very closely and you will understand:

```auto
PVector a = new PVector(0,0);
PVector b = new PVector(0,0);
  
translate(500, 500);
for(int i = 0; i < positions.size()-1; i++)
  {
  a = positions.get(i);
  b = positions.get(i+1); // NEXT POINT - here is the problem-
  
  strokeWeight(2);
  line(a.x ,a.y, b.x, b.y);
  ellipse(a.x, a.y, 10, 10);
  }

ellipse(b.x, b.y, 10, 10);

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0a10a4681f38520b938f3ee6b3c867a05eb251fa.png)

`:)`

---

<div class="post-metadata">

**Author:** ![vjjv](https://avatars.discourse-cdn.com/v4/letter/v/df705f/32.png) [@vjjv](https://discourse.processing.org/u/vjjv)\
**Post date:** [April 5, 2020, 6:03pm UTC](https://discourse.processing.org/t/simple-arrayindex-problem/19434/3 "2020-04-05T18:03:43Z")

</div>

> [@glv](#):
>
> PVector a = new PVector(0,0); PVector b = new PVector(0,0); translate(500, 500); for(int i = 0; i \< positions.size()-1; i++) { a = positions.get(i); b = positions.get(i+1); // NEXT POINT - here is the problem- strokeWeight(2); line(a.x ,a.y, b.x, b.y); ellipse(a.x, a.y, 10, 10); } ellipse(b.x, b.y, 10, 10);

Hi!, thanks for the answer. Your example is work fine, but if i want to draw a triangle like in my example, the segment from index 2 to index 0 is miss

 ![Captura de pantalla 2020-04-05 a la(s) 15.02.09](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a10b6e7d4c45eaa8d77b7c78636acd67bda614bb.png) ing:

```auto
float size = 200;
ArrayList<PVector>positions;
float angle = 120;
PVector a;
PVector b;

void setup() {
  size(1000, 1000);
  positions = new ArrayList<PVector>();

  for (int i = 0; i < 3; i++) {
    float x = size*sin(radians(120)*i);
    float y = size*cos(radians(120)*i);      
    positions.add(new PVector(x, y));
  }
}

void draw() {

  translate(500, 500);
  for (int i = 0; i < positions.size()-1; i++) {
    a = positions.get(i);

    b = positions.get(i+1);

    line(a.x, a.y, b.x, b.y);
    ellipse(a.x, a.y, 10, 10);
  }
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 5, 2020, 8:59pm UTC](https://discourse.processing.org/t/simple-arrayindex-problem/19434/4 "2020-04-05T20:59:56Z")

</div>

Hello,

Same idea… at the end of and after the loop finish things off.

```auto
void draw() 
  {
  translate(500, 500);

  for (int i = 0; i < positions.size()-1; i++) 
    {
    a = positions.get(i);
    b = positions.get(i+1);

    strokeWeight(2);
    ellipse(a.x, a.y, 10, 10);
    line(a.x, a.y, b.x, b.y);
    }

    a = positions.get(?);
    line(?);
    ellipse(?);
    }

```

---

<div class="post-metadata">

**Author:** ![vjjv](https://avatars.discourse-cdn.com/v4/letter/v/df705f/32.png) [@vjjv](https://discourse.processing.org/u/vjjv)\
**Post date:** [April 5, 2020, 9:04pm UTC](https://discourse.processing.org/t/simple-arrayindex-problem/19434/5 "2020-04-05T21:04:53Z")

</div>

Ok, you are drawing the line outside the loop.  
The problem still exist, because in fact i only want the pair of points (0-1, 1-2, 2-0)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 5, 2020, 9:28pm UTC](https://discourse.processing.org/t/simple-arrayindex-problem/19434/6 "2020-04-05T21:28:05Z")

</div>

Hello,

> [@vjjv](#):
>
> The problem still exist

There is no problem on this end…  
You have complete control over what your code does and the order that you place the shapes.  
You have to choose the correct closing co-ordinates.

```auto
void draw() 
  {
  background(255);
  translate(500/2, 500/2);
  strokeWeight(2);

  for (int i = 0; i < positions.size()-1; i++) 
    {
    a = positions.get(i);
    b = positions.get(i+1);

    line(a.x, a.y, b.x, b.y);
    ellipse(a.x, a.y, 10, 10);
    }

    a = positions.get(?);
    b = positions.get(?);
    line(?);
    ellipse(?);
    ellipse(?); // This was an extra finishing touch so circle was on top of line.
    }

```

`:)`

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/725f9de4daf753dbf2ff621af0aae94901798322.png)

I leave this with you.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 13, 2020, 6:31am UTC](https://discourse.processing.org/t/simple-arrayindex-problem/19434/7 "2020-04-13T06:31:01Z")

</div>

If you want to iterate over pairs of vertices in a closed shape, you can also use modulo %.

```auto
for (int i=0; i<pos.size(); i++) {
   a = pos.get(i);
   b = pos.get( (i+1)%pos.size() );
}

```

This works for any size. For a size of 3, this will generate:

> 0,1 – 1,2 – 2,0

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 13, 2020, 7:04am UTC](https://discourse.processing.org/t/simple-arrayindex-problem/19434/8 "2020-04-13T07:04:26Z")

</div>

> [@vjjv](#):
>
> you are drawing the line outside the loop.

I think there is nothing wrong with that

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 14, 2020, 9:21pm UTC](https://discourse.processing.org/t/simple-arrayindex-problem/19434/9 "2020-04-14T21:21:20Z")

</div>

Keep in mind that, if you are safely converting each index with %, you can access more than the next point – you can access three points, or every tenth point, and at any offset.

Here is an example that draws a series of triangles based on a ring of points, constantly changing its starting points and offsets. As frameCount and step both increase, code is eventually using i values like:

> 1270 1292 1314

but instead of getting index errors, with modulo they access safe indices in the ArrayList of size 24 – points:

> 22, 20, 18

```auto
/**
 * Accessing points like a circular array
 * 2020-04-14 Processing 3.4 
 */
ArrayList<PVector> points;
int num = 24;
int step = 1;

void setup() {
  size(600,600);
  points = new ArrayList<PVector>();
  // circle of points
  for (int i=0; i<num; i++) {
    float x = width * 4/9.0 * sin(TWO_PI*i/(float)num);
    float y = height * 4/9.0 * cos(TWO_PI*i/(float)num);
    points.add(new PVector(x, y));
  }
}

void draw(){
  background(128);
  translate(width/2,height/2);
  PVector p1, p2, p3;
  // count from anywhere
  for (int i=frameCount; i<frameCount+points.size(); i++) {
    // access points 
    p1 = points.get(i%points.size());
    p2 = points.get((i+step)%points.size());
    p3 = points.get((i+2*step)%points.size());
    triangle(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
  }
  println(frameCount, frameCount+step, frameCount+2*step);
  if(frameCount%60==0) step++;
}

```

![CircularArrayAccess--screenshot--small](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b7ef4f0160227d8adf4aaee3bb12a8e8df9e7b57.png)