Processing to Processing.js, PVector array

Question

I just wrote a code in Processing(with some help, because I'm a beginner!!) and it doesn't work in Processing.js any idea how I can fix this code.

the code is a diagram showing intersection between one moving line and four other fixed lines.

I really appreciate your prompt answers , I have a deadline in two days and I'm a real beginner!!!

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);
}

processing.js doesn't support everything Processing. I couldn't pin down why this isn't working either, as it's fine in Processing. Try commenting out line-by line, as it gets so far then appears to choke on `text("Picture Plane", mouseX, mouseY);` - adding a number to `mouseX, mouseY` shows the text, so... — Dave Everitt, Apr 02 '13 at 22:32
want add an update to your post to say what the problem was? Would allow me to fix Processing.js if it's something with our library ;) — Mike 'Pomax' Kamermans, Apr 03 '13 at 12:30
Yes. let us know what it was please! If short of time, you could just post the whole working code. — Dave Everitt, Apr 03 '13 at 16:29

score 0 · Answer 1 · answered Apr 02 '13 at 22:47

0

Start by adding the following at the bottom:

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

and replacing mouseX and mouseY with the x y vars.

At least this makes "Picture Plane" follow the mouse...

answered Apr 02 '13 at 22:47

Dave Everitt

17,193
6
67
97

Processing to Processing.js, PVector array

1 Answers1