本次律老师布置的作业是一幅自画像,上一次用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实现起来还是比较有意思的,后面也有很多需要交互改进的地方~