Why is an ellipse in the wrong spot?

Processing Coding Questions
1

Hi

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

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


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)
Captura de pantalla (93)1023×835 20.9 KB

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

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

3

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
screen1994×2034 191 KB

3 Likes
4

@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…

2 Likes
5

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

Maybe a clue:

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.

1 Like
6

Thank you all!!!

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

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