互动媒体技术之绘画系统

一.绘画的概念

百度百科上对于绘画的阐释为：

绘画（painting）在技术层面上，是一个以表面作为支撑面，再在其之上加上颜色的做法，那些表面可以是纸张或油画布（canvas）、木材、玻璃、漆器或混凝土等。加颜色的工具可以通过画笔、也可以通过刷子、海绵或是布条等。在现代，还可以通过计算机软件用鼠标手写板进行数码绘图，实现无纸化数字图像保存，避免了资源的浪费。也使得观看照片更加方便、美观。
在艺术用语的层面上，绘画的意义亦包含利用此艺术行为再加上图形（drawing）、构图及其他美学方法去达到画家希望表达的概念及意思。

在老师给出的文章中，绘画可以看做以下四个元素的构成：

1. 材料：颜料，画布，画笔等物质要素
2. 作画者：创作的思想/技法有关的内容
3. 交互方式：作画者如何操作材料
4. 作品：即呈现效果。通常的绘画作品

拉斐尔的《雅典学院》

很多人会觉得，绘画不就是在纸上涂涂画画嘛，实则不然，这只是技术层面上狭义的绘画，现今随着科学技术的发展和人们思维的拓宽，绘画在形式上和材料上都有了突破，不再局限于画笔和纸张，变得更加多样化。下面我们就欣赏几张独特的绘画。

用胶带作画

毕加索的光绘画

用人群画出的奥黛丽赫本

其它还有许多用烟雾作画，烟花作画，啤酒，火焰作画等等新颖的作画方式，在此就不一一展示。

对此感兴趣的可以浏览一下这篇博客：什么是绘画？——以抽象思维理解绘画

二.系统概况

系统参考了西河某人的文章，万分感谢！

2.1平台选用
刚开始在unity和p5.js之间犹豫，后来分别看了unity和p5的示例demo后，选用了p5，原因有以下几点：

1. 当然是因为p5简单啊！ p5本就是针对于图形的平台，相较于unity来说没有那么复杂。
2. unity上实现的绘画系统不仅美观性不好，而且代码也非常繁复，相较而言p5的效果比较美观。
3. 没有找到unity合适的参照示例（555）
   
   2.2系统整体

整个绘画系统有16个颜色按钮和11个功能按钮
颜色的选用
太多的颜色让人难以选择，太少的颜色又让人难以作画，一开始本打算使用12色环中的颜色，结果发现颜色太过鲜艳，有种廉价感。

后来又想到非常具有“高级感”的莫兰迪色，可是发现莫兰迪色的色卡大多偏向灰色系，颜色不够丰富，也放弃了。做作业听着圣诞歌的我想着，今年快结束了，要不去看看今年的流行色，一通查找资料（偷懒）后，从潘通色卡中选取了16个颜色。

功能的选取
自己的编程功力不够555，实现的是一些非常基础的图形绘制和功能，下面会具体介绍各个功能的实现。

2.3系统功能详解
1.按钮的实现

通过定义按钮函数并将功能按钮和颜色按钮定义为其子函数进行操作

function FuncBtn(X, Y, W, H, CMD) {
  this.x = X;
  this.y = Y;
  this.w = W;
  this.h = H;
  this.cmd = CMD;
}

按钮的绘制

2.动态图形绘制

点击所要绘制图形的按钮后 在作图区可以绘制动态图形
以矩形为例，画出来的效果是这样的

关键部分代码

	translate(this.position.x, this.position.y);
    fill(this.size.x * this.R / 10, this.size.x * this.G / 10, this.size.x * this.B / 10, round(sin(this.timepast) * 128));
    rect(sin(this.timepast) * this.baseSize.x, cos(this.timepast) * this.baseSize.y, this.size.x * 1.25, this.size.y * 1.25);
    fill(this.size.x * this.R / 10, this.size.x * this.G / 10, this.size.x * this.B / 10, 255);
    rect(sin(this.timepast) * this.baseSize.x, cos(this.timepast) * this.baseSize.y, this.size.x, this.size.y);
    resetMatrix();

类似地，三角形，圆形和画线的动态图形绘制，实现方法相似。

3.光晕图像

听到舍友讨论滤镜，我想着滤镜怎么实现，最后滤镜没实现，做出来一个类似于光晕的东西，看着也不是很难看，也就保留下来了。
效果图

关键代码

 else if (this.shapeType == "ADD") {
    noStroke();
    fill(random(0,255), random(0,255), random(0,255),10);
    var widthDistance = this.mouseX;
    ellipse(this.mouseX, this.mouseY, widthDistance, widthDistance); 
  }

4.橡皮擦
之前图像的绘制都是通过定义不同的笔刷类型来实现的
橡皮擦也是同理 不过这里笔刷的操作不再是绘制图像 而是分离并且消除图形

else if (brushType == "ERASER" && objs.length > 0) {
      for (var i = 0; i < objs.length; i++) {
        if (sqrt(sq(objs[i].position.x - mouseX) + sq(objs[i].position.y - mouseY)) <= eraserRange) {
          objs.splice(i, 1);
          break;

        }

5.图形的暂停，继续，保存和时停操作

暂停，继续和保存功能不用细说

else if (this.cmd == "pause") {
    isPlaying = false;
    for (var i = 0; i < objs.length; i++) {
      objs[i].isPlaying = false;
    }
    this.cmd = "play";
  } else if (this.cmd == "play") {
    isPlaying = true;
    for (var i = 0; i < objs.length; i++) {
      objs[i].isPlaying = true;
    }
    this.cmd = "pause";
  } else if (this.cmd == "timer") {
    brushType = "TIMER";
  }else if (this.cmd == "save") {
     saveCanvas("Painting", "png")
  }

可能会有人疑惑时停是什么功能
时停是对选中区域图形状态的修改并且使其静止

else if (brushType == "TIMER" && objs.length > 0) {
      for (var i = 0; i < objs.length; i++) {
        if (sqrt(sq(objs[i].position.x - mouseX) + sq(objs[i].position.y - mouseY)) <= timerRange) {
          objs[i].timepast += 2 / FPS;
          objs[i].isPlaying = false;
        }

6.加载音乐

觉得只是图形有点枯燥？加点音乐233

<embed src="Sufjan Stevens - Only At Christmas Time.mp3" autostart=trueloop=true hidden="true">

用了一首很有节日气氛的歌
就当祝大家双旦快乐咯

邀请大家欣赏我的大作一份
555这哪是海边啊 画的太丑了吧

三.传统绘画和电脑绘画的比较

在了解了绘画的概念并完成了绘画板系统的制作后，可以感受到两者之间既有相似性和差异性，在这里我们探讨一下他们两者之间的差异。

• 艺术价值上：传统绘画有着不可复制的独一无二性，以及丰厚的艺术底蕴，更多的呈现了一种艺术美感性与传统的质朴性，这是电脑绘画不可与之媲美的。
• 工具材料：电脑绘画因为电脑工具以及技术的应用，有着数不尽的素材，颜色和画布可以使用，在颜色等的选取上十分精准，传统绘画需要调色，而电脑绘画只需要输入rgb数值就可以精确地获得颜色。
• 传输性：传统绘画由于承载物的限制，其传播常常受到局限在某个地域，而电脑绘画往往在网络上传播地更为广泛，电脑绘画相较于传统绘画，有更低的欣赏门槛，所以有更强的大众性。
• 应用：电脑绘画是时代的产物，随着科技发展，其独特的可交互性势必将会得到更广泛的应用，这是传统绘画无可比拟的。
• 便利性：电脑绘画实现了人机对话，操作十分便捷，同时电脑绘画可重复修改和复制，清洁卫生，十分方便。

四.学习收获

主题总结

虽然传统绘画和电脑绘画的表现形式不一样，但两者的艺术性的内核是一样的，一切绘画基础都是奠定在素描功底上的，电脑绘画同样也离不开这些基本功。电脑绘画艺术是一种新的艺术表现形式，在运用电脑作画时，着重点应该立足于艺术的修养，其次才是技术的训练，让电脑为表达情感而作画。最有艺术生命力的作品是那些将技术的力量和艺术家的创造智慧完美结合起来的作品，它表明创作者有足够的能力和智慧来驾驭这种新的媒介，并借技术语言准确、生动地传达的思想。因此，在电脑绘画艺术这个领域，作品的艺术感染力和创造力依然是作品的灵魂。

总而言之，传统绘画艺术有着深厚的文化底蕴和历史渊源，仍然散发着巨大的艺术魅力，弥久愈香，不论电脑绘画艺术发展如何先进，是决不可能取代传统绘画艺术，电脑绘画艺术某种意义上来说，是另一种绘画艺术工具，电脑硬件和软件的使用丰富了传统绘画语言并用以表达出新的艺术观念，是传统绘画艺术的延续与发展。但从另外一方面来说，电脑绘画虽然无法代替传统绘画，但是，电脑的参与推动了绘画艺术的大众性，为人们认识美术，提高创造能力起着十分重要的作用。

心得总结

本次实验让我对电脑绘画和传统绘画之间的异同有了更深入的了解，同时让我对p5.js的应用更加熟练，也让我认识到交互性应用的广阔前景，以后要更加认真地学习相关方面的知识。

参考资料：
西河某人的博客 https://me.youkuaiyun.com/qq_27534999
潘通中国官网 https://www.pantonecn.com/
什么是绘画？——以抽象思维理解绘画