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,最后一点还是需要好好思考下游戏逻辑该怎么展开比较好。
所以这完美谢幕仅是对复联四的，哈哈哈。

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

参考文献

《代码本色》