【译】一二三—Un Deux Trois

@JChehe 2018-08-11 17:10:43发表于 JChehe/blog

原文: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 行的效果,甚至是赋予颜色。记住,生成艺术的乐趣在于添加更多更能性和创造性,直至让自己都为之惊叹。