点击卡片进入对应的小项目
用「重力 + 速度 + 碰撞检测」搭出来的小恐龙跑酷游戏。一个边玩边学的经典入门案例，按下 W 键起跳，躲避迎面而来的仙人掌。
用「坐标系变换 + 角度/弧度」画出来的模拟时钟。秒针、分针、时针以不同速度转动，再用 for 循环画出 12 个刻度。是学习调用自定义函数的例子。
用「递归 + 旋转」画出的经典分形树，通过 dat.GUI 滑杆实时调节树枝角度与长度，直观感受参数对递归结构的影响。
进阶版分形树：点击鼠标依次切换「动画 / 彩色渐变 / 显示枝条粗细」，用柏林噪声让树枝自然摆动。
同时绘制 8 棵由柏林噪声驱动的分形树，点击屏幕随机重置位置与高度，体会递归与随机数的结合。
最基础的分形圆：每个圆右侧递归画一个直径减半的圆，层层缩小直到小于 1 像素。
动画版分形圆：圆环不断向左移动并逐渐放大，越界后自动折返缩小，点击可暂停或继续。
递归取三边中点不断细分，配合缓动函数让更深一层结构缓缓淡入，无限向下延伸。
会「生长」的无限分形树，树冠逐层向上展开，可调节角度、深度、速度与缓动曲线，观察递归逐层绘制。
用科赫曲线递归生成的雪花从天空缓缓飘落、旋转，可作为动态背景，是递归与面向对象结合的案例。
用柱子高度可视化冒泡排序：按 S 键执行完整排序，鼠标点击重新随机数组，理解嵌套循环与相邻交换。
冒泡排序动画版，逐帧演示相邻元素的比较与交换，用颜色区分已排序区间与当前比较的柱子，点击开始或重置。
选择排序动画：每帧扫描未排序区间找最小值并交换，用颜色标注已排序、当前最小值与扫描位置，实时显示 i / j / min_index。
由柏林噪声生成的角度场驱动粒子流动，画出绚丽的流线轨迹；按住鼠标可在光标处不断加入新粒子，是向量与粒子系统的经典案例。
一维柏林噪声演示：一条由连续噪声驱动的曲线随时间平滑起伏，点击可暂停或恢复动画，直观感受噪声的连续性。
用二维柏林噪声生成会「飞行」的 3D 地形，山峦随时间平滑起伏，是噪声映射与 WEBGL 3D 绘图的结合。
直接操作画布像素数组，用二维柏林噪声为每个像素赋色，形成细腻的噪声纹理。可调节采样缩放与速度，并切换二值化或彩色模式。
把第三维当作时间轴，让网格上每个圆的大小与颜色随三维柏林噪声同步流动变化，点击可暂停或恢复动画。
用摄像头捕捉画面，将每个像素的亮度映射成不同的字符，实时生成 ASCII 字符画。可切换字符集、调整灰度范围、反转或着色，是把图像像素当作数据处理的好例子。
经典井字棋（Tic Tac Toe）：用二维数组表示棋盘，玩家轮流落子，点击格子即可下棋，程序自动判断胜负与平局。
