处理：椭圆鼠标跟随不重叠答案

【问题标题】：Processing: Ellipse mouse follow without overlap处理：椭圆鼠标跟随不重叠
【发布时间】：2018-02-04 14:55:57
【问题描述】：

我是 Processing 的初学者，并试图让一排椭圆跟随鼠标的路径，它们的边缘相互接触，但不重叠。

我的第一个练习是使用一条线在数组中跟踪鼠标历史记录，注释掉的线也在每个索引处添加一个椭圆：

ArrayList <PVector> history;
float preX; 
float preY;

void setup() {
  size(1024, 1024);
  history = new ArrayList <PVector> ();
}

void draw() {
  background(255);

  for(int i=1; i<history.size(); i++){
    //ellipse(history.get(i).x, history.get(i).y, 50,50);

      PVector pointA = history.get(i-1);
      PVector pointB = history.get(i);
      line(pointA.x, pointA.y, pointB.x, pointB.y);
  }
}

void mouseDragged() {
  preX= mouseX;
  preY= mouseY;
  history.add(new PVector(mouseX,mouseY));
}

我想我应该定义一个半径变量并使用 dist() 来计算当前鼠标位置和沿鼠标历史绘制的最后一个椭圆之间的距离，然后使用 if 语句仅在距离 = 的情况下绘制椭圆=半径* 2，但是当我尝试将其转换为处理代码时会非常卡住。任何人都可以帮助我开始吗？我在其他地方找不到提示时遇到了很多麻烦 - 即使只是朝着正确的方向推动也将不胜感激！

【问题讨论】：

标签： processing ellipse drawellipse

【解决方案1】：

我想我应该定义一个半径变量并使用 dist() 来计算当前鼠标位置和沿鼠标历史绘制的最后一个椭圆之间的距离，然后使用 if 语句仅在距离 = 的情况下绘制椭圆=半径*2

这听起来是一个非常好的计划。我能给你的最好的建议是break your problem down into smaller pieces，一次接一个。

例如，您是否可以从仅在某处显示硬编码圆圈的基本草图开始，然后打印出它与鼠标之间的距离？以此为基础。你能不能让圆圈通常是红色的，但当鼠标离它一定距离时变成绿色？现在你可以让它变成绿色时画一个新的圆圈吗？

提示：如果您检查距离是否完全等于半径，您只检查了非常小的一组位置，而鼠标可能不会那么精确。相反，您可能想检查距离是否在半径之外。您可能会发现 this collision detection tutorial 很有用。

【讨论】：

【解决方案2】：

void mouseDragged() {
  if(dist(preX,preY,mouseX,mouseY)>=50){
  float angle=atan2(mouseX-preX,mouseY-preY);
  preX+=sin(angle)*50;
  preY+=cos(angle)*50;
  history.add(new PVector(preX,preY));
  }
}

【讨论】：