How to make a character to disappear when click on it.

Hi. Can anyone help me to fix some of my codes please?

I got all the code here, but I think some part the code is not right: When I click on my character, it doesn't remove; however, when I click on some other place(not at the character), the character will be removed, so I think the part where final int Giraiffe_WIDTH = 55; final int Giraiffe_HEIGHT = 130;
is not correct, but I don't know how to calculate the width and height of my character.

and I don't know why the characters can't fix the window? I want them to bounce back when they hit the edge; however, it's not at the right place. ><

please tell me where is wrong I'm appreciated!

Thank You guys.! ------------------my entire code-------

final int NUM_GIRAIFFES = 20;

ArrayList<Giraiffe> giraff = new ArrayList<Giraiffe>();
int count = 20;

void setup() {
  size(800, 800);
  smooth();
  PFont calibri = loadFont("Arial-Black-48.vlw");
  textFont(calibri, 20);

  for (int i = 0; i < NUM_GIRAIFFES; i++) {
    giraff.add(new Giraiffe(width/2, height/2, (int)random(-10, 10), (int)random(-10, 10), (int)random(0, TWO_PI), random(0.5, 2)));
  }
}

// draw aliens by calling DrawMe method and change position calling update method.

void draw() {
  background(99, 164, 252);

  for (int i = 0; i < giraff.size(); i++) {
    if (mousePressed && giraff.get(i).isClicked(mouseX, mouseY)) {
      giraff.remove(i);
      count--; 
      if (giraff.size()==0) {
         for (int s = 0; s < NUM_GIRAIFFES; s++) {
    giraff.add(new Giraiffe(width/2, height/2, (int)random(2, 5), (int)random(2, 5),(int)random(0, TWO_PI), random(0.5, 2)));
    count++;
  }
      }

    } 
    else {
      giraff.get(i).giraiffe(); 
      giraff.get(i).update();
    }
  }
  fill(0);
  text("Count: "+count, 30, 50);
}

//create TEXT class
class Score {
  int score; //filed to store score
  //constructor 
  Score() {
    score=0;
  }

  void update (int inc) {
    score += inc;
  }

  void drawScore() {
    fill(0);
    text("Score: "+score, width-100, 50);
  }
}

// create UFO class
class Giraiffe {

  final int Giraiffe_WIDTH = 55;
  final int Giraiffe_HEIGHT = 130; 

  int xPos = 0;
  int yPos = 0;
  int xSpeed = 8;
  int ySpeed = 8;
  int rotAngle = 0;
  float scaleFactor = 1;

  // UFO constrctor
  Giraiffe(int xPos, int yPos, int xSpeed, int ySpeed, int rotAngle, float scaleFactor) {
    this.xPos = xPos;
    this.yPos = yPos;
    this.xSpeed = xSpeed;
    this.ySpeed = ySpeed;
    this.rotAngle = rotAngle;
    this. scaleFactor = scaleFactor;
  }

  // Method to create the UFO 
  void giraiffe() {
    //scale(giraiffe1Scale);
    pushMatrix ();
    //scale(1.9);
    translate (xPos, yPos);
    //  float rotateVar = map(mouseX, 0, width, -PI/4, PI/4);
    rotate(radians(rotAngle));
    //  float m = map(mouseY, 0, height, 0.5, 2.0);
    //  scale(m);
    //draw neck
    pushMatrix();
    scale(scaleFactor);
    translate(30, 0);
    strokeWeight(0.5);
    stroke(227, 196, 16);
    fill(240, 227, 106);
    ellipse(-176, -139, 20, 75);
    //draw body
    stroke(227, 196, 16);
    fill(240, 227, 106);
    ellipse(-156, -110, 55, 30);
    //draw ears
    stroke(227, 196, 16);
    fill(240, 227, 106);
    ellipse(-170, -175, 10, 5);
    stroke(227, 196, 16);
    fill(240, 227, 106);
    ellipse(-200, -178, 10, 5);
    //draw horn
    stroke(98, 85, 10);
    strokeWeight(0.5);
    fill(142, 122, 11);
    ellipse(-190, -180, 5, 10);
    ellipse(-180, -180, 5, 10);
    //draw tail 
    stroke(0);
    strokeWeight(0.2);
    noFill();
    curve(-140, -125, -130, -115, -120, -110, -140, -110);
    fill(170, 152, 62);
    ellipse(-120, -110, 5, 5);
    //draw head
    rotate(0.4);
    strokeWeight(0.5);
    stroke(227, 196, 16);
    fill(240, 227, 106);
    //rotate(0.4);
    ellipse(-236, -76, 33, 40);
    //draw mouth 
    strokeWeight(0.5);
    stroke(98, 85, 10);
    fill(170, 152, 62);
    ellipse(-238, -61, 19, 12);
    //draw the eyes
    fill(64, 55, 5);  
    ellipse(-248, -70, 3, 5);
    fill(64, 55, 5);
    ellipse(-230, -70, 3, 5);
    //Draw texture 
    rotate(-0.4);
    noStroke();
    fill(137, 101, 11);
    ellipse(-175, -120, 10, 15);
    noStroke();
    fill(137, 101, 11);
    ellipse(-178, -115, 5, 5);
    noStroke();
    fill(137, 101, 11);
    ellipse(-175, -145, 5, 10);
    noStroke();
    fill(137, 101, 11);
    ellipse(-155, -110, 15, 10);
    noStroke();
    fill(137, 101, 11);
    ellipse(-135, -115, 5, 5);
    noStroke();
    fill(137, 101, 11);
    ellipse(-170, -105, 5, 5);
    noStroke();
    fill(137, 101, 11);
    ellipse(-140, -103, 5, 5);
    noStroke();
    fill(137, 101, 11);
    ellipse(-178, -170, 5, 5);
    //draw legs
    stroke(227, 196, 16);
    strokeWeight(0.5);
    fill(240, 227, 106);
    arc(-180, -105, 5, 35, 1/8*PI, PI-1/8*PI);  // upper half of circle
    arc(-172, -98, 5, 25, 1/8*PI, PI-1/8*PI); 
    arc(-140, -100, 5, 25, 1/8*PI, PI-1/8*PI); 
    arc(-133, -107, 5, 40, 1/8*PI, PI-1/8*PI); 
    popMatrix();

    popMatrix();
  }

  // update method to change x, y positions
  void update() {
    xPos += xSpeed;
    yPos += ySpeed;

    if (xPos - Giraiffe_WIDTH/2 < 0 || xPos + Giraiffe_WIDTH/2 > width) {
      xSpeed *= -1;
    }

    if (yPos - Giraiffe_HEIGHT/2  < 0 || yPos + Giraiffe_HEIGHT/2 > height) {
      ySpeed *= -1;
    }


  }

  boolean isClicked(int x, int y) {
    if (xPos - Giraiffe_WIDTH/2 < x && xPos + Giraiffe_WIDTH/2 > x &&
      yPos - Giraiffe_HEIGHT/2  < y && yPos + Giraiffe_HEIGHT/2 > y) {
      return true;
    }

    return false;
  }
}

Answers

  • sorry guys. my code is messy. can you just copy all my code to the processing to see my problem please???

    Thank You! I'm appreciated!

  • edited October 2013

    You rely on translate(), rotate() and scale() to display your Giraffe objects. [..]
    I'm afraid I also dunno how to determine dimensions after transformations! @-)

    Anyways, here's an online example of detecting spheres just for some idea:
    http://studio.processingtogether.com/sp/pad/export/ro.9V7R1wu55fOiN/latest

  • edited October 2013

    PFont calibri = loadFont("Arial-Black-48.vlw");

    Calibri? I suggest to stick to generic font name, font or just f... :-)

    And for what it is worth, the name of these beasts is generally Giraffe. ;-)

    No need for a count variable, giraff.size() is enough.

    And indeed, the rotation / translate stuff makes confusing where the position of the giraffe is. If you add a debug rectangle, like:

    // Debug
    stroke(#FF0000);
    noFill();
    rect(xPos - Giraiffe_WIDTH/2, yPos - Giraiffe_HEIGHT/2, Giraiffe_WIDTH/2, Giraiffe_HEIGHT/2);
    

    at the end of your giraiffe() method, you will see they are not at the right place, at all!

    It is probably related to the fact that the translate (xPos, yPos); call is inside a push/popMatrix pair.

  • I did a bit of trial & error to find out a more fitting rectangle bounding your shape.

    Here is the modified code:

    final int NUM_GIRAIFFES = 20;
    
    ArrayList<Giraiffe> giraff = new ArrayList<Giraiffe>();
    
    void setup() {
      size(800, 800);
      smooth();
      PFont f = loadFont("Arial-Black-48.vlw");
      textFont(f, 20);
    
      for (int i = 0; i < NUM_GIRAIFFES; i++) {
        giraff.add(new Giraiffe(width/2, height/2, (int)random(-10, 10), (int)random(-10, 10), (int)random(0, TWO_PI), random(0.5, 2)));
      }
    }
    
    // draw aliens by calling DrawMe method and change position calling update method.
    
    void draw() {
      background(99, 164, 252);
    
      for (int i = 0; i < giraff.size(); i++) {
        if (mousePressed && giraff.get(i).isClicked(mouseX, mouseY)) {
          giraff.remove(i);
        }
        else {
          giraff.get(i).giraiffe();
          giraff.get(i).update();
        }
      }
      if (giraff.size()==0) {
        for (int s = 0; s < NUM_GIRAIFFES; s++) {
          giraff.add(new Giraiffe(width/2, height/2, (int)random(2, 5), (int)random(2, 5), (int)random(0, TWO_PI), random(0.5, 2)));
        }
      }
      fill(0);
      text("Count: "+ giraff.size(), 30, 50);
    }
    
    //create TEXT class
    class Score {
      int score; //filed to store score
      //constructor
      Score() {
        score=0;
      }
    
      void update (int inc) {
        score += inc;
      }
    
      void drawScore() {
        fill(0);
        text("Score: " + score, width-100, 50);
      }
    }
    
    // create UFO class
    class Giraiffe {
    
      final int Giraiffe_WIDTH = 55;
      final int Giraiffe_HEIGHT = 130;
    
      int xPos = 0;
      int yPos = 0;
      int xSpeed = 8;
      int ySpeed = 8;
      int rotAngle = 0;
      float scaleFactor = 1;
    
      // UFO constrctor
      Giraiffe(int xPos, int yPos, int xSpeed, int ySpeed, int rotAngle, float scaleFactor) {
        this.xPos = xPos;
        this.yPos = yPos;
        this.xSpeed = xSpeed;
        this.ySpeed = ySpeed;
        this.rotAngle = rotAngle;
        this. scaleFactor = scaleFactor;
      }
    
      // Method to create the UFO
      void giraiffe() {
        pushMatrix ();
        translate (xPos, yPos);
    
        //scale(giraiffe1Scale);
        pushMatrix ();
    
        //scale(1.9);
        //  float rotateVar = map(mouseX, 0, width, -PI/4, PI/4);
        rotate(radians(rotAngle));
        //  float m = map(mouseY, 0, height, 0.5, 2.0);
        //  scale(m);
        //draw neck
        pushMatrix();
        scale(scaleFactor);
        translate(30, 0);
        strokeWeight(0.5);
        stroke(227, 196, 16);
        fill(240, 227, 106);
        ellipse(-176, -139, 20, 75);
        //draw body
        stroke(227, 196, 16);
        fill(240, 227, 106);
        ellipse(-156, -110, 55, 30);
        //draw ears
        stroke(227, 196, 16);
        fill(240, 227, 106);
        ellipse(-170, -175, 10, 5);
        stroke(227, 196, 16);
        fill(240, 227, 106);
        ellipse(-200, -178, 10, 5);
        //draw horn
        stroke(98, 85, 10);
        strokeWeight(0.5);
        fill(142, 122, 11);
        ellipse(-190, -180, 5, 10);
        ellipse(-180, -180, 5, 10);
        //draw tail
        stroke(0);
        strokeWeight(0.2);
        noFill();
        curve(-140, -125, -130, -115, -120, -110, -140, -110);
        fill(170, 152, 62);
        ellipse(-120, -110, 5, 5);
        //draw head
        rotate(0.4);
        strokeWeight(0.5);
        stroke(227, 196, 16);
        fill(240, 227, 106);
        //rotate(0.4);
        ellipse(-236, -76, 33, 40);
        //draw mouth
        strokeWeight(0.5);
        stroke(98, 85, 10);
        fill(170, 152, 62);
        ellipse(-238, -61, 19, 12);
        //draw the eyes
        fill(64, 55, 5); 
        ellipse(-248, -70, 3, 5);
        fill(64, 55, 5);
        ellipse(-230, -70, 3, 5);
        //Draw texture
        rotate(-0.4);
        noStroke();
        fill(137, 101, 11);
        ellipse(-175, -120, 10, 15);
        noStroke();
        fill(137, 101, 11);
        ellipse(-178, -115, 5, 5);
        noStroke();
        fill(137, 101, 11);
        ellipse(-175, -145, 5, 10);
        noStroke();
        fill(137, 101, 11);
        ellipse(-155, -110, 15, 10);
        noStroke();
        fill(137, 101, 11);
        ellipse(-135, -115, 5, 5);
        noStroke();
        fill(137, 101, 11);
        ellipse(-170, -105, 5, 5);
        noStroke();
        fill(137, 101, 11);
        ellipse(-140, -103, 5, 5);
        noStroke();
        fill(137, 101, 11);
        ellipse(-178, -170, 5, 5);
        //draw legs
        stroke(227, 196, 16);
        strokeWeight(0.5);
        fill(240, 227, 106);
        arc(-180, -105, 5, 35, 1/8*PI, PI-1/8*PI);  // upper half of circle
        arc(-172, -98, 5, 25, 1/8*PI, PI-1/8*PI);
        arc(-140, -100, 5, 25, 1/8*PI, PI-1/8*PI);
        arc(-133, -107, 5, 40, 1/8*PI, PI-1/8*PI);
        popMatrix();
    
        popMatrix();
    
        // Debug
        stroke(#FF0000);
        noFill();
        rect(
            -3.2 * scaleFactor * Giraiffe_WIDTH, 
            -1.5 * scaleFactor * Giraiffe_HEIGHT, 
            3 * scaleFactor * Giraiffe_WIDTH/2, 
            1.7 * scaleFactor * Giraiffe_HEIGHT/2);
    
        popMatrix();
      }
    
      // update method to change x, y positions
      void update() {
        xPos += xSpeed;
        yPos += ySpeed;
    
        if (xPos - Giraiffe_WIDTH/2 < 0 || xPos + Giraiffe_WIDTH/2 > width) {
          xSpeed *= -1;
        }
    
        if (yPos - Giraiffe_HEIGHT/2  < 0 || yPos + Giraiffe_HEIGHT/2 > height) {
          ySpeed *= -1;
        }
      }
    
      boolean isClicked(int x, int y) {
        return 
            x > xPos -3.2 * scaleFactor * Giraiffe_WIDTH && 
            y > yPos -1.5 * scaleFactor * Giraiffe_HEIGHT &&
            x < xPos - 0.2 * scaleFactor * Giraiffe_WIDTH/2 &&
            y < yPos + 0.2 * scaleFactor * Giraiffe_HEIGHT/2;
      }
    }
    
  • OMG!!! Thank you guys!! thanks for your help!! now it works! Thank you so much!!

Sign In or Register to comment.