用 p5.js 实现图片组成的文字效果（含2D和3D版本的代码）

本文代码见：https://github.com/DesertsX/p5js-zju126

又是一年浙大校庆时

第一篇 Three.js Shader 教程总算本周上周更新了，想着在更新这个系列的同时穿插写些简单轻松的内容，填些之前留下的小坑。

~~今天昨天~~前天是2023年5月21号，是浙大126周年校庆的日子。想到去年125周年校庆官方制作了个可以输入校友专业和名字、认证通过后会生成每个人专属的由“灿若繁星”的浙大人姓名的粒子系统组成的“求是星海”的网页。（网页还在，但需要输入信息才能生成，所以大家看不到，这里录个视频供大家观赏下，可参见原文里的视频内容：「用 p5.js 实现图片组成的文字效果（含2D和3D版本的代码） - 牛衣古柳」）

链接：https://125.zju.edu.cn/universe

当时古柳刚接触 Three.js Shader 没多久，看到这个作品后就用 Yuri 油管视频里提到的 Spector.js 插件看了下该网页的 Shader 代码，见到熟悉的 Vertex Shader 顶点着色器、熟悉的 Fragment Shader 片元着色器，果然就是粒子系统。

链接： https://spector.babylonjs.com/

记得那会古柳一方面感慨接触 Shader 后，“孕妇效应”再次显现，到处都能看到 Shader 的应用，这次校庆里居然就有“送上门”的；一方面觉得这些人怎么都会 Shader，仿佛就自己没学会，非常沮丧。

不过说起来去年比较特别，印象里前些年以及今年都没有类似专门做个网页效果的，一般都是文章或视频的形式。

帝国大厦亮灯祝贺

之所以提这件事，是古柳想到更早之前2017年120周年校庆那时，本来碰上这种满十年的年份就感觉非常特殊、更为热闹，而当时更有美国纽约帝国大厦专门为浙大120周年校庆亮灯这则“大新闻”，说可能是帝国大厦有史以来第一次为中国国内大学校庆而亮灯，就很有排面。

毕竟素来几所985高校间喜欢争论谁才是中国内地Top3的大学，并且各自喜欢用各种排行榜里自己的好名次给自己脸上“贴金”。难得让我等浙大师生或校友遇上这么个“有史以来第一次为中国国内大学校庆而亮灯”的“大噱头”，可不得“奔走相告”。

而那会刚自学 Python 编程和爬虫没多久的古柳也想做点什么应个景、凑个热闹，于是想到可以爬取帝国大厦官网的过往亮灯图片来拼个 "ZJU 120" 的字样。

说干就干，当时帝国大厦的官网可以选择日期以显示当天的亮灯图片，直接遍历日期用 post 请求就能爬取图片。原本古柳以为是每天专门拍摄的照片，后来发现没爬多少就重复了，其实没多少不同的图。

链接：https://www.esbnyc.com/about/tower-lights/calendar

有了图片后，古柳在随手拿的餐巾纸上画了下“ZJU 120”字样以确定应该如何布局。

然后古柳用 Python 里的 PIL 库手动将每张图片放到文字的位置上，当时用的还是笨办法手动存了每个位置坐标，但能实现出来就行，本文将介绍个简单直观的方法。

最后分别用单张图片和不同图片排列出文字，效果对当时的自己来说还是很酷的。

p5.js 复现上述效果

交代完上述前因后果，其实本文的目的就是用 p5.js 复现下当初的图片拼凑出文字的效果。

虽然之前古柳几乎仅在「伴随 P5.js 入坑创意编程 - 牛衣古柳 - 2019.06.28」一文提到 p5.js，但这个库真的很简单，即便是艺术家、设计师、编程小白都能轻松上手，而且拿来做创意编程、生成艺术、NFT 作品、数据可视化、WebGL 3D、Shader 编程、AR/VR/XR 等都可以。

链接：https://p5js.org/

p5.js 有多简单，让我们一起看看。首先引入 p5.js 的库；接着一般需要在 setup() 函数和 draw() 函数里书写代码，两者都会被 p5.js 自动执行，前者只执行一次，可以初始设置一些内容，比如设置画布大小，后者会被反复调用执行，比如一般电脑60FPS帧率就是每秒执行60次，可以实现动画、交互。因为这里仅静态地展示图片无需动态效果，所以只需在 setup() 里实现即可。

下面我们在 400x400 浅绿色背景的画布上绘制一个深绿色填充且无描边的矩形，其位置在(50, 50)处、宽高为(100,100)，可以看到代码非常的直观，简直和用 PS/AI 等软件工具直接画一个矩形一样简单。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>p5.js 实现图片组成的文字效果</title>
    <style>
        body {
            margin: 0;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
</head>

<body>
    <script>
        function setup() {
            createCanvas(400, 400);
            background('#e6fcf5');

            noStroke();
            fill('#0ca678');
            rect(50, 50, 100, 100);
        }
    </script>
</body>
</html>

借助二维数据显示特定形状

绘制出一个矩形后，我们如何将一堆矩形绘制出特定的形状或文字？这里介绍下古柳之前学 Canvas 时从 Coding Math 这个系列教程里学到的一招，即在二维数组直接存储所需形状格式的数据。

链接：编程中的数学 Coding Math series

比如同样的 400x400 画布，假如我们将其划分成5x5的网格，一个单元格就是80x80，那么我们可以直接在5x5的二维数组里以下面的格式将我们想在哪些位置绘制矩形用不同数字进行区分，1就是绘制，0就是不绘制，这样这个数组就和实际想绘制的形状非常直观的对应上，比如下图绘制的“X”形状。

注意这里矩形宽高 (width / row.length, y * height / grid.length) 就是80x80，直接固定写死也问题不大，width 和 height 是创建画布后就能拿到的画布宽高，分别除以列数行数就是每个单元格的大小。

const grid = [
    [1, 0, 0, 0, 1],
    [0, 1, 0, 1, 0],
    [0, 0, 1, 0, 0],
    [0, 1, 0, 1, 0],
    [1, 0, 0, 0, 1],
];

function setup() {
    createCanvas(400, 400);
    background('#e6fcf5');

    noStroke();
    fill('#0ca678');
    // rect(50, 50, 100, 100);
    for (let y = 0; y < grid.length; y++) {
        const row = grid[y]
        for (let x = 0; x < row.length; x++) {
            if (row[x] === 1) {
                rect(x * width / row.length, y * height / grid.length, width / row.length, height / grid.length);
            }
        }
    }
}

在 grid 里调整形状非常方便，比如很简单就能变成“回”字形状，再也不用很笨的去数每个位置具体的坐标然后手动绘制。

const grid = [
    [1, 1, 1, 1, 1],
    [1, 0, 0, 0, 1],
    [1, 0, 1, 0, 1],
    [1, 0, 0, 0, 1],
    [1, 1, 1, 1, 1],
];

用图片替换矩形

接着我们用图片替换矩形，在 p5.js 的 setup() 函数之前的 preload() 函数里通过 loadImage() 方法加载图片，然后在 setup() 里通过 image() 方法将图片在对应位置以特定宽高放置即可，这里 image() 后四个参数和 rect() 一样，且因为用的就是 1:1 的图片所以直接替换即可。

const grid = [
    [1, 0, 0, 0, 1],
    [0, 1, 0, 1, 0],
    [0, 0, 1, 0, 0],
    [0, 1, 0, 1, 0],
    [1, 0, 0, 0, 1],
];

let img;

function preload() {
    img = loadImage('./images/0.jpeg');
}

function setup() {
    createCanvas(400, 400);
    background('#e6fcf5');

    noStroke();
    fill('#0ca678');
    for (let y = 0; y < grid.length; y++) {
        const row = grid[y]
        for (let x = 0; x < row.length; x++) {
            if (row[x] === 1) {
                // rect(x * width / row.length, y * height / grid.length, width / row.length, height / grid.length);
                image(img, x * width / row.length, y * height / grid.length, width / row.length, height / grid.length);
            }
        }
    }
}

如果需要加载多张图片，只需要放进数组里，使用时按索引获取对应图片即可。

// let img;
const num = 9;
const images = [];

function preload() {
    // img = loadImage('./images/0.jpeg');
    for (let i = 1; i <= num; i++) {
        const img = loadImage(`./images/${i}.jpeg`)
        images.push(img);
    }
}

最终的“ZJU 126”效果

最后，只需套到实际图片数据集上和基于想要的文字效果去设置 grid 即可。这里因为帝国大厦官网的图片宽高不一，而本文只是演示如何复现，就不去手动剪裁图片了，有些拉伸变形无关紧要，简单设置绘制的图片高度 h 为宽度 w 的1.5倍。然后设置 grid 成 “ZJU 126” 的字样，行列数 rows cols 随之确定，然后画布宽高大小也能确定，最后就是遍历绘制9张亮灯图里的任意一张即可。

const num = 9;
const images = [];
const w = 40;
const h = w * 1.5;

const grid = [
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    // ZJU
    [0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0],
    [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0],
    [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0],
    [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0],
    [0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0],
    [0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0],
    // 
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    // 126
    [0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0],
    // 
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
];
const rows = grid.length;
const cols = grid[0].length;

function preload() {
    for (let i = 1; i <= num; i++) {
        const img = loadImage(`./images/${i}.jpeg`);
        images.push(img);
    }
}

function setup() {
    createCanvas(cols * w, rows * h);
    background(10);

    // let i = 0;
    for (let y = 0; y < rows; y++) {
        const row = grid[y];
        for (let x = 0; x < cols; x++) {
            if (row[x] === 1) {
                // const img = images[i % images.length];
                const img = random(images);
                image(img, x * w, y * h, w, h);
                // i++;
            }
        }
    }
}

3D 效果同样可以

以上的实现，是不是很简单，而且用 grid 来摆放图形元素如此方便，古柳想到同样可以在 3D 里摆出立体字的效果，之所以有这个想法，是因为一直记得五十嵐威暢的这张海报，觉得蛮漂亮的。

链接：五十嵐威暢：只为结构动情

因此古柳简单地切换到 p5.js 的 WEBGL 模式，然后在每个位置放上 box() 立方体，并将图片贴上去，在正交相机下做出2.5D效果如图所示。大家觉得是上面2D的好看还是这个3D的好看呢？

这部分代码就不做解释了，3D WEBGL 的东西解释起来也麻烦些，大家可自行学习，此处仅供参考。

链接：https://github.com/DesertsX/p5js-zju126

const num = 9;
const images = [];
const w = 40;
const h = w * 1.5;

const grid = [
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    // ZJU
    [0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0],
    [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0],
    [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0],
    [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0],
    [0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0],
    [0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0],
    // 
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    // 126
    [0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0],
    // 
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
];
const rows = grid.length;
const cols = grid[0].length;

function preload() {
    for (let i = 1; i <= num; i++) {
        const img = loadImage(`./images/${i}.jpeg`);
        images.push(img);
    }
}

function setup() {
    createCanvas(cols * w, rows * h, WEBGL);
    background(10);
    // background('#e6fcf5');

    // camera 位置、朝向、自身的法向量方向，需要3个向量、9个坐标来确定
    camera(200, -400, height / 2 / tan(PI / 6), 0, 0, 0, 0, 1, 0);
    ortho(-500, 500, -500, 500, 0.1, 2000);

    let i = 0
    for (let y = 0; y < rows; y++) {
        const row = grid[y];
        for (let x = 0; x < cols; x++) {
            if (row[x] === 1) {
                push();
                noStroke();
                translate((x - cols / 2) * w, (y - rows / 2) * h, -10);
                // const img = random(images);
                const img = images[i % images.length];
                texture(img);
                box(w, h, h);
                pop();
                i++;
            }
        }
    }
}

照例

最后和古柳交流，也请多点赞支持！

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,029评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,395评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,570评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,535评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,650评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,850评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,006评论 3赞 408
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,747评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,207评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,536评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,683评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,342评论 4赞 330
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,964评论 3赞 315
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,772评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,004评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,401评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,566评论 2赞 349