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

站长

2023年05月25日 23:12 · 阅读数 16

又是一年浙大校庆时

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

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

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

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

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

链接： spector.babylonjs.com/

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

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

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

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

帝国大厦亮灯祝贺

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

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

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

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

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

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

链接：www.esbnyc.com/about/tower…

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

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

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

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

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

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

p5.js 复现上述效果

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

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

链接：p5js.org/

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

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>

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

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

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

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

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

比如同样的 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);
            }
        }
    }
}

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

在 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 实现图片组成的文字效果（含2D和3D版本的代码）

用图片替换矩形

接着我们用图片替换矩形，在 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);
            }
        }
    }
}

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

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

// 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++;
            }
        }
    }
}

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

3D 效果同样可以

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

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

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

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

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

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

链接：github.com/DesertsX/p5…

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++;
            }
        }
    }
}

照例

最后欢迎加入「可视化交流群」，进群多多交流，对本文任何地方有疑惑的可以群里提问。加古柳微信：xiaoaizhj，备注「可视化加群」即可。

欢迎关注古柳的公众号「牛衣古柳」，并设置星标，以便第一时间收到更新。