blog
blog copied to clipboard
【译】瓷砖线—Tiled Lines
原文: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
函数可以绘制比对角线更复杂的东西。