WEBGL 空间与观察角度
createCanvas(650, 650, WEBGL) 建立以画布中心为原点的三维空间；translate() 把场景推入视野，rotateX() 让山体、冰层与水面形成俯视纵深。
学习目标
01
理解 WEBGL 三维坐标、视角平移与 X 轴旋转。
02
使用 frameCount 阈值组织连续的生成阶段。
03
结合 curveVertex() 与 noise() 塑造山脉、冰层和水流。
04
利用不清屏的逐帧累积构建完整生成式景观。
核心概念
原理解析
frameCount 阶段时间线
draw() 使用 181、298、487、621、740 和 852 六个帧阈值切换生成逻辑，让同一画布依次形成山脉、冰原、冰壁、海面、飞溅区和融水瀑布。
曲线顶点与自然扰动
beginShape()、curveVertex() 与 endShape() 连接连续空间采样；noise()、正弦和余弦共同改变横向位置、高度与深度，避免规则几何显得僵硬。
六阶段生成结构
背景只在 setup() 绘制一次，后续每一帧都把新的曲线或水滴叠加到既有画面。
- Mountains → Ice sheet → Ice wall
- Ocean → Splash zone → Meltwater
- 最终画面由时间顺序与空间深度共同构成
案例演示
实时运行 · 观察山脉、冰原、冰壁、海面、飞溅与融水依次生成
sketch.js打开源码
正在载入源码…核心要点
时间线组织生成叙事
frameCount 把一个 draw() 循环拆成连续且可控的六个视觉阶段。
噪声让几何接近自然
noise() 与三角函数共同扰动曲线，使山体、冰面和水流保持连续又不规则。
不清屏产生累积绘制
背景只绘制一次，每帧新增的线条和水滴持续保留，最终形成完整瀑布景观。