Processing

音量に応じてキャラクター画像の大きさを変える! – Processingを使ってキャラクター操作をしてみよう

みなさん、こんにちは。どんぶラッコです。

このブログはProgLearn(プログラーン)という名前で運営をしていますが、ただProgLearnという名前で運営しているのは味気ないのでこの前ProgLearnのイメージキャラクターを作りました。

グランくん
グランくん
どうも、グランです
どんぶラッコ
どんぶラッコ
これからよろしくね

キャラクターを作ったはいいものの、活用方法がわからない…となっているのが現状です。

どうやって活用したらいいのかわからないのでとりあえず動かしてみることにしました

で、動かしてみた結果がこちらです。

グランくん
グランくん
PCマイク入力の音量に応じて動いたり、キーボードを入力すると画像が切り替わったりするんですよ!
どんぶラッコ
どんぶラッコ
(実装したの僕なんだけどなあ)

ということで、今回は↑の実装コードをご紹介しようと思います!

事前準備

使用しているのは Processingです。P5.jsのようにブラウザ上で動くライブラリもありますが、今回はデスクトップアプリケーション上で動くものを利用します。インストールしていない方はインストールしておくことをお勧めします。

Download -Processing.org

また今回、音声入力を取得するために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

参考にしてみてください!

ABOUT ME
どんぶラッコ
ECコンサルタント、システムエンジニアを経て、quintet株式会社CTOに就任。普段はNuxt.jsやLaravelを使用しています。

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
RELATED POST

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です