# More rows of eyes, with rectangle pupils

**URL:** <https://discourse.processing.org/t/more-rows-of-eyes-with-rectangle-pupils/10905>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [May 4, 2019, 11:33am UTC](https://discourse.processing.org/t/more-rows-of-eyes-with-rectangle-pupils/10905 "2019-05-04T11:33:25Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mikalaen](https://avatars.discourse-cdn.com/v4/letter/m/f1d935/32.png) [@Mikalaen](https://discourse.processing.org/u/Mikalaen)\
**Post date:** [May 4, 2019, 11:33am UTC](https://discourse.processing.org/t/more-rows-of-eyes-with-rectangle-pupils/10905/1 "2019-05-04T11:33:25Z")

</div>

Hey guys,

I want to make this code more advanced. I would like to have more rows of eyes both the horisontal and vertical way. How do i do that? Should i use the “for (int …)” ??

And then i want the pupils in the eye to be rectangles instead ? Heeeelpp

```auto
Eye [] eyes; //erklær en array af variable af datatypen Eye
void setup() {
  size(800, 600);
  background(28,28,28);
  eyes = new Eye[5]; 
  for (int i = 0; i < 5; i++)
    eyes [i] = new Eye(i*(width/5) +100, 300);
}
void draw() {
   for (int i = 0; i < 5; i++) {
    eyes[i].draw(); 
  }
}

class Eye {
  float x, y; 
  float D = 60; 
  float d = D/2;
  float atangens;
  color EyeColor = color(247, 50, 50);
  Eye (float tempX, float tempY) {
    x = tempX;
    y = tempY;
  }
  void draw() {
    pushMatrix(); 
    translate(x, y);
    stroke(0); 
    strokeWeight(2);
    fill(255);
    ellipse(0, 0, D, D);
    fill(EyeColor); 
    noStroke();
    if ((mouseX-x) < 0) atangens = atan((mouseY-y)/(mouseX-x)) - PI;
    if ((mouseX-x) >= 0) atangens = atan((mouseY-y)/(mouseX-x));
    pushMatrix(); 
    rotate (atangens);
    ellipse(d/2, 0, d, d);
    popMatrix();
    popMatrix();
  }
}

```

---

<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:** [May 4, 2019, 11:45am UTC](https://discourse.processing.org/t/more-rows-of-eyes-with-rectangle-pupils/10905/2 "2019-05-04T11:45:05Z")

</div>

> [@Mikalaen](#):
>
> more rows of eyes both the horisontal and vertical way

question for 2 rows:

**in setup()**

use this in setup() :

```auto

  eyes = new Eye[5*2]; // !!!!!

  int k=0; 
  for (int i = 0; i < 5; i++) {
    for (int iy = 0; iy < 2; iy++) {
      eyes [k] = new Eye(i*(width/5) +100, 300 + iy * 90 );
      k++;
    }
  }

```

as you can see this is a _nested_ for-loop.  
Not 2 for-loops after another but for-loop 1 calls for-loop 2, since we have `5*2= 10` eyes.

- Also note that I increased the array size to `5*2` slots.
- Also note that we use i to calculate the x position of an eye and iy the y-position of an eye. In the same way we could make a grid of `5*4` e.g.
- Also we can’t use i as an index in the for-loop, since it is only 0…5 and not 0…10. Hence I use k now and increase it every time we define an eye.

**in draw()**

in draw() modify your for-loop because you have more than 5 eyes now:

```auto

  for (int i = 0; i < eyes.length; i++) {

```

---

<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:** [May 4, 2019, 11:46am UTC](https://discourse.processing.org/t/more-rows-of-eyes-with-rectangle-pupils/10905/3 "2019-05-04T11:46:58Z")

</div>

> [@Mikalaen](#):
>
> the pupils in the eye to be rectangles instead

replace the ellipse statement (very end of your code) with this:

```auto
    rectMode(CENTER);
    rect(d/2-5, 0, d, d);

```

---

<div class="post-metadata">

**Author:** ![Mikalaen](https://avatars.discourse-cdn.com/v4/letter/m/f1d935/32.png) [@Mikalaen](https://discourse.processing.org/u/Mikalaen)\
**Post date:** [May 4, 2019, 12:54pm UTC](https://discourse.processing.org/t/more-rows-of-eyes-with-rectangle-pupils/10905/4 "2019-05-04T12:54:19Z")

</div>

Thnks!!  
And why does the eyes start so far down the page??

I would like to make a code, that looks like this:

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

---

<div class="post-metadata">

**Author:** ![Mikalaen](https://avatars.discourse-cdn.com/v4/letter/m/f1d935/32.png) [@Mikalaen](https://discourse.processing.org/u/Mikalaen)\
**Post date:** [May 4, 2019, 12:55pm UTC](https://discourse.processing.org/t/more-rows-of-eyes-with-rectangle-pupils/10905/5 "2019-05-04T12:55:47Z")

</div>

or this:

 ![27](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0318ddcaa4c6c8eac6749ee954f6ddaf052a9ae8.jpeg)

---

<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:** [May 4, 2019, 4:11pm UTC](https://discourse.processing.org/t/more-rows-of-eyes-with-rectangle-pupils/10905/6 "2019-05-04T16:11:26Z")

</div>

> [@Chrisir](#):
>
> 300 + iy \* 90

This is calculating the y-position. You can change the formula to put the grid upwards on the canvas.

You can make a grid by changing the upper boundaries of the for-loops (x and y).

You can also replace the `rect()` by different shapes/lines

Chrisir

---

<div class="post-metadata">

**Author:** ![Mikalaen](https://avatars.discourse-cdn.com/v4/letter/m/f1d935/32.png) [@Mikalaen](https://discourse.processing.org/u/Mikalaen)\
**Post date:** [May 4, 2019, 5:40pm UTC](https://discourse.processing.org/t/more-rows-of-eyes-with-rectangle-pupils/10905/7 "2019-05-04T17:40:49Z")

</div>

Thank you so much!!!

---

<div class="post-metadata">

**Author:** ![Mikalaen](https://avatars.discourse-cdn.com/v4/letter/m/f1d935/32.png) [@Mikalaen](https://discourse.processing.org/u/Mikalaen)\
**Post date:** [May 4, 2019, 5:48pm UTC](https://discourse.processing.org/t/more-rows-of-eyes-with-rectangle-pupils/10905/8 "2019-05-04T17:48:27Z")

</div>

Actually i have another question… If it’s not too much to ask… I want to use the “z” and “x” keys to make til diameter on the white circle bigger or smaller, but i’m having problems with the “key pressed” function… Can u maybe help me on this one aswell?

```auto
Clock [] clock; 
void setup() {
  size(690, 700);
  background(4,23,176); 
  clock = new Clock[10*10];
  int k=0; 
  for (int i = 0; i < 10; i++) {
    for (int iy = 0; iy < 10; iy++) {
      clock [k] = new Clock(i*(width/10.5) +50, 50 + iy * 65 );
      k++;
    }
  }
  //eyes = new Eye[5*2]; 
  //for (int i = 0; i < 5; i++)
  // eyes [i] = new Eye(i*(width/5) +100, 300);
}
void draw() {
  for (int i = 0; i < clock.length; i++) {
    clock[i].draw(); 
  }
}

class Clock {
  float x, y; 
  float D = 60; 
  float d = D/2;
  float atangens;
  color ClockColor = color(4,23,176);
  Clock (float tempX, float tempY) {
    x = tempX;
    y = tempY;
  }
  void draw() {
    pushMatrix(); 
    translate(x,y); 
    stroke(0); 
    noStroke();
    fill(247, 247, 247); 
    ellipse(0, 0, D, D);
    fill(ClockColor); 
    noStroke();
    if ((mouseX-x) < 0) atangens = atan((mouseY-y)/(mouseX-x)) - PI;
    if ((mouseX-x) >= 0) atangens = atan((mouseY-y)/(mouseX-x));
    pushMatrix(); 
    rotate (atangens);
    rectMode(CENTER);
    rect(d/2-5, 0, 29, 2);
    //ellipse(d/2, 0, d, d);
    popMatrix();
    popMatrix();
  }
}

```

---

<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:** [May 4, 2019, 6:00pm UTC](https://discourse.processing.org/t/more-rows-of-eyes-with-rectangle-pupils/10905/9 "2019-05-04T18:00:38Z")

</div>

no problem!

Show us your attempt

(I can’t see a “`keyPressed()`” function… )

---

<div class="post-metadata">

**Author:** ![Mikalaen](https://avatars.discourse-cdn.com/v4/letter/m/f1d935/32.png) [@Mikalaen](https://discourse.processing.org/u/Mikalaen)\
**Post date:** [May 4, 2019, 6:14pm UTC](https://discourse.processing.org/t/more-rows-of-eyes-with-rectangle-pupils/10905/10 "2019-05-04T18:14:18Z")

</div>

```auto
Clock [] clock; 
void setup() {
  size(690, 700);
  background(4,23,176); 
  clock = new Clock[10*10];
  int k=0; 
  for (int i = 0; i < 10; i++) {
    for (int iy = 0; iy < 10; iy++) {
      clock [k] = new Clock(i*(width/10.5) +50, 50 + iy * 65 );
      k++;
    }
  }
  //eyes = new Eye[5*2]; 
  //for (int i = 0; i < 5; i++)
  // eyes [i] = new Eye(i*(width/5) +100, 300);
}
void draw() {
  for (int i = 0; i < clock.length; i++) {
    clock[i].draw(); 
  }
}

class Clock {
  float x, y; 
  float D = 60; 
  float d = D/2;
  float atangens;
  color ClockColor = color(4,23,176);
  Clock (float tempX, float tempY) {
    x = tempX;
    y = tempY;
  }
  void draw() {
    pushMatrix(); 
    translate(x,y); 
    stroke(0); 
    noStroke();
    fill(247, 247, 247); 
    ellipse(0, 0, D, D);
    fill(ClockColor); 
    noStroke();
    if ((mouseX-x) < 0) atangens = atan((mouseY-y)/(mouseX-x)) - PI;
    if ((mouseX-x) >= 0) atangens = atan((mouseY-y)/(mouseX-x));
    pushMatrix(); 
    rotate (atangens);
    rectMode(CENTER);
    rect(d/2-5, 0, 29, 2);
    //ellipse(d/2, 0, d, d);
    popMatrix();
    popMatrix();
  }
}

void keyPressed() {

  switch (key) { 
  case 'x': 
    D += 10;
    break;

  case 'z': 
    D -= 10;
    break;
  }
}

```

---

<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:** [May 4, 2019, 6:19pm UTC](https://discourse.processing.org/t/more-rows-of-eyes-with-rectangle-pupils/10905/11 "2019-05-04T18:19:27Z")

</div>

Do you want to change all diameters or only one?

D won‘t work - please move D out of the class before setup ()

---

<div class="post-metadata">

**Author:** ![Mikalaen](https://avatars.discourse-cdn.com/v4/letter/m/f1d935/32.png) [@Mikalaen](https://discourse.processing.org/u/Mikalaen)\
**Post date:** [May 4, 2019, 6:22pm UTC](https://discourse.processing.org/t/more-rows-of-eyes-with-rectangle-pupils/10905/12 "2019-05-04T18:22:39Z")

</div>

I want them all to be affected. and i moved the float out before setup, (made a copy), and it doesn-t say fail anymore, but nothing happens when i press the z and x 🙂

---

<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:** [May 4, 2019, 6:28pm UTC](https://discourse.processing.org/t/more-rows-of-eyes-with-rectangle-pupils/10905/13 "2019-05-04T18:28:01Z")

</div>

You got D and d

Maybe you mean d?

---

<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:** [May 4, 2019, 6:28pm UTC](https://discourse.processing.org/t/more-rows-of-eyes-with-rectangle-pupils/10905/14 "2019-05-04T18:28:57Z")

</div>

Oh and don’t make a copy of D

Move it instead

---

<div class="post-metadata">

**Author:** ![Mikalaen](https://avatars.discourse-cdn.com/v4/letter/m/f1d935/32.png) [@Mikalaen](https://discourse.processing.org/u/Mikalaen)\
**Post date:** [May 4, 2019, 6:53pm UTC](https://discourse.processing.org/t/more-rows-of-eyes-with-rectangle-pupils/10905/15 "2019-05-04T18:53:37Z")

</div>

Ahh somethings happens, but not what i had in mind 😃 Do you have an idea what i should do to edit the diameter on the white circle?

---

<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:** [May 4, 2019, 6:55pm UTC](https://discourse.processing.org/t/more-rows-of-eyes-with-rectangle-pupils/10905/16 "2019-05-04T18:55:31Z")

</div>

show your entire code please

Did you write this yourself?

Which variable is the diameter on the white circle?

---

<div class="post-metadata">

**Author:** ![Mikalaen](https://avatars.discourse-cdn.com/v4/letter/m/f1d935/32.png) [@Mikalaen](https://discourse.processing.org/u/Mikalaen)\
**Post date:** [May 4, 2019, 6:57pm UTC](https://discourse.processing.org/t/more-rows-of-eyes-with-rectangle-pupils/10905/17 "2019-05-04T18:57:15Z")

</div>

Now i’m not sure. I remember that it was the “D”

```auto

Clock [] clock; 

  float D = 60;
  
  
void setup() {
  size(690, 700);
  background(4,23,176); 
  clock = new Clock[10*10];
  int k=0; 
  for (int i = 0; i < 10; i++) {
    for (int iy = 0; iy < 10; iy++) {
      clock [k] = new Clock(i*(width/10.5) +50, 50 + iy * 65 );
      k++;
    }
  }
  //eyes = new Eye[5*2]; 
  //for (int i = 0; i < 5; i++)
  // eyes [i] = new Eye(i*(width/5) +100, 300);
}
void draw() {
  for (int i = 0; i < clock.length; i++) {
    clock[i].draw(); 
  }
}

class Clock {
  float x, y; 
  //float D = 60; 
  float d = D/2;
  float atangens;
  color ClockColor = color(4,23,176);
  Clock (float tempX, float tempY) {
    x = tempX;
    y = tempY;
  }
  void draw() {
    pushMatrix(); 
    translate(x,y); 
    stroke(0); 
    noStroke();
    fill(247, 247, 247); /
    ellipse(0, 0, D, D);
    fill(ClockColor); 
    noStroke();
    if ((mouseX-x) < 0) atangens = atan((mouseY-y)/(mouseX-x)) - PI;
    if ((mouseX-x) >= 0) atangens = atan((mouseY-y)/(mouseX-x));
    pushMatrix(); /
    rotate (atangens);
    rectMode(CENTER);
    rect(d/2-5, 0, 29, 2);
    //ellipse(d/2, 0, d, d);
    popMatrix();
    popMatrix();
  }
}

void keyPressed() {
  switch (key) { 
  case 'x': 
    D += 10;
    break;

  case 'z': 
    D -= 10;
    break;
  }
}

```

---

<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:** [May 4, 2019, 7:01pm UTC](https://discourse.processing.org/t/more-rows-of-eyes-with-rectangle-pupils/10905/18 "2019-05-04T19:01:47Z")

</div>

> Now i’m not sure. I remember that it was the “D”

programming is not guesswork…

repeat this at start of draw()

` background(4, 23, 176);`

---

<div class="post-metadata">

**Author:** ![Mikalaen](https://avatars.discourse-cdn.com/v4/letter/m/f1d935/32.png) [@Mikalaen](https://discourse.processing.org/u/Mikalaen)\
**Post date:** [May 4, 2019, 7:18pm UTC](https://discourse.processing.org/t/more-rows-of-eyes-with-rectangle-pupils/10905/19 "2019-05-04T19:18:20Z")

</div>

Ahh perfect! Thanks!!