教程文档示例工程【免费下载链接】website-archiveArchive of the Coding Train website (first version)项目地址https://gitcode.com/gh_mirrors/we/website-archive点击查看免费下载本篇指南以仓库存档文档 _more/archive/nature-of-code/3-Oscillation/3.1-Angles-and-Angular-Motion.md 为核心骨架系统讲解角度angles与角运动angular motion两个核心概念从角度单位度与弧度讲起再到rotate()旋转形状最终建立角度 → 角速度 → 角加速度的角运动模型并给出可直接运行的 p5.js 示例。读完本文你将掌握如何让任意形状以可控制的角速度与角加速度旋转并能把角运动与重力吸引等向量运动无缝结合为第 3 章后续的极坐标、简谐运动、摆与弹簧打下基础。1. 存档文档与它在 Nature of Code 系列中的位置仓库中的存档文档记录了 2015 年 8 月的早期视频Processing 版本属于《The Nature of Code》第 3 章Oscillation振荡运动系列的第一集标题为Angles and Angular MotionThis video describes how angles work in Processing and how you can model the angular motion of a shape.该系列存档页见 _more/archive/nature-of-code/3-Oscillation/index.md它明确指出这些视频课程配套《The Nature of Code》书籍第 3 章Oscillation。同目录下的后继存档文档勾勒出整章的知识脉络3.2-Trigonometry-and-Polar-Coordinates.md三角学与极坐标3.3-Simple-Harmonic-Motion.md利用正弦、余弦实现简谐运动3.4-Pendulum-Simulation.md摆的仿真3.5-Springs.md基于胡克定律的弹簧力仿真。这套旧版视频后来被重制为 p5.js 版本对应的详细课程页为 _learning/nature-of-code/3.1-angles-rotation.md 与 _learning/nature-of-code/3.2-angular-motion.md完整可运行的源码存放在 learning/nature-of-code/3.1-angles-rotation 与 learning/nature-of-code/3.2-angular-motion。本文的代码示例即取自这些仓库源码与旧版视频角度 角运动的主题一脉相承。2. 角度Angle旋转多少的量角度的本质是旋转了多少。在二维坐标系中一个形状围绕某个支点转动的量就是它的角度。与位置、速度、加速度这类向量量不同角度是一个标量——它只有一个数值大小没有方向分量方向感由顺时针还是逆时针来体现。在开始任何旋转之前必须回答一个基本问题用什么单位度量角度2.1 两种单位度degrees与弧度radians度degrees把一圈均分为 360 份一份是 1°。90° 是四分之一圈180° 是半圈360° 是一整圈。这是日常最直觉的单位。弧度radians数学与物理中最自然的单位。定义是弧长与半径之比因此一整圈对应2π弧度旋转量度弧度四分之一圈90°π/2半圈180°π四分之三圈270°3π/2一整圈360°2π2.2 为什么 π以及 τ如此重要在弧度制下旋转一整圈就是2π。仓库重制版课程页 _learning/nature-of-code/3.1-angles-rotation.md 中专门有一个话题 Why is pi so important?。原因在于弧度把旋转与三角函数正弦、余弦直接挂钩而三角函数正是第 3 章后续所有振荡、极坐标、摆、弹簧仿真的数学基础。用弧度计算三角函数、微积分、求导都远比度数自然——例如sin与cos的导数只有在弧度制下才是简洁的cos与-sin。也正因如此许多现代编程环境包括 p5.js默认使用弧度。如果你更习惯一圈 360的直觉可以改用TAU即2π来思考——p5.js 提供TAU常量一整圈就是TAU弧度这在心理上等价于一圈 360°。2.3 弧度与度的换算两个方向的手动换算公式度 → 弧度radians degrees × π / 180弧度 → 度degrees radians × 180 / πp5.js 也内置了radians()与degrees()两个转换函数但在实际编程中更推荐直接切换全局角度模式见下一节让引擎替你换算。3. 设置角度单位angleMode()p5.js 用angleMode()统一控制所有角度相关 APIrotate()、arc()、atan2()等使用的单位。仓库源码 learning/nature-of-code/3.1-angles-rotation/P5/sketch.js 在setup()中这样设置function setup() { createCanvas(400, 400); angleMode(RADIANS); // 显式声明使用弧度 }angleMode(RADIANS)弧度制默认值旋转一整圈需要2 * PI即TAU。angleMode(DEGREES)角度制此时rotate(90)表示旋转 90°。虽然弧度是默认值但显式调用angleMode(RADIANS)是良好习惯——它让代码意图一目了然也避免读者误以为单位是度。若某个项目你更希望用90、180、360这样的数值思考在setup()中写angleMode(DEGREES)即可之后所有旋转代码都按度解释。4. 旋转一个形状translate rotate 的协作仓库中 3.1 的完整示例sketch.js演示了如何让一个矩形绕画布中心持续旋转let 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; // 每帧增加角度 → 持续转动 }4.1 三个关键细节translate()改变旋转支点rotate()总是绕当前坐标系原点旋转。translate(200, 200)先把原点移到画布中心随后rotate(angle)便让矩形绕画布中心转动。若不调用translate()矩形将绕画布左上角默认原点旋转效果完全不同。rectMode(CENTER)默认模式下矩形以左上角定位rect(0, 0, 128, 64)会在原点右上区域展开rectMode(CENTER)让矩形以坐标点为中心绘制出的图形与旋转支点严格对齐视觉上更像绕自身中心转。每帧累加角度angle 0.05让角度每帧增大 0.05 弧度。当角度超过2π约 6.28 弧度时并不需要归零——三角函数和旋转对任意大角度都有效角度自然会环绕。0.05 弧度/帧 ≈ 每秒 3 弧度约每秒半圈是一个视觉上舒服的转速。4.2 旋转方向p5.js 中角度的正方向为顺时针因为屏幕坐标系 y 轴向下。若想让物体逆时针旋转只需把增量改为负数例如angle - 0.05。理解这一点对后续交互式角速度控制很重要。5. 角运动把向量运动的三大要素迁移到角度第 1 章我们建立过位置 → 速度 → 加速度的向量运动模型position velocity; velocity acceleration;角运动angular motion几乎一模一样只是把所有量换成标量angle angleV; // 角位置 角速度 angleV angleA; // 角速度 角加速度仓库 learning/nature-of-code/3.2-angular-motion/rect-acc/sketch.js 正是这个模型的直接实现let angle 0; // 角位置弧度 let angleV 0; // 角速度每帧转动的弧度 let angleA 0.001; // 角加速度每帧角速度的改变量 function setup() { createCanvas(400, 400); angleMode(RADIANS); } function draw() { // 用鼠标水平位置实时映射角加速度 angleA map(mouseX, 0, width, -0.01, 0.01); // 限制角速度避免越转越快失控 angleV constrain(angleV, -0.2, 0.2); background(146, 83, 161); noStroke(); fill(240, 99, 164); rectMode(CENTER); translate(200, 200); rotate(angle); rect(0, 0, 256, 32); angle angleV; // 位置积分 angleV angleA; // 速度积分 }5.1 参数解读angleA角加速度由鼠标位置映射而来。map(mouseX, 0, width, -0.01, 0.01)把鼠标在画布上的 x 坐标0 到画布宽线性映射到 -0.01 到 0.01 弧度的角加速度范围。鼠标在左半边时矩形逆时针加速右半边时顺时针加速中间位置约 width/2角加速度接近 0。angleV角速度constrain(angleV, -0.2, 0.2)把角速度钳制在 ±0.2 弧度/帧之间防止加速度无限累积导致旋转失控——这对应第 2 章里对速度做限制的思路。angle角位置每帧累加角速度等价于对速度做数值积分得到当前旋转角度。这三个变量的命名也出现在重制版课程页 _learning/nature-of-code/3.2-angular-motion.md 的主题列表中Code! Angular velocity、Code! Angular acceleration说明这正是该视频演示的核心代码路径。6. 交互式角运动让旋转跟随鼠标仓库同目录下的 grab 练习learning/nature-of-code/3.2-angular-motion/grab/sketch.js把角运动升级为交互式按住鼠标时矩形指向鼠标位置松开后保持惯性继续旋转。核心是利用 p5.Vector 的heading()方法——它返回向量方向的弧度角function mouseDragged() { let v createVector(pmouseX - width / 2, pmouseY - height / 2); pAngle v.heading(); // 记录拖动前的角度 } function mouseReleased() { let v2 createVector(mouseX - width / 2, mouseY - height / 2); angleV v2.heading() - pAngle; // 角度差即角速度 console.log(angleV); } function draw() { if (mouseIsPressed) { let v createVector(mouseX - width / 2, mouseY - height / 2); angle v.heading(); // 按住时矩形始终指向鼠标 } // ... 绘制与积分代码同前 angle angleV; angleV angleA; }这段代码体现了两个实用技巧heading()把位置差转成角度mouseX - width / 2与mouseY - height / 2构成从画布中心指向鼠标的向量heading()直接给出该向量的方向角省去手写atan2。角速度 角度差松开鼠标瞬间把当前角度 − 拖动时角度作为角速度注入实现甩出去继续转的惯性手感——这本质上是用位置差近似速度的差分思想。7. 综合案例把角运动融入引力吸引角运动最有价值的应用是让它与第 2 章的物理引擎协同工作。仓库 learning/nature-of-code/3.2-angular-motion/gravitational-attraction 下的三件套源码演示了完整的引力吸引 自旋sketch.js创建 10 个 Mover 与 1 个 Attractor每帧更新并施加引力attractor.js基于万有引力公式引力常量G 5计算引力距离平方被constrain(force.magSq(), 100, 1000)钳制以避免奇点mover.js每个运动物体在平移之外还携带自身的角状态。Mover 类的角运动部分mover.js展示了如何把加速度翻译成角加速度this.angle 0; this.angleV 0; this.angleA 0; update() { this.vel.add(this.acc); this.pos.add(this.vel); // 关键把竖直方向加速度标量映射为角加速度 this.angleA this.acc.y / 50.0; this.angleV this.angleA; this.angle this.angleV; this.acc.set(0, 0); // 每帧清零加速度等待下一帧外力 } show() { push(); translate(this.pos.x, this.pos.y); // 平移到物体位置 rotate(this.angle); // 叠加自身旋转 line(0, 0, this.r, 0); // 一条指针线 ellipse(0, 0, this.r * 2); pop(); }这里有一个非常简洁的物理直觉物体加速下落/上升时竖直加速度acc.y驱动旋转。this.acc.y / 50.0只是把加速度数值缩放到合适的角加速度量级50 是经验性缩放因子。push()/pop()保证translaterotate只作用于当前物体不影响其他绘制状态。于是我们同时拥有了平移物理位置、速度、加速度与旋转物理角度、角速度、角加速度两套并行的运动系统这正是存档视频标题 model the angular motion of a shape 所指的能力。8. 运行这些示例仓库中的示例均为 p5.js 项目每个目录都包含sketch.js与 index.html。index.html通过 CDN 引入 p5.js 库如https://cdn.jsdelivr.net/npm/p51.4.1/lib/p5.min.js随后加载本地sketch.js。运行方式在浏览器中直接打开对应目录下的index.htmlp5.js 的本地文件无需构建步骤或在 p5.js Web Editor 中新建草图把仓库源码复制进去运行学习型调试修改angle 0.05的步长、map()的映射范围、constrain()的上下界观察转速、转向与惯性的变化直观理解每个参数的作用。9. 小结与下一步围绕存档文档角度 角运动的主题本文建立了完整的技术链路概念代码要素仓库证据角度单位angleMode(RADIANS/DEGREES)、TAU3.1 源码旋转绘制translaterotaterectMode(CENTER)同上角运动三要素angle、angleV、angleA逐帧积分rect-acc 源码交互控制heading()、mouseDragged/mouseReleasedgrab 源码融合物理角加速度映射自acc.ypush/pop隔离状态mover.js掌握了角度与角运动之后第 3 章的下一站是三角学与极坐标——用sin、cos把角度换算成位置再往后是简谐运动、摆的仿真与弹簧它们都以本节的角度概念为地基。建议动手练习把本节任何一个示例中的矩形换成ellipse、triangle或文字观察旋转支点与绘制顺序对视觉效果的影响——这是建立旋转坐标系直觉最快的方式。赞分享教程文档示例工程【免费下载链接】website-archiveArchive of the Coding Train website (first version)项目地址https://gitcode.com/gh_mirrors/we/website-archive点击查看免费下载相关推荐The Nature of Code p5.js 示例项目教程The Nature of Code p5.js 示例项目教程 1. 项目介绍 The Nature of Code p5.js 是一个开源项目旨在将《The示例工程文档/教程前端用 p5.js 的 sin() 函数模拟简谐运动Nature of Code 3.5 完整实战指南用 p5.js 的 sin 函数模拟简谐运动Nature of Code 3.5 完整实战指南 本文基于 Coding Train 网站归档仓库中《Natur教程文档示例工程Nature of Code 5.18用 p5.js 与 matter.js 搭建 2D 物理世界Coding Train 仓库实战Nature of Code 5.18用 p5.js 与 matter.js 搭建 2D 物理世界Coding Train 仓库实战 本篇文章以 Codi教程文档示例工程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考