【译】一二三—Un Deux Trois

[JChehe]

原文：Un Deux Trois

对于爱好生成艺术的人来说，Vera Molnár 是他们的灵感来源。因为她是最早创作数字艺术的人之一，并且作品十分引人注目。在本教程中，我们将仿造她的作品之一——一二三。

毫无疑问，我们将使用几乎称为“标准”的初始化代码，即获取用于绘制的 canvas 和上下文 context，同时设置 canvas 的尺寸大小。

var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');

var size = window.innerWidth;
canvas.width = size;
canvas.height = size;

为 context 设置一些变量。前两行是指定线的粗细和样式。后两行是指定遍历 canvas 次数和用于绘制效果的变量。

context.lineWidth = 4;
context.lineCap = 'round';

var step = 20;
var aThirdOfHeight = size/3;

定义用于绘制的函数，其接收 x & y 坐标、width & height 和数组类型的 positions。其中，positions 是指定所绘制线的位置。

function draw(x, y, width, height, positions) {
  context.save();
  context.translate(x, y)
  
  for(var i = 0; i <= positions.length; i++) {
    context.beginPath();
    context.moveTo(positions[i] * width, 0);
    context.lineTo(positions[i] * width, height);
    context.stroke();
  }

  context.restore();
}

这里将使用 context.translate 方法来移动 canvas 的坐标系，然后再结合传入的 positions 参数，进而设置线的位置。

for( var y = step; y < size - step; y += step) {
  for( var x = step; x < size - step; x+= step ) {
      draw(x, y, step, step, [0.5]);      
  }
}

现在每个方块的中间都绘制了一个细线（译者注：二层嵌套循环形成一个方块）。但若要复制 Vera 的作品，我们还要变得更复杂一些。这就用到了先前定义的 aThirdOfHeight 变量，使得可在方块内绘制 2 或 3 条线。

if( y < aThirdOfHeight) {
  draw(x, y, step, step, [0.5]);   
} else if ( y < aThirdOfHeight * 2) {
  draw(x, y, step, step, [0.2, 0.8]);      
} else {
  draw(x, y, step, step, [0.1, 0.5, 0.9]);      
}

真棒！沿着页面向下，以一、二、三的区间逐步增加复杂性。剩下的工作就是添加随机旋转角度的魔法。使用 context.rotate(Math.random() * 5) 得到随机旋转角度值。当然，首先要改变 translate 位移值，以确保旋转中心在每个方块的中心。

context.translate(x + width/2, y + height/2)
context.rotate(Math.random() * 5);
context.translate(-width/2, -height/2)

漂亮！这就拥有了《一二三》效果。如果你想探索更多可能性，可以尝试大于 3 行的效果，甚至是赋予颜色。记住，生成艺术的乐趣在于添加更多更能性和创造性，直至让自己都为之惊叹。