设计师都开始内卷了 - 用Processing模拟视频号和Facebook新Logo

今天小菜看到量子位的一篇文章《用数学方式打开Facebook新Logo，真的和视频号Logo来自同一方程》，了解到李萨如曲线这个东西。还挺有意思，Facebook 的 Meta Logo 和微信视频号的 Logo 真像，它们这不就上下颠倒了下嘛。

你说这年头设计师设计个Logo，还得了解李萨如曲线，已经“内卷”的不行了，哈哈哈。

你瞧这公式：

x=Asin(at+d), y=Bsin(bt), 0≤t≤2π

x是一个正弦波，y也是正弦波，但两个正弦波他们的振幅A和B，周期，偏移等都不太相同，最终形成的曲线其实是x轴和y轴两个方向的正弦振动合成的轨迹。

参数 d 控制的是我们观察的角度，就像这样

读者朋友也可以从刚才的模拟中看到，改变参数 d，就会“旋转”曲线，在某个特定的值，就会出现微信视频号 Logo 和 Facebook Meta Logo 的样子。

Processing模拟

模拟：按照公式x=Asin(at+d), y=Bsin(bt), 0≤t≤2π画点连线就行了。小菜将实现代码放在了 https://openprocessing.org/sketch/1343088[1]。

beginShape();
for (let t = 0; t < TWO_PI; t += 0.1) {
  let x = value_A * sin(value_a * t + value_d);
  let y = value_B * sin(value_b * t);
  curveVertex(x * value_scaleX, y * value_scaleY);
}
endShape();

补充

刚才我们提到在水平和垂直两个方向上正弦振动合成的轨迹，看下这个图

推荐大胡子的这个李萨如曲线绘制教学：

openprocessing 源码地址：https://openprocessing.org/sketch/1345045[2]

这个绘制思路大体是这样的：

• 绘制水平和垂直的圆，可以根据设定的画布大小除以圆直径得到行和列的个数
• 使用笛卡尔坐标系，在每个圆上绘制一个点，利用 angle 叠加，让点动起来
• 绘制水平线、垂直线，李萨如曲线就是水平垂直线的交点运动形成的轨迹
• 将绘制的李萨如曲线保存到一个二维数组中

for (let j = 0; j < rows; j++) {
    curves[j] = [];
    for (let i = 0; i < cols; i++) {
      curves[j][i] = new Curve();
    }
  }

• 绘制李萨如曲线的点坐标由 x 坐标和 y 坐标组装而来，利用好双重循环设置好二维数组中曲线的点的坐标
• 遍历二维数组，调用曲线的绘制函数显示出曲线的路径（曲线路径的点不断增加，满一圈后重置）

怎么样，今天有收获吗？

链接资料

[1]https://openprocessing.org/sketch/1343088: https://openprocessing.org/sketch/1343088

[2]https://openprocessing.org/sketch/1345045: https://openprocessing.org/sketch/1345045