本教程旨在解决processing中图形旋转时出现偏移的问题，并实现多个图形的独立旋转。我们将深入探讨processing的坐标系统、`translate()`、`rotate()`等变换函数，并重点介绍如何利用`pushmatrix()`和`popmatrix()`创建独立的变换上下文，从而使图形在保持自身位置的同时，根据鼠标输入进行平移和独立方向的旋转，最终提供一个结合相对坐标和变换管理的完整解决方案。
Processing中图形变换的挑战与核心概念
在Processing等图形编程环境中，对屏幕上的图形进行移动（平移）、旋转和缩放是常见的操作。然而，初学者常遇到的一个问题是，当尝试旋转图形时，它们往往会“飞出”屏幕，而不是原地旋转。这通常是因为对Processing的坐标系统和变换机制理解不足。
1. 理解Processing的坐标系统与全局变换
Processing的绘图操作默认基于一个全局的坐标系统，其原点(0,0)位于画布的左上角。当您使用translate()、rotate()或scale()等函数时，这些变换会应用于整个坐标系统，影响后续所有绘制操作。
- translate(x, y): 将坐标原点移动到(x, y)。这意味着之后所有使用绝对坐标绘制的图形都会相对于这个新的原点进行绘制。
- rotate(angle): 围绕当前坐标原点旋转整个坐标系统一个指定的角度。
问题在于，如果您的图形是使用绝对坐标（例如triangle(1000,600,900,850,800,600)）定义的，并且其中心点与坐标原点不重合，那么直接应用rotate()会导致图形围绕画布的(0,0)点旋转，从而使其看起来像是在“飞出”屏幕。要实现原地旋转，图形需要围绕其自身的中心点旋转。
2. 解决方案核心：pushMatrix() 与 popMatrix()
为了实现图形的独立变换（例如，一个图形旋转，而另一个图形不旋转或以不同方式旋转），我们需要为每个图形创建独立的变换上下文。这就是pushMatrix()和popMatrix()的作用。
- pushMatrix(): 保存当前坐标系统的状态（包括当前的平移、旋转、缩放等变换）。
- popMatrix(): 恢复到最近一次pushMatrix()保存的坐标系统状态。
通过在pushMatrix()和popMatrix()之间执行绘制和变换操作，您可以确保这些变换仅作用于该代码块内的图形，而不会影响块外部的图形或全局坐标系统。这使得对不同图形应用独立的平移、旋转和缩放成为可能。
构建可拖动与独立旋转的图形
现在，我们将结合这些概念，逐步构建一个能够通过鼠标拖动平移，并使两个星形图形独立旋转的Processing程序。
步骤一：实现鼠标拖动平移
首先，我们需要一个机制来响应鼠标拖动事件，并更新图形的平移位置。
float offsetX = 0; // 用于存储全局平移的X偏移量
float offsetY = 0; // 用于存储全局平移的Y偏移量
float rotationAngle = 0; // 用于存储旋转角度，这里暂不使用
void setup(){
size(1800, 1000); // 设置画布大小
}
void draw() {
background(0); // 清空背景
// 应用全局平移，使整个场景可以被拖动
translate(offsetX, offsetY);
// 在这里绘制您的图形...
// 为了演示平移，我们暂时使用原始的绝对坐标绘制
drawStarsAbsolute();
fill(0,0,0);
ellipse(900 - (1800/2) + offsetX, 500 - (1000/2) + offsetY, 425, 425); // 绘制中心圆，注意需要考虑translate的影响
}
void mouseDragged(){
// 当鼠标被拖动时，更新偏移量
// 这里的offsetX和offsetY直接设置为mouseX和mouseY，
// 配合translate(offsetX, offsetY)可以将画布原点移动到鼠标位置
offsetX = mouseX;
offsetY = mouseY;
}
// 原始的图形绘制函数，使用绝对坐标
void drawStarsAbsolute() {
beginShape();
fill(139,19,191); triangle(1000,600,900,850,800,600);
fill(20,134,245); triangle (1100,400,1250,600,1000,600);
fill(191,8,8); triangle(800,600,550,600,700,400);
fill(86,165,3); triangle(700,400,550,100,900,350);
fill(167,167,166); triangle(900,350,1250,100,1100,400);
endShape();
beginShape();
fill(139,19,191); triangle(800,350,900,100,1000,350);
fill(86,165,3); triangle(1000,350,1250,350,1100,550);
fill(167,167,166); triangle(700,550,550,350,800,350);
fill(20,134,245); triangle(700,550,550,850,900,650);
fill(191,8,8); triangle(1100,550,1250,850,900,650);
endShape();
}注意: 在上述代码中，为了演示全局平移，我们直接使用了offsetX = mouseX; offsetY = mouseY;。当translate(offsetX, offsetY)被调用时，画布的原点会被移动到鼠标当前的位置。如果您的图形是使用绝对坐标（例如900,500）绘制的，那么它们也会随着这个原点的移动而移动。为了使图形围绕一个固定的逻辑中心点（例如width/2, height/2）进行拖动，并且图形本身是相对该中心点绘制的，通常会在mouseDragged中计算偏移量：offsetX = mouseX - width/2; offsetY = mouseY - height/2;，但这要求图形的绘制也以(0,0)为中心。
步骤二：图形中心化与相对坐标
要实现原地旋转，图形的定义必须是相对于其旋转中心的。如果图形的中心点是(Cx, Cy)，那么图形的所有顶点坐标都应该表示为(Vx - Cx, Vy - Cy)。这样，当您对图形应用translate(Cx, Cy)将其移动到屏幕上的目标位置，再应用rotate(angle)时，它就会围绕其自身新的原点（即(Cx, Cy)）旋转。
原始代码中的星形图形是使用绝对坐标绘制的，它们的逻辑中心大致在(900, 500)附近。为了方便旋转，我们需要将这些坐标转换为相对于(900, 500)的相对坐标。例如，如果一个顶点是(1000, 600)，那么相对于中心(900, 500)，它的相对坐标就是(1000-900, 600-500)，即(100, 100)。
步骤三：独立旋转实现与完整代码
现在，我们将结合pushMatrix()、popMatrix()、translate()、rotate()以及相对坐标来构建最终的解决方案。我们将使用frameCount作为旋转角度的来源，以实现连续旋转，并通过正负值控制旋转方向。
float globalOffsetX = 0; // 全局平移的X偏移量
float globalOffsetY = 0; // 全局平移的Y偏移量
void setup(){
size (1800,1000); // 设置画布大小
// 确保平滑绘制，避免锯齿
smooth();
}
void draw() {
background (0); // 清空背景
// 1. 应用全局平移：整个场景随鼠标拖动
// 这里的globalOffsetX和globalOffsetY直接是鼠标位置，
// 意味着整个画布的原点被移动到鼠标位置。
// 因为下面的图形都以(0,0)为中心绘制，所以translate(globalOffsetX, globalOffsetY)
// 相当于将所有图形的逻辑中心移动到鼠标位置。
translate(globalOffsetX, globalOffsetY);
// 第一个星形：顺时针旋转
pushMatrix(); // 保存当前坐标系统状态
// 旋转变换：围绕当前原点（即translate(globalOffsetX, globalOffsetY)后的位置）旋转
rotate(frameCount * 0.01); // frameCount是一个递增的变量，用于连续旋转
// 绘制第一个星形（使用相对于其中心点的坐标）
fill(139,19,191); triangle( 100, 100, 0, 350, -100, 100);
fill(20,134,245); triangle( 200, -100, 350, 100, 100, 100);
fill(191,8,8); triangle(-100, 100, -350, 100, -200, -100);
fill(86,165,3); triangle(-200, -100, -350, -400, 0, -150);
fill(167,167,166); triangle( 0, -150, 350, -400, 200, -100);
popMatrix(); // 恢复到pushMatrix()之前的坐标系统状态
// 第二个星形：逆时针旋转
pushMatrix(); // 再次保存当前坐标系统状态
// 旋转变换：逆时针旋转
rotate(frameCount * -0.01);
// 绘制第二个星形（使用相对于其中心点的坐标）
fill(139,19,191); triangle(-100, -150, 0, -400, 100, -150);
fill(86,165,3); triangle( 100, -150, 350, -150, 200, 50);
fill(167,167,166); triangle(-200, 50, -350, -150, -100, -150);
fill(20,134,245); triangle(-200, 50, -350, 350, 0, 150);
fill(191,8,8); triangle( 200, 50, 350, 350, 0, 150);
popMatrix(); // 恢复到pushMatrix()之前的坐标系统状态
// 绘制中心圆（同样使用相对于当前原点(0,0)的坐标）
fill(0,0,0);
// 这里使用ellipse而不是circle，因为Processing自带的circle可能与自定义的冲突
ellipse(0, 0, 425, 425);
}
// 鼠标拖动事件处理
void mouseDragged(){
// 更新全局平移偏移量，使图形跟随鼠标移动
globalOffsetX = mouseX;
globalOffsetY = mouseY;
}
// 如果您需要一个自定义的circle函数，可以这样定义
// void circle(float x, float y, float r){
// ellipse(x, y, r, r);
// }代码解析：
- globalOffsetX, globalOffsetY: 这两个变量存储了鼠标拖动带来的全局平移量。在draw()函数开始时，translate(globalOffsetX, globalOffsetY)将整个绘图的原点移动到鼠标的当前位置。
- 相对坐标绘制: 两个星形的所有顶点坐标都已转换为相对于其自身中心点的坐标。例如，如果原始中心是(900, 500)，那么所有顶点都减去了(900, 500)。这样，当translate()将绘图原点移动到(globalOffsetX, globalOffsetY)后，这些相对坐标的图形就会以(globalOffsetX, globalOffsetY)为中心进行绘制。
-
pushMatrix() / popMatrix():
- 在绘制每个星形之前调用pushMatrix()，保存当前（已全局平移）的坐标系统状态。
- 在pushMatrix()和popMatrix()之间，对该星形应用rotate()变换。这个rotate()只影响当前星形，因为它在独立的变换上下文中。
- popMatrix()恢复到pushMatrix()之前的状态，确保下一个星形的绘制从相同的全局平移状态开始，而不受前一个星形旋转的影响。
- *`rotate(frameCount 0.01)**:frameCount是Processing内置的一个变量，表示程序运行至今的帧数。通过乘以一个小的浮点数（例如0.01`），我们可以实现平滑、连续的旋转动画。正值表示顺时针旋转，负值表示逆时针旋转。
- 中心圆: 同样使用相对坐标(0,0)绘制，确保它始终位于星形的中心。
注意事项与最佳实践
- 变换顺序的重要性: 在pushMatrix()和popMatrix()之间，变换的顺序通常是translate() -> rotate() -> scale()。先平移到图形的中心，再进行旋转，最后进行缩放，这样可以确保旋转和缩放都围绕图形自身的中心进行。
- 图形的中心点: 始终将图形的几何中心定义为相对坐标的(0,0)点，这样在应用translate()和rotate()时会更加直观和有效。
- 嵌套使用pushMatrix() / popMatrix(): 您可以根据需要嵌套使用pushMatrix()和popMatrix()来管理更复杂的场景，例如一个旋转的行星系统，其中每个行星自身也在旋转。
- 性能考量: 对于大量图形，频繁的pushMatrix()/popMatrix()和复杂的变换可能会影响性能。在必要时，可以考虑使用P3D渲染模式或自定义着色器。
- 角度单位: Processing的rotate()函数默认使用弧度（radians）。如果您习惯使用角度（degrees），可以使用radians()函数进行转换，例如rotate(radians(45))。
总结
通过本教程，我们学习了如何在Processing中利用translate()、rotate()以及关键的pushMatrix()和popMatrix()函数，实现对图形的精确控制。理解这些变换的工作原理，尤其是如何通过相对坐标和独立的变换上下文来管理图形，是创建复杂、交互式Processing动画和应用程序的基础。掌握这些技巧，您将能够让屏幕上的图形按照您的意愿灵活舞动，而不再担心它们会“飞出”画面。
