Question

当按下按钮时，我遇到了将大圆圈向小圆圈方向移动的问题。有人可以帮忙吗？

目标：

在画布上画一个圆圈[完成]
画一个围绕大圆旋转的小圆[完成]
当按下一个按钮时，将大圆圈移动 5 个像素，向当时指向的小圆圈方向移动 [pending]
在移动 [pending] 时添加绘图效果

我们可以在按下按钮时使用下面的 x 和 y 坐标并在方向上移动主圆吗？如果我错了，请纠正我

let x = r *2* cos(angle);


let y = r *2* sin(angle);

let angle = 0;


function setup() {
  createCanvas(400, 400);
  
}



function draw() {
  background(0);
  stroke(255);
  strokeWeight(4);
  let cir = createVector(200,200);
  let velocity = createVector();
  
  
  
  
  let r = 10;
  k = circle(cir.x, cir.y, r * 2);

  strokeWeight(4);
  stroke(255);
  let x = r *2* cos(angle);
  let y = r *2* sin(angle);
  translate(200,200);
  point(x, y);
  angle += 0.01;
  
  if(mouseIsPressed){
    k.x += x;
    k.y += y;
  }
}

<html>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
</html>

Answer 1

通过跟踪大圆的中心，您可以在保持小圆绕大圆公转的同时沿小圆的方向移动大圆。

将变量 cir 移到 draw 之外，以便我们保留对它所做的任何更改。

我们还需要计算沿线段从大圆的中心到小圆的 5px 移动。为此，我们可以使用此解决方案中的公式 to find a point on a line segment

为了防止小圆圈在移动过程中旋转，我们只能在鼠标未按下时增加旋转角度。

let angle = 0;
let cir;

function setup() {
  createCanvas(400, 400);
  cir = createVector(200,200);
}

function draw() {
  background(0);
  stroke(255);
  strokeWeight(4);
  let r = 10;
  circle(cir.x, cir.y, r * 2);
  strokeWeight(4);
  stroke(255);
  let x = r *2* cos(angle);
  let y = r *2* sin(angle);
  point(x +cir.x, y+cir.y);
 
  
  if(mouseIsPressed){ 
    cir.x = (1-0.025)*cir.x+0.025*(x+cir.x);
    cir.y = (1-0.025)*cir.y+0.025*(y+cir.y);
  } else {
   angle += 0.01;
  }
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.3.0/lib/p5.js"></script>

在画布中围绕它旋转的另一个圆圈的方向移动圆圈

1 个答案: