Question

我想将椭圆沿着螺旋移动到屏幕的中心 - 椭圆的起点通过x和y坐标给出。好吧我不知道如何将螺旋向中心推（我可以通过向x，y添加宽度/ 2和高度/ 2来实现这一点）并且在同一时间以给定的cartasian（x，y）开始运动坐标。下面是代码。帮助赞赏！我一直在尝试在处理（java）中执行此操作：

float r = 0; //radius
float x = 700; // x of the object
float y = 50; // y of the object
float theta = 0; //angle

void setup() {
  size(800,600);
  background(0);
  smooth();

  r = sqrt(x*x+y*y); //polar coordinate - distance from x,y to 0,0 on the grid
  theta = atan(y/x); // angle to 0,0 on the grid

}

void draw() {

  fill(0,255,0);
  rect(width/2,height/2,20,20);

  fill(0,0,255);
  rect(700,50,20,20);

  float x = r * cos(theta);
  float y = r * sin(theta);

  // Draw an ellipse at x,y
  noStroke();
  fill(255,0,0);

  ellipse(x, y, 16, 16); 

  if (r>0){
  r -= 1; // Increment the radius
  theta += 0.01; // Increment the angle
  }
}

Answer 1

您可以翻译x，y然后翻译绘制循环。

这样就可以使用坐标系统，屏幕中心位于0,0而不是屏幕的左上角。

您的距离和角度公式使用0,0作为原点，如果您使用左上角原点系统（如Processing），则不是屏幕的中心。您也可以修改这些公式。

以下代码是您的编辑，可以在屏幕中央显示0,0。

float r = 0; //radius
float x = 100; // x of the object
float y = 100; // y of the object
float theta = 0; //angle

void setup() {
  size(800,600);
  background(0);
  smooth();
  ellipseMode(CENTER); // draw ellipses based on their center

  // translate the x and y from top-left origin to center origin 
  x -= width/2;
  y -= height/2;

  r = sqrt(x*x+y*y); //polar coordinate - distance from x,y to 0,0 on the grid
  theta = atan(y/x); // angle to 0,0 on the grid

}

void draw() {
  translate(width/2, height/2); // translate the whole canvas

  fill(0,255,0);
  ellipse(0,0,20,20); // mark the center of the canvas

  fill(0,0,255);
  ellipse(x,y,20,20); // mark the start point for the circle

  // flip the angle if left of the origin
  int flip = 1;
  if(x < 0) flip = -1;

  float x = r * cos(theta) * flip;
  float y = r * sin(theta) * flip;

  // Draw an ellipse at x,y
  noStroke();
  fill(255,0,0);

  ellipse(x, y, 16, 16); 

  if (r>0){
  r -= 1; // Decrement the radius
  theta += 0.01; // Increment the angle
  }

}

以下代码保留左上角原点，但修改半径和角度的初始化，使其相对于屏幕中心。

float x = 100; // x of the object
float y = 100; // y of the object
float r = 0; // radius
float theta = 0; // angle

void setup() {
  size(800,600);
  background(0);
  smooth();
  ellipseMode(CENTER); // draw ellipses based on their center

  // distance between point and center of screen
  r = dist(x,y,width/2,height/2);

  // http://stackoverflow.com/a/7586218/1736092
  // angle of line between point and center of screen 
  // relative to x-axis
  float dX = x - width/2;
  float dY = y - height/2; 
  theta = atan2(dY, dX);

  stroke(0, 255, 0); // green stroke
  line(x, y, width/2, height/2); // draw radius

  noStroke();
  fill(0, 255, 0);  // green fill
  ellipse(width/2, height/2, 20, 20); // mark the center of the canvas
  fill(0, 0, 255); // blue fill
  ellipse(x, y, 20, 20); // mark the start point for the circle
}

void draw() {
  float x = r * cos(theta) + width/2;
  float y = r * sin(theta) + height/2;

  noStroke();
  fill(255,0,0); // red fill
  ellipse(x, y, 16, 16); 

  if(r>0) {
    r -= 1; // Decrement the radius
    theta += 0.01; // Increment the angle
  }
}

沿着螺旋线移动到中心，开始时给出笛卡尔坐标

1 个答案: