【译】瓷砖线—Tiled Lines

@JChehe 2018-08-10 08:35:34发表于 JChehe/blog

原文: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 函数可以绘制比对角线更复杂的东西。