小菜：老鸟，你在敲啥子？
老鸟：我在画 tiled lines。
小菜：tiled lines？这是啥子？
老鸟：tile 是瓷片的意思，就是在瓷片中画线，最终形成的线条具有一定的艺术美感。我在用 processing 绘制瓷片线，这就是 tiled lines，咋样，好看不？
小菜：哇塞，好神奇耶！
老鸟：想了解不？
小菜：想！Show me the code！
Processing 是一门开源编程语言和与之配套的集成开发环境（IDE）的名称。Processing 在电子艺术和视觉设计社区被用来教授编程基础，并运用于大量的新媒体和互动艺术作品中。
设置画布
代码语言：javascript复制void setup() {
size(1200, 760); // 画布尺寸 1200 * 760
background(255); // 背景白色
stroke(0); // 画线黑色
noFill(); // 无填充模式
noLoop(); // 不进行帧循环
}
老鸟：这一步比较简单，主要是设置画布尺寸以及画笔相关的属性。
绘制
老鸟：其实核心部分就是这里啦。我们把问题拆解成两部分：
1）将画布根据设定的网格大小，拆分成一个个的网格
想象我们的房屋地板面积是 1200 * 760， 每一个地板瓷砖大小tileSize为 40。
2）在每一个瓷片中，随机绘制左上到右下或者右上到左下的对角线。
瞧，我画了一张图：
int tileSize = 40;
void draw() {
for (int i = 0; i < width; i = tileSize) {
for (int j = 0; j < height; j = tileSize) {
tileDraw(i, j);
}
}
}
void tileDraw(int x, int y) {
boolean tl2br = random(0, 1) > 0.5; // 一半概率是左上到右下对角线，一半概率是右上到左下对角线
if (tl2br) {
line(x, y, x tileSize, y tileSize); // 左上-右下
} else {
line(x tileSize, y, x, y tileSize); // 右上-左下
}
}
保存图片
代码语言：javascript复制void keyPressed() {
println(key);
println("Key code pressed: " keyCode);
if (key == 's' || key == 'S') {
saveFrame("tiled_lines.png");
}
}
老鸟：这一步也简单，我们监听键盘按键，如果按下了小 s 键或者大 S 键，则保存图片到磁盘中。
发挥你的想象力
我们可以将线条颜色进行随机，以及加宽线条宽度
代码语言：javascript复制void tileDraw(int x, int y) {
boolean tl2br = random(0, 1) > 0.5; // top left to bottom right
strokeWeight(3);
stroke(random(0, 255), random(0, 255), random(0, 255));
if (tl2br) {
line(x, y, x tileSize, y tileSize);
} else {
line(x tileSize, y, x, y tileSize);
}
}
拜拜吧，文字，看视频号
老鸟花了点时间使用 manim 编程，生成了一个教学视频，已经上传到同名视频号，方便老铁们理解。
小菜与老鸟后期会不定期更新一些 Processing 绘制的代码思路分析，欢迎关注不迷路。也可以公众号后台发送关键字 processing，加我微信好友，拉你进 Processing 讨论群。
