企业官网建设流程全解析

p5.js创意编程实战指南：5步做出社交媒体的动态图形

【免费下载链接】p5.jsp5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. Looking for p5.js 2.0? http://beta.p5js.org项目地址: https://gitcode.com/GitHub_Trending/p5/p5.js

p5.js 是一款浏览器端的创意编程工具：写几十行 JavaScript，就能让网页变成一块会动的画布——画形状、播放逐帧动画、生成生成艺术，还能一键导出 GIF。这篇指南带你从零跑通第一个作品，到掌握导出分享的正确姿势，全程只需要 5 步。

静态图在信息流里输掉的 3 个瞬间

先说场景。做内容的人大概率都遇到过这几种情况：

• 头像半年没换，永远是那张静态图，刷到也认不出是自己
• 想发一条数据向的帖子，贴了张截图，划走的人多过看懂的人
• 节日到了，发出去的贺卡和别人的模板一模一样

共同点是：信息流里的内容在"动"，而你的内容是静止的。会呼吸的头像、会循环的小动画、能点按的互动贺卡，停留时间天然比静态图长。p5.js 做的事，就是让你用几行代码把静态内容"激活"。

三分钟跑通第一个生成艺术作品

不用配置环境，新建一个 HTML 文件，用标签页引入 p5.js，再写两个函数就够了：

function setup() { createCanvas(600, 600); } function draw() { background(245); let s = 200 + 80 * sin(millis() / 400); ellipse(width / 2, height / 2, s, s); }

setup()只跑一次，负责开一块 600×600 的画布；draw()每秒自动跑约 60 次，所以第 6 行里用时间millis()算出的半径会让圆心那个椭圆持续"呼吸"。保存文件、双击打开浏览器，一个会起伏的圆形就在屏幕中央了——这就是生成艺术的起点：你不画任何一笔，画面由代码自己长出来。

上面这张由线条层层叠出的抽象图案，就是同类思路跑出来的生成艺术作品：规则藏在代码里，成品每次打开都略有不同。

让内容"动"起来的三种基础招式

会动之后，接下来是动得有花样。新手最常用的是这三招：

1. 逐帧动画：把动作拆成一张张图，按顺序播放。仓库里就躺着一张 4×4 共 16 帧的奔跑序列帧，每隔约 250 毫秒换一帧，一只猫就能在页面上无限跑圈，适合做头像和贴纸。
2. 参数动画：像上面那样用sin(millis())驱动半径、位置、颜色，图形就开始周期性地缩放、漂浮、变色，是"呼吸感"和"流光感"的底层写法。
3. 跟随交互：把坐标换成mouseX、mouseY，鼠标划过时就会留下一串渐变色椭圆；把触发条件换成点击，就变成可戳的贺卡。

这张 16 帧奔跑序列帧来自仓库的测试示例，逐帧切换即可得到流畅的循环动画。

文字与图形叠在一起：海报才有信息量

光会动还不够，社交内容通常还要说人话。p5.js 的 DOM 扩展可以直接在画布上生成带样式的 HTML 文本，再和 Canvas 图形叠在一起：上面一行醒目的红底白字标题，下面是画出来的图形区，一条"图文海报"就成型了。

图中上半部分是带样式的 HTML 文本，下半部分是 Canvas 画出的两个圆形，两者可以自由叠放，适合做信息图和数据卡片。

另外两个细节能明显提升质感：用textAlign()控制文字锚点，左中对齐的数据列表会整齐很多；用textFont()指定自定义字体，海报的气质立刻不一样。仓库的 test/manual-test-examples/ 目录里有几十个现成的手动测试示例，每个都是一个"打开就能跑"的小作品，是最好的灵感库。

导出 GIF 和图片：分享的正确姿势

内容做好后，导出其实只有三个函数要记：

• save()：把当前这一帧存成 PNG，适合出静态封面
• saveGif()：自动录制几秒动画并打包成 GIF，是动态内容的核心
• saveFrames()：按帧导出整组图片，想自己剪视频时用

想录一个 3 秒的循环 GIF 当头像？在动画里加一段这样的逻辑就行：

function draw() { // 这里画你的动画 if (frameCount === 1) { saveGif('avatar', 3, { delay: 8 }); noLoop(); } }

第一帧时启动录制、录满 3 秒自动停止，浏览器就会弹出一个可直接发社交平台的avatar.gif。剩下的分享方式都很朴素：GIF 直接丢给任何支持动图的平台；作品本体就是一个 HTML 文件，可以嵌进博客；不想导出，直接录屏 15 秒发短视频也行。

一句话收尾

p5.js 把"会动的社交内容"压成了 5 步：开画布、写规则、让它动、叠上文字、导出分享——想深入玩法和文档细节，可以翻仓库里的 contributor_docs/ 目录，或者打开示例目录里任何一个文件，跑起来看效果最直观 ✨

【免费下载链接】p5.jsp5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. Looking for p5.js 2.0? http://beta.p5js.org项目地址: https://gitcode.com/GitHub_Trending/p5/p5.js