88×31

88×31：一枚两千七百二十八像素的复古徽章

前阵子逛街，在 geedea.pro 的 linkroll 页脚看见一排小得不起眼的图片按钮——这样，88 像素宽、31 像素高，往网页上一挂，就是一枚站长的”名片”。好奇之下顺着挖了挖，发现这小东西背后有一整段网页史。

从广告位到身份徽章

88×31 诞生于九十年代的商业网页：它是当年互联网广告的标准尺寸之一，和 468×60 横幅一起，被塞满各大小网页的页脚与边栏。后来广告进化了，这种”微型按钮”逐渐退场——却在个人网站、网页戒指（webring）、”Best viewed in…” 贴纸文化里活了下来。

真正让它复活的是 IndieWeb 社区。在他们的语境里，88×31 不再是广告位，而是站长的身份徽章：挂在首页上，朋友之间互相交换，像交换名片或徽章一样，把彼此挂在自己的角落。这个尺寸有一种奇特的约束之美——总共 2,728 个像素，比一枚邮票还小，每一像素都要花在刀刃上。IndieWeb 的维基把它比作”写诗”：像素预算越紧，设计越要克制而精准。

2728 个像素，说多不多，说少不少——刚好够装下一个站名、一段动效，和一点”我还在手写网页”的态度。

当 88×31 遇见代码艺术

我平时收藏了不少生成艺术的效果——Shadertoy 上的云海、OpenProcessing 上的火焰粒子与噪声河流。看到 88×31 的第一反应是：这不就是给生成艺术量身定做的画布吗？2728 个像素的计算量微乎其微，再复杂的噪声场也跑得动；而 GIF 动图恰好能把”活的效果”装进一枚静态规格的徽章里。

于是我把收藏里的算法一个个搬到 Python + Pillow 上，逐像素渲染成 88×31 的动画 GIF。全部源码都在公开仓库里：PaddySun/paddy-88×31-button，固定随机种子，任何人都可以复现、改参、做出自己的版本。

云海 · 日出

多层视差云带 + 波浪顶沿离散色阶。深度移植自 Shadertoy 作者 mdb 的「up in the cloud sea」（CC BY-NC-SA），由 GLSL 译为 Python。

火焰粒子

发光矩形粒子上升、高度渐变色相、加色合成。深度移植自 Kazoops 的火焰粒子（Flame 的 fork）（CC BY-NC-SA），WEBGL 投影改为 2D 四边形。

流场粒子

日出渐变 + 流场粒子，本系列的第一枚。无特定原作的通用技法，独立实现。

粒子轨迹

噪声流场轨迹线 + 霓虹配色。算法移植自 OpenProcessing「Particle Plotter」（灵感源自 Felix Auer 的微分方程相图）。

赛博朋克 · 坏信号

CRT 电视坏信号：扫描线、雪花、RGB 色散、故障条。demoscene 通用技法，独立实现。

BlogsClub

为 BlogsClub 制作的社区徽章：品牌蓝 Perlin 流场粒子。背景技法借鉴 Samuel YAN 的「Sands 002」（CC BY-NC-SA）。

以上徽章均按 2 倍放大展示，实际交付为 88×31 原尺寸；各徽章的算法来源、原作协议与借鉴程度的完整记录见仓库内 REFERENCES.md。

欢迎交换

88×31 最有趣的地方从来不是徽章本身，而是”交换”——它把友情链接从一行文字变成一枚可以别在页脚的实体徽章。如果你也有自己的 88×31，或者想动手做一枚，欢迎来 我的友情链接页 交换：那里挂着本站全部徽章的取用代码，复制粘贴即可。

下一枚做什么还没想好——收藏夹里还躺着噪声河流和域扭曲。不过 2728 个像素的世界，慢慢逛就够了。