みなさん、こんにちは。どんぶラッコです。
このブログはProgLearn(プログラーン)という名前で運営をしていますが、ただProgLearnという名前で運営しているのは味気ないのでこの前ProgLearnのイメージキャラクターを作りました。
キャラクターを作ったはいいものの、活用方法がわからない…となっているのが現状です。
どうやって活用したらいいのかわからないのでとりあえず動かしてみることにしました。
で、動かしてみた結果がこちらです。
ということで、今回は↑の実装コードをご紹介しようと思います！
事前準備
使用しているのは Processingです。P5.jsのようにブラウザ上で動くライブラリもありますが、今回はデスクトップアプリケーション上で動くものを利用します。インストールしていない方はインストールしておくことをお勧めします。
また今回、音声入力を取得するためにsoundライブラリを追加します。
ツール > ツールを追加 > Libraries を開き、 検索窓で sound と入力します。すると、 The Processing Foundation が提供している Sound ライブラリが表示されるので、選択・インストールしておいてください。
また、macOS Catalina では音声入力が許可されていないことがあります。Macをお使いの場合は、環境設定からProcessingのマイクへのアクセスを許可する必要があります。
具体的な設定方法は下記のnoteが参考になりました。
ProcessingのVideoライブラリがmacOS Catalinaで動かないのを直した
サンプルコード
では実際にコードを書いていきましょう。今回はこのようなコードを書きました。
import processing.sound.*;
Amplitude amp;
AudioIn in;
PImage img;
void setup()
{
size(700, 700);
img = loadImage("./src/normal.png");
amp = new Amplitude(this);
in = new AudioIn(this, 0);
in.start();
amp.input(in);
}
void draw()
{
background(255, 255, 255);
float ampNum = amp.analyze();
// グラン君のサイズ調整用
float imgAddSize = floor(ampNum*300);
imageMode(CENTER);
image(img, width/2, height/2, 500, 500 + imgAddSize);
}
void keyPressed() {
switchImageUrl(key);
}
void switchImageUrl(char key) {
String src = "";
switch(key){
case '1':
src = "./src/normal.png";
break;
case '2':
src = "./src/point.png";
break;
case '3':
src = "./src/surprise.png";
break;
default:
src = "./src/normal.png";
break;
}
img = loadImage(src);
}今回のポイントは3つです。
- sound ライブラリを使って音量を取得しよう！
- 画像を読み込んで表示しよう！
- キーボード入力を取得しよう！
sound ライブラリを使って音量を取得
さて、サンプルコードから該当部分を抜き出してみましょう。
import processing.sound.*;
Amplitude amp;
AudioIn in;
void setup()
{
amp = new Amplitude(this);
in = new AudioIn(this, 0);
in.start();
amp.input(in);
}
void draw()
{
float ampNum = amp.analyze();
}まず、音声入力は AudioIn を使っています。AudioIn(親のPApplet, チャンネル番号) を設定した上で、start()をすることでマイクからの入力を開始します。この部分がマイクからの入力を受け取っている部分になります。
次に、Amplitude::analyze()の機能を用います。新規インスタンスを作成した後、amp.input(in) を使うことで、どの入力をアンプに接続するかを指定します。inは先ほど述べた AudioIn のインスタンスですね。
そして、amp.analyze() を使うことで、入力音量を 0~1 の間の少数型(float)を返してくれています。
画像を読み込んで表示
PImage img;
void setup()
{
img = loadImage("./src/normal.png");
}
void draw()
{
imageMode(CENTER);
image(img, width/2, height/2, 500, 500 + imgAddSize);
}loadImage("ソースのパス")でイメージを読み込むことができます。また、imageMode(CENTER)は、座標の軸を画像のどこにするかを指定することができます
キーボード入力を取得
void keyPressed() {
switchImageUrl(key);
}keyPressed() は、キーボードが押されている時に発火する関数です。関数内で key を呼び出すと、どのキーボードが押されているかを判別することができます。例えば、 1キーを押下すると “1” という文字が出力されます。
今回は switchImageUrl() という関数を作成し、キーボードの入力に応じて画像の読み込み直しを実施しています。
以上です！ソースはgithubにも公開してあります。
https://github.com/cha1ra/glearn-animation
参考にしてみてください！
