Need help for removing an ellipse

edited October 2017 in Questions about Code

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)

Tagged:

Answers

  • edited October 2017 Answer ✓

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

  • 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

  • edited October 2017

    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.

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

  • Try it to see what I mean

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

  • But what you like more is good

  • 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.

  • did you change your for loop in draw to

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

    ?

  • 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;
      }
    }
    //
    
  • edited October 2017

    Yes yes ^^

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

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

  • 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

  • edited October 2017

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

  • Won't work, or does it work?

  • edited October 2017

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

  • my method is interesting only for interrupted / single clicks

  • 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.

  • Thanks!

    sure it'll.

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

Sign In or Register to comment.