互动媒体——自画像+简单音乐可视化

   本次律老师布置的作业是一幅自画像，上一次用P5.js 绘制动态图形就让我收获到编程与艺术结合的快乐！ 这次来分享用processing实现艺术作品的过程.

码绘效果展示：

（与本人的肤色有点点出入~~~）在这里插入图片描述
按空格键可以播放音乐，并根据音乐来进行一些变换：

在这里插入图片描述
一个动态效果图：（格式转化之后有点糊~~）

主要过程

这里的话主要就是先大致的创作一个自画像，再根据创作的自画像来进行码绘，因为本人的手绘能力有限，也是参考了一款自定义的APP——脸萌，来着开始创作自己的自画像。

里面用的最多的函数时processing的arc函数，因为可以发现任意的一条曲线中的某一段，或者某几段都可以用圆或者，椭圆的一部分来绘制：

//某一段绘制的代码
arc(258,357,79,98,0.7*PI,1.2*PI);
arc(238,298,79,91,0.65*PI,1.3*PI);
arc(294,220,184,193,0.85*PI,1.5*PI);
arc(298,133,93,77,1*PI,1.6*PI);
arc(350,101,73,80,1.02*PI,1.625*PI);
arc(489,140,328,217,1.2*PI,1.7*PI);

void face(){
    
    

//glasses
rect(280, 360, 170, 110,50);
rect(505, 360, 170, 110, 50); 
arc(480,486,175,175,1.4*PI,1.58*PI);
stroke(0,0,0);
strokeWeight(10);
noFill();
arc(442,195,82,39,0.9*PI,1.7*PI);
arc(515,130,181,120,0.4*PI,0.7*PI);
arc(530,140,72,99,0.2*PI,0.54*PI);
arc(261,294,86,90,0.1*PI,0.5*PI);
}

总结一下，码绘的其实没有太多编程上的逻辑技巧，注意点细节和把该绘制的部分用函数封装好，便于后期做一些交互变换的操作。

交互及音频导入

1、鼠标键盘的交互
交互方面在processing里面时比较好实现的，processing将交互的操作都封装成完整的函数：


//用键盘上的空格键实现播放音乐以及
void keyPressed(){
    
    
 if(key==32)
 {
    
    
   if(music==1)
   {
    
    
   soundFile.play();
   play=1;
   music=2;
   }
   else
   {
    
    
   soundFile.stop();
   play=0;
   music=1;
   }
 }
}

在keyPressed里面写上简单的判断逻辑，注意的是键盘上按键的判断，一般键盘上的键用keycode判断对应的英文，某些特殊的键需要它的ASCII码用key来判断比如，我这里就是用key==32 ，来判断空格键。
鼠标的交互也同样有封装好的函数可以直接调用，只需要在里面加上自己需要实现的交互逻辑即可。
2、音频的导入
关于音频的导入不得不来吹下processing 比较厉害的地方，在processing
的编辑页面打开：
在这里插入图片描述

在libraryies里面找soud 下载（最好用校园网下载，我现在发现校园网下载这些import的包是真的快！！）

在程序开头里进行导入：

import processing.sound.*;
SoundFile soundFile;  
AudioIn input; 
Amplitude  amplit;

然后 soundFile = new SoundFile(this,path); 函数来打开音频文件，这里需要注意的是音频文件不能太大，我一开始导入都会报错，显示内存不足，我还以为是电脑问题，我后来用pr把音频都自己剪辑了一下输出，大概3M 大小是可以输入进去的，processing配置文件只需要把文件拖到sketch页面就可以自动生成data文件也很方便。
在这里插入图片描述
导入音频之后就可以用 ampvalue = amp.analyze(); 函数来获取音频输出的值，这里只是简单的用了音量的值，（因为大作业实在太多了，没有好好处理这个获得的值，以后有时间一定重新处理下）把这个值放大之后来用在动态图的某些参数上，这里需要把这个值放大一点，从输出来看这个值比较小：

//在颜色和位置上都用到了这个ampvalue
 fill(ampvalue*10000,0,0);
 text("¶",10,y+30);
 fill(30,ampvalue*10000,160);
 text("♪",100,y);
 fill(0,ampvalue*10000,ampvalue*10000);
 text(" ♫ ",300,y+random(50,60));
 fill(ampvalue*10000,ampvalue*10000,0);
 text("¶",500,y-50);

soundFile.play(); soundFile.stop(); 用来进行音频的播放和停止，我用简单的逻辑把跟键盘响应事件结合起来，就有了打开按空格播放的效果。

大致来说这个交互作品用processing实现起来还是比较有意思的，后面也有很多需要交互改进的地方~