【Processing】インタラクティブな波紋を描く

Processing

こんにちは。Evening Music Records株式会社 でインターンをさせて頂いている鶴留です。
今回は、よりインタラクティブなアニメーションを作成していきます。具体的には、マウスをクリックすると、その位置に波紋ができるのと同時に、音が鳴るというものです。

音源の準備

今回、水滴の落ちる音を使ったので、こちらのサイト(https://soundeffect-lab.info/sound/various/)の「水滴3」というファイルをダウンロードして、プログラムのスケッチフォルダに追加してください。

実際に作る

 

import ddf.minim.*;

Minim minim;
AudioSample player;

ArrayList circleWaves;

void setup() {
  size(1280, 640);
  colorMode(HSB, 100);
  background(0);
  smooth();
  circleWaves = new ArrayList(); //ArrayListの使用を宣言

  minim = new Minim(this);
  player = minim.loadSample("water-drop3.mp3"); //効果音の読み込み
}

void draw() {
  for (int i = 0; i<circleWaves.size(); i++) {
    CircleWave circleWave = circleWaves.get(i);
    circleWave.move();
  }
}

void mousePressed() {
  player.trigger();
  circleWaves.add(new CircleWave(mouseX, mouseY, 0)); //波紋の追加
}

class CircleWave { //クラスの生成
  float x;
  float y;
  float r;
  CircleWave(float tempX, float tempY, float tempR) {
    x = tempX;
    y = tempY;
    r = tempR;
  }

  void move() {
    fill(0, 0, 0, 4);
    noStroke();
    rect(0, 0, width, height);
    colorMode(HSB, 360, 100, 100, 100);
    stroke(180, 100, 100, 100);
    noFill();
    ellipse(x, y, r, r);
    r = r + 10;
  }
}

実行できましたでしょうか。今回はクラスとArrayListを使ってみました。波紋のコードはクラス内で作成し、draw関数内で呼び出しています。mousePressed関数内のplayer.trigger();で音を再生しています。

単純ではありますが、自分の動作に合わせてものが動くのは面白いです。波紋以外にもクラスを作って、色々組み合わせてみるのも楽しいかと思います。
今回は以上になります。

音楽情報バイラルメディアEVENING:https://evening-mashup.com/
※ インターンシップの詳細はこちらから:https://evening-mashup.com/home/music-intern 
※ 就職活動に関する情報はこちらから: https://evening-mashup.com/evening-job 

コメント

タイトルとURLをコピーしました