# 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: Another 1, but in p5js: Although technically not using easing, these 2 sketch links below act somewhat like it: `http://Studio.ProcessingTogether.com/sp/pad/export/ro.90vdKMfkiO\$zf`