2013-04-02 3 views
0

처리 중 코드를 썼는데 (초보자이기 때문에 약간의 도움이 필요함) Processing.js에서이 코드를 고칠 수있는 아이디어는 작동하지 않습니다. .Processing.js, PVector 배열로 처리

이 코드는 하나의 이동 라인과 4 개의 다른 고정 라인 사이의 교차를 보여주는 다이어그램입니다.

답장을 보내 주시면 감사하겠습니다. 마감일은 2 일이며 실제 초보자입니다 !!! 상기 하단 추가하여 다음

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

processing.js는 Processing을 모두 지원하지 않습니다. Processing에서 문제가없는 것처럼 왜 이것이 작동하지 않는지 파악할 수 없습니다. 'text ("Picture Plane", mouseX, mouseY)를 질식시키는 것처럼 보이기 때문에 줄 바꿈 행을 주석으로 처리하십시오; -'mouseX, mouseY'에 숫자를 추가하면 텍스트가 표시되므로 ... –

+0

문제가 해결되었습니다! – user2237933

+1

게시물에 업데이트를 추가하여 문제가 무엇인지 말하고 싶으십니까? Processing.js 파일이 우리 라이브러리에 있다면 해결할 수 있습니다.) –

답변

0

시작 :

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

xy 바르와 mouseXmouseY 교체.

"Picture Plane"이 마우스를 따라 가면 적어도 ...