莫比乌斯带绘制与部署（python+streamlit+plotly)

莫比乌斯(Mobius)带是最具有代表性的单侧曲面之一，它由德国数学家莫比乌斯（Mobius，1790～1868）和约翰·李斯丁于1858年发现。就是把一根纸条扭转180°后，两头再粘接起来做成的纸带圈，具有魔术般的性质。其效果如图所示：

本文使用streamlit+plotly进行莫比乌斯图的绘制，Streamlit 是一个用于创建数据科学和机器学习应用程序的开源 Python 库。它的主要目标是使开发人员能够以简单的方式快速构建交互式的数据应用。Plotly 是一个功能强大、用途广泛的 Python 库，它为创建交互式、视觉上吸引人的图表提供了多种工具。

一、数学表达式

二、莫比乌斯图绘制

1、相关库的安装

streamlit库的安装

      pip install  streamlit

注意：安装完毕后，在命令行模式下使用 streamlit  hello进行测试，出现如下效果：

plotly库的安装

      pip install  plotly

2、建立app.py文件

建立app.py文件，并输入头部文件如下所示：

import streamlit as  st
import numpy as np
import plotly.graph_objects  as go

3、定义侧边栏变量

分别定义两个变量u_value和v_value分别表示中心带长度值、带的宽度值 ，代码如下所示：

u_value=st.sidebar.slider('中心带的值',1,4,4)
v_value=st.sidebar.slider('带的宽度值',1,10,2)
st.title('莫比乌斯带')
st.write("这是一个使用Plotly绘制的莫比乌斯带")

其中st.title和st.write用于输出标题和说明

4、定义莫比乌斯带参数方程

# 莫比乌斯带的参数方程
def mobius_strip(u, v, a=1):
    x =(a + 0.5 * v * np.cos(u / 2)) * np.cos(u)
    y =(a + 0.5 * v * np.cos(u / 2)) * np.sin(u)
    z = 0.5 * v * np.sin(u / 2)
    return x, y, z

5、创建u和v的参数网格

# 创建u和v的参数网格
u = np.linspace(0, u_value * np.pi, 100)  # 莫比乌斯带需要绕两圈
v = np.linspace(-v_value/2, v_value/2, 10)  # 带的宽度
u, v = np.meshgrid(u, v)
u = u.flatten()
v = v.flatten()

6、绘制莫比乌斯图

# 计算莫比乌斯带上的点
x, y, z = mobius_strip(u, v)
fig = go.Figure(data=[go.Scatter3d(
    x=x,
    y=y,
    z=z,
    mode='markers',
    marker=dict(  # 对标记的设置
        size=10,
        color=z,  # 颜色设置
        colorscale='Viridis',   # 选择颜色
        opacity=1.0  # 透明度
    )
)])

fig.update_layout(title='Mobius',
                   scene=dict(
                       xaxis_title='X',
                       yaxis_title='Y',
                       zaxis_title='Z'
                   ))
# 图形的边际范围设置
st.plotly_chart(fig)

效果如图所示：

三 、云端部署

1、在Github建立新仓库

(1) 安装git工具，有命令行和窗口两方式，下载地址如下所示：

        官网下载：Git
        淘宝镜像下载：CNPM Binaries Mirror

        安装过程默认选项即可，详情可参考相关教程

（2）创建Github仓库

使用浏览器访问Github官方网站GitHub，注册或登录，出现以下界面，单击"新建仓库“按钮

出现如下效果：

按照提示输入相应信息，并按照提示操作

（3）上传本地项目至Github

在终端新建项目文件夹streamlit-demo,并使用命令进行 相应文件夹

复制项目的源代码和相应资源至文件夹。

注意：使用 pip freeze>requirements.txt生成代码运行依赖库需求清单，需复制到此文件夹。

如上所示，在命令行窗口streamlit-demo输入以下命令：

git init
git add .
get status
git commit -m "first commit"
git remote add origin 远程仓库地址
git push -u origin master

其中”远程仓库地址“为新建仓库地址，即：

        git  init : 初始化一个新仓库

        git  add  <文件名> : 添加文件到暂存区，此处用”."代表此文件夹下所有文件。

        git status:   查看文件状态

        git commit  -m  <message> : 提交暂存区到本地仓库中,message是注释信息

        git  remote  add  origin  <远程仓库地址>：将“远程仓库地址”映射成别名 origin（本地仓库对远程仓库命名）

   git push -u origin master：推送本地仓库到远程仓库的远程分支，-u指定默认分支。

2、部署到 steamlit cloud

使用github账户登录streamlit cloud:

新建一个app:

输入相应信息，并单击“部署”按钮。效果如下：

本文主要讲述使用streamlit+plotly库绘制莫比乌斯带，从莫比乌斯带的特性、数学知识到streamlit结合plotly绘制莫比乌斯带，最后详细讲述了在stremlit cloud 部署项目的具体方法。因github和streamlit cloud的服务器都在国外，所以连接不太稳定，会出现一些问题，需要参考相应教程解决。