How can I create an "Easing Effect"

jkr137

How can I smooth/easing the animation out? so it looks more like it would be floating instead of wiggling. The ellipse is wiggling... is there a possible solution for this, to smooth it out, like it would "float in the space"?

void Wiggler () {
  // variables
  float x, y;
  float ex, ey;
  x = width/2;
  y = height/2;
  ex = x;
  ey = y;

  // value
  x += random(-10, 10); 
  y += random(-10, 10); 

  // smoothing/easing
  ex += (x - ex) * 0.5;
  ey += (y - ey) * 0.5;

  ellipse(ex, ey, 625, 625);
}

matthieu

https://processing.org/examples/easing.html

jkr137

it doesn't work... can't figure it out:

  float x = width/2;
  float y = height/2;
  float easing = 0.05;

  float targetX = x;
  float dx = targetX - x;
  x+= dx * easing;

  float targetY = y;
  float dy = targetY - y;
  y+= dy * easing;

  // value
  x += random(-2, 2); 
  y += random(-2, 2); 

  ellipse(x, y, 300, 300);

koogs

runnable examples will get you better results.

jkr137

the problem is, i can't find any examples. Only mouse following examples...

koogs

do you have runnable code? then post that.

currently we have one method. so we have to write everything else ourselves. this means two things: a) we won't bother or b) we will have different code to you. neither of which will get you quality answers.

jkr137

yes, here:

float x = width/2;
float y = height/2;
float easing = 0.05;
float targetX = x;
float dx = targetX - x;
float targetY = y;
float dy = targetY - y;

void setup() {

  size (880, 800);
}
void draw() {
  background (0);
  fill(255);
  y+= dy * easing;
  x+= dx * easing;

  x += random(-5, 5); 
  y += random(-5, 5); 

  ellipse(x, y, 300, 300);
}

koogs

something.

float targetX, targetY;
float oldX, oldY;
float easing = 0.05;

void setup() { 
  size (880, 800);
  oldX = targetX = width / 2;
  oldY = targetY = height / 2;
}

static final int STEPS = 30;

void draw() {
  background (0);
  fill(255);

  // new target every few frames
  if (frameCount % STEPS == 0) {
    oldX = targetX;
    oldY = targetY;
    targetX += random(-100, 100);
    targetY += random(-100, 100);
  }

  // sinusoidal easing between old and new point
  float pos = sin((frameCount % STEPS) * HALF_PI / STEPS);
  float x = map(pos, 0.0, 1.0, oldX, targetX);
  float y = map(pos, 0.0, 1.0, oldY, targetY); 

  ellipse(x, y, 300, 300);
}

we've done easing before. the above uses sine wave to accelerate out of the initial position and decelerate into the new target position

the problem is the movement of the target - it's just random so you do see sudden changes of direction, which isn't great.

jkr137

cool thank's! i've got only one problem. if i create a separate function of this code, it keeps flashing? i don't know why.