【译】瓷砖线—Tiled Lines

[JChehe]

原文：Tiled Lines

今天，我打算在这里讲一个很早期却很简单的编程艺术。它就是最初在 Commodore 64 编码实现的 10 PRINT。

Commodore 64：Commodore 64，也称为C64、CBM 64或在瑞典被称作VIC-64，是由Commodore（康懋达国际）公司于1982年1月推出的8位家用电脑。——百度百科

由于其简单而惊艳，已被多次实现。

这里我们打算使用 canvas 实现，没有额外 API。只需在 HTML 中放置一个 300x300 像素的 <canvas> 元素。

首先进行初始化，没有任何渲染操作。

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

var size = window.innerWidth;

canvas.width = size;
canvas.height = size;

以上代码将 canvas 设置为方形，并为我们提供了用于绘制的 context 上下文。

现在，再创建一个用于绘制的 draw 函数，其接收 x、y、width 和 height 参数。随后调用，尽管函数为空。

function draw(x, y, width, height) {
  // TODO: Functionality here
}

draw(0, 0, size, size);

现在，我们将使用 draw 函数绘制一些从 (0, 0) 坐标到 canvas 宽高坐标的东西。

至于绘制什么东西，那从一条简单的线开始。

context.moveTo(x, y);
context.lineTo(x + width, y + height);   
context.stroke();

这样我们就拥有一条从 canvas 左上角至右下角的对角线，而且是不可变的。

为了使其具有“活性”，我们需要对它进行更改，既 50% 的概率将其替换成从右上角至左下角的对角线。总的来说，就是将“艺术”从我们双手释放给计算机完成。

从代码实现上，我们将添加一个随机布尔值，并将其放置在 if 语句中：

var leftToRight = Math.random() >= 0.5;

if( leftToRight ) {
  context.moveTo(x, y);
  context.lineTo(x + width, y + height);    
} else {
  context.moveTo(x + width, y);
  context.lineTo(x, y + height);
}

context.stroke();

Math.random() 将返回一个 0~1 的数字，这给予了我们二选一的概率。

最后一步是“分而治之”。因为，100 条线比 1 条线有趣多了。

添加 step 变量：

var step = 100

该变量表示“步伐距离”。在本案例中，width 是 400，step 是 100，既需要填充 4 次（译者注：横向 4 次，纵向 4 次，共 16 次）。

for( var x = 0; x < size; x += step) {
  for( var y = 0; y < size; y+= step ) {
    draw(x, y, step, step);    
  }
}

效果怎么样？我们还可以缩短"步伐距离"：

var step = 20

现在，我们拥有一个更复杂漂亮的作品了。

没错，这就是本教程的全部！

你可以随意调整代码中的任意变量，如起始点 x, y 等。当然，step 应该是最有趣的地方。另外，draw 函数可以绘制比对角线更复杂的东西。