Open JChehe opened 6 years ago
原文: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 是指定所绘制线的位置。
x
y
width
height
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 参数,进而设置线的位置。
context.translate
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 条线。
Vera
aThirdOfHeight
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.rotate(Math.random() * 5)
context.translate(x + width/2, y + height/2) context.rotate(Math.random() * 5); context.translate(-width/2, -height/2)
漂亮!这就拥有了《一二三》效果。如果你想探索更多可能性,可以尝试大于 3 行的效果,甚至是赋予颜色。记住,生成艺术的乐趣在于添加更多更能性和创造性,直至让自己都为之惊叹。
原文:Un Deux Trois
对于爱好生成艺术的人来说,Vera Molnár 是他们的灵感来源。因为她是最早创作数字艺术的人之一,并且作品十分引人注目。在本教程中,我们将仿造她的作品之一——一二三。
毫无疑问,我们将使用几乎称为“标准”的初始化代码,即获取用于绘制的 canvas 和上下文 context,同时设置 canvas 的尺寸大小。
为 context 设置一些变量。前两行是指定线的粗细和样式。后两行是指定遍历 canvas 次数和用于绘制效果的变量。
定义用于绘制的函数,其接收
x
&y
坐标、width
&height
和数组类型的positions
。其中,positions
是指定所绘制线的位置。这里将使用
context.translate
方法来移动 canvas 的坐标系,然后再结合传入的positions
参数,进而设置线的位置。现在每个方块的中间都绘制了一个细线(译者注:二层嵌套循环形成一个方块)。但若要复制
Vera
的作品,我们还要变得更复杂一些。这就用到了先前定义的aThirdOfHeight
变量,使得可在方块内绘制 2 或 3 条线。真棒!沿着页面向下,以一、二、三的区间逐步增加复杂性。剩下的工作就是添加随机旋转角度的魔法。使用
context.rotate(Math.random() * 5)
得到随机旋转角度值。当然,首先要改变 translate 位移值,以确保旋转中心在每个方块的中心。漂亮!这就拥有了《一二三》效果。如果你想探索更多可能性,可以尝试大于 3 行的效果,甚至是赋予颜色。记住,生成艺术的乐趣在于添加更多更能性和创造性,直至让自己都为之惊叹。