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

Question

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

目标：

在 canvas 上画圈 [完成]
画一个围绕大圆旋转的小圆[完成]
当时小圆指向的方向按下按钮时大圆移动5个像素[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>

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

Moving the circle in the directing of another circle revolving around it in canvas

javascript

animation

dom

canvas

p5.js