扩展的简单绘画系统与传统笔画分析

    期末的作业，老师让我们使用p5.js对绘画系统进行一个扩展。扩展？应该如何扩展呢？其实传统的绘画系统已经在我的脑海里根深蒂固，最先想到的应该都是画图的基本笔刷吧！画圆型，画方形，再组合，成一幅画。其实我想到的也是利用几何，思考着能不能基于最传统的几何图形和线进行一个扩展呢？本着这样的思想，我对我的整个系统的定义就有了——几何！然后就是梦幻。为什么想要一个梦幻的效果呢？可能因为我比较感性吧。

    有了一个基本的想法，我就开始对我的绘画系统开始进行一个编写了！

    首先来看一下这个系统能实现什么：（7个动图，可能比较大）

   

 

 

    因为自己写代码的能力有限，所以只能进行一个简单的扩展！

    可以看到，在最开始我是写了每个几何体，其中就有圆、方形、三角形、八边形、五角星，然后就是由这些基本图形进行组合，做出花的图案和类似方阵的图形。从第一个笔刷中，我主要是想让使用的人体会到几何图形的美。平时在做数学题的时候，你可能会感觉到，几何，是个很枯燥很烦人的东西，给人的感觉就是刻板、没有人情味、冷淡、甚至会觉得想远离，但是通过这个笔刷我想让大家感觉到，几何是个很美丽的东西！你可能会问，美丽在哪里呢？你觉得通过改变它的透明度，进行一个个的叠加，是不是会构成一个梦幻的效果呢？大大小小的圆，还能组成一个光影的效果，几何，其实也可以很美的。

   

   第二大部分的笔刷，我在第一个的基础上，对这些几何进行了一个变化，它会根据鼠标开始和结束的位置进行一个大小的改变，还有在画的旁边会随机出现不同颜色的几何图，现在来看，是不是更加具有了色彩和多样性?

 

 

    第三大部分的笔刷我则是使用了给人视觉冲突很强烈的颜色，每帧随机产生一个颜色，在滑动鼠标的时候会有种动感，但是停止的时候一切又停止了。我感觉这种颜色可能会比较接近抽象的表现，通过强烈的色彩对比表现一个人的内心想法，在绘制的时候是内心的波澜，而静止的时候一切归于沉寂，我想表现的就是那一瞬间思想上改变的过程。话说回来，我这个实现其实也是比较简单了，但是在冲击感上其实还是蛮强烈的。

 

 

    第四大部分的笔刷是去实现一个类似毛笔的效果。当你使用毛笔的时候，是怎样的呢？是不是先开始墨比较足够，画起来晕染的快，而到后面墨越来越少，也不是那么容易晕染，整体的线条就比较的刚硬。这个笔刷模仿的就是这个效果，当停留的久的时候，画笔会比较的大，而快速滑动的时候，画笔会很细长，而且一笔下去，颜色会越来越浅直到没有，仿佛掌握了真的毛笔一样，不过弊端就是需要快速滑动才会有比较细的笔触。

 

 

    第五部分则是动态的了，一个动态的几何表现。我想体现的就是跑动感，跑出一种随意的感觉。在这里，你不知道你下一步会跑出怎样的一个组合，一切都是未知而又充满期待的！

 

    第六部分是使用粒子系统体现一个动态的几何和线的组合，其实线和圆在一起总是可以组合成各种神奇样式的东西，让人百用不厌，同时好像又饱含了一些神奇的奥秘所在。我感觉随机出现而若隐若现的线条就像是宇宙中缥缈细碎物质一样，美丽而又神秘。

 

    第七部分就是想写一个随机生成了。为啥要随机呢？因为我觉得很多的时候人都是处于一个没有灵感的状态，比方说“今天吃什么啊？”“随便。”随便这个词让人觉得讨厌，但是很多的时候可以为我们提供很多的灵感。比方说我现在随便一个，虽然它随便出来的东西很奇怪，但是我其实第一眼看去其实像随便出来了一个地图，当然，一千个人的眼中有一千个哈姆雷特，你看到的又像是什么呢？还有后面随机出来的的不同色彩的方形，就像是一层一层的信纸叠积着。

 

  贴一下自己根据老师给的程序以及p5.js中GUI的例子进行的GUI编写，GUI的js文件需要从网站下载。

 

//画笔形状
var shape = ['circle', 'square', 'triangle', 'star', 'flower', 'octagon', 'aline', 'geometryFlower'];
var shape2 = ['circle', 'square', 'star', 'octagon', 'triangle'];
var shape3 = ['circle', 'square', 'triangle', 'star', 'flower', 'octagon'];
var shape4 = ['circle', 'square', 'triangle'];
var othershape = ['bugBrush', 'pixelBrush', 'brush3'];

//选择画笔类型
var brushFcn = ['PenBrushPaint', 'ChangeBrushPaint', 'ShiningBrushPaint', 'InkBrushPaint', 'RunBrushPaint', 'ParticleBrushPaint', 'OtherBrushPaint'];


//定义GUI
var guiMain;
var guiPenBr;
var guiChangeBr;
var guiShiningBr;
var guiInkBr;
var guiRunBr;
var guiParBr;
var guiOthBr;
var BrushGUIs = new Array();


function InitGUI() {

  //主界面
  guiMain = createGui('Paint', 10, 250);
  sliderRange(6, 48, 1);
  guiMain.addGlobals('brushFcn');

  //钢笔的界面
  guiPenBr = createGui('PenBrush', 10, 360);
  sliderRange(1, 200, 1);
  guiPenBr.addGlobals('Radius');

  sliderRange(0, 100, 0.1);
  guiPenBr.addGlobals('PenPower');

  sliderRange(0, 50, 1);
  guiPenBr.addGlobals('shape');

  //会变大小的笔的界面
  guiChangeBr = createGui('ChangeBrush', 10, 360);
  sliderRange(1, 200, 1);
  guiChangeBr.addGlobals('ChangeRadius');

  sliderRange(0.1, 100, 0.1);
  guiChangeBr.addGlobals('ChangePenPower');

  sliderRange(0, 50, 1);
  guiChangeBr.addGlobals('shape2');

  //闪亮笔界面
  guiShiningBr = createGui('ShiningBrush', 10, 360);
  sliderRange(1, 100, 1);
  guiShiningBr.addGlobals('ShiningRadius');

  sliderRange(50, 100, 0.1);
  guiShiningBr.addGlobals('ShiningPenPower');

  sliderRange(0, 50, 1);
  guiShiningBr.addGlobals('shape3');

  //毛笔界面
  guiInkBr = createGui('InkBrush', 10, 360);

  sliderRange(80, 100, 0.1);
  guiInkBr.addGlobals('InkPenPower');

  //跑动的笔界面
  guiRunBr = createGui('RunBrush', 10, 360);

  sliderRange(0, 100, 0.1);
  guiRunBr.addGlobals('RunPenPower');

  sliderRange(0, 50, 1);
  guiRunBr.addGlobals('shape4');

  //粒子笔刷
  guiParBr = createGui('ParticleBrush', 10, 360);
  sliderRange(0, 100, 0.1);
  guiParBr.addGlobals('ParPenPower');

  //3D图形笔刷
  guiOthBr = createGui('OtherBrush', 10, 360);
  sliderRange(0, 200, 0.1);
  guiOthBr.addGlobals('OtherSize');

  sliderRange(0, 100, 0.1);
  guiOthBr.addGlobals('OtherPenPower');

  sliderRange(0, 50, 1);
  guiOthBr.addGlobals('othershape');

  BrushGUIs[0] = guiPenBr;
  BrushGUIs[1] = guiChangeBr;
  BrushGUIs[2] = guiShiningBr;
  BrushGUIs[3] = guiInkBr;
  BrushGUIs[4] = guiRunBr;
  BrushGUIs[5] = guiParBr;
  BrushGUIs[6] = guiOthBr;

}


function GUIUpdate() {

  var brGUIId = 0;

  if (brushFcn === 'PenBrushPaint') 
  {
    brGUIId = 0;
  }
  else if (brushFcn === 'ChangeBrushPaint') 
  {
    brGUIId = 1;
  }
  else if (brushFcn === 'ShiningBrushPaint') 
  {
    brGUIId = 2;
  }
  else if (brushFcn === 'InkBrushPaint') 
  {
    brGUIId = 3;
  }
  else if (brushFcn === 'RunBrushPaint') 
  {
    brGUIId = 4;
  }
  else if (brushFcn === 'ParticleBrushPaint') 
  {
    brGUIId = 5;
  }
  else if (brushFcn === 'OtherBrushPaint') 
  {
    brGUIId = 6;
  }

  TurnGUIsVisibleON(BrushGUIs, brGUIId);

}


function TurnGUIsVisibleON(GUIs, id) {
  for (var i = 0; i < GUIs.length; i++) {
    if (i == id) {
      GUIs[i].show();
    }
    else {
      GUIs[i].hide();
    }
  }
}

    介绍完了自己的系统，再来说一下和传统绘画系统相比它的一些不同：

1、从技法来看

    从技法上来说，其实如果只是单纯的用电脑去绘制，肯定是在画纸上绘制更需要手法了！在电脑上绘制只有在数位板上会有笔压的体现，不然就需要实时的去调控大小和透明度，尽力去模仿想要的笔触模样，现在已经有很多的绘画软件其实已经实现了类似功能，像是ipad里的备忘录，它的铅笔效果其实和实际效果还挺相似的。因为电脑有的时候功能强大，其实就在技法上给予我们了许多的方便。我这个系统和传统系统相比，其实技法上得不到什么体现，但是主要就是它通过简单的图形去感受几何之美。

2、从选用工具上

    基本的绘画系统选用的工具大多都是固定样式，固定的呈现，可是我的有的是动态的，有的是静态的，有的还能使基于图形对它一个扩展，有的是随机的，总之整体可以说一个动态的模样。

3、从创作理念上

  在创作理念上，我感觉我这个绘画系统比较偏向于随缘派，就是也许你也不知道想创作出一副什么样的作品，但是画着画着可能就有了感觉，通过它的随机性的表现，总能给我们带来不同的感想。

4、从创作体验上

    体验上我还是那句，随机，惊喜，意想不到。

5、在呈现效果上

    在呈现效果上肯定是传统的画板更好看，而我这个可能更加偏向于抽象的效果。也许一个人看来是这种模样，但是另外一个人看来又是另一种模样，一切都不能特定的去进行一定的形容。

6、局限性

    在局限性上，我觉得我这个可能还是功能上的缺失比较多，因为时间的有限性，很多比较好的功能没有加上，整个GUI还应该有更加人性化的体现，而不是只能单纯的画、擦除，还应该可能有画错的能撤回，甚至还能为画的图进行一定的图像处理，当然后面可能结合p5实现就会需要一些努力了。

7、应用

    我觉得应用可以应用于笔刷的设计上，很多的笔刷都是些大拿设计出来的，而我们没有他们这么多的创意idea，如何去实现一个笔刷的随机设计呢？我觉得就可以通过我这个画板，虽然它随意，但是随意又不是不能随意出好看的效果，或许它也能在某个方面为你提供一些的灵感！

    其他应用上，我在思考能不能应用于一个创新思维的拓展上。其实之前在做UI设计的时候就提到了创新思维的扩展，我们现在的画图软件大部分大同小异，小孩子用不上ps那么高级的系统，用的大多都还是类似微软自带的画图软件。经过一定的调查，其实可以发现很多人觉得自己的创新能力不足，我在写这个系统的时候也是有这种感觉，我感觉很难逃出已经固有的规定去创作出一个比较非常规的笔刷，固有的思维让我感觉脑子空空不知该如何是好。但是在编写的过程中，我感觉它本身就提供了一些灵感给我，让我觉得笔刷还可以这样那样。

    

 

    说到抽象，其实我想谈一谈关于中国画意向的东西。“书法是以具体的点划来表达文字抽象的意涵”，而我的老师也曾告诉过我，字是画出来的，而画是写出来的。很久以前的我还不理解其中的含义，现在再来思考似乎有了新的体悟。很多人看不懂中国的写意画，认为过于简单杂乱，好像没有什么水准，然而这些简单而又随意的内容恰恰则是最为珍贵的。为什么说画是写出来的，我觉得是因为在作画时，需要一种写字时的干脆。在画速写的时候老师曾说过，不要去用笔蹭出一条线，蹭出的线从美观上来讲是一点都不美观的，而且从某种角度去看，蹭出来的线也没有感情韵味在其中，所以画画需要连续、干脆，宛如写字一样，若我落下一笔，那必然绝不后悔。字是画出来的又是何意呢，我认为有些不同体态的字，比方说一个艺术体，空心字，要写出来需要的是画画时的创造力，和随意感，这样才能让一个字富有灵魂。或许我写的字不好看，但是我加上画的内容，整个字体可能会呈现出另一个程度的飘逸帅气感，所以在中国的书画上能联想到“抽象”。

 

以上就是我对这次系统编写的一些感悟和比较。

完整程序：https://github.com/Niemaoqiu/p5homework

参考资料：

1、《OpenProcessing》https://www.openprocessing.org/

2、《p5.js库》https://p5js.org/zh-Hans/examples/

3、《什么是绘画？——以抽象思维理解绘画》https://blog.youkuaiyun.com/magicbrushlv/article/details/83858469