【译】一二三—Un Deux Trois
JChehe opened this issue · 0 comments
JChehe commented
对于爱好生成艺术的人来说,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 行的效果,甚至是赋予颜色。记住,生成艺术的乐趣在于添加更多更能性和创造性,直至让自己都为之惊叹。