# Animate object & slow down when reaching limits

**URL:** <https://discourse.processing.org/t/animate-object-slow-down-when-reaching-limits/15634>\
**Category:** Gallery\
**Created:** [November 19, 2019, 11:53am UTC](https://discourse.processing.org/t/animate-object-slow-down-when-reaching-limits/15634 "2019-11-19T11:53:31Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [November 19, 2019, 11:53am UTC](https://discourse.processing.org/t/animate-object-slow-down-when-reaching-limits/15634/1 "2019-11-19T11:53:31Z")

</div>

# smoothstep() examples

[https://en.wikipedia.org/wiki/Smoothstep](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

```auto
// 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

```auto
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);
}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 19, 2019, 12:13pm UTC](https://discourse.processing.org/t/animate-object-slow-down-when-reaching-limits/15634/2 "2019-11-19T12:13:32Z")

</div>

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

Another 1, but in p5js: *️⃣

> **[Damper Balls](http://bl.ocks.org/GoSubRoutine/fa085945d45152786698f44a9523ccac)**
>
> GoSubRoutine’s Block fa085945d45152786698f44a9523ccac

  

> <https://gist.github.com/GoSubRoutine/fa085945d45152786698f44a9523ccac>

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

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