# More rows of eyes, with rectangle pupils

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

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();
}
}
1 Like

question for 2 rows:

in setup()

use this in setup() :

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:

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

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

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

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

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

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

1 Like

Thank you so much!!!

1 Like

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?

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();
}
}

1 Like

no problem!

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

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;
}
}
1 Like

Do you want to change all diameters or only one?

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

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

You got D and d

Maybe you mean d?

Oh and don’t make a copy of D

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?

Did you write this yourself?

Which variable is the diameter on the white circle?

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

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;
}
}

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);

1 Like

Ahh perfect! Thanks!!

1 Like