p5.js构造函数无法正常工作：椭圆对象圆周旋转问题

嘿，我一眼就瞅出你代码里的几个关键问题，调整后就能实现你想要的两个绕圆心旋转的椭圆效果了：

问题分析 #

• 构造函数中的变量访问错误：你在计算this.x和this.y时用了ang，但这个变量是当前对象的属性，必须写成this.ang才能正确访问，否则会引用未定义的全局变量（如果没有全局ang的话直接报错）。
• update方法未更新位置：你只在update里修改了角度this.ang，但没有重新计算椭圆的x、y坐标，所以角度变了位置却不动，自然看不到旋转效果。

修正后的完整代码 #

首先是修正后的Obj构造函数：

function Obj() {
  this.ang = TWO_PI;
  // 这里要使用this.ang访问当前对象的角度属性
  this.x = w/2 + cos(this.ang)*r;
  this.y = h/2 + sin(this.ang)*r;
  this.fil = 255;
  this.size = 28;

  this.show = function() {
    noStroke();
    fill(this.fil);
    ellipse(this.x, this.y, this.size, this.size);
  }

  this.update = function() {
    this.ang += 0.02;
    // 每次更新角度后，重新计算当前位置
    this.x = w/2 + cos(this.ang)*r;
    this.y = h/2 + sin(this.ang)*r;
  }
}

然后是主文件的完整逻辑（补充你没写的部分）：

let w, h;
let r = 100; // 圆周半径，可自行调整
let obj1, obj2;

function setup() {
  w = windowWidth;
  h = windowHeight;
  createCanvas(w, h);
  // 创建两个椭圆对象，第二个可以初始设置不同角度，避免重叠
  obj1 = new Obj();
  obj2 = new Obj();
  obj2.ang = TWO_PI / 2; // 让第二个椭圆初始在对面位置
}

function draw() {
  background(0);
  // 调用每个对象的更新和显示方法
  obj1.update();
  obj1.show();
  obj2.update();
  obj2.show();
}

额外优化建议 #

• 如果想让两个椭圆旋转速度不同，可以在update里给不同对象设置不同的增量，比如obj2.ang += 0.03。
• 可以给每个对象添加不同的填充色，方便区分，比如obj2.fil = color(255, 0, 0)。

内容的提问来源于stack exchange，提问作者Daniel Iova