Need help for removing an ellipse

akfang

hi, I have to do a project for school, and i encountered a problem i can't solve. My project is to do a "koalastothemax.com" like.

There is my code

circle m1;
PImage img;


ArrayList<circle> table = new ArrayList<circle>();


void setup(){
  size(500,500);
  m1 = new circle(250,250,width-50, height-50);
  table.add(m1);

  background(255);

  img = loadImage("pickashoe.jpg");
}

void draw(){

  color c = get(m1.posX,m1.posY);
  fill (c);
  noStroke();

  for (int i = 0; i < table.size(); i++) {
  circle pastille = table.get(i);
  pastille.dessiner();
  pastille.clique();
  }
}

class circle{

  int posX;
  int posY;
  int rX;
  int rY;
  boolean clicked=false;
  int i = 0;
  circle pastille=this;

  circle( int tmp1, int tmp2, int tmp3, int tmp4){
    posX = tmp1 ;
    posY = tmp2 ;
    rX = tmp3 ;
    rY = tmp4;
  }

  void dessiner(){

    fill(img.get(posX,posY));

    if(clicked==false){
    noStroke();
    ellipseMode(CENTER);
    ellipse(posX,posY, rX, rY);
    }
  }

  void clique(){

    if (mousePressed==true && mouseX > posX-rX/2 && mouseX < posX+rX/2 && mouseY > posY-rY/2 && mouseY < posY+rY/2){
      clicked=true; 
    }

    if(clicked==true){
      if(rX > 7 && rY > 7){ 
        circle pastille2 = new circle(posX-rX/4,posY-rY/4,rX/2, rY/2 );
        table.add(pastille2);

        circle pastille3 = new circle(posX-rX/4,posY+rY/4,rX/2, rY/2 );
        table.add(pastille3);  

        circle pastille4 = new circle(posX+rX/4,posY-rY/4,rX/2, rY/2 );
        table.add(pastille4);

        circle pastille5 = new circle(posX+rX/4,posY+rY/4,rX/2, rY/2 );
        table.add(pastille5);

        table.remove(this);
        pastille= null;
      }
    }
}

So, my problem is when my ellipses divide theirselves into 4 littles ellipses, the original wont disapear.

First of all I tried a "table.remove(this)" to remove ellipse which divides herself; (this allow the program to not having freezes, so it's useful and it's working somehow. But not as I want.)

I also tried to turn "this" to null; but it seems useless. I tried many others things but no one works.

Well if someone can help me, it would be awesome and very appreciated ! :) (sorry if my english isn't that good :/ hope it's understandable)

Chrisir

basically just add

background(255);

at start of draw()

;-)

So you have this code:

circle m1;
PImage img;

ArrayList<circle> table = new ArrayList<circle>();

void setup() {
  size(500, 500);
  m1 = new circle(250, 250, width-50, height-50);
  table.add(m1);

  background(255);

  img = loadImage("pickashoe.jpg");
}

void draw() {

  background(255);


  color c = get(m1.posX, m1.posY);
  fill (c);
  noStroke();

  for (int i = 0; i < table.size(); i++) {
    circle pastille = table.get(i);
    pastille.dessiner();
    pastille.clique();
  }
}

// ------------------------------------

class circle {

  int posX;
  int posY;
  int rX;
  int rY;
  boolean clicked=false;
  //  int i = 0;
  circle pastille=this;

  circle( int tmp1, int tmp2, int tmp3, int tmp4) {
    posX = tmp1 ;
    posY = tmp2 ;
    rX = tmp3 ;
    rY = tmp4;
  }

  void dessiner() {

    //  fill(img.get(posX,posY));

    if (clicked==false||true) {
      noStroke();
      ellipseMode(CENTER);
      fill(111); 
      ellipse(posX, posY, rX, rY);
    }
  }

  void clique() {

    if (mousePressed==true && mouseX > posX-rX/2 && mouseX < posX+rX/2 && mouseY > posY-rY/2 && mouseY < posY+rY/2) {
      clicked=true;
    }

    if (clicked==true) {
      if (rX > 7 && rY > 7) { 
        circle pastille2 = new circle(posX-rX/4, posY-rY/4, rX/2, rY/2 );
        table.add(pastille2);

        circle pastille3 = new circle(posX-rX/4, posY+rY/4, rX/2, rY/2 );
        table.add(pastille3);  

        circle pastille4 = new circle(posX+rX/4, posY-rY/4, rX/2, rY/2 );
        table.add(pastille4);

        circle pastille5 = new circle(posX+rX/4, posY+rY/4, rX/2, rY/2 );
        table.add(pastille5);

        table.remove(this);
        pastille= null;
      }
    }
  }
}
//

Your mouse clicks

but you register each mouseClick many many times.

That's because if (mousePressed==true &&... is true many times since draw runs 60 times per second, calling this many times.

Instead don't call clique() from draw() but from the function mousePressed() :

// -----------------------------------------------------------

void mousePressed() {
  for (int i = 0; i < table.size(); i++) {
    Circle pastille = table.get(i);
    pastille.clique();
  }
}

Best, Chrisir ;-)

akfang

I knew the background(255) trick (cause I displayed the image sometimes in draw to understand some things image(img,25,25, width-50, height-50); ) but smaller ellipses were hiding behind. So i thought it wasn't the good way to do it. Well you solved this thank you :).

For my mouse clicks, I don't understand your void mousePressed() I have to put it into the class circle{} right ? But how can I call void clique() then..

I don't get it sorry :p

Chrisir

definitely use background(255);

you have this now:

  for (int i = 0; i < table.size(); i++) {
    circle pastille = table.get(i);
    pastille.dessiner();
    pastille.clique();
  }

make this to

  for (int i = 0; i < table.size(); i++) {
    circle pastille = table.get(i);
    pastille.dessiner();
  }

This function mousePressed() is a separate function before the class (outside the class)

// -----------------------------------------------------------

void mousePressed() {
  for (int i = 0; i < table.size(); i++) {
    Circle pastille = table.get(i);
    pastille.clique();
  }
}

// ------------------------------------

class circle {
....

This function mousePressed() gets called automatically but only once for each click. That's why it's better than calling clique() every time from draw() as explained above. You'll see the difference.

akfang

OK thanks i see what your are talking about. But i want to have an interrupted click, like koalastothemax.com so I prefer my own :p but well it's instructive. You helped me a lot ;)

Chrisir

Try it to see what I mean

With your way, you‘ll have many circles split at once, with my only one circle

Chrisir

But what you like more is good

akfang

uh ?! I tried it but when i do your void mousePressed() it still does the split on many circles at once.. For me, your way is just changing an interrupted click to a single click at once.

Chrisir

did you change your for loop in draw to

for (int i = 0; i < table.size(); i++) {
  circle pastille = table.get(i);
  pastille.dessiner();
}

?

Chrisir

you are right, clique needs to return whether we had a hit

the for loop in mousePressed() needs to stop then (using return)

Sorry!

circle m1;
PImage img;

ArrayList<circle> table = new ArrayList<circle>();

void setup() {
  size(500, 500);
  m1 = new circle(250, 250, width-50, height-50);
  table.add(m1);

  background(255);

  img = loadImage("pickashoe.jpg");
}

void draw() {

  background(255);


  color c = get(m1.posX, m1.posY);
  fill (c);
  noStroke();

  for (int i = 0; i < table.size(); i++) {
    circle pastille = table.get(i);
    pastille.dessiner();
    // pastille.clique();
  }
}

// -----------------------------------------------------------

void mousePressed() {
  for (int i = 0; i < table.size(); i++) {
    circle pastille = table.get(i);
    if (pastille.clique())
      return;
  }
}


// ------------------------------------

class circle {

  int posX;
  int posY;
  int rX;
  int rY;
  boolean clicked=false;
  //  int i = 0;
  //  circle pastille=this;

  circle( int tmp1, int tmp2, int tmp3, int tmp4) {
    posX = tmp1 ;
    posY = tmp2 ;
    rX = tmp3 ;
    rY = tmp4;
  }

  void dessiner() {

    //  fill(img.get(posX,posY));

    if (clicked==false||true) {
      noStroke();
      ellipseMode(CENTER);
      fill(111); 
      ellipse(posX, posY, rX, rY);
    }
  }

  boolean clique() {

    if (mouseX > posX-rX/2 && mouseX < posX+rX/2 &&
      mouseY > posY-rY/2 && mouseY < posY+rY/2) {
      clicked=true;
    }

    if (clicked==true) {
      if (rX > 7 && rY > 7) { 
        circle pastille2 = new circle(posX-rX/4, posY-rY/4, rX/2, rY/2 );
        table.add(pastille2);

        circle pastille3 = new circle(posX-rX/4, posY+rY/4, rX/2, rY/2 );
        table.add(pastille3);  

        circle pastille4 = new circle(posX+rX/4, posY-rY/4, rX/2, rY/2 );
        table.add(pastille4);

        circle pastille5 = new circle(posX+rX/4, posY+rY/4, rX/2, rY/2 );
        table.add(pastille5);

        table.remove(this);
        //  pastille= null;
        return true;
      }
    }
    return false;
  }
}
//

akfang

Yes yes ^^

akfang

arf don't know why it's broken ^^

akfang

well then how can i get an interrupted click with your method ? that's cool cause split is patched but boring for users :/

Chrisir

What do you mean by interrupted click?

Version so that only one circle is split up

In my new Version only one circle is split up at a time.

In my new version (maybe you need to hit F5 in the browser) clique returns a boolean whether it had found a hit or not.

the for loop in mousePressed() stops (using return) when clique returned true

akfang

I tried something interesting : for (int i = 0; i < table.size(); i++) { circle pastille = table.get(i); pastille.dessiner(); //pastille.clique(); } for (int i = 0; i < table.size(); i++) { circle pastille = table.get(i); //pastille.dessiner(); pastille.clique(); return; }

Chrisir

Won't work, or does it work?

akfang

i meant uninterrupted (or continuous click) sorry. And yes I understand your method but it seems hard to use it with a continuous click (or hovering).

Chrisir

my method is interesting only for interrupted / single clicks

akfang

I see :p I want a continuous click or an hovering so... I don't think i'll use your method. But special thanks to you it was interesting, maybe it will be useful tho.

Chrisir

Thanks!

sure it'll.

when you have screen buttons, these are one click situations, you want function mousePressed() there