Animate object & slow down when reaching limits

smoothstep() examples

https://en.wikipedia.org/wiki/Smoothstep is a core function that exists in GLSL (shader programming). Here you can find it ported to java.

Example of soft limits and interaction

// An example of setting left and right limits for motion

// This comes from my live performance software, in which I want to control
// Peasycam's distance with a knob. I want freedom to move, but I also
// want to set certain limits so I don't get too close or too far (as it has happened
// in previous performances :) At the same time, I don't want to "hit an invisible wall" 
// when zooming in or out, I want that it progressively ignores my orders if I'm doing
// the wrong thing.

float xPos = 450;
float xSpeed = 0;

void setup() {
  size(900, 300, P2D);
}
void draw() {
  background(255);
  ellipse(xPos, 150, 50, 50);
  
  xSpeed = map(mouseX, 0, width, -20, 20);
  
  if(xSpeed < 0) {
    // If going left, limit speed when in given range
    // The closer we are to the edge, the stronger the speed reduction.
    // Values below 150 become 0. Above 400 they become 1.
    xSpeed *= smootherstep(150, 400, xPos);
  } else {
    // If going right, limit speed when in given range
    // Values below 700 become 1, above 850 they become 0
    xSpeed *= 1-smootherstep(700, 850, xPos);
  }
  
  xPos += xSpeed;
}

float smoothstep(float edge0, float edge1, float x) {
  x = constrain((x - edge0) / (edge1 - edge0), 0, 1);
  return x * x * (3 - 2 * x);
}
float smootherstep(float edge0, float edge1, float x) {
  x = constrain((x - edge0) / (edge1 - edge0), 0, 1);
  return x * x * x * (x * (x * 6 - 15) + 10);
}

Example using smoothstep() for easing

void setup() {
  size(900, 300, P2D);
}
void draw() {
  background(255);
  
  // Make a normalized triangle wave with a period of 400 frames
  float x = abs((frameCount % 400) - 200) / 200.0;
  
  ellipse(100 + x * 500, 50, 50, 50); // linear
  ellipse(100 + smoothstep(0, 1, x) * 500, 150, 50, 50); // smooth
  ellipse(100 + smootherstep(0, 1, x) * 500, 250, 50, 50); // smoother
}

float smoothstep(float edge0, float edge1, float x) {
  x = constrain((x - edge0) / (edge1 - edge0), 0, 1);
  return x * x * (3 - 2 * x);
}
float smootherstep(float edge0, float edge1, float x) {
  x = constrain((x - edge0) / (edge1 - edge0), 0, 1);
  return x * x * x * (x * (x * 6 - 15) + 10);
}
2 Likes

I’ve got this old easing sketch example link: :link:
“Easing Box” -> Studio.ProcessingTogether.com/sp/pad/export/ro.9XkJm3bjTAxB2

Another 1, but in p5js: :asterisk:


Although technically not using easing, these 2 sketch links below act somewhat like it: :upside_down_face:
“Chase-Shadow Circles” -> Studio.ProcessingTogether.com/sp/pad/export/ro.9GTDpA6dp4tH1

“Follow My Lead Closely!”:
http://Studio.ProcessingTogether.com/sp/pad/export/ro.90vdKMfkiO$zf

1 Like