p5.js中使用noLoop()时，如何实现图形加载即旋转？

DevOps 小满

2026-8-1

解决Processing图形旋转不生效的问题

你当前的代码旋转没效果，核心原因是：

Processing的rotate()默认围绕**窗口左上角(0,0)**旋转，不是你预期的图形中心
rect()默认以左上角为锚点绘制，旋转后图形会直接移出可视区域，看起来像没变化

正确的实现步骤

要让图形围绕窗口中心旋转，需要调整坐标系统的操作顺序：先把原点移到旋转中心，再执行旋转，最后绘制图形，同时注意矩形的锚点设置。

方案1：使用`rectMode(CENTER)`简化坐标计算

void setup() {
  size(800, 600);
  noLoop(); // 只绘制一次
}

void draw() {
  background(255);
  
  push();
    // 1. 把坐标原点移到窗口中心
    translate(windowWidth/2, windowHeight/2);
    // 2. 执行旋转（注意参数是弧度，45度要转成弧度：radians(45)）
    rotate(radians(45));
    // 3. 设置矩形以中心为锚点绘制
    rectMode(CENTER);
    // 绘制矩形（此时坐标(0,0)就是窗口中心）
    rect(0, 0, 500, 250);
    // 绘制线段：从中心到原窗口右侧中心（转换后坐标是windowWidth/2, 0）
    line(0, 0, windowWidth/2, 0);
  pop();
}

方案2：不使用`rectMode`，手动计算矩形坐标

如果不想修改rectMode，需要把矩形的左上角坐标调整为(-250, -125)（因为矩形宽500、高250，半宽半高分别是250和125），让矩形中心落在原点：

void setup() {
  size(800, 600);
  noLoop();
}

void draw() {
  background(255);
  
  push();
    translate(windowWidth/2, windowHeight/2);
    rotate(radians(45));
    // 手动计算矩形左上角坐标，确保中心在原点
    rect(-250, -125, 500, 250);
    line(0, 0, windowWidth/2, 0);
  pop();
}