More rows of eyes, with rectangle pupils

Mikalaen · May 4, 2019, 11:33am

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

Chrisir · May 4, 2019, 11:45am

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++) {

Chrisir · May 4, 2019, 11:46am

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

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

Mikalaen · May 4, 2019, 12:54pm

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

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

Mikalaen · May 4, 2019, 12:55pm

or this:

Chrisir · May 4, 2019, 4:11pm

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

Mikalaen · May 4, 2019, 5:40pm

Thank you so much!!!

Mikalaen · May 4, 2019, 5:48pm

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

Chrisir · May 4, 2019, 6:00pm

no problem!

Show us your attempt

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

Mikalaen · May 4, 2019, 6:14pm

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

Chrisir · May 4, 2019, 6:19pm

Do you want to change all diameters or only one?

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

Mikalaen · May 4, 2019, 6:22pm

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

Chrisir · May 4, 2019, 6:28pm

You got D and d

Maybe you mean d?

Chrisir · May 4, 2019, 6:28pm

Oh and don’t make a copy of D

Move it instead

Mikalaen · May 4, 2019, 6:53pm

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?

Chrisir · May 4, 2019, 6:55pm

show your entire code please

Did you write this yourself?

Which variable is the diameter on the white circle?

Mikalaen · May 4, 2019, 6:57pm

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

Chrisir · May 4, 2019, 7:01pm

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

Mikalaen · May 4, 2019, 7:18pm

Ahh perfect! Thanks!!

Topic		Replies	Views
Change rectangles seperately in for loop Coding Questions	12	1295	May 6, 2019
Making a Palette using for loops and arrays [COMPLICATED] Coding Questions homework	15	1295	November 15, 2019
How can I use a "for" loop to redraw something multiple times? Coding Questions homework	4	1183	February 21, 2019
How do I use FOR LOOP to move multiple ellipses? Beginners	14	1448	April 7, 2020
Need Help to complete my homework :) Beginners homework	12	410	May 3, 2021

More rows of eyes, with rectangle pupils

Related topics