# Why is an ellipse in the wrong spot?

**URL:** <https://discourse.processing.org/t/why-is-an-ellipse-in-the-wrong-spot/23843>\
**Category:** Coding Questions\
**Created:** [September 13, 2020, 4:46pm UTC](https://discourse.processing.org/t/why-is-an-ellipse-in-the-wrong-spot/23843 "2020-09-13T16:46:29Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![alejo\_rgb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alejo_rgb/32/8468_2.png) [@alejo\_rgb](https://discourse.processing.org/u/alejo_rgb)\
**Post date:** [September 13, 2020, 4:46pm UTC](https://discourse.processing.org/t/why-is-an-ellipse-in-the-wrong-spot/23843/1 "2020-09-13T16:46:29Z")

</div>

Hi

Why my code is drawing an ellipse in the top left corner?

```auto
Circulo[] circ = new Circulo[49];

void setup() {
  size(800, 800);
  for (int i = 0; i < 48; i++) {
    circ[i] = new Circulo();
  }
}

void draw() { 
  background(0);

  stroke(255);

  for (float x = 0; x <= 6; x +=1) {
    for (float y = 0; y <= 6; y +=1) {
      circ[int(x*6+y)].passCoords(((x * (width/6)) + 50), ((y * (height/6)) + 50));
    }
  }

  for (int i = 0; i < 48; i++) {
    circ[i].display();
  }
}

```

```auto
class Circulo {

  float posX;
  float posY;
  
  Circulo() {
  }
  
  void passCoords(float x, float y){
   posX = x;
   posY = y;
    
  }

  void display() {
    noFill();
    strokeWeight(3);
    ellipse(posX, posY, 50, 50);
  }
}

```

 ![Captura de pantalla (93)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6edb229864ab254e976a4d033766f994d020b342.png)

---

<div class="post-metadata">

**Author:** ![alefnull](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alefnull/32/10561_2.png) [@alefnull](https://discourse.processing.org/u/alefnull)\
**Post date:** [September 13, 2020, 7:00pm UTC](https://discourse.processing.org/t/why-is-an-ellipse-in-the-wrong-spot/23843/2 "2020-09-13T19:00:16Z")

</div>

```auto
void setup() {
  size(800, 800);
  for (int i = 0; i < 48; i++) {
    circ[i] = new Circulo();
  }
}

```

```auto
for (float x = 0; x <= 6; x +=1) {
    for (float y = 0; y <= 6; y +=1) {
      circ[int(x*6+y)].passCoords(((x * (width/6)) + 50), ((y * (height/6)) + 50));
    }
  }

```

my best guess: in setup() you’re starting your for loop at 0, and then later in the draw loop, you’re multiplying each circle’s index by ‘x’ and adding ‘y’, but both of those also start at 0, so the first circle will always have position (0, 0).

EDIT: just to clarify, i’m not sure if either is the problem, and if so, which one… like i said i’m just taking a guess based on my admittedly little knowledge. my only suggestion would be to try starting your for loop indices at 1 and adding 1 to the loop’s end criteria (i.e. make ‘i’ start at 1 in setup() and add 1 to the 48… similarly for the loops in draw() )

---

<div class="post-metadata">

**Author:** ![Hyperion65](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hyperion65/32/10569_2.png) [@Hyperion65](https://discourse.processing.org/u/Hyperion65)\
**Post date:** [September 13, 2020, 7:29pm UTC](https://discourse.processing.org/t/why-is-an-ellipse-in-the-wrong-spot/23843/3 "2020-09-13T19:29:37Z")

</div>

something is a little off with your nested loops and their counts

first of all you put coordinates into the 6th circle twice:

x = 0, y =0: -\> circ[int(x\*6+y)].passCoords(((x \* (width/6)) + 50), ((y \* (height/6)) + 50)); resolves to: circumstances[0].passCoords(50,50);

x=0, y=1 -\> circumstances[1].passCoords(50,175);  
…  
x=0, y=6 -\> circumstances[6].passCoords(50,800);  
x=1, y=0 -\> circumstances[6].passCoords(175,50);  
-\> note how the same circle [6] gets coordinates twice

second you create 48 circles in the beginning, but then only give coordinates to 42 of them  
so I guess the rest gets 0,0 because in display() you draw 48 of them again.

put: println(int(x\*6+y) + " " + ((x \* (width/8)) + 50) + " " + ((y \* (height/8)) + 50));  
after circ[… in your nested loops

put: text(i,circ[i].posX,circ[i].posY); after circ[i].display(); in draw

make your display bigger -\> 1000,1000

so you can see better what’s going on

-\>

 ![screen](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c065231ab5148a17369b17f4bf893516182e5c3d.png)

---

<div class="post-metadata">

**Author:** ![Hyperion65](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hyperion65/32/10569_2.png) [@Hyperion65](https://discourse.processing.org/u/Hyperion65)\
**Post date:** [September 13, 2020, 7:31pm UTC](https://discourse.processing.org/t/why-is-an-ellipse-in-the-wrong-spot/23843/4 "2020-09-13T19:31:55Z")

</div>

> [@alefnull](#):
>
> my best guess: in setup() you’re starting your for loop at 0, and then later in the draw loop, you’re multiplying each circle’s index by ‘x’ and adding ‘y’, but both of those also start at 0, so the first circle will always have position (0, 0).

@alefnull: that was exactly my first thought. but after looking closer its not. personally, 33% of my time is spent by putting println’s and text’s in between my codelines, staring at number and desperately pulling my hair…

---

<div class="post-metadata">

**Author:** ![raron](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/raron/32/13651_2.png) [@raron](https://discourse.processing.org/u/raron)\
**Post date:** [September 14, 2020, 5:35am UTC](https://discourse.processing.org/t/why-is-an-ellipse-in-the-wrong-spot/23843/5 "2020-09-14T05:35:07Z")

</div>

I’m guessing you mean a 7x7 organization and not 6x6?

Maybe a clue:

```auto
for (float x = 0; x <= 6; x +=1) {
  for (float y = 0; y <= 6; y +=1) {
    print(int(x*6+y) + ", ");
  }
  println();
}

println();
println();
println("7x7:");
println();

for (float x = 0; x <= 6; x +=1) {
  for (float y = 0; y <= 6; y +=1) {
    print(int(x*7+y) + ", ");
  }
  println();
}

```

Also, `x++` is shorter hand than` x +=1` when just adding one. And `<= 6` the same as `<7` (when adding 1 to each loop).  
So you could write the for loop as:  
`for (float x = 0; x < 7; x++) {`  
Etc.

---

<div class="post-metadata">

**Author:** ![alejo\_rgb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alejo_rgb/32/8468_2.png) [@alejo\_rgb](https://discourse.processing.org/u/alejo_rgb)\
**Post date:** [September 14, 2020, 1:24pm UTC](https://discourse.processing.org/t/why-is-an-ellipse-in-the-wrong-spot/23843/6 "2020-09-14T13:24:56Z")

</div>

Thank you all!!!

```auto
ArrayList<Circulo> circc = new ArrayList<Circulo>();
Circulo[] circ = new Circulo[36];

void setup() {
  size(800, 800);
  for (int i = 1; i <= 36; i++) {
    circc.add(new Circulo());
  }
  println(circc.size());
}

void draw() { 
  background(0);
  noFill();
  stroke(255);
  for (float x = 0; x <= 5; x +=1) {
    for (float y = 0; y <= 5; y +=1) {
      Circulo p = circc.get(int(x*6+y));
      //if( ((x * (width/6)) + 50) == 0 && ((y * (height/6)) + 50) == 0){
      p.passCoords(((x * (width/6)) + 50), ((y * (height/6)) + 50));
      println(int(x*6+y) + " " + ((x * (width/6)) + 50) + " " + ((y * (height/6)) + 50));
      // }
    }
  }

  for (int i = 0; i < 36; i++) {
    Circulo p = circc.get(i);
    p.display();
    p.loopear();
    //text(i, p.posX, p.posY); //after circ[i].display()
  }
}

```

```auto
class Circulo {

  float posX;
  float posY;
  int size = 50;
  boolean lp = true;
  
  int maxSize = 400;
  Circulo() {
  }

  void passCoords(float x, float y) {
    posX = x;
    posY = y;
  }

  void display() {
    noFill();
    strokeWeight(3);
    ellipse(posX, posY, size, size);
  }

  void loopear() {
    if (size > 0 && lp ) {
      size --;
      lp = true;
    } else if (size < maxSize ) {
      size ++;
      lp = false;
    }
    else{
     lp = true; 
    }
  }
}

```