教程文档示例工程【免费下载链接】website-archiveArchive of the Coding Train website (first version)项目地址https://gitcode.com/gh_mirrors/we/website-archive点击查看免费下载本文以 website-archive 仓库中归档的《Trigonometry and Polar Coordinates》课程文档3.2-Trigonometry-and-Polar-Coordinates.md为主线系统讲解三角函数sin、cos、tan与极坐标系在创意编程中的核心用法并结合仓库内 p5.js 示例源码演示如何把极坐标转换为笛卡尔坐标完成绘制。读完本文你将掌握角度与弧度换算、x r·cos(θ)/y r·sin(θ)的转换公式并能独立实现圆周运动点、螺旋轨迹、随机轨迹和任意自定义圆环形状为进一步学习简谐运动、钟摆模拟和 Polar Perlin Noise Loop 等进阶话题打好基础。一、这段课程在仓库中的定位该文档位于仓库的归档目录 _more/archive/nature-of-code/3-Oscillation/属于 The Nature of Code 第 3 章Oscillation振荡系列的第 2 集视频video_number: 2视频 IDznOBmOrtz_M发布于 2015-08-01。文档本身用一句话概括了主题This video describes the basics of trigonometry and how to use polar coordinates in Processing.即本视频讲解三角学基础以及如何在 Processing 中使用极坐标。作为配套系列索引页 _more/archive/nature-of-code/3-Oscillation/index.md 明确说明这些视频课程对应《The Nature of Code》一书第 3 章的内容。值得注意的是仓库中还存在一份 2021 年更新的现代版教学页 _learning/nature-of-code/3.4-polar-coordinates.md主题完全一致Polar Coordinates视频O5wjXoFrau4但示例语言从 Processing 换成了 p5.js并提供了四个可直接运行的变体项目web_editor 编号分别为DHetsOfgz、BnJ_4U4cr、WqK-qD1vU、s10TQXDZv。本文即以这两份文档互为印证归档版确立了三角学 极坐标的知识骨架学习版则给出了完整的 p5.js 实现代码。二、三角学基础sin、cos、tan 到底是什么在直角坐标系笛卡尔坐标系里我们用(x, y)描述一个点的位置而在极坐标系中我们改用两个量描述一个点到原点的距离 r和与 x 轴正方向的夹角 θ。三角函数把两者联系起来。对于一个直角三角形三个核心函数的定义是sin(θ) 对边 / 斜边cos(θ) 邻边 / 斜边tan(θ) 对边 / 邻边当这个三角形落在单位圆半径为 1 的圆中时斜边长度为 1于是圆上任意一点的坐标可以简洁地写成x cos(θ) y sin(θ)这正是极坐标转换为笛卡尔坐标的最简形式。p5.js 原生提供 sin()、cos()、tan() 三个函数该链接也收录在 _learning/nature-of-code/3.4-polar-coordinates.md 的 frontmatter 中返回值范围在 -1 到 1 之间。角度单位弧度radians与度degrees处理角度前必须先明确单位。p5.js 中默认使用弧度制一个完整圆周为2π即常量TWO_PI半圆为PI。p5.js 提供radians(deg)与degrees(rad)两个转换函数也允许通过angleMode(DEGREES)或angleMode(RADIANS)显式切换单位。在仓库的配套课程 _learning/nature-of-code/3.1-angles-rotation.md 中演示了用rotate(angle)旋转矩形的经典写法对应源码 learning/nature-of-code/3.1-angles-rotation/P5/sketch.jslet angle 0; function setup() { createCanvas(400, 400); angleMode(RADIANS); } function draw() { background(146, 83, 161); noStroke(); fill(240, 99, 164); rectMode(CENTER); translate(200, 200); rotate(angle); rect(0, 0, 128, 64); angle 0.05; // 每帧增加弧度产生旋转动画 }这里angle 0.05每帧累加约 0.05 弧度约 2.86°配合rotate()即可让矩形持续转动——这是后续所有用角度驱动运动示例的基础模式。三、极坐标 → 笛卡尔坐标唯一需要牢记的公式屏幕上的point(x, y)、vertex(x, y)、circle(x, y, d)等所有绘制函数都工作在笛卡尔坐标系中。因此当我们想用半径 角度的方式思考问题时需要先完成转换x r * cos(θ) y r * sin(θ)其中 r 为到原点的距离半径θ 为当前角度。这就是整个课程的核心知识点算法在极坐标中计算几何绘制时再转换回笛卡尔坐标。同样的思路在 _Tutorials/9-additional-topics/9.20-polar-coordinates.md 中也有明确表述该教程大量场景都需要这种转换。实战一圆周上的运动点Basic Polar Coordinates仓库 learning/nature-of-code/3.4-polar-coordinates/basic-polar-coordinates/sketch.js 给出了最基础的可运行示例let angle 0; function setup() { createCanvas(400, 400); } function draw() { background(0); stroke(255); strokeWeight(4); noFill(); translate(200, 200); // 把原点移到画布中心 let r 150; // 固定半径 circle(0, 0, r * 2); // 画一个半径为 r 的参考圆 strokeWeight(32); stroke(252, 238, 33); let x r * cos(angle); // 极坐标 → 笛卡尔坐标 let y r * sin(angle); point(x, y); // 在圆周上画点 angle 0.01; // 每帧增加角度点沿圆周移动 }要点逐行拆解translate(200, 200)将坐标系原点移动到 400×400 画布的中心此后(0, 0)即画布中心r 150是固定的极径circle(0, 0, r * 2)画出的参考圆用于观察x r * cos(angle)、y r * sin(angle)完成转换point(x, y)绘制出位于圆周上的点angle 0.01让角度每帧匀速增长点便沿圆周逆时针匀速运动——这就是圆周运动circular motion的本质。配套页面 learning/nature-of-code/3.4-polar-coordinates/basic-polar-coordinates/index.html 通过 CDN 引入 p5.jshttps://cdn.jsdelivr.net/npm/p51.4.1/lib/p5.min.js并加载sketch.js在浏览器打开即可直接运行。实战二螺旋Spiral极坐标的优势在于 r 和 θ 是两个相互独立的参数。若让 r 随 θ 同时变化点轨迹就从圆变成螺旋。参考 learning/nature-of-code/3.4-polar-coordinates/spiral/sketch.jslet angle 0; let r 150; function setup() { createCanvas(400, 400); background(0); } function draw() { translate(200, 200); strokeWeight(16); stroke(252, 238, 33); let x r * cos(angle); let y r * sin(angle); point(x, y); angle 0.04; // 角度增量 r - 0.2; // 半径每帧收缩形成向内的螺旋 }这里有两个关键差异一是setup()中只调用一次background(0)不再每帧清屏因此轨迹会被保留在画布上二是同时修改angle角度前进与r半径收缩绘制出的点连成一条向内盘旋的螺旋线。将r - 0.2改为r 0.2即可得到向外扩展的螺旋。实战三随机轨迹Random Trail把 r 的确定性收缩替换为随机量即可得到随机游走的轨迹。参考 learning/nature-of-code/3.4-polar-coordinates/random-trail/sketch.jslet angle 0; let r 150; function setup() { createCanvas(400, 400); } function draw() { background(0, 10); // 带透明度的清屏产生拖尾效果 translate(200, 200); strokeWeight(16); stroke(252, 238, 33); let x r * cos(angle); let y r * sin(angle); point(x, y); angle 0.05; // 也可以换成 random(-0.1, 0.1) 让角度抖动 r - random(-2, 2); // 半径做随机增减 }background(0, 10)中第二个参数是 alpha 值每次重绘只把画面稍微压暗而不是彻底清空于是上一帧的点会留下渐隐的残影形成拖尾视觉r - random(-2, 2)让半径随机进退点便在小范围内杂乱游走。这两处改动展示了极坐标参数化在表达随机性上的灵活性。四、用极坐标绘制任意形状Circular Shape极坐标最强的用法之一是遍历0 → TWO_PI的每一个角度为每个角度计算一个可能变化的半径再用vertex()依次连线最终闭合形成任意圆环形状。仓库示例 learning/nature-of-code/3.4-polar-coordinates/circular-shape/sketch.js 完整演示了这一过程let angle 0; let r 150; function setup() { createCanvas(400, 400); } function draw() { background(0); translate(200, 200); stroke(255); strokeWeight(4); noFill(); let increment 0.1; // 角度步长越小形状越精细 noLoop(); // 只绘制一帧形状为静态 beginShape(); for (let a 0; a TWO_PI; a increment) { let r1 r random(-50, 10); // 每个角度使用随机半径 let x r1 * cos(a); let y r1 * sin(a); vertex(x, y); // 向形状中加入一个顶点 } endShape(CLOSE); // 闭合形状 }该示例的几个核心手法for (let a 0; a TWO_PI; a increment)从 0 遍历到完整圆周TWO_PI步长increment决定顶点的密集程度源码中留有let increment map(mouseX, 0, width, PI, 0.01);的注释即可以用鼠标 X 位置动态控制步长r1 r random(-50, 10)让每个角度的半径在基准值附近随机波动从而把完美圆扭曲成有机的不规则轮廓beginShape()/vertex()/endShape(CLOSE)是 p5.js 自定义形状绘制的固定三件套通过逐点连线生成封闭多边形。这是极坐标最富创造力的应用任何以角度为自变量、以半径为函数值的数学关系玫瑰曲线、心形线、利萨如曲线等都可以用这个循环模板直接绘制。五、进阶应用Polar Perlin Noise Loop极坐标 × Perlin 噪声极坐标的价值在进阶挑战中体现得更充分。仓库的 Coding Challenge #136.1 _CodingChallenges/136.1-polar-perlin-noise-loops.md 正是把极坐标遍历角度与Perlin 噪声采样结合让每个角度的半径由噪声值决定并且通过让噪声采样点在圆周上游走用 cos/sin 构造环形采样路径得到首尾无缝衔接的循环动画。核心实现见 CodingChallenges/CC_136_Polar_Noise_Loop_1/P5/sketch.jslet phase 0; let zoff 0; function draw() { background(0); translate(width / 2, height / 2); stroke(255); strokeWeight(2); noFill(); beginShape(); let noiseMax slider.value(); for (let a 0; a TWO_PI; a radians(5)) { let xoff map(cos(a phase), -1, 1, 0, noiseMax); let yoff map(sin(a phase), -1, 1, 0, noiseMax); let r map(noise(xoff, yoff, zoff), 0, 1, 100, height / 2); let x r * cos(a); let y r * sin(a); vertex(x, y); } endShape(CLOSE); phase 0.003; zoff 0.01; }与上一节的随机半径相比这里用noise(xoff, yoff, zoff)取代random()得到的轮廓是平滑而有机的cos(a phase)/sin(a phase)保证噪声采样点沿圆周闭合路径运动配合每帧递增的zoff噪声第三维形状就能持续缓慢演化且首尾循环。这一示例充分说明掌握了极坐标 三角函数这套基本功就能叠加噪声、物理、粒子系统等任意扩展。六、与系列其他课程的衔接在仓库的 Oscillation 系列中本节三角函数与极坐标是承上启下的枢纽课程主题与本节的关联3.1-Angles-and-Angular-Motion角度与弧度、rotate()旋转提供角度单位与旋转的基础3.2 Trigonometry and Polar Coordinates本文sin/cos/tan 与极坐标掌握x r·cos(θ)转换公式3.3-Simple-Harmonic-Motion用sin()模拟简谐运动把三角函数输出映射到位置/大小3.4-Pendulum-Simulation摆锤模拟摆锤位置需用极坐标定位3.5-Springs弹簧力振荡叠加现代版课程 _learning/nature-of-code/3.6-graphing-sine.mdGraphing Sine Wave进一步把sin()的输出绘制成随时间展开的正弦波并讨论周期period与相位phase——它们正是本节角度增量概念的量化延伸。此外3.2-Angular-Motion 示例 中v.heading()向量角度也直接依赖 atan2/三角知识属于本节的工程化应用。七、运行与动手练习建议仓库中四个变体项目basic-polar-coordinates、spiral、random-trail、circular-shape均已包含index.html与sketch.js通过 CDN 引入 p5.js无需本地安装直接用浏览器打开对应index.html即可运行。练习时可尝试以下改动验证对极坐标的理解修改angle 0.01的增量大小观察圆周运动速度变化把r * cos(angle)中的 r 改为map(sin(angle), -1, 1, 50, 250)观察半径随正弦波呼吸在 circular-shape 中把random(-50, 10)换成noise(a * 0.1)对比随机轮廓与噪声轮廓的差异阅读 CC_136_Polar_Noise_Loop_1 的源码尝试调整phase与zoff的增量观察循环动画形态变化。八、小结本篇围绕仓库归档课程《Trigonometry and Polar Coordinates》展开先厘清了 sin/cos/tan 在单位圆中的几何含义与弧度制约定再以x r·cos(θ)、y r·sin(θ)为核心公式逐步演示了圆周运动点、螺旋、随机轨迹和自定义圆环形状四个 p5.js 实现最后以 Polar Perlin Noise Loop 展示了极坐标与噪声结合的高级玩法。这套极坐标思考 笛卡尔绘制的方法论是《The Nature of Code》振荡章节乃至后续粒子系统、自主代理等主题的通用基石。赞分享教程文档示例工程【免费下载链接】website-archiveArchive of the Coding Train website (first version)项目地址https://gitcode.com/gh_mirrors/we/website-archive点击查看免费下载相关推荐用 p5.js 的 sin() 函数模拟简谐运动Nature of Code 3.5 完整实战指南用 p5.js 的 sin 函数模拟简谐运动Nature of Code 3.5 完整实战指南 本文基于 Coding Train 网站归档仓库中《Natur教程文档示例工程用 CSS 绘制常见几何形状方块、圆形与三角形实战指南30-seconds-of-code用 CSS 绘制常见几何形状方块、圆形与三角形实战指南30 seconds of code CSS 不仅能用来布局和美化页面还能仅凭 width 、 h教程文档website-archive 中的极坐标与三角函数实战p5.js 极坐标转笛卡尔坐标完整指南website archive 中的极坐标与三角函数实战p5.js 极坐标转笛卡尔坐标完整指南 本指南以 Coding Train 网站存档website教程文档示例工程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考