移动圆圈 - 就像弹跳一样

Question

只是另一个问题！我试图让圆圈反弹，但它不起作用我什至尝试了最基本的方法，只是向圆圈 x 添加一个值（来自“step”int），但它不起作用。我应该遵循什么方法？

我知道这是一个基本问题，但我知道这一点:)

float time;
PFont font1;
/*float posX, posY, velX, velY, raio;
 int dirX = 1;
 int dirY = -1;*/
int passo = 2;

color c1 = color (253, 196, 80, 40);
color c2 = color(254, 127, 168, 40);

color c3 = color (53, 63, 114, 80);
color c4 = color (206, 186, 221, 80);

void setup() {
  size(600, 800);
  smooth();
  background (#F6C4C7);
  ellipseMode(RADIUS);

 
  noStroke();

  time = 17;
}

//make gradient

void desenhar_grad(float posX, float posY, int raio, color color1, color color2) {
  pushStyle();
  noStroke();
  for (int r = raio; r > 0; r--) {
    int tom = lerpColor(color1, color2, map(r, 0, raio, 0.0, 1.0)); // os últimos dois valores são as cores. o primeiro é o centro, o segundo é o exterior
    fill(tom);
    circle(posX, posY, r * 2);
    
  }
  popStyle();
}

/*void move() {
 posY+=velY*dirY;
 if (posY>height-raio || posY<raio)
 dirY*=-1;
 
 posX+=velX*dirX;
 if (posX>width-raio || posX<raio)
 dirX*=-1;
 }*/



void draw () {

  smooth();

  for (int linha = 0; linha < 3; linha++) {
    for (int coluna = 0; coluna < 3; coluna++) {
      if (time <= 19) {
        desenhar_grad(150 + coluna * 150, 200 + linha * 150, 30, c1, c2);
      } else
        desenhar_grad(150 + coluna * 150, 200 + linha * 150, 30, c4, c3);
    }
  }
}

} ```

Also, should I create a class for the circles in order to optimize the code?

Thank you!

Answer 1

我看到您尝试使用 move() 函数（和相关变量）。

再次，关闭，但有一些陷阱：

• move() 中使用的值应该被初始化：否则它们将默认为 0，任何乘以 0 的数字都是 0，这将导致根本没有移动
• 一旦您计算出正确的posX, posY，您就可以将它们用于translate() 一切（即渐变）：一旦一切都被转换，150、200 个偏移量就可以被移除（并用作posX, posY 初始值）
• 不清楚 3x3 渐变网格的“枢轴”应该位于网格的中心还是左上角。让我们从更简单的左上角选项开始。稍后可以通过将网格大小添加到 posX 和 posY 轻松地将其更改为居中

这是使用上述注释修改后的草图：

float time;

// initialise movement variables
float posX = 150, posY = 200, velX = 1, velY = 1;
int raio = 30;
int dirX = 1;
int dirY = -1;

color c1 = color (253, 196, 80, 40);
color c2 = color(254, 127, 168, 40);

color c3 = color (53, 63, 114, 80);
color c4 = color (206, 186, 221, 80);

void setup() {
  size(600, 800);
  smooth();
  ellipseMode(RADIUS);

  smooth(); 
  noStroke();

  time = 17;
}

//make gradient
void desenhar_grad(float posX, float posY, int raio, color color1, color color2) {
  pushStyle();
  noStroke();
  for (int r = raio; r > 0; r--) {
    int tom = lerpColor(color1, color2, map(r, 0, raio, 0.0, 1.0)); // os últimos dois valores são as cores. o primeiro é o centro, o segundo é o exterior
    fill(tom);
    circle(posX, posY, r * 2);
  }
  popStyle();
}

void move() {
 posY += velY * dirY;
 if (posY > height - raio || posY < raio)
   dirY *= -1;
 
 posX += velX * dirX;
 if (posX > width - raio || posX < raio)
   dirX *= -1;
 // for testing only:
 println("posX",posX, "width", width, "posY", posY, "height", height);
}



void draw () {
  if(!mousePressed) background (#F6C4C7);
  // update posX, posY taking sketch borders into account 
  move();
  // translate everything to the updated position
  translate(posX, posY);
  
  for (int linha = 0; linha < 3; linha++) {
    for (int coluna = 0; coluna < 3; coluna++) {
      if (time <= 19) {
        desenhar_grad(coluna * 150, linha * 150, raio, c1, c2);
      } else
        desenhar_grad(coluna * 150, linha * 150, raio, c4, c3);
    }
  }
  
}

为了清楚起见，我删除了未使用的变量并添加了一些 cmets。

还有一些令人困惑的，可能不相关的项目：

• 应该清除屏幕还是应该网格留下痕迹？ （现在您可以通过按住鼠标来留下轨迹，但您可以根据您想要的外观轻松选择何时拨打background()）
• 应该如何更新time 变量？目前它在 setup() 中设置为 17，并且不会更改，从而使嵌套 for 循环内的 if/else 条件变得多余。也许您打算根据某些条件在draw() 中更新？
• 网格应该作为一个整体移动还是每个渐变都应该自己移动？我的假设是您正在尝试完全移动网格但是如果您想单独移动每个渐变，则需要为move() 中使用的每个变量使用一个数组，以便可以为每个渐变独立更新（例如 float[] posX, posY, velX, velY)。）

旁注：如果动作这么简单，您可以使用pos 和 vel 变量而不使用dir 变量：

void move() {
 posY += velY;
 if (posY > height - raio || posY < raio)
   velY *= -1;
 
 posX += velX;
 if (posX > width - raio || posX < raio)
   velY *= -1;
}

手动更新每个 x,y 变量是一种很好的学习方式。 稍后您可能会发现PVector 对移动很有用。