p5.js Web Editor | hover - easing and coming together

xxxxxxxxxx
/*
 * Easing Functions - inspired by http://gizma.com/easing/
 * only considering the t value for the range [0, 1] => [0, 1]
 */
EasingFunctions = {
  // no easing, no acceleration
  linear: function(t) {
    return t
  },
  // accelerating from zero velocity
  easeInQuad: function(t) {
    return t * t
  },
  // decelerating to zero velocity
  easeOutQuad: function(t) {
    return t * (2 - t)
  },
  // acceleration until halfway, then deceleration
  easeInOutQuad: function(t) {
    return t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t
  },
  // accelerating from zero velocity 
  easeInCubic: function(t) {
    return t * t * t
  },
  // decelerating to zero velocity 
  easeOutCubic: function(t) {
    return (--t) * t * t + 1
  },
  // acceleration until halfway, then deceleration 
  easeInOutCubic: function(t) {
    return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
  },
  // accelerating from zero velocity 
  easeInQuart: function(t) {
    return t * t * t * t
  },
  // decelerating to zero velocity 
  easeOutQuart: function(t) {
    return 1 - (--t) * t * t * t
  },
  // acceleration until halfway, then deceleration
  easeInOutQuart: function(t) {
    return t < .5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t
  },
  // accelerating from zero velocity
  easeInQuint: function(t) {
    return t * t * t * t * t
  },
  // decelerating to zero velocity
  easeOutQuint: function(t) {
    return 1 + (--t) * t * t * t * t
  },
  // acceleration until halfway, then deceleration 
  easeInOutQuint: function(t) {
    return t < .5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t
  }
}
​
button = {
  'x': 0,
  'y': 0,
  'radius': 40,
  'hovering': false,
  'prevState': false,
  'animDuration': 1200,
  'animStarted': 0,
  'animating': false
};
​
let icon;
​
function preload() {
  icon = loadImage('finger-tap-signifier.png');
}
​
function setup() {
  createCanvas(200, 200);
  button.x = width/2;
  button.y = height/2;
}
​
function btn_update(btn) {
  // store previous state
  btn.prevState = btn.hovering;
​
  // find current state
  if (dist(mouseX, mouseY, btn.x, btn.y) < btn.radius) {
    btn.hovering = true;
  } else {
    btn.hovering = false;
  }
​
  if (btn.hovering && !btn.prevState) { /* && !btn.animating) {*/
    btn.animStarted = millis();
    btn.animating = true;
    console.log("hovering now");
  }
​
  if (!btn.hovering && btn.prevState) {
    console.log("stopped hovering");
    btn.animating = false;
  }
​
  let elapsed = ((millis() - button.animStarted) > button.animDuration);
  if (btn.hovering 
      && btn.animating
      &&  elapsed ) {
        btn.animating = false;
        
  }
​
  return btn.animating;
}
​
function btn_draw(btn) {
  let size = btn.radius;
​
  noStroke(255);
  if (btn.hovering) {
    fill(255);
    size = btn.radius + 5;
  } else {
    fill(200);
    size = btn.radius;
  }
​
  ellipse(btn.x, btn.y, size, size);
  imageMode(CENTER);
  image(icon, btn.x, btn.y, size*0.65, size*0.65);
}
​
function draw() {
  background(0);
  btn_update(button);
​
  if (button.animating) {
    let t = (millis() - button.animStarted) / button.animDuration;
    let pcent = EasingFunctions.easeOutQuart(t);
​
    fill(255, 255, 0);
    let x1pos = map(pcent, 0, 1, -30, (width/2)-50);
    let x2pos = map(pcent, 0, 1, width+30, (width/2)+50);
    ellipse(x1pos, height/2, 25, 25);
    ellipse(x2pos, height/2, 25, 25);
  }
  
  btn_draw(button);
}
Cookies

Sketch Files

Console

Preview
