# Indexing a for loop

**URL:** <https://discourse.processing.org/t/indexing-a-for-loop/13231>\
**Category:** Coding Questions\
**Created:** [August 7, 2019, 4:36am UTC](https://discourse.processing.org/t/indexing-a-for-loop/13231 "2019-08-07T04:36:10Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![thedurf18](https://avatars.discourse-cdn.com/v4/letter/t/3ab097/32.png) [@thedurf18](https://discourse.processing.org/u/thedurf18)\
**Post date:** [August 7, 2019, 4:36am UTC](https://discourse.processing.org/t/indexing-a-for-loop/13231/1 "2019-08-07T04:36:10Z")

</div>

How can I have access to individual shapes that are contained within a for loop? Can I index the for loop and access the individual shapes through an array? I just received help with this code:

```auto
PShape a;

void setup() {
  size(1680, 1005, P3D);
  background(0);
}

void draw() {
  for (float variable = 0; variable < 1005; variable = variable + 50) {
    a = createShape();
    a.beginShape();
    a.fill(0, 0, 255);
    a.stroke(255);
    a.strokeWeight(0.25);
    a.vertex(250+variable, 500+variable);
    a.vertex(250+variable, 600+variable);
    a.vertex(350+variable, 600+variable);
    a.vertex(350+variable, 500+variable);
    a.endShape(CLOSE);
    shape(a);
  }
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [August 7, 2019, 4:45am UTC](https://discourse.processing.org/t/indexing-a-for-loop/13231/2 "2019-08-07T04:45:13Z")

</div>

you mean like a array of ?same? shapes? hm

```auto
int many = 10;
PShape[] a = new PShape[many];

void setup() {
  size(1680, 1005, P3D);
  background(0);
}

void draw() {
  for (int i = 0; i < many; i++) {
    float variable = i*50;
    a[i] = createShape();
    a[i].beginShape();
    a[i].fill(0, 0, 255);
    a[i].stroke(255);
    a[i].strokeWeight(0.25);
    a[i].vertex(250+variable, 500+variable);
    a[i].vertex(250+variable, 600+variable);
    a[i].vertex(350+variable, 600+variable);
    a[i].vertex(350+variable, 500+variable);
    a[i].endShape(CLOSE);
    shape(a[i]);
  }
}

```

but as i show in your last topic already it not makes much sense unless  
you prepare the shape / array of shapes / in setup  
and in draw you just show / manipulate them.

---

<div class="post-metadata">

**Author:** ![thedurf18](https://avatars.discourse-cdn.com/v4/letter/t/3ab097/32.png) [@thedurf18](https://discourse.processing.org/u/thedurf18)\
**Post date:** [August 7, 2019, 4:50am UTC](https://discourse.processing.org/t/indexing-a-for-loop/13231/3 "2019-08-07T04:50:55Z")

</div>

What if I wanted to change the color of the second shape from the for loop?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [August 7, 2019, 4:52am UTC](https://discourse.processing.org/t/indexing-a-for-loop/13231/4 "2019-08-07T04:52:29Z")

</div>

please reread all details i write in your prior topic again,  
as i still worked out some details, while you made already a new topic  
there you see example for this AND the link to the reference you should study first.

generally there are 2 ways,  
-a- while generation should make different shapes  
( or the array would make no sense )

-b- at runtime can prior to `shape(a,x,y,w,h);`  
change some parameter ( i show setFill() example only)

---

<div class="post-metadata">

**Author:** ![thedurf18](https://avatars.discourse-cdn.com/v4/letter/t/3ab097/32.png) [@thedurf18](https://discourse.processing.org/u/thedurf18)\
**Post date:** [August 7, 2019, 5:00am UTC](https://discourse.processing.org/t/indexing-a-for-loop/13231/5 "2019-08-07T05:00:49Z")

</div>

I did look at the links you provided. I was already aware how you could manipulate PShape. I’m trying to access specific shapes within the for loop so I don’t have to write so much code.

And the example you provided chooses random shapes within the for loop. I would like to get specific shapes.

Would I do something like: shape(a[2])?

I didn’t mean to insult you. I do appreciate your help.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [August 7, 2019, 5:04am UTC](https://discourse.processing.org/t/indexing-a-for-loop/13231/6 "2019-08-07T05:04:30Z")

</div>

hm, as a “how to use array question”?  
you can use

```auto
shape(a[2],... )

```

to show a single shape,  
to change it it would be like

```auto
a[2].setFill(0,200,0);

```

but mostly you should create different shapes at point of creation ( from setup )  
a[0] circle  
a[1] rectangle  
a[2] free vertex shape  
…  
again ONLY then the array is of use.

* * *

actually if it is possible to change a single vertex of a already created shape  
i did never check on.

* * *

but possibly there is a total different question behind it??  
lets say you want a grid of rectangles…  
but you want each one to remember if it is selected and what color it has set,  
that would be more a use of a

> array of class?

---

<div class="post-metadata">

**Author:** ![thedurf18](https://avatars.discourse-cdn.com/v4/letter/t/3ab097/32.png) [@thedurf18](https://discourse.processing.org/u/thedurf18)\
**Post date:** [August 7, 2019, 5:15am UTC](https://discourse.processing.org/t/indexing-a-for-loop/13231/7 "2019-08-07T05:15:37Z")

</div>

I get an error message with this code:

```auto
int many = 10;
PShape[] a = new PShape[many];

void setup() {
  size(1680, 1005, P3D);
  background(0);
}

void draw() {
  for (int i = 0; i < many; i++) {
    float variable = i*50;
    a[i] = createShape();
    a[i].beginShape();
    a[i].fill(0, 0, 255);
    a[i].stroke(255);
    a[i].strokeWeight(0.25);
    a[i].vertex(250+variable, 500+variable);
    a[i].vertex(250+variable, 600+variable);
    a[i].vertex(350+variable, 600+variable);
    a[i].vertex(350+variable, 500+variable);
    a[i].endShape(CLOSE);
    shape(a[i]);
    a[2].setFill(0, 200, 0);
  }
}

```

I probably have written it wrong.

That is essentially what I’m trying to do. Make a grid with my PShapes, but I only want to select some of those shapes to manipulate the color of. I don’t think it should matter that they are all the same shape. What matters to me is the coordinates of those shapes.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [August 7, 2019, 5:25am UTC](https://discourse.processing.org/t/indexing-a-for-loop/13231/8 "2019-08-07T05:25:09Z")

</div>

```auto
int many = 10;
PShape[] a = new PShape[many];

void setup() {
  size(1680, 1005, P3D);
  make_shapes();
}

void make_shapes() {
  for (int i = 0; i < many; i++) {
    float variable = i*50;
    a[i] = createShape();
    a[i].beginShape();
    a[i].fill(0, 0, 255);
    a[i].stroke(255);
    a[i].strokeWeight(0.25);
    a[i].vertex(250+variable, 500+variable);
    a[i].vertex(250+variable, 600+variable);
    a[i].vertex(350+variable, 600+variable);
    a[i].vertex(350+variable, 500+variable);
    a[i].endShape(CLOSE);
  }
}

void draw() {
  background(0);
  for (int i = 0; i < many; i++) shape(a[i]);
}

void keyPressed() {
  if ( key == 'c' ) a[2].setFill(color(200, 200, 0));
}

```

-a- the main structure of making all shapes ( in a array or not ) at runtime  
( 60 times per sec ) actually makes the createshape command useless.

-b- changing a shape and then create it again with the original color and show it  
means you would never see it

-c- you forget the color() thing

* * *

here a example of a GRID made of ARRAY of CLASS  
a old example i actually not checked, just to give you a idea.

```auto
// https://discourse.processing.org/t/scalable-grid-with-rectangles/7256
// https://discourse.processing.org/t/better-grid-performance/7314
// test FPS on RPI
// grid 8 FPS 59
// grid 100 FPS 6.7 ( disable rect get FPS 45 ) ( noSmooth FPS 9 )
// grid 100 FPS 5.4 ( size(1200,1200) )
// grid 500 FPS go down slowly ?
// test FX2D not run on RPI

// use backup memory array for resize/reinit grid but remember selected rects

int x = 12, y = x, w = 50, h = w, grid = 10, many = grid*grid;
boolean auto = false;//true;
boolean shownum = false; // key [n]
boolean showstroke = true; 
boolean showFPS = true;
// color setup:
color bg = color(200, 200, 0);
color stk = color(0, 0, 200);
color fillsel = color(0, 200, 0);
color fillnsel= color(200, 0, 200);

Myrect[] myrects = new Myrect[many];
Mybackup[] myselects = new Mybackup[many]; // temporary memory

void setup() {
  size(800, 520);
  noSmooth();
  set_grid(true); // init
  println("use: mouse LEFT to select, mouse RIGHT to deselect");
  println("key UP DOWN RIGHT LEFT for position");
  println("key + - for grid size");
  println("key n toggle shownumber");
}

void draw() {
  background(bg);
  fill(0);
  if (showFPS ) text(nf(frameRate, 1, 1), 10, 10);
  for (int i = 0; i < many; i++) myrects[i].drawit(); // draw each rect ( and check on mouse over + click )
}

class Mybackup {
  boolean selected=false;  
}

class Myrect {
  int x, y, id;//, w, h; from global
  boolean selected=false;
  Myrect (int x, int y, int id) {
    this.x = x; 
    this.y = y;
    this.id = id;
  }
  void drawit() {
    if ( showstroke ) stroke(stk); 
    else noStroke();
    if ( selected ) fill(fillsel);
    else fill(fillnsel);
    rect(x, y, w, h);
    fill(0); // black text
    if (shownum) text(id, x+w/4, y+h/3);
    sel();
  }
  boolean over() {
    return( x < mouseX && mouseX < x+w && y < mouseY && mouseY < y+h );
  }
  void sel() {
    if ( over() ) {
      if ( selected && mousePressed && mouseButton == RIGHT) selected=false;
      if ( !selected && mousePressed && mouseButton == LEFT) selected=true;
    }
  }
}

void set_wh() {
  // use x,y,grid as master and auto adjust rectangles (w,h) to window:
  println(" width= "+width+", height= "+height+", grid= "+grid);
  w = ( width - 2 * x ) / grid;   
  println(" w= "+w+", x= "+x+", ( grid * w + 2 * x )= "+(grid*w+2*x));
  h = ( height - 2 * y ) / grid;
  println(" h= "+h+", y= "+y+", ( grid * h + 2 * y )= "+(grid*h+2*y));
}

void set_grid(boolean init) {
  if ( auto ) set_wh();
  if ( init ) for (int i = 0; i < many; i++) myselects[i]=new Mybackup(); // init backup memory
  else for (int i = 0; i < many; i++) myselects[i].selected = myrects[i].selected; // backup
  for (int i = 0; i < many; i++) myrects[i]=new Myrect(x+(i%grid)*w, y+(floor(i/grid))*h, i); // resize
  if ( !init ) for (int i = 0; i < many; i++) myrects[i].selected = myselects[i].selected; // restore
}

void keyPressed() {
  if ( keyCode == UP ) y--;
  else if ( keyCode == DOWN ) y++;
  else if ( keyCode == LEFT ) x--;
  else if ( keyCode == RIGHT ) x++;
  else if ( key == '+' ) w++;
  else if ( key == '-' ) w--;
  h=w;
  auto = false; // confirm
  set_grid(false);

  if ( key == 'n' ) shownum = !shownum;
}

```

---

<div class="post-metadata">

**Author:** ![thedurf18](https://avatars.discourse-cdn.com/v4/letter/t/3ab097/32.png) [@thedurf18](https://discourse.processing.org/u/thedurf18)\
**Post date:** [August 7, 2019, 5:33am UTC](https://discourse.processing.org/t/indexing-a-for-loop/13231/9 "2019-08-07T05:33:12Z")

</div>

thanks a bunch man, I really appreciate the help. I think I’m on the right track now. 😃