Processingによるイージング

Processingでイージングを簡単に使えるものを作ったので紹介します。

参考サイト

• イージングチートシート: https://easings.net/ja#easeInOutElastic
• ヘロンの数学チャンネル: https://www.youtube.com/watch?v=I6GxFRtZcNE

使い方

1. Processing内で新しいタブを選び、一番下のコードをコピペする
2. easingFrameRateを更新する（通常は60)
3. Easingクラスを定義する

easing.pdf

Easing hoge;

1. 定義したEasingクラスを初期化する

easing.pdf

hoge = new Easing("イージングの種類", イージング時間[s]);

1. draw関数内でhoge.update()で更新し、０～１の更新された値を取得する

void draw(){
    float eased_value = hoge.update();
}

Sample Code

sample.pde

// easingの初期化
int easingFrameRate = 60;
int waitingTime = 2;
Easing easeX = new Easing("easeInOut", waitingTime);
Easing easeY = new Easing("linear", waitingTime);

void setup() {
  size(500, 500);
  frameRate(60);
}

void draw() {
  background(255);

  stroke(2);
  noFill();
  rect(100, 100, 300, 300);

  noStroke();
  fill(#6A90E0);
  float eased_x = easeX.update();
  float eased_y = easeY.update();

  // 0 ~ 1の値を0 ~ 300の値に拡大する。
  ellipse(eased_x * 300 + 100, eased_y * 300 + 100, 20, 20);
}

下記のGifのようなものを出力します。

イージングの種類

linear

easeIn

easeInBack

easeInCirc

easeInElastic

easeInOut

easeInOutBack

easeInOutCirc

easeInOutElastic

easeOut

easeOutBack

easeOutCirc

easeOutElastic

Code

class Easing {
  String type;
  float period;
  float time;
  Easing(String type, float period) {
    this.type = type;
    this.period = period * easingFrameRate;
    this.time = 0;
  }

  // time ease in 0 to 1
  // A larger time include returning value

  Float update() {
    Float result = null;

    if (type == "linear") result = linearEase();
    if (type == "easeIn") result = easeIn();
    if (type == "easeOut") result = easeOut();
    if (type == "easeInOut") result = easeInOut();
    if (type == "easeInCirc") result = easeInCirc();
    if (type == "easeOutCirc") result = easeOutCirc();
    if (type == "easeInOutCirc") result = easeInOutCirc();
    if (type == "easeInBack") result = easeInBack();
    if (type == "easeOutBack") result = easeOutBack();
    if (type == "easeInOutBack") result = easeInOutBack();
    if (type == "easeInElastic") result = easeInElastic();
    if (type == "easeOutElastic") result = easeOutElastic();
    if (type == "easeInOutElastic") result = easeInOutElastic();

    time++;

    if (result == null) {
      throw new RuntimeException("イージング名が無効です");
    }
    return result;
  }

  Float linearEase() {
    if (time > period) return 1.;
    return map(time, 0, period, 0, 1);
  }

  Float easeIn() {
    if (time > period) return 1.;
    float x = map(time, 0, period, 0, 1);
    float y = x*x;
    return y;
  }

  Float easeOut() {
    if (time > period) return 1.;
    float x = map(time, 0, period, 0, 1);
    float y = -(x*x) + 2*x;
    return y;
  }

  Float easeInOut() {
    if (time > period) return 1.;
    float x = map(time, 0, period, 0, 1);
    Float y = null;
    if (time <= period / 2) y = 2 * x*x;
    if (time > period / 2) y = -2 * (x-1)*(x-1) + 1;
    return y;
  }

  Float easeInCirc() {
    if (time > period) return 1.;
    float x = map(time, 0, period, 0, 1);
    float y = 1 - sqrt(1 - x * x);
    return y;
  }

  Float easeOutCirc() {
    if (time > period) return 1.;
    float x = map(time, 0, period, 0, 1);
    float y = sqrt(1 - (x-1)*(x-1));
    return y;
  }

  Float easeInOutCirc() {
    if (time > period) return 1.;
    float x = map(time, 0, period, 0, 1);
    Float y = null;
    if (time <= period / 2) y = (1 - sqrt(1 - (2*x)*(2*x))) / 2;
    if (time > period / 2) y = (sqrt(1 - (-2*x+2)*(-2*x+2)) + 1) / 2;
    return y;
  }

  Float easeInBack() {
    if (time > period) return 1.;
    float x = map(time, 0, period, 0, 1);
    final float c1 = 1.70158; // magic number!
    final float c3 = c1 + 1;
    float y = c3 * x*x*x - c1 *x*x;
    return y;
  }

  Float easeOutBack() {
    if (time > period) return 1.;
    float x = map(time, 0, period, 0, 1);
    final float c1 = 1.70158; // magic number!
    final float c3 = c1 + 1;
    float y = 1 + c3 * (x-1)*(x-1)*(x-1) + c1 * (x-1)*(x-1);
    return y;
  }

  Float easeInOutBack() {
    if (time > period) return 1.;
    float x = map(time, 0, period, 0, 1);
    final float c1 = 1.70158; // magic number!
    final float c2 = c1 * 1.525; // again magic!
    Float y = null;
    if (time <= period / 2)  y = ((2*x)*(2*x) * ((c2+1)*2*x -c2)) / 2;
    if (time > period / 2) y = ((2*x-2)*(2*x-2) * ((c2+1) * (x*2-2) + c2) + 2) / 2;
    return y;
  }

  Float easeInElastic() {
    if (time > period) return 1.;
    float x = map(time, 0, period, 0, 1);
    final float c4 = (2. * PI) / 3.;
    if (x == 0) return 0.;
    if (x == 1) return 1.;
    float y = -pow(2, 10*x - 10) * sin((x*10 - 10.75) * c4);
    return y;
  }

  Float easeOutElastic() {
    if (time > period) return 1.;
    float x = map(time, 0, period, 0, 1);
    final float c4 = (2 * PI) / 3;
    if (x == 0) return 0.;
    if (x == 1) return 1.;
    float y = pow(2, -10*x) * sin((x*10 - 0.75) * c4) + 1;
    return y;
  }

  Float easeInOutElastic() {
    if (time > period) return 1.;
    float x = map(time, 0, period, 0, 1);
    final float c5 = (2 * PI) / 4.5;
    if (x == 0) return 0.;
    if (x == 1) return 1.;
    Float y = null;
    if (time <= period / 2) y = -(pow(2, 20*x - 10) * sin((20*x - 11.125) * c5)) / 2;
    if (time > period / 2) y = (pow(2, -20*x + 10) * sin((20*x - 11.125) * c5)) / 2 + 1;
    return y;
  }
}