【No.01】八份简约经典的生成设计入门案例

八份简约经典的生成设计入门案例

启

嗨，感谢你看到我，我是升卿。

已经很久很久没有写博客了。今朝大梦初觉，不由生出“洞中才数月，世上已千年 ”之感。

为了表示 OUT 之后的良心难安外加痛心疾首，我决定将博客的频率提高至一周双更。这真的是一场肥肠痛苦的改革！

现在，我想和你分享几个既简约又经典的生成设计案例。

◉ 平铺的线条（Tiled Lines）
◉ 快乐分裂（Joy Division）
◉ 无序立方（Cubic Disarray）
◉ 一二三（Un Deux Trois）
◉ 催眠方块（Hypnotic Squares）
◉ 圆形填充（Circle Packing）
◉ 皮特·蒙德里安（Piet Mondrian）
◉ 三角网格（Triangular Mesh）

平铺的线条（Tiled Lines）

“Tiled Lines” 最早的实现是由 Commodore 64（1982 年推出的 8 位家用电脑）编码的艺术作品 “10 PRINT”。

简单的设计思路，惊艳的视觉效果，令其备受关注。

“Tiled Lines” 的实现思路，★ 升卿

这也是我将其置于前列的原因了：

Tiled Lines，2020/06/21，【升卿版】

这里有最硬核的代码：

/* 绘制平铺的线条（Tiled Lines）。*/
function drawTiledLines() {
   
	for (let x = 0; x < width; x += step) {
   
		for (let y = 0; y < height; y += step) {
   
			let leftToRight = random() > 0.5; // 是否从左上角绘制到右下角。
			if (leftToRight) {
   
				// 左上角与右下角连线。
				line(x, y, x + step, y + step);
			} else {
   
				// 右上角与左下角连线。
				line(x + step, y, x, y + step);
			}
		}
	}
}

快乐分裂（Joy Division）

“Joy Division” 是一支英国摇滚乐队。1979 年，他们发行了首张录音室专辑《Unknown Pleasures》。

Joy Division - Unknown Pleasures Album Cover Poster

专辑封面由艺术家彼得•萨维尔（Peter Saville）设计，是个数据推动艺术的绝佳案例。

“Joy Division” 的实现思路，★ 升卿

Joy Division，2020/06/21，【升卿版】

这里有最硬核的代码：

/* 绘制快乐分裂（Joy Division）。*/
function drawJoyDivision() {
   
	for (let y = 80 * step; y < height; y += 6 * step) {
   
		beginShape();
		for (let x = 0; x <= width; x += step) {
   
			// 连点成线。
			// vertex(x, y);

			// Perlin 噪音。
			// vertex(x, y - 30 * step * noise(x / 50, y));

			// 集中区域。
			vertex(x, y - 100 * step / (1 + pow(x - width / 2, 4) /
				pow(width / 2, 3)) * noise(x / 50, y));
		}
		endShape();
	}
}

收到了一份高级写法，瑟瑟发抖：

f=0
setup=draw=_=>{
   
  createCanvas(300,b=500)
	v=vertex
	f++
	background(0)
	fill(0)
	stroke(b) 
	for(y=100;y<b;y+=5) {
   
		beginShape()
		for(x=0;x<b;++x)
			v(x,y-80/(1+pow(x-150,4)/8e6)*noise(x/30+f/50+y))