Rollover for animation

Hey there, I've got a quick question. I was able to get a circle growing and shrinking to get the feeling of a pulsing circle. But now I'm trying to get it to do the pulsing only when I hit a key or roll over the circle with my mouse but I can't seem to get it to work. Can somebody help me out?

int pulse = 100;
int bigsmall = 1;

void setup()
{
  size(420, 420);
  ellipseMode(CENTER);
  frameRate(30);
  noStroke();
  fill(0);
  smooth();
}

void draw()
{
  if (pulse > 199) {
    bigsmall = 0;
    println("pulse: " + pulse + " bigsmall " + bigsmall);
  } else if (pulse < 101) {
    bigsmall = 1;
    println("pulse: " + pulse + " bigsmall " + bigsmall);
  }

  if (bigsmall == 1) {
    pulse += 2;
  } else if (bigsmall == 0) {
    pulse -= 2;  
  }

  background(255);
  ellipse(width / 2, height / 2, pulse, pulse);

}
Tagged:

Answers

  • // forum.processing.org/two/discussion/8291/rollover-for-animation
    
    static final int GROWTH = 3, FPS = 60;
    
    int diam = 100;
    boolean isGrowing = true;
    
    void setup() {
      size(600, 600, JAVA2D);
      smooth(4);
      frameRate(FPS);
    
      noStroke();
      fill(0);
      ellipseMode(CENTER);
    }
    
    void draw() {
      updateDiam();
      background(0350);
      ellipse(width>>1, height>>1, diam, diam);
    }
    
    void keyTyped() {
      isGrowing ^= true;
    }
    
    void mousePressed() {
      keyTyped();
    }
    
    void updateDiam() {
      diam += isGrowing? GROWTH : -GROWTH;
      diam = constrain(diam, 0, height);
    }
    
  • Thank you, I think I get what you did there, but what I wanted to do is to have the movement of the circle while the mouse is over the circle and when the mouse isn't over the circle there should be no movement (pulsing).

  • boolean isOverCircle() {
      return sq(mouseX - (width>>1)) + sq(mouseY - (height>>1)) < sq(diam>>1);
    }
    
  • Sorry, but I don't get what you mean by that… Could you explain this to me or where to work with the code?

  • edited November 2014
    // forum.processing.org/two/discussion/8291/rollover-for-animation
    
    static final int GROWTH = 4, FPS = 60, MIN_DIAM = 20;
    
    int x, y, d = 100, maxDiam;
    boolean isGrowing = true;
    
    void setup() {
      size(600, 600, JAVA2D);
      smooth(4);
      frameRate(FPS);
    
      noStroke();
      fill(0);
      ellipseMode(CENTER);
    
      x = width>>1;
      y = height>>1;
      maxDiam = height;
    }
    
    void draw() {
      if (!isOverCircle())  return;
    
      updateDiam();
      background(0350);
      ellipse(x, y, d, d);
    }
    
    void mousePressed() {
      isGrowing ^= true;
    }
    
    void updateDiam() {
      isGrowing ^= d < MIN_DIAM | d > maxDiam;
      d += isGrowing? GROWTH : -GROWTH;
    }
    
    boolean isOverCircle() {
      return sq(mouseX - x) + sq(mouseY - y) < sq(d>>1);
    }
    
  • Wow, that's perfectly working. Thank you so much! A strange thing is that the sketch only starts when I'm directly over the circle with my mouse. Is it possible that there already is the smallest circle from the start? I've tried a few things and I made the minimal diam of the circle to 150 but it still only starts when I'm at the right point...

  • void draw() {
      if (isOverCircle())  updateDiam();
      background(0350);
      ellipse(x, y, d, d);
    }
    
  • Yeah, this is working out. Thank you so much. Strangely, I have been working on a sketch with unfolding maps and when I put the code there, it is doing the exact opposite. When the mouse is outside of the circle it is pulsing and vice versa. The part where I changed it and where I put the map data looks like this: void draw() {

      if (!isOverCircle())  return;
      updateDiam();
    
      map.draw();
    
      ScreenPosition conflict = map.getScreenPosition(PointA);
      fill(265, 0, 0, 200);
      ellipse(conflict.x, conflict.y, d, d);
    }
    
Sign In or Register to comment.