Question

我刚刚在Processing中编写了一个代码（有一些帮助，因为我是初学者!!）并且它在Processing.js中不起作用，我知道如何修复这段代码。

代码是一个图表，显示了一条移动线和另外四条固定线之间的交叉点。

我非常感谢你的快速回答，我有两天的截止日期，我是一个真正的初学者！

PVector[] lineCoordinates = new PVector[5];
PVector mStart, mEnd;

void setup() {
  PFont font;
font = loadFont("ArialNarrow-12.vlw");
textFont(font, 12);
  size(600, 200);
  lineCoordinates[0] = new PVector(width/5, height/5);                      // start
  lineCoordinates[1] = new PVector(width-10, height-(height/3));               // line 1
  lineCoordinates[2] = new PVector(width-(width/5)-10, height-(height/3));     // line 2
  lineCoordinates[3] = new PVector(width-(2*(width/5))-10, height-(height/3)); // line 3
  lineCoordinates[4] = new PVector(width-(3*(width/5))-10, height-(height/3)); // line 4
  mStart = new PVector(width/5, height-(height/3));
  mEnd = new PVector();
  fill(0);
  strokeWeight(1);
}

void draw() {
  background(255);
  fill(0);
  text("The Eye", (width/5)-10,( height/5)-5);
  text("Picture Plane", mouseX, mouseY);
  text("Horizon Line", 5, height-(height/3)-5);
  text("x", width-(2*(width/5))+40, height-(height/3));
  text("x", width-(3*(width/5))+40, height-(height/3));
  text("x", width-(width/5)+40, height-(height/3));


  fill(255,0,0);
  noStroke();
  ellipse(width-(width/5)-10, height-(height/3),5,5);
  ellipse(width-(2*(width/5))-10, height-(height/3),5,5);
  ellipse(width-(3*(width/5))-10, height-(height/3),5,5);
  ellipse(width-10, height-(height/3),5,5);

  fill(0);
  stroke(1); 
  line(0, height-(height/3), width, height-(height/3)); // Horizon Line

  mEnd.set(mouseX, mouseY, 0);
  line(mStart, mEnd);

  for (int i=1; i<lineCoordinates.length; i++) {
    line(lineCoordinates[0], lineCoordinates[i]);
    PVector is = lineIntersection(lineCoordinates[0], lineCoordinates[i], mStart, mEnd);
    if (is!=null) { ellipse(is.x, is.y, 5, 5); }
  }
}

void line(PVector s, PVector e) {
  line(s.x, s.y, e.x, e.y);
}

PVector lineIntersection(PVector p1, PVector p2, PVector p3, PVector p4)
{
  PVector b = PVector.sub(p2, p1);
  PVector d = PVector.sub(p4, p3);

  float b_dot_d_perp = b.x * d.y - b.y * d.x;
  if (b_dot_d_perp == 0) { return null; }

  PVector c = PVector.sub(p3, p1);
  float t = (c.x * d.y - c.y * d.x) / b_dot_d_perp;
  if (t < 0 || t > 1) { return null; }
  float u = (c.x * b.y - c.y * b.x) / b_dot_d_perp;
  if (u < 0 || u > 1) { return null; }

  return new PVector(p1.x+t*b.x, p1.y+t*b.y);
}

Answer 1

首先在底部添加以下内容：

void mouseMoved() {
  x = mouseX;
  y = mouseY;
  redraw();
}

并将mouseX和mouseY替换为x y个广告。

至少这会使“图片平面”跟随鼠标......

处理到Processing.js，PVector数组

1 个答案: