通过P5来实现动态交互的绘画系统

与传统绘画系统的比较

绘画是什么，如果这个问题是在还没有互联网的时代被问出来，那么一定更多的人会告诉你，它就是一个由绘画者发出的、终局性的、由与画板画笔的交互产生的艺术创作。就是很简单的理解成单向交互过程，是单向的这一点，那个时候的人深信不已。但互联网和各种创意编程的发展又重新定义了绘画这一过程，它真的是单向性的、终局性的吗？一次创造结束真的不能激发二次创作了吗？除了绘画者本身，画板是一种怎样的存在？笔刷呢？所以这次的绘画系统创作，就引发了我这样的思考，我想这样的一个绘画系统的可塑性太强了，可走的方向也太多了，对艺术的形式与发展都提供了太多的、太多的新思路，它作为一个工具却最后可以为作品的影响力起到很关键的作用，我想设计方案的任务重大，也就小心翼翼的想着。
下面我们再次和手绘做一下比较来看一个绘画过程中，绘画系统，这一整个系统对作品有何种影响。

就像是也是这学期上的速写课，课上我们就对线条对应用很广泛，什么样的笔都可以作为工具，像铅笔，或硬朗或柔和或具颗粒感或连贯，技能习得者可以熟练的应用大部分线条创作，但如果不熟练或者真的对手绘领悟不到方法的人可能就一头雾水，只会画一种线条，单一无聊，有创造的想法却实在无能为力，这样的灵感浪费真的是很可惜。

这幅画对我最大的影响是让我意识到颜色的重要性，用编程实现绘画系统优势有很多，但在颜色这一点上，我发现真正关注的人很少，所以我也有把重心往颜色上倾斜的意图。
反观用绘画系统，有一些绘画系统可以自动修正补充，带了人力难以达到的精准和节奏上的稳定波动，技法、工具的不同最终造就了完全不一致的呈现效果。

总体方案

可是说实话，在能力和想法不匹配的时候，总是想得很多可是做到的又很少要远远低于自己的预期（苦笑），我本来预想的方案被修改一次又一次，最终的方案又不尽如人意，关于笔刷的触感、流动与动态效果、交互和自适应，颗粒感和连续性、各个变量之间的相互作用，繁杂并且庞大的系统还有待更多人发掘，我觉得不应该是简简单单用更多的随机数来把主动权交给“随机性”这种宏观而又飘渺的东西，更是应该掌握在自己手中，所以对笔刷的精准性实现的要求在我的绘画系统里要多于对随机数和点对应用；其次对画板的要求其实并不多，一个简洁并看起来舒适的UI界面就可以了，主要还是之前讲的笔刷，当然啦，用代码写出来的东西当然也在实现交互体验这里多费点心思，从用户角度出发，提供最大的便捷和舒适。

具体实现过程

刚开始着手的时候，我发现其实我们可以再大胆一点，朋友有一次聊天时发我了一个截图：
在实验过程中它提醒了我，然后就做了一个创意的emojipaint，除此之外还有animaldraw，和最基本的画板，我觉得我做的东西偏简洁和页面的设计感和有趣的效果，后面结合代码来讲一下实现过程。

Let’s Draw部分

var socket;
var lineThickness;
var lineColor;
var canv;

function setup() {
   
    canv = createCanvas(windowWidth, windowHeight);
    canv.parent('canvas');
    background(255,255,255);

    lineColor = [random(1,255), random(1,255), random(1,255)];

    socket = io.connect('http://localhost:3000');
    socket.on('mouse', newDrawing);

    rSlider = createSlider(0, 255, lineColor[0]);
    rSlider.style('width', '100%');
    rSlider.parent('colors');
    gSlider = createSlider(0, 255, lineColor[1]);
    gSlider.style('width', '100%');
    gSlider.parent('colors');
    bSlider = createSlider(0, 255, lineColor[2]);
    bSlider.style('width', '100%');
    bSlider.parent('colors');

    tSlider = createSlider(5, 40, 20);
    tSlider.style('width', '100%');
    tSl