topical media & game development

talk show tell print

#javascript-processing-example-custom-intersect.htm / htm



  <!DOCTYPE html>
  <html><head>
  <script src="javascript-processing-example-processing.js"></script>
  <script src="javascript-processing-example-init.js"></script>
  <link rel="stylesheet" href="javascript-processing-example-style.css">
  </head><body><h1><a href="http://ejohn.org/blog/processingjs/">Processing.js</a></h1>
  <h2>Line Intersections</h2>
  
  <p>Move mouse to view line intersections.</p>
  
  <p><a href="http://www.ecole-art-aix.fr/IMG/pde/Intersect.pde"><b>Original Example:</b> Line Intersections</a><br>
  <script type="application/processing">
  int DONT_INTERSECT = 0;
  int COLLINEAR = 1;
  int DO_INTERSECT = 2;
  
  float x =0, y=0;
  
  void setup(){
    size(320,320);
    fill(255,0,0);
  }
  
  void draw(){
  
    int intersected;
  
    background(255);
    
    // lignes
    stroke(0);
    
    // ligne fixe
    line(20,height/2, width-20, (height/2)-20);
    
    // ligne en mouvement
    line(10,10,mouseX, mouseY);
    
    intersected = intersect(20, height/2, width, (height/2)-20, 10, 10, mouseX, mouseY);
    
    // dessiner le point d'intersection
    noStroke();
    if (intersected == DO_INTERSECT) ellipse(x, y, 5, 5);
  
  }
  
  int intersect(float x1, float y1, float x2, float y2, float x3, float y3, float x4, float y4){
  
    float a1, a2, b1, b2, c1, c2;
    float r1, r2 , r3, r4;
    float denom, offset, num;
  
    // Compute a1, b1, c1, where line joining points 1 and 2
    // is "a1 x + b1 y + c1 = 0".
    a1 = y2 - y1;
    b1 = x1 - x2;
    c1 = (x2 * y1) - (x1 * y2);
  
    // Compute r3 and r4.
    r3 = ((a1 * x3) + (b1 * y3) + c1);
    r4 = ((a1 * x4) + (b1 * y4) + c1);
  
    // Check signs of r3 and r4. If both point 3 and point 4 lie on
    // same side of line 1, the line segments do not intersect.
    if ((r3 != 0) && (r4 != 0) && same_sign(r3, r4)){
      return DONT_INTERSECT;
    }
  
    // Compute a2, b2, c2
    a2 = y4 - y3;
    b2 = x3 - x4;
    c2 = (x4 * y3) - (x3 * y4);
  
    // Compute r1 and r2
    r1 = (a2 * x1) + (b2 * y1) + c2;
    r2 = (a2 * x2) + (b2 * y2) + c2;
  
    // Check signs of r1 and r2. If both point 1 and point 2 lie
    // on same side of second line segment, the line segments do
    // not intersect.
    if ((r1 != 0) && (r2 != 0) && (same_sign(r1, r2))){
      return DONT_INTERSECT;
    }
  
    //Line segments intersect: compute intersection point.
    denom = (a1 * b2) - (a2 * b1);
  
    if (denom == 0) {
      return COLLINEAR;
    }
  
    if (denom < 0){ 
      offset = -denom / 2; 
    } 
    else {
      offset = denom / 2 ;
    }
  
    // The denom/2 is to get rounding instead of truncating. It
    // is added or subtracted to the numerator, depending upon the
    // sign of the numerator.
    num = (b1 * c2) - (b2 * c1);
    if (num < 0){
      x = (num - offset) / denom;
    } 
    else {
      x = (num + offset) / denom;
    }
  
    num = (a2 * c1) - (a1 * c2);
    if (num < 0){
      y = ( num - offset) / denom;
    } 
    else {
      y = (num + offset) / denom;
    }
  
    // lines_intersect
    return DO_INTERSECT;
  }
  
  boolean same_sign(float a, float b){
  
    return (( a * b) >= 0);
  }
  </script><canvas width="320" height="320"></canvas></p>
  <div style="overflow: hidden; height: 0px; width: 0px;"></div>
  
  <pre>int DONT_INTERSECT = 0;
  int COLLINEAR = 1;
  int DO_INTERSECT = 2;
  
  float x =0, y=0;
  
  void setup(){
    size(320,320);
    fill(255,0,0);
  }
  
  void draw(){
  
    int intersected;
  
    background(255);
    
    // lignes
    stroke(0);
    
    // ligne fixe
    line(20,height/2, width-20, (height/2)-20);
    
    // ligne en mouvement
    line(10,10,mouseX, mouseY);
    
    intersected = intersect(20, height/2, width, (height/2)-20, 10, 10, mouseX, mouseY);
    
    // dessiner le point d'intersection
    noStroke();
    if (intersected == DO_INTERSECT) ellipse(x, y, 5, 5);
  
  }
  
  int intersect(float x1, float y1, float x2, float y2, float x3, float y3, float x4, float y4){
  
    float a1, a2, b1, b2, c1, c2;
    float r1, r2 , r3, r4;
    float denom, offset, num;
  
    // Compute a1, b1, c1, where line joining points 1 and 2
    // is "a1 x + b1 y + c1 = 0".
    a1 = y2 - y1;
    b1 = x1 - x2;
    c1 = (x2 * y1) - (x1 * y2);
  
    // Compute r3 and r4.
    r3 = ((a1 * x3) + (b1 * y3) + c1);
    r4 = ((a1 * x4) + (b1 * y4) + c1);
  
    // Check signs of r3 and r4. If both point 3 and point 4 lie on
    // same side of line 1, the line segments do not intersect.
    if ((r3 != 0) &amp;&amp; (r4 != 0) &amp;&amp; same_sign(r3, r4)){
      return DONT_INTERSECT;
    }
  
    // Compute a2, b2, c2
    a2 = y4 - y3;
    b2 = x3 - x4;
    c2 = (x4 * y3) - (x3 * y4);
  
    // Compute r1 and r2
    r1 = (a2 * x1) + (b2 * y1) + c2;
    r2 = (a2 * x2) + (b2 * y2) + c2;
  
    // Check signs of r1 and r2. If both point 1 and point 2 lie
    // on same side of second line segment, the line segments do
    // not intersect.
    if ((r1 != 0) &amp;&amp; (r2 != 0) &amp;&amp; (same_sign(r1, r2))){
      return DONT_INTERSECT;
    }
  
    //Line segments intersect: compute intersection point.
    denom = (a1 * b2) - (a2 * b1);
  
    if (denom == 0) {
      return COLLINEAR;
    }
  
    if (denom &lt; 0){ 
      offset = -denom / 2; 
    } 
    else {
      offset = denom / 2 ;
    }
  
    // The denom/2 is to get rounding instead of truncating. It
    // is added or subtracted to the numerator, depending upon the
    // sign of the numerator.
    num = (b1 * c2) - (b2 * c1);
    if (num &lt; 0){
      x = (num - offset) / denom;
    } 
    else {
      x = (num + offset) / denom;
    }
  
    num = (a2 * c1) - (a1 * c2);
    if (num &lt; 0){
      y = ( num - offset) / denom;
    } 
    else {
      y = (num + offset) / denom;
    }
  
    // lines_intersect
    return DO_INTERSECT;
  }
  
  boolean same_sign(float a, float b){
  
    return (( a * b) &gt;= 0);
  }</pre>
  </body></html>
  


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.