p5.js 动态的表达与趣味

码绘是一个挺有争议的东西。很多人觉得它很麻烦，难度很大，门槛很高。其实想想，也许只是因为陌生。
与码绘相对应的是手绘，很多人包括之前的我，都觉得用笔画不需要什么基础都可以，笔随心动，不受束缚，而且人人都会几个简笔画。可是在手绘方面，每个人或多或少都是下过功夫的，因为，我们都学过怎么握笔，在一定程度上，做到让笔听自己的话。
所以，我们首先要打破对于码绘的心理恐惧。在上一篇博文中，我也介绍了自己初试码绘绘制静态图片的经理与心得。这次，则是尝试动态图片。

手绘效果：

码绘效果：

设置全局变量：

var diameter = 5;
var diameterStep = 1.5;
var centerX;
var centerY;
var numSlices = 8;
var maxNumSlices = 12;
var numPositions = 25;
var positions = [];

背景设置：（可以适应各种屏幕，降低该程序应用局限性）

function setup() {
  createCanvas(windowWidth, windowHeight);
  angleMode(DEGREES);

  centerX = width/2;
  centerY = height/2;

  shuffleNumSlices();

  fill(255);
  stroke(0, 0, 0, 0);
}

实现交互，以及动画拖拽粒子散落效果：

function draw() {
  // 把当前位置返回给array
  positions.unshift({ x: mouseX, y: mouseY });
  // Only store the latest `numPositions` positions
  positions.splice(numPositions, 100);

  translate(width/2, height/2);
  background(0);

  // For each slice
  for (var i = 0; i < numSlices; i++) {
    drawPoints(positions);
    rotate(360 / numSlices);
  }
}

function drawPoints(xs) {
  for (var i = xs.length - 1; i >= 0; i--) {
    var positions = xs[i];
    var x = positions.x;
    var y = positions.y;
    var dia = diameter + diameterStep * (numPositions - i);
    fill(255, 255, 255, 255 * (1 - i / numPositions));
    ellipse(x - centerX, y - centerY, dia, dia);
  }
}

随机分割区域，点的个数由此决定：

function shuffleNumSlices() {
  numSlices =  Math.ceil(Math.random() * (maxNumSlices - 1)) + 1;
}

下面是手绘****码绘的几个不同之处的新的体会：

技法与工具

    手绘，通过我拙劣的绘画技法和朴素的绘画工具（一张纸一支铅笔），先淡淡的勾勒个框架，再用打圈圈的方式填充，试图用虚实结合来表现拖拽和余韵感（emmm意会意会一下）。
    码绘，通过p5.js用代码实现鼠标拖拽一个点移动，从而让另外几个点同步运动，利用拖拽留下的余韵轨迹形成有趣的图案，拖拽的时候有点爽哈哈哈，有点解压。

理念

   对于这几只小球来说，我在做手绘的时候，只想着尽力去画出动态的感觉，并没有运用到赤字测量，失去了比例的美感，而码绘时只需要通过预设好的数值就可以形成对称的美感；而且相较于手绘，码绘可以选择随机生成小球个数，添加了鼠标控制，实现了一定的交互性，增加了些许的趣味性，让这幅画的意义得到了衍生。

创作体验

  在手绘的时候，我苦恼于自己画技的拙劣，表达的模糊，掌握不好比例，这就是个黑白涂鸦。而且不断地重复画圈圈，画痕迹，满脑子都在想如果可以复制黏贴该多好，因此画的更仓促了。
  在码绘的时候，在代码这块比较苦恼，找到了大体框架，自己往里面填代码。当代码运行成功时，快乐翻倍。

呈现效果

 手绘受限于画技呆板无趣；绘讲究比例、明暗的美学，还有交互的趣味性，而且小球个数随机，就看大家运气了。

局限性

    手绘受限于绘画技能和工具；而码绘虽然只要一台电脑就够了，但受限于知识的薄弱和有限。两三岁的小盆友也可以通过手绘来表达自己的部分想法。而没有学习过代码的人，二三十岁可能还没听说过码绘。不过p5.js这个网站很好用，里面有很多范例和较为全面的函数介绍。 

应用

    手绘更能表现一些细腻的东西，写实、抽象等手绘都可以表现。在某种程度上，判断一个画好不好看，会用到一个形容词：生动。
    而码绘的优势在于，我们在码绘画作品中看到的每种元素都是可以动起来的，它从某种程度来说，一开始就站在了一定的高度上。但是如果想要被欣赏，就有点困难了。因为单一的线条的变化并不会让大家感受到作品传达的情感，无法引起共鸣，可能一开始觉得有趣，但还是不如优秀手绘作品来的耐看。
    在应用方面，墙绘，雕塑绘画，纸画等，还是很受欢迎的。但现在大家都很依赖电子产品，码绘的用途正在以乘号的方式不断拓展。

相关资料：
链接: [link]https://blog.csdn.net/magicbrushlv/article/details/77857319
鼠标交互：https://p5js.org/zh-Hans/reference/#/p5/mouseX
条件变量：链接: [link]https://blog.csdn.net/magicbrushlv/article/details/77900505
滑鼠:链接: [link]https://p5js.org/zh-Hans/reference/#/p5/mouseX