Advertisement
nzisaacnz

Incomplete mesh intersection

Apr 11th, 2013
128
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script>
  2. function Point(x,y)
  3. {
  4.     this.x=x;
  5.     this.y=y;
  6. }
  7. var mouse={down:1,pos:new Point(-1,-1)};
  8. var docVals = false;
  9. function Distance(a,b)
  10. {
  11.     return Math.pow(a.x-b.x,2)+Math.pow(a.y-b.y, 2);
  12. }
  13. function project(pStart,angle,size)
  14. {
  15.     return{x:pStart.x+Math.cos(angle)*size,y:pStart.y+Math.sin(angle)*size};
  16. }
  17. function getAngle(line)
  18. {
  19.     var dx = line.end.x-line.start.x;
  20.     var dy = line.end.y-line.start.y;
  21.     return Math.atan2(dy,dx);
  22. }
  23. function Intersects(lineA,lineB)
  24. {
  25.     var denom = ((lineA.end.x - lineA.start.x) * (lineB.end.y - lineB.start.y)) - ((lineA.end.y - lineA.start.y) * (lineB.end.x - lineB.start.x));
  26.     if (denom == 0) return false;
  27.     var numer = ((lineA.start.y - lineB.start.y) * (lineB.end.x - lineB.start.x)) - ((lineA.start.x - lineB.start.x) * (lineB.end.y - lineB.start.y));
  28.     var r = numer / denom;
  29.     var numer2 = ((lineA.start.y - lineB.start.y) * (lineA.end.x - lineA.start.x)) - ((lineA.start.x - lineB.start.x) * (lineA.end.y - lineA.start.y));
  30.     var s = numer2 / denom;
  31.     if ((r < 0 || r > 1) || (s < 0 || s > 1)) return false;
  32.     return {x:(lineA.start.x - -(r * (lineA.end.x - lineA.start.x))),y:lineA.start.y - - (r * (lineA.end.y - lineA.start.y)),numer:[numer/denom,numer2/denom]};
  33. }
  34. function drawCircle(G,x,y,rad)
  35. {
  36.     G.arc(x, y, rad, 0, Math.PI*2, true);
  37. }
  38. function drawLines()
  39. {
  40.     if(!docVals)docVals =
  41.     [document.getElementById("lineasx"),document.getElementById("lineasy"),
  42.     document.getElementById("lineaex"),document.getElementById("lineaey"),
  43.     document.getElementById("linebsx"),document.getElementById("linebsy"),
  44.     document.getElementById("linebex"),document.getElementById("linebey")];
  45.     var lineA = {start:new Point(docVals[0].value,docVals[1].value),end:new Point(docVals[2].value,docVals[3].value),angle:false,dist:false};
  46.     var lineB = {start:new Point(docVals[4].value,docVals[5].value),end:new Point(docVals[6].value,docVals[7].value),angle:false,dist:false};
  47.     lineA.angle = getAngle(lineA);
  48.     lineB.angle = getAngle(lineB);
  49.     lineA.dist = Math.sqrt(Distance(lineA.start,lineA.end));
  50.     lineB.dist = Math.sqrt(Distance(lineB.start,lineB.end));
  51.     var i = Intersects(lineA,lineB);
  52.     var angle = false;
  53.     var canvas = document.getElementById("canvas");
  54.     var Graphics = canvas.getContext("2d");
  55.     Graphics.strokeStyle="#F00";
  56.     Graphics.beginPath();
  57.     Graphics.fillStyle="#FFF";
  58.     Graphics.clearRect(0,0,600,400);
  59.     Graphics.beginPath();
  60.     Graphics.stroke();
  61.     Graphics.beginPath();
  62.     Graphics.moveTo(lineB.start.x,lineB.start.y);
  63.     Graphics.lineTo(lineB.end.x,lineB.end.y);
  64.     Graphics.stroke();
  65.     Graphics.beginPath();
  66.     Graphics.moveTo(lineA.start.x,lineA.start.y);
  67.     Graphics.lineTo(lineA.end.x,lineA.end.y);
  68.     Graphics.stroke();
  69.     if(i)
  70.     {
  71.         Graphics.beginPath();
  72.         drawCircle(Graphics,i.x,i.y,7);
  73.         Graphics.stroke();
  74.         Graphics.beginPath();
  75.         Graphics.moveTo(i.x,i.y);
  76.         Graphics.lineTo(lineA.end.x,lineA.end.y);
  77.         Graphics.stroke();
  78.     }
  79.     var distances =
  80.     [{dist:Distance(mouse.pos,lineA.start),pos:lineA.start,id:"lineas"},
  81.     {dist:Distance(mouse.pos,lineA.end),pos:lineA.end,id:"lineae"},
  82.     {dist:Distance(mouse.pos,lineB.start),pos:lineB.start,id:"linebs"},
  83.     {dist:Distance(mouse.pos,lineB.end),pos:lineB.end,id:"linebe"}];
  84.     distances.sort(function(a,b){return a.dist>b.dist});
  85.     if(distances[0].dist<2500)
  86.     {
  87.         Graphics.beginPath();
  88.         Graphics.moveTo(mouse.pos.x,mouse.pos.y);
  89.         Graphics.lineTo(distances[0].pos.x,distances[0].pos.y);
  90.         Graphics.stroke();
  91.         if(mouse.down==0)
  92.         {
  93.             document.getElementById(distances[0].id+"x").value=mouse.pos.x;
  94.             document.getElementById(distances[0].id+"y").value=mouse.pos.y;
  95.         }
  96.     }
  97.     if(i)
  98.     {
  99.         var P = project(i,lineB.angle-(lineA.angle-lineB.angle)+Math.PI,(i.numer[0])*lineA.dist);
  100.         Graphics.beginPath();
  101.         Graphics.moveTo(i.x,i.y);
  102.         Graphics.lineTo(P.x,P.y);
  103.         Graphics.stroke();
  104.     }
  105. }
  106. function mouseDown(b)
  107. {
  108.     mouse.down = b;
  109.     drawLines();
  110. }
  111. function mouseMove(event)
  112. {
  113.     mouseDown(mouse.down*2);
  114.     mouse.pos.x = event.offsetX;
  115.     mouse.pos.y = event.offsetY;
  116.     drawLines();
  117. }
  118. </script>
  119. <body onmouseup="mouseDown(1)">
  120. <canvas width="600" height="400" style="border:1px #000 solid"
  121. id="canvas" onmousemove="mouseMove(event)"
  122. onmousedown="mouseDown(0)"></canvas><br>
  123. <input id="lineasx" type="number" value="10" oninput="drawLines()"></input>,
  124. <input id="lineasy" type="number" value="10" oninput="drawLines()"></input> to
  125. <input id="lineaex" type="number" value="390" oninput="drawLines()"></input>,
  126. <input id="lineaey" type="number"value="390" oninput="drawLines()"></input>
  127. <br>
  128. <br>
  129. <input id="linebsx" type="number" value="10" oninput="drawLines()"></input>,
  130. <input id="linebsy" type="number" value="390" oninput="drawLines()"></input> to
  131. <input id="linebex" type="number" value="390" oninput="drawLines()"></input>,
  132. <input id="linebey" type="number" value="10" oninput="drawLines()"></input>
  133. <br>
  134. <br>
  135. <div id="res"></div>
  136. <script>
  137. drawLines();
  138. </script>
  139. </body>
  140.  
  141.  
  142.  
  143.  
  144.  
  145.  
  146.  
  147.  
  148.  
  149.  
  150.  
  151.  
  152.  
  153.  
  154.  
  155.  
  156.  
  157.  
  158.  
  159.  
  160.  
  161.  
  162.  
  163.  
  164.  
  165. function Distance(a,b)
  166. {
  167.     return Math.pow(a.x-b.x,2)+Math.pow(a.y-b.y, 2);
  168. }
  169. function project(pStart,angle,size)
  170. {
  171.     return{x:pStart.x+Math.cos(angle)*size,y:pStart.y+Math.sin(angle)*size};
  172. }
  173. function getAngle(line)
  174. {
  175.     var dx = line.end.x-line.start.x;
  176.     var dy = line.end.y-line.start.y;
  177.     return Math.atan2(dy,dx);
  178. }
  179. function Intersects(line,mesh)
  180. {
  181.     for(var i in mesh)
  182.     {
  183.         var denom = ((line.end.x - line.start.x) * (mesh[i].end.y - mesh[i].start.y)) - ((line.end.y - line.start.y) * (mesh[i].end.x - mesh[i].start.x));
  184.         if (denom == 0) return false;
  185.         var numer = ((line.start.y - mesh[i].start.y) * (mesh[i].end.x - mesh[i].start.x)) - ((line.start.x - mesh[i].start.x) * (mesh[i].end.y - mesh[i].start.y));
  186.         var r = numer / denom;
  187.         var numer2 = ((line.start.y - mesh[i].start.y) * (line.end.x - line.start.x)) - ((line.start.x - mesh[i].start.x) * (line.end.y - line.start.y));
  188.         var s = numer2 / denom;
  189.         if (!((r < 0 || r > 1) || (s < 0 || s > 1)))
  190.         {
  191.             var thisOne = {start:false,end:false};
  192.             thisOne.start = project(i,mesh[i].angle-(line.angle-mesh[i].angle)+Math.PI,r*line.dist);
  193.             thisOne.end = {x:(line.start.x - -(r * (line.end.x - line.start.x))),y:line.start.y - - (r * (line.end.y - line.start.y)),numer:[numer/denom,numer2/denom]};
  194.         }
  195.     }
  196.     return {end:line.start,path:[]};
  197. }
  198.  
  199. <script>
  200. var abc = [1,2,3];
  201.  
  202. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement