今天小菜看到量子位的一篇文章《用数学方式打开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 的样子。
模拟:按照公式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]
这个绘制思路大体是这样的:
for (let j = 0; j < rows; j++) {
curves[j] = [];
for (let i = 0; i < cols; i++) {
curves[j][i] = new Curve();
}
}
怎么样,今天有收获吗?
[1]https://openprocessing.org/sketch/1343088: https://openprocessing.org/sketch/1343088
[2]https://openprocessing.org/sketch/1345045: https://openprocessing.org/sketch/1345045