[教育应用] AI辅助编程实现几何概念的可视化

[教育应用] AI辅助编程实现几何概念的可视化 [教育应用] AI辅助编程实现几何概念的可视化 Modified December 10, 2025 1802 1871 No access Figure 1 2025 01 24 11 45 06 00:00 Code block Python ax.axis('off') solid = solids[name] vertices = solid["vertices"] faces = solid["faces"] Rotation about Z axis Rz = np.array([ [np.cos(angle), np.sin(angle), 0], [np.sin(angle), np.cos(angle), 0], [0, 0, 1] ]) rotated = vertices @ Rz.T Build the polygon list poly3d = [[rotated[idx] for idx in face] for face in faces] ax.add collection3d(Poly3DCollection( poly3d, facecolors='cyan', edgecolors='r', linewidths=1, alpha=0.8 )) Keep axes consistent ax.set xlim([ 2, 2]) ax.set ylim([ 2, 2]) ax.set zlim([ 2, 2]) Label ax.text2D(0.05, 0.95, name, transform=ax.transAxes, fontsize=14, color='white') def update(frame): Which solid are we drawing? idx = (frame // num frames per solid) % len(solid names) angle deg = (frame % num frames per solid) rotation speed angle rad = np.radians(angle deg) draw solid(solid names[idx], angle rad) ani = FuncAnimation( fig, update, frames=len(solid names) num frames per solid, interval=30, blit=False ) plt.show() 案例2：四维立方体的投影 基础概念：四维立方体在几何的角度是个很难理解的概念，有点像克莱因瓶（每个面都是可以无限延申的），但从数学的角度可以很清楚的定义，第四象限（w）同时垂直于（x，y，z），我们无法直观通过视觉去理解四维立方体，但可以通过投影的方式来间接理解。 Prompt：我想制作一个四维立方体在三维世界的动态投影，请帮我用matplotlib绘制一个旋转的，并且顶点位置不断变化的动画，黑色干净的背景（不显示任何坐标轴和坐标面），动画流畅。同时你也可以自己思考如何去优化视觉效果。 (这个案子我之前写过一个，但是动画不是很好，用o1做了个优化），效果如下 No access Figure 1 2025 01 24 11 19 17 00:00 完整代码 Code block Python import numpy as np import matplotlib.pyplot as plt from mpl toolkits.mplot3d.art3d import Line3DCollection from matplotlib.animation import FuncAnimation 定义四维立方体的顶点和边 vertices = np.array([[1, 1, 1, 1], [1, 1, 1, 1], [1, 1, 1, 1], [1, 1, 1, 1], [1, 1, 1, 1], [1, 1, 1, 1], [1, 1, 1, 1], [1, 1, 1, 1], [ 1, 1, 1, 1], [ 1, 1, 1, 1], [ 1, 1, 1, 1], [ 1, 1, 1, 1], [ 1, 1, 1, 1], [ 1, 1, 1, 1], [ 1, 1, 1, 1], [ 1, 1, 1, 1]]) edges = [[0, 1], [1, 3], [3, 2], [2, 0], [0, 4], [1, 5], [3, 7], [2, 6], [4, 5], [5, 7], [7, 6], [6, 4], [0, 8], [1, 9], [2, 10], [3, 11], [4, 12], [5, 13], [6, 14], [7, 15], [8, 9], [9, 11], [11, 10], [10, 8], [8, 12], [9, 13], [11, 15], [10, 14], [12, 13], [13, 15], [15, 14], [14, 12]] 预计算旋转矩阵 angles = np.radians(np.arange(0, 360, 1)) rotation matrices = [ np.array([[np.cos(a), np.sin(a), 0, 0], [ np.sin(a), np.cos(a), 0, 0], [0, 0, np.cos(a), np.sin(a)], [0, 0, np.sin(a), np.cos(a)]]) for a in angles ] 初始化图形 fig = plt.figure() ax = fig.add subplot(111, projection='3d') ax.set box aspect([1, 1, 1]) ax.set facecolor('black') 隐藏坐标轴、网格和背景平面 ax.xaxis.set visible(False) ax.yaxis.set visible(False) ax.zaxis.set visible(False) ax.grid(False) ax.set axis off() 隐藏所有坐标轴和背景平面 透视投影到三维 def project to 3d(rotated vertices): w = 2 return rotated vertices[:, :3] / (w rotated vertices[:, 3].reshape( 1, 1)) 绘制初始对象 rotated vertices = project to 3d(np.dot(vertices, rotation matrices[0])) points = ax.scatter(rotated vertices[:, 0], rotated vertices[:, 1], rotated vertices[:, 2], color='blue', s=50) 预处理边线集合 line segments = np.array([[rotated vertices[e[0]], rotated vertices[e[1]]] for e in edges]) lines = Line3DCollection(line segments, colors='grey', linewidths=1) ax.add collection3d(lines) 动态视角 trajectory = [] def update(frame): rotated vertices = project to 3d(np.dot(vertices, rotation matrices[frame])) points. offsets3d = (rotated vertices[:, 0], rotated vertices[:, 1], rotated vertices[:, 2]) line segments = np.array([[rotated vertices[e[0]], rotated vertices[e[1]]] for e in edges]) lines.set segments(line segments) 动态视角 ax.view init(elev=10, azim=frame 0.5) 渐变颜色 colors = (rotated vertices[:, 2] rotated vertices[:, 2].min()) / \ (rotated vertices[:, 2].max() rotated vertices[:, 2].min()) points.set array(colors) points.set cmap('plasma') 选择合适的渐变配色 ani = FuncAnimation(fig, update, frames=len(rotation matrices), interval=12, blit=False) plt.show() 刘洋推荐的拿p5.js用来画画效果也非常不错，下面是一些可视化的例子 1. 用R = arccos(sin θ)公式画心形图案 代码： Code block Python / p5.js: R = arccos(sin θ) 的心形曲线，步步绘制示例，添加每次绘完再绘小一圈的功能 / let points = []; let stepCount = 0; let iteration = 0; let maxIterations = 10; function setup() { createCanvas(600, 600); angleMode(RADIANS); // // ========== 1) 预计算曲线上的所有点 ========== // θ 从 0 到 2π 等分采样 let totalDetail = 720; // 采样点数越多，曲线越平滑 for (let i = 0; i < totalDetail; i++) { let t = map(i, 0, totalDetail, 0, TWO PI); // 计算极坐标 R let R = acos(sin(t)); // 转为直角坐标 let x = R cos(t); let y = R sin(t); points.push({x, y}); } } function draw() { background(255); // ========== 2) 移动原点到画布中央，并绘制坐标轴 ========== translate(width / 2, height / 2); // 画 x 轴 stroke(0); line( width/2, 0, width/2, 0); // 画 y 轴 line(0, height/2, 0, height/2); // ========== 3) 每圈重新绘制曲线 ========== stroke(255, 0, 0); strokeWeight(2); noFill(); for (let iter = 0; iter <= iteration; iter++) { beginShape(); for (let i = 0; i < points.length; i++) { if (i stepCount && iter === iteration) break; // 当前圈每帧选择绘到已累计点数 // 指定每圈绘制的缩放系数 let scaleFactor = 60 (1 0.1 iter); // 注意 p5.js 的 y 轴向下，想要向上可取 points[i].y let px = points[i].x scaleFactor; let py = points[i].y scaleFactor; vertex(px, py); } endShape(); } // ========== 4) 每帧计添加 stepCount ========== if (stepCount < points.length 1) { stepCount++; } else if (iteration < maxIterations 1) { No access p5.js Web Editor Google Chrome 2025 02 03 14 34 00 00:00 No access Figure 1 2025 01 24 11 45 06 00:00 No access Figure 1 2025 01 24 11 45 06 00:00 案例2：四维立方体的投影 基础概念：四维立方体在几何的角度是个很难理解的概念，有点像克莱因瓶（每个面都是可以无限延申的），但从数学的角度可以很清楚的定义，第四象限（w）同时垂直于（x，y，z），我们无法直观通过视觉去理解四维立方体，但可以通过投影的方式来间接理解。 Prompt：我想制作一个四维立方体在三维世界的动态投影，请帮我用matplotlib绘制一个旋转的，并且顶点位置不断变化的动画，黑色干净的背景（不显示任何坐标轴和坐标面），动画流畅。同时你也可以自己思考如何去优化视觉效果。 (这个案子我之前写过一个，但是动画不是很好，用o1做了个优化），效果如下 No access Figure 1 2025 01 24 11 19 17 00:00 No access Figure 1 2025 01 24 11 19 17 00:00 完整代码 刘洋推荐的拿p5.js用来画画效果也非常不错，下面是一些可视化的例子 1. 用R = arccos(sin θ)公式画心形图案 代码： No access p5.js Web Editor Google Chrome 2025 02 03 14 34 00 00:00 No access p5.js Web Editor Google Chrome 2025 02 03 14 34 00 00:00 基于P5.JS的动画演示 支持在线代码和预览，非常方便 https://editor.p5js.org/ 案例3：小行星撞击地球模拟 总结 其实理想状态下，应该是输入一个几何概念，就会自动生成脚本演示动态画面，但目前的AI理解力还实现不了，用Agent也会出现问题（有些视觉错误AI意识不到，或者意识到了也改不对），需要一定的人工介入。可以期待一下今年的新模型性能，以及更加细化的问题拆解方式。 💡 作者：吵爷 在学到几何的时候，可能有些小朋友的空间映射能力没有那么强，有些概念空口右很难解释，Python的Matplotlib是个很好的数据可视化的库，通过快速的脚本撰写，可以让我们把一些复杂的几何概念可视化。 作者：吵爷 在学到几何的时候，可能有些小朋友的空间映射能力没有那么强，有些概念空口右很难解释，Python的Matplotlib是个很好的数据可视化的库，通过快速的脚本撰写，可以让我们把一些复杂的几何概念可视化。 基于Python的动画演示 案例1：正多面体的视觉呈现 基础概念：三维世界只存在5种正多面体，分别是：正四面体(正三角体），正六面体（正方体），正八面体，正十二面体，正二十面体 Prompt： 我想用matplotlib画一个旋转的，逐个轮播的多面体动画，包含：正四面体（Tetrahedron），正六面体（Cube，也称为正立方体），正八面体（Octahedron），正十二面体（Dodecahedron）， 正二十面体（Icosahedron）。背景为干净的黑色，不要显示坐标轴和做表面，并且轮播的同时显示多面体的名称。 这里用的o1和deepseek，实测下来仍然o1的效率“稍微”高一些。大部分代码都没什么问题，主要是在正12面体的呈现上，AI容易出现错乱（连接了错误的顶点构成了错误的边，如下图） 这个bug改了好几次，AI一直会出错。这个时候人工介入一下，给一个方法（我给的是，设定正多面体的中心坐标，确保每个面离中心坐标的距离是一样的，或者是，确保每个边长的长度相等），就可以修复错误。 完成后的动画效果，很流畅也很直观，AI自己选择了透明度的效果确保我们可以看到背面的旋转，更有立体感。 完整代码：