预载并管理字体文件
preload() 会等待 loadFont() 完成后再进入 setup()。案例从课程媒体库载入 Candara.ttf，避免在字体尚未准备好时生成空的文字轮廓。
学习目标
01
使用 preload() 与 loadFont() 在绘制前加载课程媒体库中的自定义字体。
02
理解 textFont() 与 textToPoints() 如何把字体轮廓转换为可绘制的点数组。
03
根据画布宽度和字符串长度计算字号，组织多组文本的响应式排版。
04
使用循环、curveVertex()、sin() 和 cos() 制作逐帧变化的文字轮廓动画。
核心概念
原理解析
从文字到轮廓点
textFont() 设置当前字体，textToPoints() 则把 Alukardo 与 Welcome to My Class 的字形轮廓转换为点数组。文字从显示内容变成可计算、可连接和可动画的数据。
按文本长度组织排版
width / myText.length 与 width / vbText.length 根据画布宽度和字符数量计算字号比例。较短的名字使用更大的倍率，较长的句子使用更紧凑的字号，使两组文字都能落在 960×540 画布中。
采样点与曲线连接
sampleFactor 控制字体轮廓的采样密度；循环按 pointStep 或 alternateStep 选择点，再交给 curveVertex() 连接。限制最大步长可以保证每一帧保留足够的曲线顶点。
用 beginShape() 与 endShape() 组织路径
beginShape() 告诉 p5.js 开始收集一条自定义路径的顶点；循环中的 curveVertex() 依次加入字体轮廓点；endShape() 结束收集并绘制整条曲线。把顶点调用放在这两个函数之间，才能将离散坐标连接成连续的文字轮廓。
逐帧动画与文本切换
draw() 每帧重绘黑色背景，并用 random() 改变线宽和颜色。sin() 与 cos() 持续改变采样步长；当 p1 回到最小值时切换 direction，让两组文字轮廓轮流进入画面。
- p1 控制 Alukardo 的轮廓采样步长
- p2 控制 Welcome to My Class 的轮廓采样步长
- direction 决定当前绘制哪一组文字
案例演示
实时运行 · 观察文字轮廓采样点如何在两组文本之间切换
sketch.js打开源码
正在载入源码…核心要点
字体也是课程媒体资源
自定义字体必须先进入媒体库，并通过稳定的公开路径由 loadFont() 加载。
排版来自可计算的比例
使用画布宽度和文本长度决定字号，让不同长度的文字共享同一构图范围。
文字轮廓可以转化为数据
textToPoints() 把字形拆成坐标点，文字因此可以被采样、连接和重新组织。
逐帧变化塑造文字动画
循环、三角函数和状态切换共同控制采样密度，让静态字形产生连续运动。