Question: Trouble with mouseOver

edited December 2013 in Hello Processing

Hi Dan,

Thanks for a great tutorial. I was working on this [http://hello.processing.org/display/#7870382](chomping, blinking Domo) - and unfortunately only the chomps, not the blinks, work. I'd like him to blink when mouseOver. I had assumed that the within-browser tutorial wouldn't be able to accommodate all Processing commands, but maybe I'm wrong on that. Here's the code:

void setup() {
    size(500,400);
}


void draw() {
    background(15,175,21);

    stroke(19,15,10);
    fill(64,36,19);
    rect(150, 50, 200, 300);
    rect(350, 125, 25, 150);
    rect(125, 125, 25, 150);
    rect(150, 350, 50, 40);
    rect(300, 350, 50, 40);


    if (mousePressed == true) {
    stroke(23,4,4);
    fill(255,249,249);
    rect(175, 150, 150, 5);
     text("CHOMP!", mouseX, mouseY);
    } else {
    stroke(23,4,4);
    fill(141,1,1);
    rect(175, 150, 150, 50);
    }

    stroke(2,2,2);
    fill(2,2,2);
    if (mouseOver == true) {
        ellipse(175, 100, 20, 5);
        ellipse(325, 100, 20, 5);
    } else {
        ellipse(175, 100, 20, 20);
        ellipse(325, 100, 20, 20);
    }
}

Apologies if this is the wrong forum for what may be, essentially, just a beginner's question.

a

Answers

  • The mouseOver() function is not part of 'vanilla' Processing, it looks like it's unique to Processing.js (so in fact, it only works within the browser). It is a function (hence the brackets()) which is called when the mouse enters the sketch canvas, not a variable. If you check the main Processing reference, you can see there is both a mousePressed variable, and a mousePressed() function. You've used the 'mousePressed' variable (with no brackets), but there is no equivalent mouseOver variable, only the function: mouseOver().

    This variation of your code should show the difference:

    void setup() {
      size(500, 400);
    }
    
    
    void draw() {
      background(15, 175, 21);
    
      stroke(19, 15, 10);
      fill(64, 36, 19);
      rect(150, 50, 200, 300);
      rect(350, 125, 25, 150);
      rect(125, 125, 25, 150);
      rect(150, 350, 50, 40);
      rect(300, 350, 50, 40);
    
    
      if (mousePressed == true) {
        stroke(23, 4, 4);
        fill(255, 249, 249);
        rect(175, 150, 150, 5);
        text("CHOMP!", mouseX, mouseY);
      } 
      else {
        stroke(23, 4, 4);
        fill(141, 1, 1);
        rect(175, 150, 150, 50);
      }
    }
    
    void mouseOver() {
      stroke(2, 2, 2);
      fill(2, 2, 2);
      ellipse(175, 100, 20, 5);
      ellipse(325, 100, 20, 5);
    }
    
    void mouseOut() {
      stroke(2, 2, 2);
      fill(2, 2, 2);
      ellipse(175, 100, 20, 20);
      ellipse(325, 100, 20, 20);
    }
    

    I suspect that is not the effect you were looking for, though. Since the mouseOver() and mouseOut() functions are only called when the cursor enters and leaves the sketch, if you wanted the eyes to remain open or closed you could add a boolean variable to keep track of that, and switch that to true when the cursor enters the canvas or to false when the mouse leaves the canvas. I'm not sure whether you'll have looked at variables yet, but something like this is what I assume you're looking for:

    boolean mouseInCanvas= false;
    
    void setup() {
      size(500, 400);
    }
    
    
    void draw() {
      background(15, 175, 21);
    
      stroke(19, 15, 10);
      fill(64, 36, 19);
      rect(150, 50, 200, 300);
      rect(350, 125, 25, 150);
      rect(125, 125, 25, 150);
      rect(150, 350, 50, 40);
      rect(300, 350, 50, 40);
    
    
      if (mousePressed == true) {
        stroke(23, 4, 4);
        fill(255, 249, 249);
        rect(175, 150, 150, 5);
        text("CHOMP!", mouseX, mouseY);
      } 
      else {
        stroke(23, 4, 4);
        fill(141, 1, 1);
        rect(175, 150, 150, 50);
      }
    
      stroke(2, 2, 2);
      fill(2, 2, 2);
      if(mouseInCanvas==true){
        ellipse(175, 100, 20, 5);
        ellipse(325, 100, 20, 5);
      }
      else{
        ellipse(175, 100, 20, 20);
        ellipse(325, 100, 20, 20);
      }
    }
    
    void mouseOver() {
      mouseInCanvas = true;
    }
    
    void mouseOut() {
      mouseInCanvas= false;
    }
    

    Hope that helps, and obviously if you have further questions please ask :)

  • edited December 2013

    A nice solution here would be to use the dist() function. If the mouse is less than 50 pixels away from 175,100 do one thing, otherwise do another.

      if (dist(mouseX,mouseY,175,100) < 50) {
        ellipse(175, 100, 20, 5);
        ellipse(325, 100, 20, 5);
      } 
      else {
        ellipse(175, 100, 20, 20);
        ellipse(325, 100, 20, 20);
      }
    
Sign In or Register to comment.