Processing——A Music Game for the Avengers

Music and Processing

差不多半年前，我就在processing平台上完成了一次十分粗略的音乐可视化。所以这次，在对Processing已经有了一定的了解之后的我，再次选择了踏上这条不归路。
不过，今时不同往日。这次，我先去学习了一些乐理相关的知识，并在掌握了一些知识之后才选择动手去实现程序。（但其实我学到的也仅仅是些皮毛，上面的链接是真的大佬写的干货。）

以上，简答说来就是对于同一八度而言，其音程分为12段，各个段的比为2的12次方根；然后每个八度相同的音或半音又是2倍关系。
OK，现在我们简单的掌握了一些十二平均律的相关知识，然后就要去寻找实现的方法了。而对于音频，最好的处理方法莫过于傅里叶变换。然而自己实现确实相对困难，好在Processing提供了相关的库——minim库。

初抚瑶琴谱新曲

通过minim库所包含的AudioPlayer类，可以达成提取音频的步骤，之后通过FFT类就可以对提取到的音频进行傅里叶变换，就可以获取在我们所规定的采样率下所获得的波谱频率。然后根据十二平均律的原理，对获得的频率进行处理，就可以得到想要的节奏了。

效果如下：有一种 launchpad 的感觉

这里bgm——MEGALOBOX,是我特意选取的一个节奏感极强的音乐，可以看出其节奏感还是有所体现的。（并且，根据本人实际测验，这种方法达到的效果会比minim库自带函数isKick() ,检测节奏的效果要好很多。）另外，还可以尝试使用这首BGM——The Diva Dance 音准很稳，可以看到明显的音阶。

ps:这里，我觉得是完全可以做成类似launchpad效果的作品的，点击特定地点产生指定频率的声音，minim库是有这种函数的。所以有兴趣的可以进行拓展，h65y。

主要代码如下：

String spe_area(){
  String result="";
  int n=0;
  float s=0;
  if(volumn>20){
    fft.forward(mus.left);
    for(int f=0; f<mus.sampleRate()/2; f++){
      max[f] = fft.getFreq(float(f));
    }
    max_freq=max(max);
    for (int i=0; i<max.length; i++){
      if(max[i]==max_freq){
        s=i-s;n+=1;
      }
      if(n==3){break;}
    }
  }
  if(s>55){
  float tem = s / 55;
  float y = log(tem) / log(2);
  float x = (log(s/(55*pow(2,int(y))))/log(2)*12);
  result=Float.valueOf(x).toString()+" "+Float.valueOf(y).toString();
  }
  return result;
}

复得易水赋英雄

得到了每首歌曲的节奏，之后就可以对这些数据进行处理和一些逻辑上的判定。就能获得一个简易版本的音游了。
效果如下：
哈哈哈，有些蠢，界面有点丑，操作的话就是a s d j k l对应相应的区域，或者脸滚键盘就行。

而且既然主题是Avengers吗，肯定会有情怀向的彩蛋啦！
彩蛋一（失败时）、

彩蛋二（成功时）、

彩蛋三 on your left

效果就像以上，下面来谈一谈实现原理。
首先是向上移动的彩色圆圈 无限宝石，是通过一个粒子类来实现，根据音乐节奏来刷新出生地点；并且当其达到无限手套宝石所在处则移除，切life值减1；当键盘产生事件则把对应的粒子从ArrayList中移除。

部分实现代码

for(Particle p : particles){
             p.run();
           } 
           for (int i=0; i<particles.size(); i++){
             if(particles.get(i).life == false){
               life = life - particles.get(i).yin_gao;
               particles.remove(i);
               i--;
             }
           }
          }  

if(key == 'a'){
    for(int i=0; i<particles.size(); i++){
      int yin_cheng =1;
      if(particles.get(i).yin_cheng == yin_cheng){
        particles.remove(i);break;
      }
    }
  }

部分Particle代码

class Particle{
  Particle(int yin_cheng, int yin_gao){
    float x = stone_x[yin_cheng-1];
    pos = new PVector(x,height);
    life = true;
    this.yin_gao = yin_gao;
    this.yin_cheng = yin_cheng;
  }
  void is_in(){
    float y = stone_y[yin_cheng-1];
    if(pos.y < y){
      life = false;
    }
  }
  void show(){
    pos.y = pos.y - 15;
    noStroke();
    int h = H[yin_cheng-1];
    int s = S[yin_cheng-1];
    int b = B[yin_cheng-1];
    fill(h,s,b);
    ellipse(pos.x,pos.y,12*pow(yin_gao,1/2),12*pow(yin_gao,1/2));
  }
  void run(){
    show();
    is_in();
  }
}

然后是彩蛋视频，但是实话说这并不是视频，而是序列帧动画，因为Processing自带的video库很不友好，仅支持mov格式视频播放，所以即使我通过各种方法转码视频都播放不了。因此，最终我选择了序列帧+MP3配音的方法。好在以上两样资源，都可以在AE+AME中很方便的进行获取。不过这样可能导致的后果就是会产生音画不同步的瑕疵。（但基本看不出来）

部分代码

       String ii = String.valueOf(index);
       String t="";
       if (ii.length()==1){ t="00";}
       if (ii.length()==2){ t ="0";}
       String name = "data" + "/" + "1"+"/"+"1" +t+ii+".png";
       fail_pic = loadImage(name);
       image(fail_pic,60,250,420,360);
       index+=5;
       fail.play();
       if(index >= 196){ dust_start = true;index=0;}}

最后就是灰尘的粒子效果，两种粒子图都是我先在ae中进行抠图设计 ，然后在导入matlab中进行数据处理，最后导进Processing中，使粒子系统在特定位置生成特定图案。所以当达成某种条件时，就产生哪种粒子就ok了。
Particle2中部分方法

void wind(){
    if(dust){
      float angle = random(0,PI/2);
      pos.x = pos.x + 5*cos(angle);
      pos.y = pos.y - 5*sin(angle);
    }
    else{ 
      if( (135+300-pos.y)/(480+30-pos.x)<tan(PI/2.001) && (135+300-pos.y)/(480+30-pos.x)>tan(PI/n)){
        float angle = random(PI/6,PI/3);
        pos.x = pos.x + random(-1,10)*5*cos(angle);
        pos.y = pos.y + random(-1,10)*5*sin(angle);
        dust = true;
      }
    }
  }
  
  void is_life(){
    if(pos.x>width || pos.y<0){
      life = false;
    }
  }

当然还有两个功能，start 和 restart 功能，比较简单就不展开了。

完美谢幕

实话说，并不能算完美。因为还有一下几点是可以进行优化的：一、字体 比如life、start和restart的字体描述，是可以在ae中去美化下的；二、无限宝石 其实是可以用真正的图片来替代的；三、游戏的逻辑问题，导致实际操作起来过于简单，而且也失去了我原本对乐理进行研究所实现的节奏检测的初心。前两点主要是因为懒(233,最后一点还是需要好好思考下游戏逻辑该怎么展开比较好。
所以这完美谢幕仅是对复联四的，哈哈哈。

最后，在心里默默祈祷下不会收到迪斯尼的律师函（溜了!

参考文献

《代码本色》