小米的新logo与数学公式—|x|^n+|y|^n=c

小米新logo的普通圆角矩形

网上有一个调侃，认为小米新 logo 的外边框，就是一个普通的圆角矩形。

如果放到 CSS 中，只需要修改 border-radius 属性就可以得到。

有媒体报道说，有人在小米官网上，看到所谓的新 logo，就是使用 border-radius: 19px 的属性实现的。

我不确定是因为小米已经修改了网站的代码，还是上面的动图其实是一个段子。但是在我看的时候，官网上小米的 logo，确实是一个新的图片。

截图为证，大家也可以去小米官网验证一下。

确实如此，于是有人调侃 

确实有点那么回事，但是，其实这个钱，真的每一那么好拿

圆角矩形的平滑问题

实际上，说新 logo 是一个普通的圆角矩形，是不准确的。

圆角矩形的原理，相信大家都懂。

我们以正方形的右上角为例。

圆角矩形就是从右上角，切出一个边长为 r 的小正方形。然后以图示中的 O 为圆心，r 为半径，做圆。

这个圆和原来的矩形的切点是 A 和 B。我们用圆弧 AB 取代原先正方形的角，就形成了一个圆角。

其实，这个不平滑的问题，苹果在 2012 年就遇到了。

相信大家都知道，苹果是最早在系统 UI 设计中，大规模采用圆角矩形的。

在 2012 年以前，即 iOS 6 或者之前的版本，苹果的图标，就是普通的圆角矩形：

不知道大家能不能看出，这样的圆角矩形，在圆角和原先正方形边的接洽处，是有一些小生硬的。

为了让这个图标的边界更平滑，2013 年，苹果发布 iOS7 的图标，变成了这样：

苹果是怎么解决这个问题的呢？实际上，苹果没有对外公布这个设计的具体方案。但是，早在 2013 年，就有一帮设计届的大神，尝试破解苹果的这个设计方案了。

非常巧的是，一个可能的结论（概率还不低），和原研哉老先生设计的小米新 logo 的解决方案差不多。

答案是对这个神奇的数学公式的应用：

设计师原研哉的解释是——灵感来源于一个数学公式：|x|^n+|y|^n=c

我们可以仔细分析一下。如果我们把 x^3 + y^3 = 1 右上角部分的图像绘制出来，是这样的：

为什么说新的圆角，也就是 |x|^3 + |y|^3 = 1，相较之前 x^2 + y^2 = 1 的圆角，是更平滑的？

从数学的角度解释，我们需要看这两个弧线的曲率。

什么是曲率？简单来说，就是衡量一条曲线的弯曲程度的一个数学量。

直线的曲率为 0，表示不弯曲。

圆形的曲率，处处相等。

• 在圆上，曲率是处处相等的。如果圆的方程是 x^2+y^2 = 1，则曲率处处为 1。
  

•  |x|^3 + |y|^3 = 1 的曲率，相对有些复杂。这个函数的曲率，在 x = [0, 1] 的范围里，是变化的。其曲率的变化，可以形成下面这样一个函数：

这个函数有什么特点？答案是，在 x = 0 的时候，这道弧线的曲率为 0；当 x = 1 的时候，这道弧线的曲率依然是 0！

而我们知道，直线的曲率也是 0！

所以，这道弧线和直线的曲率连接起来，是一个连续的函数，没有断点！

但是，因为 x^2 + y^2 = 1 的曲率处处为 1，所以圆弧和直线连接起来，曲率产生了一个跳跃，从 0 到 1，之后又从 1 到 0。

最终的结果，就是使用圆形角，显得不够平滑；而使用 |x|^3 + |y|^3 = 1，视觉上，更加平滑。

请大家再仔细比较一下。左侧是普通的圆角矩形，右侧则是圆角使用了 |x|^3 + |y|^3 = 1。

顺便一提，这样的圆角矩形，又叫超圆角矩形。

我们再来比较一下他们的差异。红色部分是圆角矩形有的，但是在超圆角矩形中，被平滑掉了。

但其实，原研哉老先生新设计的小米 logo，其外边框，根本不是简单的（复杂的？）超圆角矩形。

而是...

将整个矩形换成 |x|^3 + |y|^3 = 1 的函数图像！

就是这个函数图像！

最后，我看到互联网上有同学说，为什么 n 不取 π？

说实话，我觉得这个想法棒极了！

当 n 取 π 的时候，图像是这样的。

当 n 取 π 或者 n 取 e 的时候，显然能讲一个更加高大上的故事！

其实，这个和上篇的 《女神节笛卡尔式的表白的程序实现方式》，非常像。

类似还有更加夸张的

甚至可以画出胸部、鸡鸡等……

不意淫了……

转载本站文章《小米的新logo与数学公式—|x|^n+|y|^n=c》,
请注明出处：https://www.zhoulujun.cn/html/theory/Mathematics/math/2021_0406_8627.html