Processing与微信红包封面的故事
这些天很多朋友都开始陆陆续续的返岗上班了，小菜再次祝愿小菜的读者朋友们 2022 虎年虎虎生威，诸事顺利，心想事成！
快春节的时候，小菜收到了微信公众平台的一个消息推送，提示获得了定制红包封面的机会。看到消息的那一刻，比较激动，心想那不得用 Processing 搞一两个红包封面嘛。
小菜喜欢尝试没做过的事情，之前设计的微信表情《气泡君的日常》就是一次有趣的尝试，打开尘封许久的 AnimateCC，做着动画表情的过程，其实很有趣。
希望这次用 Processing 创作微信红包封面的过程也能享受其中。最终搞了两个红包封面，分享给了读者粉丝们。
虽然现在已经过了春节，红包的领取已经过了热度，但小菜还是把领取二维码贴到这里，大家如果不嫌弃就好。
当然今天小菜写这篇文章的目的不是来分享封面领取的，还是想复盘下微信红包做的过程中遇到的问题以及小菜的一些解决方案。
微信红包封面思路和源码分享
- 虎年大吉，源码地址：OpenProcessingSourceCodeAnalysis/1231442/tiger · GitHub[1] 之前小菜分享过一篇源码分析：《Processing文字气泡抖动创作思路解析》
- 小老虎2022，源码地址：Processing100DaysSketch/Day_056 · GitHub[2]，或者见 openprocessing[3] 采用大量的随机因素，思路类似 《有趣的Processing“区块链”鸟-源码解析》以及吴哲宇大神的机器人头像作品
微信红包封面设计要求
关于版权问题
在做封面之前，小菜在知乎上浏览了一些关于红包封面制作的一些讨论，注意到版权问题是一个非常重要的问题。因为代码都是自己编写的，所以代码层面没有问题，那只需要在处理封面故事的时候，注意视频中的一些设计元素别侵权就好。
第二个封面故事《小老虎2022》视频是代码生成录制的，后期想添加一段欢快的背景音乐，为了避免版权问题，小菜寻觅了好久，最终在 musiness商用版权音乐授权网站[4] 授权了一段音乐，网站还提供了授权证书，最终小菜将音乐和证书和代码都附在了证明材料中。
第一个《虎年大吉》顺利过审，第二个《小老虎2022》的拒审原因大概说的公众号头像没有提供版权证明，这这这，可是第一个没问题过审了呀，想到可能是不同的审核人员，标准不太一样，或者疏忽掉了？之前公众号头像 logo 的设计源文件找了半天没找到，索性将第二个封面的审核资料中的个人 logo 部分给去掉了，再次提交后，顺利过审。
封面样式
要求：支持PNG/JPG/JEPG格式; 尺寸：957*1278像素；文件小于500KB。
官方很友好的提供了设计模板，下载下来，可以看到 sketch 和 psd 设计源文件，小菜使用了 Lunacy——免费的设计软件，可用在Win、Mac、Linux[5] 打开的 sketch 源文件，在此基础上进行设计和预览。
封面故事
图片：PNG/JPG/JEPG；750*1250像素；文件小于300KB。
视频：MP4（H.264/AVC）；最长15s；yuv格式为420；视频宽度不低于720像素；宽高比在16:9-3:5之间；码率不高于1600kbit/s；文件小于10MB。
为了增加表现力，小菜使用的是视频，毕竟是动态的嘛。经过小菜的测试，视频的长宽尺寸保持和图片的长宽一致，效果挺不错。
视频录制
平时分享，习惯了使用 OBS 直接录屏或者应用窗口，但因为视频宽高问题，小菜的 MBP 笔记本录屏无法将所有的高度内容录制下来，于是放弃了这个做法。
因为《小老虎2022》使用的是 p5js 创作，所以录制部分，小菜采用了 spite/ccapture.js: A library to capture canvas-based animations at a fixed framerate[6] ccapture.js 库。
这个库使用也简单
1）在 html 中引入该 js 库
<script src="https://cdn.jsdelivr.net/npm/ccapture.js-npmfixed@1.1.0/build/CCapture.all.min.js"></script>
2）声明变量
let capturer; // ccapture 实例对象
let isCapturing; // 是否正在录制，方便实现录制与停止
3）初始化 CCapture
function setupCapture() {
capturer = new CCapture({
format: "webm",
framerate: 24
})
}
4）为了方便录制的控制，小菜使用了键盘按键事件来控制，没用通过添加一个 DOM 按钮来实现控制，怎么简单怎么来。
function keyPressed() {
if (key == 'c') {
console.log("capture start...");
capturer.start(); // 开始录制
isCapturing = true;
} else if (key == 'n') {
console.log("capture end...");
capturer.stop(); // 停止录制
capturer.save(); // 保存视频
isCapturing = false;
}
}
5）流程整合
···
let capturer;
let isCapturing;
function setup() {
···
setupCapture();
···
}
function draw() {
···
if (capturer && isCapturing) {
capturer.capture(document.getElementById("defaultCanvas0"));
}
}
这里需要注意是 CCapture 是如何捕获录制的画面的，需要我们给 CCapture 指定 p5js 默认的画布 DOM defaultCanvas0 。
视频格式
刚才生成的视频是 CCaputure 支持的录制生成格式webm。WebM由 Google 提出，是一个开放、免费的媒体文件格式。因为红包封面并不支持，所以我们需要手动转换成 mp4 格式。
常见的可以借助一些网站来实现，比如 在线免费地将 WEBM 转换成 MP4 — Convertio[7] 就不错。
小菜没有使用这个，采用的是 ffmpeg，也是非常方便。
ffmpeg -fflags +genpts -i tiger.webm -r 24 tiger.mp4
最终导出来上传，提示码率高于1600kbit/s 了，于是通过-r 24指定 fps 为 24 帧，降低了下帧数，再次上传 OK 了。
OK，复盘就到这里，下期见！
参考资料
[1]OpenProcessingSourceCodeAnalysis/1231442/tiger · GitHub: https://github.com/xiaocai-laoniao/OpenProcessingSourceCodeAnalysis/tree/master/1231442/tiger
[2]Processing100DaysSketch/Day_056 · GitHub: https://github.com/xiaocai-laoniao/Processing100DaysSketch/tree/main/Day_056
[3]openprocessing: https://openprocessing.org/sketch/1452408
[4]musiness商用版权音乐授权网站: https://musiness.vip/music/
[5]Lunacy——免费的设计软件，可用在Win、Mac、Linux: https://igoutu.cn/lunacy
[6]spite/ccapture.js: A library to capture canvas-based animations at a fixed framerate: https://github.com/spite/ccapture.js/
[7]在线免费地将 WEBM 转换成 MP4 — Convertio: https://convertio.co/zh/webm-mp4/
[8]https:/www.processing.love: https://www.processing.love