Processing｜地震で揺れたような画像加工

Processing（プロセッシング）の勉強をしています。コードを書いて、ビジュアルを作ったり、音声を視覚化することができます。

本で勉強してから、AI（Chat GPTやGeminiなど）でコードを書いてもらって実験をしています。

地震で揺れたような画像加工のコード。

Before

Afrter

両端の画像枠のブレがやや気になりますね。

Code

PImage img;
PGraphics pg;

// レイヤーは少なめでOK
int layers = 4;

// 揺れ（ズレ）の基準量
float shakePower;

void setup() {
  size(4240, 2832); //画像のサイズを入力

  img = loadImage("photo.jpg"); //画像のファイル名を入力

  // 画像サイズ基準でズレ量を決定
  shakePower = img.width * 0.08; // 0.05〜0.12で調整

  pg = createGraphics(width, height);
  imageMode(CENTER);
  noStroke();

  renderAndSave();
  exit();
}

void renderAndSave() {
  pg.beginDraw();
  pg.background(0);
  pg.imageMode(CENTER);
  pg.noStroke();

  pg.translate(width / 2, height / 2);

  for (int i = 0; i < layers; i++) {

    // 均等に並ばせるための基準値
    float step = map(i, 0, layers - 1, -1, 1);

    // 非線形に歪ませる（端だけ大きく飛ぶ）
    float warped = pow(abs(step), 1.8) * sign(step);

    // レイヤーごとに不均一な倍率
    float factor = random(0.6, 1.4);

    // わずかに方向を崩す（完全な水平を避ける）
    float angle = random(-PI * 0.04, PI * 0.04);

    float dx = cos(angle) * warped * shakePower * factor;
    float dy = sin(angle) * warped * shakePower * factor * 0.2;

    // 透明度も不均一に
    pg.tint(255, map(i, 0, layers - 1, 90, 30));
    pg.image(img, dx, dy);
  }

  pg.noTint();
  pg.endDraw();

  pg.save("earthquake_layered_fixed.png");
}

// 符号を返す関数
float sign(float v) {
  return v < 0 ? -1 : 1;
}

関連図書

私はまず、下記の本でProcessingの基礎を学びました。ビジュアル的な作例が多いのでおすすめです。

Processing クリエイティブ・コーディング入門
―コードが生み出す創造表現