Counting Clicks on a Picture

Hi, I'm new to the forum!

I've decided to make a cookie-clicker - RPG hybrid game. It's at the earliest stage of development. In other words, it has like 20 lines. I'm also new to Processing, and I'm wondering how I could count the amount of times I clicked on a certain image. I'm using version 2.0.3 and the code so far is:

PImage onedollar, twodollar, fivedollar, tendollar;

void setup() {
  size(1200,630);
  imageMode(CORNER);
  onedollar = loadImage("http:" + "//i952.photobucket.com/albums/ae3/DippyDomino/1dollar_zps764cf06a.png");
  twodollar = loadImage("http:" + "//i952.photobucket.com/albums/ae3/DippyDomino/2dollar_zps48681be1.png");
  fivedollar = loadImage("http:" + "//i952.photobucket.com/albums/ae3/DippyDomino/5dollar_zps1e6de6d4.png");
  tendollar = loadImage("http:" + "//i952.photobucket.com/albums/ae3/DippyDomino/10dollar_zpse42006c2.png");
}
void draw() {
  background(255);
  ellipse(mouseX, mouseY, 30, 30);
  image(onedollar,0,18);
  image(twodollar,0,168);
  image(fivedollar,0,318);
  image(tendollar,0,468);
}
Tagged:

Answers

  • Oh, and also, because the code is in active, how would I "println" that number of clicks?

  • edited July 2014 Answer ✓

    What you want to do is check where the mouse is when its clicked. I would use the mouseClicked() method found here: processing.org/reference/mouseClicked_.html .

    You can check for the mouse location in relationship to the image location by using tip 17 http://amnonp5.wordpress.com/2012/01/28/25-life-saving-tips-for-processing/, courtesy of Amnon. Lots of other good info there, as well.

    You will need to know the x and y coordinates of the corners of each image. And you will need a variable for each image to store the number of clicks. You will check for the mouse position in the mouseClicked, and if it is over a specific image, you will add to the variable for that image. You can then have a println after you add to the image variable.

    That make sense?

  • edited July 2014 Answer ✓

    I've made a class to represent the Money entity to help you advance: <):)

    // forum.processing.org/two/discussion/6253/counting-clicks-on-a-picture
    
    final class Money {
      final String name;
      final PImage img;
      final short x, y;
    
      int clicks;
    
      Money(String value, PImage pic, int px, int py) {
        name = value;
        img  = pic;
        x = (short) px;
        y = (short) py;
      }
    
      void display() {
        set(x, y, img);
      }
    
      void checkClick() {
        if (isMouseOverNote())  ++clicks;
      }
    
      boolean isMouseOverNote() {
        return mouseX >= x & mouseX < x+img.width
          & mouseY >= y & mouseY < y+img.height;
      }
    
      @ Override String toString() {
        return name + ": \t#" + clicks;
      }
    }
    
  • edited July 2014 Answer ✓

    Here is an example that I just changed a little from the examples that come with Processing (Topics>GUI>Buttons). Or you can be all fancy and use @GoToLoop s code :D

    /**
     * Button. 
     * 
     * Click on one of the colored squares in the 
     * center of the image to change the color of 
     * the background. 
     */
    
    int rectX, rectY;      // Position of square button
    int circleX, circleY;  // Position of circle button
    int rectSize = 90;     // Diameter of rect
    int circleSize = 93;   // Diameter of circle
    color rectColor, circleColor, baseColor;
    color rectHighlight, circleHighlight;
    color currentColor;
    boolean rectOver = false;
    boolean circleOver = false;
    
    int clickCount;
    
    void setup() {
      size(640, 360);
      rectColor = color(0);
      rectHighlight = color(51);
      circleColor = color(255);
      circleHighlight = color(204);
      baseColor = color(102);
      currentColor = baseColor;
      circleX = width/2+circleSize/2+10;
      circleY = height/2;
      rectX = width/2-rectSize-10;
      rectY = height/2-rectSize/2;
      ellipseMode(CENTER);
      clickCount = 0;
    }
    
    void draw() {
      update(mouseX, mouseY);
      background(currentColor);
    
      if (rectOver) {
        fill(rectHighlight);
      } else {
        fill(rectColor);
      }
      stroke(255);
      rect(rectX, rectY, rectSize, rectSize);
    
      if (circleOver) {
        fill(circleHighlight);
      } else {
        fill(circleColor);
      }
      stroke(0);
      ellipse(circleX, circleY, circleSize, circleSize);
    }
    
    void update(int x, int y) {
      if ( overCircle(circleX, circleY, circleSize) ) {
        circleOver = true;
        rectOver = false;
      } else if ( overRect(rectX, rectY, rectSize, rectSize) ) {
        rectOver = true;
        circleOver = false;
      } else {
        circleOver = rectOver = false;
      }
    }
    
    void mousePressed() {
      if (circleOver) {
        currentColor = circleColor;
      }
      if (rectOver) {
        currentColor = rectColor;
      }
    }
    
    void mouseClicked() {
      if (rectOver) {
        clickCount++;
        println(clickCount);
      }
    }
    
    boolean overRect(int x, int y, int width, int height)  {
      if (mouseX >= x && mouseX <= x+width && 
          mouseY >= y && mouseY <= y+height) {
        return true;
      } else {
        return false;
      }
    }
    
    boolean overCircle(int x, int y, int diameter) {
      float disX = x - mouseX;
      float disY = y - mouseY;
      if (sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
        return true;
      } else {
        return false;
      }
    }
    
  • Wow, thank you all! You guys are the best! ^-^

  • edited July 2014 Answer ✓

    Added the class Money instantiations and program is complete: :-bd

    /**
     * Money Notes (v2.0)
     * by  SkyStruck (2014/Jul)
     * mod GoToLoop
     *
     * forum.processing.org/two/discussion/6253/counting-clicks-on-a-picture
     */
    
    static final int NUM = 4;
    final Money[] notes = new Money[NUM];
    
    static final String SITE = "http://" + "i952.photobucket.com/";
    static final String FOLDER = "albums/ae3/DippyDomino/", EXT = ".png";
    static final String CURRENCY = "Dollar";
    
    void setup() {
      size(720, 630, JAVA2D);
      noLoop();
      frameRate(60);
    
      smooth(4);
      cursor(CROSS);
      fill(#2040A0);
    
      textSize(050);
      textAlign(LEFT, CENTER);
    
      createMoneyNotes(SITE + FOLDER);
      //createMoneyNotes(dataPath("") + "/");
    }
    
    void createMoneyNotes(String path) {
      notes[0] = new Money("One " + CURRENCY, 
      loadImage(path + "1dollar_zps764cf06a" + EXT), 
      0, 18);
    
      notes[1] = new Money("Two " + CURRENCY + "s", 
      loadImage(path + "2dollar_zps48681be1" + EXT), 
      0, 168);
    
      notes[2] = new Money("Five " + CURRENCY + "s", 
      loadImage(path + "5dollar_zps1e6de6d4" + EXT), 
      0, 318);
    
      notes[3] = new Money("Ten " + CURRENCY + "s", 
      loadImage(path + "10dollar_zpse42006c2" + EXT), 
      0, 468);
    }
    
    void draw() {
      background(0300);
      for (Money m: notes)  m.display();
    }
    
    void mouseClicked() {
      for (Money m: notes)  m.checkClick();
      redraw();
    }
    
    final class Money {
      static final int MARGIN = 030;
    
      final String name;
      final PImage img;
      final short x, y;
    
      int clicks;
    
      Money(String value, PImage pic, int px, int py) {
        name = value;
        img  = pic;
        x = (short) px;
        y = (short) py;
      }
    
      void display() {
        set(x, y, img);
        text(toString(), x+img.width + MARGIN, y+(img.height>>1));
      }
    
      void checkClick() {
        if (isMouseOverNote())  ++clicks;
      }
    
      boolean isMouseOverNote() {
        return mouseX >= x & mouseX < x+img.width
          & mouseY >= y & mouseY < y+img.height;
      }
    
      @ Override String toString() {
        return name + ": \t#" + clicks;
      }
    }
    
Sign In or Register to comment.