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

インタラクティブなアニメーション作成...

こんにちは。Evening Music Recordsの鶴留です。

本記事では、音楽情報バイラルメディア「EVENING」の運営スタッフにより、テック関連情報をブログ形式でお届けさせていただきます。

今回は、よりインタラクティブなアニメーションを作成していきます。具体的には、マウスをクリックすると、その位置に波紋ができるのと同時に、音が鳴るというものです。

音源の準備

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

実際に作る

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