desmos绘制旗帜教程

2023-09-30 16:51 作者:现代微积分 0人读过 | 我要投稿

国庆将至，笔者翻了翻两年之前国庆节发的视频用函数编辑器制作的五星红旗。祝祖国成立72周年!，于是考虑再画一遍，并将具体的流程附上(相比以前的算法也有了优化)

以原点建立坐标系，旗帜四个顶点分别为:

(15,10),(-15,10),(-15,-10),(15,-10)

这时工作就已经完成一半了，我们将这4点围成的矩形渲染成(标准的)红色即可

先是构造矩形，对应解析式为：

$%5Cbbox%5B%23CFF%2C5px%5D%7B%5Coperatorname%7Bpolygon%7D%5Cleft(%5Cleft(15%2C10%5Cright)%2C%5Cleft(-15%2C10%5Cright)%2C%5Cleft(-15%2C-10%5Cright)%2C%5Cleft(15%2C-10%5Cright)%5Cright)%7D$

然后是调色：

将填充改为1，然后设一个参数a来代表颜色(参数不仅可以代表"滑块"，还能代表颜色哦)

其中rgb(255,0,0)也即标准的红色(也即三原色之一，红原色调满，绿，蓝调零)

ps:desmos自带的那个红色不是标准的红色，因此需要额外引入参数a表示标准红色

效果如下：

当然，对于感兴趣的网友，也可以考虑用"曲线方程"来表示矩形哦

考虑正方形 $%5Cdisplaystyle%20%20%5Cleft%20%7C%20x%20%5Cright%20%7C%20%2B%5Cleft%20%7C%20y%20%5Cright%20%7C%20%3D1$ 经过旋转得 $%5Cdisplaystyle%20%5Cleft%20%7C%20x%2By%20%5Cright%20%7C%20%2B%5Cleft%20%7C%20x-y%20%5Cright%20%7C%20%3D%5Csqrt%7B2%7D%20$ ，然后经过伸缩变换化为矩形： $%5Cdisplaystyle%20%5Cleft%20%7C%202x%2B3y%20%5Cright%20%7C%20%2B%5Cleft%20%7C%202x-3y%20%5Cright%20%7C%20%3D60$

这是边界方程，因此矩形内的"可行域"表示为：

$%5Cbbox%5B%23CFF%2C5px%5D%7B%5Cdisplaystyle%20%5Cleft%20%7C%202x%2B3y%20%5Cright%20%7C%20%2B%5Cleft%20%7C%202x-3y%20%5Cright%20%7C%20%5Cleqslant%2060%7D$

然后调色步骤同上

ps:这个变换过程需要用到线性变换以及相关点法的知识，之前写过专栏，供参考：

相关点法的本质剖析

然后分别是5颗星的位置

圆心(-10,5)，半径为3

小五角星：

圆心由下及上分别为：(-5,1),(-3,3),(-3,6),(-5,8)，半径均为1

然后求出每个五角星顶点坐标

这里相对之前的做法的优化，是直接从图中找到方位角后用参数方程，省略了联立的步骤

以大五角星为例：

考虑圆的标准参数方程 $%5Cdisplaystyle%20(r%5Ccos%20%5Ctheta%20%2Ba%2Cr%5Csin%20%5Ctheta%20%2Bb)$

于是得到5个顶点对应的参数角：

$%5Cdisplaystyle%20%5Cfrac%7B%5Cpi%20%7D%7B2%7D%2Bk%5Ccdot%20%5Cfrac%7B2%5Cpi%20%7D%7B5%7D%20%20~%2Ck%3D0%2C1%2C2%2C3%2C4$

于是，我们可以考虑引入多参数k，即

$k%3D%5Cleft%5B0%2C...%2C4%5Cright%5D$

那么坐标 $%5Cdisplaystyle%20(3%5Ccos%20(%5Cfrac%7B%5Cpi%20%7D%7B2%7D%2B%5Cfrac%7B2k%5Cpi%20%7D%7B5%7D%20%20)-10%2C3%5Csin%20(%5Cfrac%7B%5Cpi%20%7D%7B2%7D%2B%5Cfrac%7B2k%5Cpi%20%7D%7B5%7D)%2B5)$ 表示的就是5个点(因为前面设置的k是多值的)

那么直接把这个点坐标放入polygon()中即可得到5边形

而这里有个问题，这个多边形表示的是正五边形而非五角星？那么问题究竟出在何处呢？

原因时desmos中的polygon()的括号中的点坐标是默认从左往右依次连起来的。我们回顾下画五角星的步骤，是按同一旋转方向连接相间的两个点。因此，角的间隔应该从 $%5Cfrac%7B2%5Cpi%20%7D%7B5%7D%20$ 改为 $%5Cfrac%7B4%5Cpi%20%7D%7B5%7D%20$ ，这样就可以了：

$%5Cbbox%5B%23CFF%2C5px%5D%7B%5Cleft(3%5Ccos%5Cleft(%5Cfrac%7B%5Cpi%7D%7B2%7D%2B%5Cfrac%7B4k%5Cpi%7D%7B5%7D%5Cright)-10%2C3%5Csin%5Cleft(%5Cfrac%7B%5Cpi%7D%7B2%7D%2B%5Cfrac%7B4k%5Cpi%7D%7B5%7D%5Cright)%2B5%5Cright)%7D$

然后是调色，引入参数b表示黄色

标准的黄色代码为：rgb(255,255,0)(也即三原色之一，红、绿原色调满，蓝调零)

其余步骤同前

效果如下：

然后再到了4颗小星

这时的五角星顶点为例有严格的讲究，其中(一个顶点为该圆心与大圆圆心的)连线与该小圆的交点(换而言之其中一个顶点正对大圆圆心)

以最底下的为例

其圆心与大圆圆心连线斜率为： $%5Cfrac%7B5-1%7D%7B-10-(-5)%7D%3D-%5Cfrac%7B4%7D%7B5%7D%20%20$

于是得到5个顶点对应的参数角：

$%5Cdisplaystyle%20%5Cpi%20-%5Ctan%5E%7B-1%7D%5Cfrac%7B4%7D%7B5%7D%20%20%2Bk%5Ccdot%20%5Cfrac%7B4%5Cpi%20%7D%7B5%7D%20%20~%2Ck%3D0%2C1%2C2%2C3%2C4$

ps:这里同样需要考虑到连线顺序，因此也直接将参数角间隔改为 $%5Cfrac%7B4%5Cpi%20%7D%7B5%7D%20$ 了

那么坐标 $%5Cbbox%5B%23CFF%2C5px%5D%7B%5Cleft(-%5Ccos%5Cleft(-%5Ctan%5E%7B-1%7D%5Cleft(%5Cfrac%7B4%7D%7B5%7D%5Cright)%2B%5Cfrac%7B4k%5Cpi%7D%7B5%7D%5Cright)-5%2C-%5Csin%5Cleft(-%5Ctan%5E%7B-1%7D%5Cleft(%5Cfrac%7B4%7D%7B5%7D%5Cright)%2B%5Cfrac%7B4k%5Cpi%7D%7B5%7D%5Cright)%2B1%5Cright)%7D$ 表示的就是5个点