【译】无序方块—Cubic Disarray

[JChehe]

原文：Cubic Disarray

Georg Ness 的奇妙作品是生成艺术的真正灵感来源。在本教程中，我们将实现他的作品之一：无序方块。

<canvas> 是页面中唯一的元素，其大小为 300x300 像素。

老规矩，下面是初始步骤，里面没有任何渲染操作。

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

var size = window.innerWidth;

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

var squareSize = 30;

squareSize 变量用于指定方块的尺寸大小。

现在，创建一个用于绘制方块的函数。该函数十分简单，仅接受 width 和 height 参数。方块位置由另一个循环处理。

function draw(width, height) {
  context.beginPath();
  context.rect(-width/2, -height/2, width, height);
  context.stroke(); 
}

通过循环将屏幕填满方块。这里我们使用上下文 context 的 save、translate 和 restore 方法移动上下文坐标系，然后调用上面定义的 draw 方法进行绘制。

for( var i = squareSize; i <= size - squareSize; i += squareSize) {
  for( var j = squareSize; j <= size - squareSize; j+= squareSize ) {
    context.save();
    context.translate(i, j);
    draw(squareSize, squareSize);
    context.restore();
  }
}

现在屏幕铺整整齐齐地铺满了方块，为“无序”打下了基础。

引入随机是十分简单的：首先定义变量，一个用于指定方块的相对位移距离，另一个是旋转角度。

var randomDisplacement = 15;
var rotateMultiplier = 20;

这样我们就可以利用这些变量创建随机的位移和旋转值，并且越靠近 canvas 底部值越大。

var plusOrMinus = Math.random() < 0.5 ? -1 : 1;
var rotateAmt = j / size * Math.PI / 180 * plusOrMinus * Math.random() * rotateMultiplier;

plusOrMinus = Math.random() < 0.5 ? -1 : 1;
var translateAmt = j / size * plusOrMinus * Math.random() * randomDisplacement;

然后应用位移和旋转值。

context.translate( i + translateAmt, j)
context.rotate(rotateAmt);

这就是我们拥有的：无序方块！