绘画系统--音乐画笔

本文主要记录在本次作业中对绘画的理解以及一个音乐绘画交互网页的实现过程。由于演示视频有两分钟左右，因此本文中没有放完整的演示动图,话不多说，先让我们来看一下三个画笔的动图。

一、什么是绘画？

首先，用抽象的思维来理解绘画，绘画可由四个要素组成：材料，作画者，交互方式，作品。

1.材料：绘画材料可以说是作画者直接或间接用来操纵的工具，它是最终作品的载体，个人觉得最终的绘画作品就是由材料被各种方法使用之后留下的痕迹。

2.作画者：在课上讨论的时候发现大家对作画者的定义有不同的看法，主要的分歧就是在–人认为的没有主观意识的事物在像人一样绘画时是否是绘画者，我的看法是，绘画可以从两个角度来看：作画者和看画者。在这之前我觉得存在一个问题：绘画的目的是什么？表达自己的想法？记录当下？出于喜欢？工作需要？逃避挨打（动物）？因此，从作画者的角度来看自己的行为是不是绘画就可以根据作画者对绘画目的的定义来看。从看画者的角度来看，作画者的定义就更宽泛了，如有时我们会认为雪天路上的脚印是一幅画，那么走路的人是不是就是作画者呢？

3.交互方式：作画者如何操作材料，交互方式是连接作画者，材料，作品三者的关键一步，随着技术的发展，交互方式越来越多。如果单从交互方式来看，我的感受是交互的趋势是越来越细微，趋向于个人化以及个人体验。

4.作品：即呈现效果。

二、音乐绘画系统介绍

1.故事背景
这个想法是源自小时候看过的一部香港的僵尸片《音乐僵尸》，很长一段时间我都相信音乐拥有控制僵尸行动的能力，因此这个系统的整个实现思路也就是通过生成音乐来控制画笔的运动。

2.功能介绍
系统功能包括：音乐画笔，音乐合成及记录，音乐可视化。
音乐画笔：点击钢琴键生成对应单音，同时在画图区画笔就会随着音乐而动。
音乐合成及记录：本系统自带音乐记录功能，弹奏完成之后可以点击“playRecordMusic”进行录音回放，点击“resetRecordMusic”可进行重新录音。
音乐可视化：当琴曲演奏完成进行播放时会在画图区左边展示其时域和频域的频谱，同时在画图区右边会出现一个上下跳动的小球，小球跳动的幅度是根据选择的频率范围（bass,低音，中音，高音等）来决定的。

3.相关技术
系统是基于P5.JS实现，系统中共提供三种画笔，其中有两种是在老师提供的程序基础上实现的（图一和图二），图三的画笔以及系统中用到的播放音乐，傅里叶分析功能是在P5.js提供的程式库的基础上完成的。

图一

图二

图三

三.系统总体分析

1.与传统绘画系统的相同点和差别之处
本系统作为绘画系统，也包含了材料，作画者，交互方式，作品这四个元素，然而在一些方面又不同于一般的绘画系统，其中主要在交互方式及作品上与一般绘画系统有所区别。

2.优缺点
优点：
a.系统可以满足不同用户的绘画需求。
首先，对于会弹钢琴的人来说时，在流利演奏完之后，点击播放就可以一边听着自己弹奏的曲子一边欣赏自己用音乐作的画，同时还可以对自己的音乐进行频谱分析，如果不懂音乐或者不会弹钢琴的话，也可以先听每一个琴键发声同时观察对应的画笔运动，然后开启染色功能就可以用音乐作画了，在绘画的同时培养乐感。如果不想用音乐来控制画笔，也可以采用用鼠标在画图区绘画这样直接简单的方式作画，同时如果有些无法用音乐控制画笔完成也可以直接用鼠标或者手指完成。

b.功能丰富
系统集钢琴训练，乐感培养，绘画，频谱分析，音乐可视化等功能于一体，首先，界面中的每一个琴键点击后发出的声音对应着钢琴上相同位置的发音，音乐的播放速度能跟上手速，可得到实时演奏的效果。本系统有记录音乐的功能，在演奏完成之后可以循环播放或者继续重新演奏，可以在不断演奏及听的过程培养乐感。绘画功能是本系统的核心功能，系统提供三种画笔以及两种交互方式（音乐和鼠标操纵），同时用户可根据自己需要开启或者关闭“染色”功能（开启意味画笔走的每一步都会在画图区显示出来）。最后，使用系统还可以对音乐进行可视化分析，用户可以根据需要选择频率范围来对音频的变化幅度进行分析，也可以实时控制生成音乐，实时对音乐频谱进行分析，如下图。

c.界面友好
系统提供流畅细腻的交互体验，界面中所有会用到的快捷键信息都存放在页面右上角的“ShortCut”按钮中，可供用户随时查阅，用户通过鼠标移动，点击，双击以及拖拽滚轮移动以及键盘来与电脑交互，完成绘画，用户可以使用快捷键进行全屏绘画、清屏、切换画笔尺寸等操作。

缺点：由于是用音乐控制的原因，因此有时会无法用音乐控制画笔处理细微变化，但系统也提供了鼠标交互方式可解决这个问题。

四.总结与分析

由于学JavaScript是上学期的事情了，再加上之前的作业是用processing实现的，导致我作业做到一半发现我忘记了JS中函数调用是异步这一点，然而在此之前我是把我所有的代码都看成是同步的，然后我开始了与回调函数的各种斗争，再此记录这次得到血泪教训：时时刻刻要把异步记在脑子里。
虽然在实现过程的后阶段(调同步)比较痛苦，不过在寻找思路的过程中还是很享受的，当时看了很多有趣的视频，如一些介绍好玩的游戏或者新的有趣的交互方式等等，感觉见识了很多，视频链接以及画笔代码链接在下面。

五.相关链接

[1].图元模型p5.js版本
[2].processing音乐可视化
[3].processing–Kinect交互之Flow