More rows of eyes, with rectangle pupils

Processing Coding Questions
1

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
2

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
3

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

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

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

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

13
Screenshot 2019-05-04 at 14.54.13.png726×624 364 KB

5

or this:

27
Screenshot 2019-05-04 at 14.55.27.jpg974×976 457 KB

6

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
7

Thank you so much!!!

1 Like
8

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
9

no problem!

Show us your attempt

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

10 
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
11

Do you want to change all diameters or only one?

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

12

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 :slight_smile:

13

You got D and d

Maybe you mean d?

14

Oh and don’t make a copy of D

Move it instead

15

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

16

show your entire code please

Did you write this yourself?

Which variable is the diameter on the white circle?

17

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

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
19

Ahh perfect! Thanks!!

1 Like