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

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

码绘效果展示:

(与本人的肤色有点点出入~~~)互动媒体——自画像+简单音乐可视化_第1张图片
按空格键可以播放音乐,并根据音乐来进行一些变换
互动媒体——自画像+简单音乐可视化_第2张图片

互动媒体——自画像+简单音乐可视化_第3张图片
一个动态效果图: (格式转化之后有点糊~~)
互动媒体——自画像+简单音乐可视化_第4张图片

主要过程

这里的话主要就是先大致的创作一个自画像,再根据创作的自画像来进行码绘,因为本人的手绘能力有限,也是参考了一款自定义的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
的编辑页面打开:
互动媒体——自画像+简单音乐可视化_第5张图片
互动媒体——自画像+简单音乐可视化_第6张图片

在libraryies里面找soud 下载 (最好用校园网下载,我现在发现校园网下载这些import的包是真的快!!)

在程序开头里进行导入:

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

然后 soundFile = new SoundFile(this,path); 函数来打开音频文件,这里需要注意的是音频文件不能太大,我一开始导入都会报错,显示内存不足,我还以为是电脑问题,我后来用pr把音频都自己剪辑了一下输出,大概3M 大小是可以输入进去的,processing配置文件只需要把文件拖到sketch页面就可以自动生成data文件 也很方便。
互动媒体——自画像+简单音乐可视化_第7张图片
导入音频之后就可以用 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实现起来还是比较有意思的,后面也有很多需要交互改进的地方~

你可能感兴趣的:(互动媒体——自画像+简单音乐可视化)