将鼠标 daw 限制为 45 度处理

Question

如何将交互式画线限制为 45 度？想象一下，在一个 45 度的下划线网格中，鼠标绘制也被磁化了。也许在 mousedown 上决定你的起始位置，然后你的 Mouse.X 和 Mouse.Y 位置仅从开始点击开始更新 45 度？

float dif = 10;
float easing = 0.05;
boolean current = false;
boolean started = false;
float rainbow, x, y;
float colbase;
PVector pos, prev_pos, update_pos;
float step = 25;

void setup(){
  size(400, 400);
  background(100);
  colorMode(HSB);
}
 
void draw(){

  if (rainbow >= 255)  rainbow=0;  else  rainbow+=5;
  if (frameCount % dif == 0) {
   colbase = rainbow; 
  }
  if(mousePressed){

    update_pos();
      
        if(current){
          started =  true;//start drawing
          pos =      update_pos;
        }else{
          prev_pos = update_pos;
        }
       current = !current;
      
  }else{
      update_pos();
      started   = false;
      pos       = update_pos;
      prev_pos  = update_pos;
  }
 
  if(started){
      //style for lines
      strokeWeight(step);
      stroke(colbase,255,255);
      noFill();
      line(prev_pos.x, prev_pos.y, pos.x, pos.y);
   }
  
 }

PVector update_pos(){
  x = lerp(x, mouseX, easing);
  y = lerp(y, mouseY, easing);
  update_pos = new PVector(x, y);
  return update_pos;
  }

Answer 1

我想说我喜欢这个。此外，这个问题最终比我想象的更难回答。

结果如下：

首先，我冒昧地重新组织了您的示例代码。我不知道你有多有经验，也许我改变的一些东西是故意的，但在我看来你的例子有很多奇怪的代码位悬而未决。这是经过我更改的示例代码（检查下一个代码块以获得答案，这个更像是一个代码审查，可以为您提供一般帮助）：

float dif = 10;
float easing = 0.05;
boolean current, started; // automatically initializing as false unless stated otherwise
float rainbow;
float colbase;
PVector pos, prev_pos;
float step = 25;

void setup() {
  size(400, 400);
  background(100);
  colorMode(HSB); // clever!

  pos = prev_pos = new PVector(); // instanciating some non-null PVectors
}

void draw() {
  pos = prev_pos = update_pos(); // cascade attribution: it starts by the last one and goes back toward 'pos'

  if (mousePressed) {
    if (!started) {
      // initializing variables needed for drawing
      started = true;
      pos = prev_pos = new PVector(mouseX, mouseY);
    }
  } else {
    started = false;
  }

  if (started) {
    updateColor();
    strokeWeight(step);
    stroke(colbase, 255, 255);
    noFill();
    line(prev_pos.x, prev_pos.y, pos.x, pos.y);
  }
}

void updateColor() {
  if (rainbow >= 255) {
    rainbow=0;
  } else {
    rainbow+=5;
  }

  if (frameCount % dif == 0) {
    colbase = rainbow;
  }
}

PVector update_pos() {
  float x = lerp(pos.x, mouseX, easing);
  float y = lerp(pos.y, mouseY, easing);

  return new PVector(x, y);
}

请注意我是如何更改几个变量名称的。作为一般规则，你应该始终命名你的变量，就好像维护你的代码的人是一个知道你住在哪里的愤怒的骑车人。

现在解决你的实际问题：

boolean isDrawing;
float rainbow, colbase, dif, easing, step, centerZone;
PVector pos, prev_pos, origin, quadrant;

void setup() {
  size(400, 400);
  background(100);
  colorMode(HSB); // clever!

  centerZone = 5; // determine how close to the original click you must be to change quadrant
  dif = 10;
  easing = 0.05;
  step = 25;

  origin = pos = prev_pos = new PVector();
}

void draw() {
  updatePosition();

  if (mousePressed) {
    if (!isDrawing) {
      // setting variables needed for drawing
      isDrawing = true;
      origin = pos = prev_pos = new PVector(mouseX, mouseY); // drawing should always start where the mouse currently is
    }
  } else {
    isDrawing = false;
  }

  if (isDrawing) {
    updateColor();
    strokeWeight(step);
    stroke(colbase, 255, 255);
    noFill();
    line(prev_pos.x, prev_pos.y, pos.x, pos.y);
  }
}

void updateColor() {
  if (rainbow >= 255) {
    rainbow=0;
  } else {
    rainbow+=5;
  }

  if (frameCount % dif == 0) {
    colbase = rainbow;
  }
}

void updatePosition() {
  float relativeX = pos.x - origin.x;
  float relativeY = pos.y - origin.y;
  float diffX = mouseX - origin.x;
  float diffY = mouseY - origin.y;
  float distance = abs(diffX) > abs(diffY) ? abs(diffX) : abs(diffY); // this is just inline if, the syntax being " condition ? return if true : return if false; "
  prev_pos = pos;
  
  // validating if the mouse is in the same quadrant as the pencil
  PVector mouseQuadrant = new PVector(diffX > 0 ? 1 : -1, diffY > 0 ? 1 : -1);
  
  // we can only change quadrant when near the center
  float distanceFromTheCenter = abs(relativeX) + abs(relativeY);
  if (quadrant == null || distanceFromTheCenter < centerZone) {
    quadrant = new PVector(diffX > 0 ? 1 : -1, diffY > 0 ? 1 : -1);
  }

  // if the mouse left it's quadrant, then draw toward the center until close enough to change direction
  // ^ is the XOR operator, which returns true only when one of the sides is different than the other (one true, one false)
  // if the quadrant info is positive and the diff coordinate is negative (or the other way around) we know the mouse has changed quadrant
  if (distanceFromTheCenter > centerZone && (relativeX > 0 ^ mouseQuadrant.x > 0 || relativeY > 0 ^ mouseQuadrant.y > 0)) {
    // going toward origin
    pos = new PVector(lerp(prev_pos.x, origin.x, easing), lerp(prev_pos.y, origin.y, easing));
  } else {
    // drawing normally
    pos = new PVector(lerp(prev_pos.x, origin.x + (distance * quadrant.x), easing), lerp(prev_pos.y, origin.y + (distance * quadrant.y), easing));
  }
}

如果您有任何关于此代码的问题，我会回答您。玩得开心！

编辑：

这部分可能需要更多的解释，所以让我们详细说明一下：

  if (distanceFromTheCenter > centerZone && (relativeX > 0 ^ mouseQuadrant.x > 0 || relativeY > 0 ^ mouseQuadrant.y > 0)) {
    // going toward origin
  } else {
    // drawing normally
  }

此检查的重点是了解鼠标是否仍与“铅笔”处于同一象限，我指的是我们正在绘制的点。

但是“象限”是什么？请记住，用户只能绘制 45 度线。这些线是相对于用户点击绘制的点定义的，我称之为“原点”：

这意味着屏幕总是被分成4个不同的“象限”。为什么？因为有4个不同的方向我们可以画。但是我们不希望用户必须坚持这些精确的像素才能进行绘制，对吗？我们可以，但这不是算法的工作方式：它在页面上摆出一支铅笔，然后跟随鼠标。所以在这里，如果鼠标从原点向左上方移动，铅笔将在 45 度 X 线的左上方分支上绘制。这些虚线中的每一条都有它自己的“屏幕的一部分”，它们控制铅笔有权绘制的位置，我称之为“象限”：

现在用这个算法我们可以强制铅笔超过 45 度线，但是如果鼠标从一个象限移动到另一个象限会发生什么？我发现铅笔应该跟随，但不违反“只画 45 度线”的规则，所以它必须在改变象限之前穿过中心：

这里没有什么大秘密。很容易找出我们要应用的业务规则：

当鼠标和铅笔在同一个象限内时，按照鼠标的位置进行绘制（但只在直线上）
如果鼠标与铅笔不在同一个象限，向中心画，然后正常向鼠标画。

这正是我们在这里所做的：

if (mouse and pencil are in different quadrants) {
  // draw toward origin
} else {
  // draw toward the mouse
}

那...既然这么简单，为什么要写这么复杂的代码？

(distanceFromTheCenter > centerZone && (relativeX > 0 ^ mouseQuadrant.x > 0 || relativeY > 0 ^ mouseQuadrant.y > 0))

嗯，真的，它可以写成更容易阅读的方式，但它会更长。我们来分解一下，看看为什么会这样写：

我这里的操作逻辑是这样的：

您可能知道，点 (0,0) 位于草图的左上角。计算机科学中的大多数绘图都是这样计算坐标的。
相对于原点（用户单击以开始绘图的位置）存在象限。
每个象限中的相对坐标将为正或负。如果它们位于原点右侧，则 X 将为正。如果它们在屏幕中低于原点，则 Y 将为正：
如果按照我的逻辑，当鼠标和铅笔的相对坐标不是同一个正数或同一个负数时，就意味着它们不在同一个象限内。

所以：

distanceFromTheCenter > centerZone => 当我们离中心足够近时，我们可以让铅笔切换方向。如果铅笔不在中心附近，则无需计算其余部分。

relativeX > 0 ^ mouseQuadrant.x > 0 => relativeX 实际上只是 pos.x - origin.x。这是铅笔相对于原点的位置。 mouseQuadrant“知道”鼠标相对于原点的位置（它只是 diffX 和 diffY 解释为以后使用，事实上我们完全可以使用 diffX 和diffY 而不是因为我们只是比较它们是正数还是负数）

既然如此简单，为什么还要 XOR 运算符？正因为如此：

relativeX > 0 ^ mouseQuadrant.x > 0
// is the same thing than this pseudocode:
if (relativeX sign is different than mousequadrant.x's sign)
// and the same thing than this more elaborated code:
!(relativeX > 0 && mouseQuadrant.x > 0) || !(relativeX < 0 && mouseQuadrant.x < 0)
// or, in a better writing:
(relativeX > 0 && mouseQuadrant.x < 0) || (relativeX < 0 && mouseQuadrant.x > 0)

...这也很复杂，也很丑陋。所以，实际上，(relativeX > 0 ^ mouseQuadrant.x > 0 || relativeY > 0 ^ mouseQuadrant.y > 0) 只是以下简称：

(!(relativeX > 0 && mouseQuadrant.x > 0) || !(relativeX < 0 && mouseQuadrant.x < 0) || !(relativeY > 0 && mouseQuadrant.y > 0) || !(relativeY < 0 && mouseQuadrant.y < 0))

我希望这是有道理的！玩得开心！

将鼠标 daw 限制为 45 度处理

Constrain mouse daw to 45degrees Processing

processing