skia2/experimental/Intersection/as.htm

806 lines
42 KiB
HTML
Raw Normal View History

<html>
<head>
<div style="height:0">
<div id="quad56">
debugShowActiveSpans id=1 (366.608826,151.196014 378.803101,136.674606 398.164948,136.674606) t=0.490456543 (380.294495,140.44487) other=7 otherT=0.578520747 otherIndex=3 windSum=? windValue=1
debugShowActiveSpans id=2 (398.164948,136.674606 354.009216,208.816208) t=0 (398.164948,136.674606) other=1 otherT=1 otherIndex=4 windSum=? windValue=1
debugShowActiveSpans id=3 (354.009216,208.816208 393.291473,102.232819) t=0 (354.009216,208.816208) other=2 otherT=1 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=3 (354.009216,208.816208 393.291473,102.232819) t=0.508945199 (374.00174,154.571106) other=6 otherT=0.598402499 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=3 (354.009216,208.816208 393.291473,102.232819) t=0.634079491 (378.917297,141.233871) other=7 otherT=0.536512741 otherIndex=1 windSum=-1 windValue=1
debugShowActiveSpans id=5 (359.978058,136.581512 378.315979,136.581512 388.322723,149.613556) t=0.597488996 (378.917297,141.233856) other=7 otherT=0.536512973 otherIndex=2 windSum=? windValue=1
debugShowActiveSpans id=6 (388.322723,149.613556 364.390686,157.898193) t=0 (388.322723,149.613556) other=5 otherT=1 otherIndex=4 windSum=? windValue=1
debugShowActiveSpans id=6 (388.322723,149.613556 364.390686,157.898193) t=0.598402499 (374.00174,154.571106) other=3 otherT=0.508945199 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=7 (364.390686,157.898193 375.281769,136.674606 396.039917,136.674606) t=0 (364.390686,157.898193) other=6 otherT=1 otherIndex=2 windSum=? windValue=1
debugShowActiveSpans id=7 (364.390686,157.898193 375.281769,136.674606 396.039917,136.674606) t=0.536512741 (378.917297,141.233871) other=3 otherT=0.634079491 otherIndex=2 windSum=? windValue=1
debugShowActiveSpans id=7 (364.390686,157.898193 375.281769,136.674606 396.039917,136.674606) t=0.536512973 (378.917297,141.233856) other=5 otherT=0.597488996 otherIndex=3 windSum=-1 windValue=1
</div>
<div id="quad57c">
debugShowActiveSpans id=1 (303.12088,141.299606 330.463562,217.659027) t=0.845414865 (326.236786,205.854996) other=13 otherT=0.999999913 otherIndex=3 windSum=? windValue=1
debugShowActiveSpans id=2 (330.463562,217.659027 358.606506,141.299606) t=-0 (330.463562,217.659027) other=1 otherT=1 otherIndex=3 windSum=? windValue=1
debugShowActiveSpans id=2 (330.463562,217.659027 358.606506,141.299606) t=0.154585135 (334.814056,205.854996) other=13 otherT=0.812241055 otherIndex=2 windSum=? windValue=1
debugShowActiveSpans id=2 (330.463562,217.659027 358.606506,141.299606) t=0.283842806 (338.451721,195.984955) other=16 otherT=0.363593784 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=4 (362.874634,159.705902 335.665344,233.397751) t=0.379109438 (352.559326,187.643173) other=17 otherT=0.412818074 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=13 (371.919067,205.854996 326.236786,205.854996) t=0.812241055 (334.814056,205.854996) other=2 otherT=0.154585135 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=14 (326.236786,205.854996 329.104431,231.663818 351.512085,231.663818) t=0.962138429 (349.843323,231.626816) other=15 otherT=0.0583966647 otherIndex=1 windSum=1 windValue=1
debugShowActiveSpans id=15 (351.512085,231.663818 322.935669,231.030273) t=0 (351.512085,231.663818) other=14 otherT=1 otherIndex=3 windSum=1 windValue=1
debugShowActiveSpans id=16 (326.837006,195.984955 358.78125,195.984955) t=0 (326.837006,195.984955) other=18 otherT=1 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=16 (326.837006,195.984955 358.78125,195.984955) t=0.363593784 (338.451721,195.984955) other=2 otherT=0.283842806 otherIndex=2 windSum=? windValue=1
debugShowActiveSpans id=16 (326.837006,195.984955 358.78125,195.984955) t=0.708806554 (349.479309,195.984955) other=4 otherT=0.492307539 otherIndex=3 windSum=? windValue=1
debugShowActiveSpans id=17 (358.78125,195.984955 343.709442,175.778046) t=-0 (358.78125,195.984955) other=16 otherT=1 otherIndex=3 windSum=? windValue=1
debugShowActiveSpans id=17 (358.78125,195.984955 343.709442,175.778046) t=0.412818074 (352.559326,187.643173) other=4 otherT=0.379109438 otherIndex=2 windSum=? windValue=1
debugShowActiveSpans id=17 (358.78125,195.984955 343.709442,175.778046) t=0.902761903 (345.174988,177.74292) other=2 otherT=0.522739691 otherIndex=3 windSum=? windValue=1
debugShowActiveSpans id=18 (343.709442,175.778046 328.570923,175.778046 326.837006,195.984955) t=0 (343.709442,175.778046) other=17 otherT=1 otherIndex=3 windSum=? windValue=1
</div>
<div id="quad57b">
debugShowActiveSpans id=1 (303.12088,141.299606 330.463562,217.659027) t=0.845414865 (326.236786,205.854996) other=13 otherT=0.999999913 otherIndex=3 windSum=1 windValue=1
debugShowActiveSpans id=2 (330.463562,217.659027 358.606506,141.299606) t=-0 (330.463562,217.659027) other=1 otherT=1 otherIndex=3 windSum=? windValue=1
debugShowActiveSpans id=2 (330.463562,217.659027 358.606506,141.299606) t=0.154585135 (334.814056,205.854996) other=13 otherT=0.812241055 otherIndex=2 windSum=? windValue=1
debugShowActiveSpans id=2 (330.463562,217.659027 358.606506,141.299606) t=0.283842806 (338.451721,195.984955) other=16 otherT=0.363593784 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=4 (362.874634,159.705902 335.665344,233.397751) t=0.379109438 (352.559326,187.643173) other=17 otherT=0.412818074 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=13 (371.919067,205.854996 326.236786,205.854996) t=0.812241055 (334.814056,205.854996) other=2 otherT=0.154585135 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=16 (326.837006,195.984955 358.78125,195.984955) t=0 (326.837006,195.984955) other=18 otherT=1 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=16 (326.837006,195.984955 358.78125,195.984955) t=0.363593784 (338.451721,195.984955) other=2 otherT=0.283842806 otherIndex=2 windSum=? windValue=1
debugShowActiveSpans id=16 (326.837006,195.984955 358.78125,195.984955) t=0.708806554 (349.479309,195.984955) other=4 otherT=0.492307539 otherIndex=3 windSum=? windValue=1
debugShowActiveSpans id=17 (358.78125,195.984955 343.709442,175.778046) t=-0 (358.78125,195.984955) other=16 otherT=1 otherIndex=3 windSum=? windValue=1
debugShowActiveSpans id=17 (358.78125,195.984955 343.709442,175.778046) t=0.412818074 (352.559326,187.643173) other=4 otherT=0.379109438 otherIndex=2 windSum=? windValue=1
debugShowActiveSpans id=17 (358.78125,195.984955 343.709442,175.778046) t=0.902761903 (345.174988,177.74292) other=2 otherT=0.522739691 otherIndex=3 windSum=? windValue=1
debugShowActiveSpans id=18 (343.709442,175.778046 328.570923,175.778046 326.837006,195.984955) t=0 (343.709442,175.778046) other=17 otherT=1 otherIndex=3 windSum=? windValue=1
</div>
<div id="quad57a">
debugShowActiveSpans id=2 (330.463562,217.659027 358.606506,141.299606) t=0.154585135 (334.814056,205.854996) other=13 otherT=0.812241055 otherIndex=2 windSum=-1 windValue=1
debugShowActiveSpans id=2 (330.463562,217.659027 358.606506,141.299606) t=0.283842806 (338.451721,195.984955) other=16 otherT=0.363593784 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=4 (362.874634,159.705902 335.665344,233.397751) t=0.379109438 (352.559326,187.643173) other=17 otherT=0.412818074 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=16 (326.837006,195.984955 358.78125,195.984955) t=0 (326.837006,195.984955) other=18 otherT=1 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=16 (326.837006,195.984955 358.78125,195.984955) t=0.363593784 (338.451721,195.984955) other=2 otherT=0.283842806 otherIndex=2 windSum=? windValue=1
debugShowActiveSpans id=16 (326.837006,195.984955 358.78125,195.984955) t=0.708806554 (349.479309,195.984955) other=4 otherT=0.492307539 otherIndex=3 windSum=? windValue=1
debugShowActiveSpans id=17 (358.78125,195.984955 343.709442,175.778046) t=-0 (358.78125,195.984955) other=16 otherT=1 otherIndex=3 windSum=? windValue=1
debugShowActiveSpans id=17 (358.78125,195.984955 343.709442,175.778046) t=0.412818074 (352.559326,187.643173) other=4 otherT=0.379109438 otherIndex=2 windSum=? windValue=1
debugShowActiveSpans id=17 (358.78125,195.984955 343.709442,175.778046) t=0.902761903 (345.174988,177.74292) other=2 otherT=0.522739691 otherIndex=3 windSum=? windValue=1
debugShowActiveSpans id=18 (343.709442,175.778046 328.570923,175.778046 326.837006,195.984955) t=0 (343.709442,175.778046) other=17 otherT=1 otherIndex=3 windSum=? windValue=1
</div>
<div id="quad58b">
debugShowActiveSpans id=3 (303.12088,141.299606 330.463562,217.659027) t=0.845414865 (326.236786,205.854996) other=16 otherT=0.999999913 otherIndex=3 windSum=1 windValue=1
debugShowActiveSpans id=4 (330.463562,217.659027 358.606506,141.299606) t=-0 (330.463562,217.659027) other=3 otherT=1 otherIndex=3 windSum=? windValue=1
debugShowActiveSpans id=4 (330.463562,217.659027 358.606506,141.299606) t=0.154585135 (334.814056,205.854996) other=16 otherT=0.812241055 otherIndex=2 windSum=? windValue=1
debugShowActiveSpans id=4 (330.463562,217.659027 358.606506,141.299606) t=0.283842806 (338.451721,195.984955) other=19 otherT=0.363593784 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=6 (362.874634,159.705902 335.665344,233.397751) t=0.287405665 (355.054535,180.885361) other=20 otherT=0.497256785 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=16 (371.919067,205.854996 326.236786,205.854996) t=0.812241055 (334.814056,205.854996) other=4 otherT=0.154585135 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=19 (326.837006,195.984955 358.78125,195.984955) t=0 (326.837006,195.984955) other=21 otherT=1 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=19 (326.837006,195.984955 358.78125,195.984955) t=0.363593784 (338.451721,195.984955) other=4 otherT=0.283842806 otherIndex=2 windSum=? windValue=1
debugShowActiveSpans id=19 (326.837006,195.984955 358.78125,195.984955) t=0.708806554 (349.479309,195.984955) other=6 otherT=0.492307539 otherIndex=3 windSum=? windValue=1
debugShowActiveSpans id=20 (358.78125,195.984955 358.78125,175.778046 343.709442,175.778046) t=0 (358.78125,195.984955) other=19 otherT=1 otherIndex=3 windSum=? windValue=1
debugShowActiveSpans id=20 (358.78125,195.984955 358.78125,175.778046 343.709442,175.778046) t=0.497256785 (355.054535,180.885361) other=6 otherT=0.287405665 otherIndex=2 windSum=? windValue=1
debugShowActiveSpans id=20 (358.78125,195.984955 358.78125,175.778046 343.709442,175.778046) t=0.925970638 (345.858368,175.888794) other=4 otherT=0.547021444 otherIndex=3 windSum=? windValue=1
debugShowActiveSpans id=21 (343.709442,175.778046 328.570923,175.778046 326.837006,195.984955) t=0 (343.709442,175.778046) other=20 otherT=1 otherIndex=3 windSum=? windValue=1
</div>
<div id="quad58a">
debugShowActiveSpans id=4 (330.463562,217.659027 358.606506,141.299606) t=0.154585135 (334.814056,205.854996) other=16 otherT=0.812241055 otherIndex=2 windSum=-1 windValue=1
debugShowActiveSpans id=4 (330.463562,217.659027 358.606506,141.299606) t=0.283842806 (338.451721,195.984955) other=19 otherT=0.363593784 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=6 (362.874634,159.705902 335.665344,233.397751) t=0.287405665 (355.054535,180.885361) other=20 otherT=0.497256785 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=19 (326.837006,195.984955 358.78125,195.984955) t=0 (326.837006,195.984955) other=21 otherT=1 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=19 (326.837006,195.984955 358.78125,195.984955) t=0.363593784 (338.451721,195.984955) other=4 otherT=0.283842806 otherIndex=2 windSum=? windValue=1
debugShowActiveSpans id=19 (326.837006,195.984955 358.78125,195.984955) t=0.708806554 (349.479309,195.984955) other=6 otherT=0.492307539 otherIndex=3 windSum=? windValue=1
debugShowActiveSpans id=20 (358.78125,195.984955 358.78125,175.778046 343.709442,175.778046) t=0 (358.78125,195.984955) other=19 otherT=1 otherIndex=3 windSum=? windValue=1
debugShowActiveSpans id=20 (358.78125,195.984955 358.78125,175.778046 343.709442,175.778046) t=0.497256785 (355.054535,180.885361) other=6 otherT=0.287405665 otherIndex=2 windSum=? windValue=1
debugShowActiveSpans id=20 (358.78125,195.984955 358.78125,175.778046 343.709442,175.778046) t=0.925970638 (345.858368,175.888794) other=4 otherT=0.547021444 otherIndex=3 windSum=? windValue=1
debugShowActiveSpans id=21 (343.709442,175.778046 328.570923,175.778046 326.837006,195.984955) t=0 (343.709442,175.778046) other=20 otherT=1 otherIndex=3 windSum=? windValue=1
</div>
<div id="quad59">
debugShowQuadIntersection wtTs[0]=0 (369.863983,145.645813 382.380371,121.254936 406.236359,121.254936) (369.863983,145.645813) wnTs[0]=1 (406.236359,121.254936 409.445679,121.254936 412.975952,121.789818) (412.975952,121.789818)
debugShowQuadLineIntersection wtTs[0]=1 (369.863983,145.645813 382.380371,121.254936 406.236359,121.254936) (406.236359,121.254936) wnTs[0]=0 (412.975952,121.789818 369.863983,145.645813) (412.975952,121.789818)
debugShowQuadLineIntersection wtTs[0]=0 (406.236359,121.254936 409.445679,121.254936 412.975952,121.789818) (406.236359,121.254936) wnTs[0]=1 (412.975952,121.789818 369.863983,145.645813) (369.863983,145.645813)
debugShowQuadIntersection no intersect (369.863983,145.645813 382.380371,121.254936 406.236359,121.254936) (369.970581,137.94342 383.98465,121.254936 406.235992,121.254936)
debugShowQuadIntersection no intersect (369.863983,145.645813 382.380371,121.254936 406.236359,121.254936) (406.235992,121.254936 425.705902,121.254936 439.71994,137.087616)
debugShowQuadLineIntersection wtTs[0]=0.934062756 (369.863983,145.645813 382.380371,121.254936 406.236359,121.254936) (403.139679,121.360977) wnTs[0]=0.17423 (439.71994,137.087616 369.970581,137.94342) (427.567535,137.236725)
debugShowQuadIntersection wtTs[0]=9.61225644e-05 (406.236359,121.254936 409.445679,121.254936 412.975952,121.789818) (406.236969,121.254936) wnTs[0]=0.000495996 (406.235992,121.254936 425.705902,121.254936 439.71994,137.087616) (406.25531,121.254944)
debugShowQuadLineIntersection no intersect (369.970581,137.94342 383.98465,121.254936 406.235992,121.254936) (412.975952,121.789818 369.863983,145.645813)
debugShowQuadLineIntersection no intersect (406.235992,121.254936 425.705902,121.254936 439.71994,137.087616) (412.975952,121.789818 369.863983,145.645813)
debugShowQuadIntersection wtTs[0]=0 (369.970581,137.94342 383.98465,121.254936 406.235992,121.254936) (369.970581,137.94342) wnTs[0]=1 (406.235992,121.254936 425.705902,121.254936 439.71994,137.087616) (439.71994,137.087616)
debugShowQuadLineIntersection wtTs[0]=1 (369.970581,137.94342 383.98465,121.254936 406.235992,121.254936) (406.235992,121.254936) wnTs[0]=0 (439.71994,137.087616 369.970581,137.94342) (439.71994,137.087616)
debugShowQuadLineIntersection wtTs[0]=0 (406.235992,121.254936 425.705902,121.254936 439.71994,137.087616) (406.235992,121.254936) wnTs[0]=1 (439.71994,137.087616 369.970581,137.94342) (369.970581,137.94342)
</div>
<div id="quad59b">
debugShowActiveSpans id=1 (369.863983,145.645813 382.380371,121.254936 406.236359,121.254936) t=0 (369.863983,145.645813) other=3 otherT=1 otherIndex=2 windSum=? windValue=1
debugShowActiveSpans id=1 (369.863983,145.645813 382.380371,121.254936 406.236359,121.254936) t=0.174229721 (374.569672,137.886993) other=6 otherT=0.934062756 otherIndex=2 windSum=? windValue=1
debugShowActiveSpans id=2 (406.236359,121.254936 409.445679,121.254936 412.975952,121.789818) t=0 (406.236359,121.254936) other=1 otherT=1 otherIndex=2 windSum=? windValue=1
debugShowActiveSpans id=2 (406.236359,121.254936 409.445679,121.254936 412.975952,121.789818) t=0.000495995847 (406.239532,121.254936) other=5 otherT=9.61225644e-05 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=3 (412.975952,121.789818 369.863983,145.645813) t=0 (412.975952,121.789818) other=2 otherT=1 otherIndex=2 windSum=? windValue=1
debugShowActiveSpans id=3 (412.975952,121.789818 369.863983,145.645813) t=0.669864243 (384.096771,137.770096) other=6 otherT=0.797471908 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=4 (369.970581,137.94342 383.98465,121.254936 406.235992,121.254936) t=0 (369.970581,137.94342) other=6 otherT=1 otherIndex=3 windSum=? windValue=1
debugShowActiveSpans id=5 (406.235992,121.254936 425.705902,121.254936 439.71994,137.087616) t=0 (406.235992,121.254936) other=4 otherT=1 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=5 (406.235992,121.254936 425.705902,121.254936 439.71994,137.087616) t=9.61225644e-05 (406.239746,121.254936) other=2 otherT=0.000495995847 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=6 (439.71994,137.087616 369.970581,137.94342) t=0 (439.71994,137.087616) other=5 otherT=1 otherIndex=2 windSum=? windValue=1
debugShowActiveSpans id=6 (439.71994,137.087616 369.970581,137.94342) t=0.797471908 (384.096771,137.770096) other=3 otherT=0.669864243 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=6 (439.71994,137.087616 369.970581,137.94342) t=0.934062756 (374.569672,137.886993) other=1 otherT=0.174229721 otherIndex=1 windSum=? windValue=1
</div>
<div id="quad60">
debugShowActiveSpans id=1 (360.416077,166.795715 370.126831,147.872162 388.635406,147.872162) t=0 (360.416077,166.795715) other=2 otherT=1 otherIndex=2 windSum=? windValue=1
debugShowActiveSpans id=2 (388.635406,147.872162 360.416077,166.795715) t=0 (388.635406,147.872162) other=1 otherT=1 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=2 (388.635406,147.872162 360.416077,166.795715) t=0.00925761141 (388.374176,148.047348) other=4 otherT=0.883679938 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=3 (353.2948,194.351074 353.2948,173.767563 364.167572,160.819855) t=0 (353.2948,194.351074) other=5 otherT=1 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=4 (364.167572,160.819855 375.040314,147.872162 392.303894,147.872162) t=0 (364.167572,160.819855) other=3 otherT=1 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=4 (364.167572,160.819855 375.040314,147.872162 392.303894,147.872162) t=0.883679938 (388.374176,148.047348) other=2 otherT=0.00925761141 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=5 (392.303894,147.872162 353.2948,194.351074) t=0 (392.303894,147.872162) other=4 otherT=1 otherIndex=2 windSum=? windValue=1
</div>
<div id="quad61">
debugShowActiveSpans id=1 (348.781738,123.864815 369.848602,123.864815) t=0 (348.781738,123.864815) other=4 otherT=1 otherIndex=4 windSum=? windValue=1
debugShowActiveSpans id=2 (369.848602,123.864815 369.848602,145.680267) t=0 (369.848602,123.864815) other=1 otherT=1 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=3 (369.848602,145.680267 382.360413,121.298294 406.207703,121.298294) t=0 (369.848602,145.680267) other=2 otherT=1 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=3 (369.848602,145.680267 382.360413,121.298294 406.207703,121.298294) t=0.258355433 (377.070221,134.709274) other=6 otherT=0.8038997 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=3 (369.848602,145.680267 382.360413,121.298294 406.207703,121.298294) t=0.914354357 (402.206024,121.477142) other=4 otherT=0.0696842495 otherIndex=2 windSum=? windValue=1
debugShowActiveSpans id=3 (369.848602,145.680267 382.360413,121.298294 406.207703,121.298294) t=0.999082394 (406.16394,121.298317) other=5 otherT=0.998890674 otherIndex=2 windSum=? windValue=1
debugShowActiveSpans id=4 (406.207703,121.298294 348.781738,123.864815) t=1.0265934e-07 (406.207703,121.298294) other=5 otherT=0.999874327 otherIndex=3 windSum=? windValue=1
debugShowActiveSpans id=4 (406.207703,121.298294 348.781738,123.864815) t=0.0696842495 (402.206024,121.477142) other=3 otherT=0.914354357 otherIndex=2 windSum=? windValue=1
debugShowActiveSpans id=4 (406.207703,121.298294 348.781738,123.864815) t=0.0881931013 (401.143127,121.524643) other=5 otherT=0.883517581 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=5 (369.961151,137.980698 383.970093,121.298294 406.213287,121.298294) t=0 (369.961151,137.980698) other=6 otherT=1 otherIndex=2 windSum=? windValue=1
debugShowActiveSpans id=5 (369.961151,137.980698 383.970093,121.298294 406.213287,121.298294) t=0.883517581 (401.143127,121.524643) other=4 otherT=0.0881931013 otherIndex=3 windSum=? windValue=1
debugShowActiveSpans id=5 (369.961151,137.980698 383.970093,121.298294 406.213287,121.298294) t=0.998890674 (406.16394,121.298317) other=3 otherT=0.999082394 otherIndex=3 windSum=? windValue=1
debugShowActiveSpans id=5 (369.961151,137.980698 383.970093,121.298294 406.213287,121.298294) t=0.999874327 (406.207703,121.298294) other=4 otherT=1.0265934e-07 otherIndex=1 windSum=? windValue=1
debugShowActiveSpans id=6 (406.213287,121.298294 369.961151,137.980698) t=0 (406.213287,121.298294) other=5 otherT=1 otherIndex=4 windSum=? windValue=1
debugShowActiveSpans id=6 (406.213287,121.298294 369.961151,137.980698) t=0.8038997 (377.070221,134.709274) other=3 otherT=0.258355433 otherIndex=1 windSum=? windValue=1
</div>
<div id="quad61b">
debugShowQuadLineIntersection wtTs[0]=0.914354357 (369.848602,145.680267 382.360413,121.298294 406.207703,121.298294) (402.206024,121.477142) wtTs[1]=1 (406.207703,121.298294) wnTs[0]=0.0696842 (406.207703,121.298294 348.781738,123.864815) (402.206024,121.477142) wnTs[1]=0 (406.207703,121.298294)
debugShowQuadIntersection wtTs[0]=0.999082394 (369.848602,145.680267 382.360413,121.298294 406.207703,121.298294) (406.16394,121.298317) wnTs[0]=0.998891 (369.961151,137.980698 383.970093,121.298294 406.213287,121.298294) (406.16394,121.298317)
debugShowQuadLineIntersection wtTs[0]=0.258355433 (369.848602,145.680267 382.360413,121.298294 406.207703,121.298294) (377.070221,134.709274) wnTs[0]=0.8039 (406.213287,121.298294 369.961151,137.980698) (377.070221,134.709274)
debugShowQuadLineIntersection wtTs[0]=0.883517581 (369.961151,137.980698 383.970093,121.298294 406.213287,121.298294) (401.143127,121.524643) wtTs[1]=0.999874327 (406.207703,121.298294) wnTs[0]=0.0881931 (406.207703,121.298294 348.781738,123.864815) (401.143127,121.524643) wnTs[1]=1.0265934e-07 (406.207703,121.298294)
debugShowQuadLineIntersection wtTs[0]=0 (369.961151,137.980698 383.970093,121.298294 406.213287,121.298294) (369.961151,137.980698) wtTs[1]=1 (406.213287,121.298294) wnTs[0]=1 (406.213287,121.298294 369.961151,137.980698) (369.961151,137.980698) wnTs[1]=0 (406.213287,121.298294)
</div>
<div id="quad61c">
debugShowActiveSpans id=3 (369.848602,145.680267 382.360413,121.298294 406.207703,121.298294) t=0.914354357 (402.206024,121.477142) other=4 otherT=0.0696842495 otherIndex=2 windSum=-1 windValue=1
debugShowActiveSpans id=4 (406.207703,121.298294 348.781738,123.864815) t=1.0265934e-07 (406.207703,121.298294) other=5 otherT=0.999874327 otherIndex=3 windSum=-1 windValue=1
debugShowActiveSpans id=5 (369.961151,137.980698 383.970093,121.298294 406.213287,121.298294) t=0.998890674 (406.16394,121.298317) other=3 otherT=0.999082394 otherIndex=3 windSum=-1 windValue=1
</div>
</div>
<script type="text/javascript">
var testDivs = [
quad61,
quad61b,
quad61c,
quad60,
quad59b,
quad59,
quad58b,
quad58a,
quad57c,
quad57b,
quad57a,
quad56,
];
var decimal_places = 3; // make this 3 to show more precision
var tests = [];
var testTitles = [];
var testIndex = 0;
var ctx;
var xmin;
var ymin;
var scale;
var mouseX, mouseY;
var srcLeft, srcTop;
var srcWidth, srcHeight;
var screenWidth, screenHeight;
var drawnPts, drawnLines, drawnQuads, deferredLines, deferredQuads;
var ptLabels = true;
var digit_mode = false;
var index_mode = true;
var index_bits = -1;
var debug_xy = false;
var info_mode = false;
var intersect_mode = false;
var sequence = -1;
var SPAN_ID = 1;
var SPAN_X1 = 2;
var SPAN_Y1 = 3;
var SPAN_X2 = 4;
var SPAN_Y2 = 5;
var SPAN_L_T = 6;
var SPAN_L_TX = 7;
var SPAN_L_TY = 8;
var SPAN_L_OTHER = 9;
var SPAN_L_OTHERT = 10;
var SPAN_L_OTHERI = 11;
var SPAN_L_SUM = 12;
var SPAN_L_VAL = 13;
var SPAN_X3 = 6;
var SPAN_Y3 = 7;
var SPAN_Q_T = 8;
var SPAN_Q_TX = 9;
var SPAN_Q_TY = 10;
var SPAN_Q_OTHER = 11;
var SPAN_Q_OTHERT = 12;
var SPAN_Q_OTHERI = 13;
var SPAN_Q_SUM = 14;
var SPAN_Q_VAL = 15;
var ACTIVE_LINE_SPAN = 1;
var ACTIVE_QUAD_SPAN = 2;
var INTERSECT_QUAD_LINE = 3;
var INTERSECT_QUAD_LINE_2 = 4;
var INTERSECT_QUAD_LINE_NO = 5;
var INTERSECT_QUAD = 6;
var INTERSECT_QUAD_2 = 7;
var INTERSECT_QUAD_NO = 8;
function strs_to_nums(strs) {
var result = [];
for (var idx in strs) {
var str = strs[idx];
var num = parseFloat(str);
if (isNaN(num)) {
result.push(str);
} else {
result.push(num);
}
}
return result;
}
function construct_regexp(pattern) {
var escape = pattern.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
escape = escape.replace(/PT_VAL/g, "(\\d+\\.?\\d*),(\\d+\\.?\\d*)");
escape = escape.replace(/T_VAL/g, "(\\d+\\.?\\d*e?-?\\d*)");
escape = escape.replace(/IDX/g, "(\\d+)");
escape = escape.replace(/OPT/g, "(\\?|-?\\d+)");
return new RegExp(escape, 'i');
}
function parse_debugShowActiveSpans(test, title) {
var re_quad = construct_regexp(" id=IDX (PT_VAL PT_VAL PT_VAL) t=T_VAL (PT_VAL) other=IDX otherT=T_VAL otherIndex=IDX windSum=OPT windValue=IDX");
var re_line = construct_regexp(" id=IDX (PT_VAL PT_VAL) t=T_VAL (PT_VAL) other=IDX otherT=T_VAL otherIndex=IDX windSum=OPT windValue=IDX");
var strs = test.split("debugShowActiveSpans");
if (strs.length == 1)
return;
var spans = [];
for (var s in strs) {
var str = strs[s];
if (str == "\n") {
continue;
}
if (re_line.test(str)) {
var lineStrs = re_line.exec(str);
var line = strs_to_nums(lineStrs);
spans.push(ACTIVE_LINE_SPAN);
spans.push(line);
} else if (re_quad.test(str)) {
var quadStrs = re_quad.exec(str);
var quad = strs_to_nums(quadStrs);
spans.push(ACTIVE_QUAD_SPAN);
spans.push(quad);
}
}
if (spans.length >= 1) {
tests.push(spans);
testTitles.push(title);
}
}
function filter_str_by(id, str, regex, array) {
if (regex.test(str)) {
var strs = regex.exec(str);
var result = strs_to_nums(strs);
array.push(id);
array.push(result);
}
}
function parse_intersections(test, title) {
var re_quad_line = construct_regexp(" wtTs[0]=T_VAL (PT_VAL PT_VAL PT_VAL) (PT_VAL) wnTs[0]=T_VAL (PT_VAL PT_VAL) (PT_VAL)");
var re_quad_line_2 = construct_regexp(" wtTs[0]=T_VAL (PT_VAL PT_VAL PT_VAL) (PT_VAL) wtTs[1]=T_VAL (PT_VAL) wnTs[0]=T_VAL (PT_VAL PT_VAL) (PT_VAL) wnTs[1]=T_VAL (PT_VAL)");
var re_quad_line_no_intersect = construct_regexp(" no intersect (PT_VAL PT_VAL PT_VAL) (PT_VAL PT_VAL)");
var re_quad = construct_regexp(" wtTs[0]=T_VAL (PT_VAL PT_VAL PT_VAL) (PT_VAL) wnTs[0]=T_VAL (PT_VAL PT_VAL PT_VAL) (PT_VAL)");
var re_quad_2 = construct_regexp(" wtTs[0]=T_VAL (PT_VAL PT_VAL PT_VAL) (PT_VAL) wtTs[1]=T_VAL wnTs[0]=T_VAL (PT_VAL PT_VAL PT_VAL) (PT_VAL) wnTs[1]=T_VAL");
var re_quad_no_intersect = construct_regexp(" no intersect (PT_VAL PT_VAL PT_VAL) (PT_VAL PT_VAL PT_VAL)");
var strs = test.split(/debugShow[A-Za-z]+Intersection/);
if (strs.length == 1)
return;
var spans = [];
for (var s in strs) {
var str = strs[s];
if (str == "\n") {
continue;
}
filter_str_by(INTERSECT_QUAD_LINE, str, re_quad_line, spans);
filter_str_by(INTERSECT_QUAD_LINE_2, str, re_quad_line_2, spans);
filter_str_by(INTERSECT_QUAD_LINE_NO, str, re_quad_line_no_intersect, spans);
filter_str_by(INTERSECT_QUAD, str, re_quad, spans);
filter_str_by(INTERSECT_QUAD_2, str, re_quad_2, spans);
filter_str_by(INTERSECT_QUAD_NO, str, re_quad_no_intersect, spans);
}
if (spans.length >= 1) {
tests.push(spans);
testTitles.push(title);
}
}
function init(test) {
var canvas = document.getElementById('canvas');
if (!canvas.getContext) return;
screenWidth = canvas.width = window.innerWidth - 20;
screenHeight = canvas.height = window.innerHeight - 20;
ctx = canvas.getContext('2d');
xmin = Infinity;
var xmax = -Infinity;
ymin = Infinity;
var ymax = -Infinity;
var scanType = -1;
for (var scansStr in test) {
var scans = parseInt(scansStr);
var scan = test[scans];
if (scanType == -1) {
scanType = scan;
continue;
}
if (scanType == ACTIVE_LINE_SPAN || scanType == ACTIVE_QUAD_SPAN) {
var last = scanType == ACTIVE_QUAD_SPAN ? SPAN_X3 : SPAN_X2;
for (var idx = SPAN_X1; idx <= last; idx += 2) {
xmin = Math.min(xmin, scan[idx]);
xmax = Math.max(xmax, scan[idx]);
ymin = Math.min(ymin, scan[idx + 1]);
ymax = Math.max(ymax, scan[idx + 1]);
}
} else {
var start = 1;
if (scanType != INTERSECT_QUAD_LINE_NO && scanType != INTERSECT_QUAD_NO) {
start = 2;
}
for (var idx = start; idx < start + 6; idx += 2) {
xmin = Math.min(xmin, scan[idx]);
xmax = Math.max(xmax, scan[idx]);
ymin = Math.min(ymin, scan[idx + 1]);
ymax = Math.max(ymax, scan[idx + 1]);
}
start = start + 6;
if (scanType == INTERSECT_QUAD_LINE || scanType == INTERSECT_QUAD) {
start += 3;
}
if (scanType == INTERSECT_QUAD_LINE_2) {
start += 6;
}
if (scanType == INTERSECT_QUAD_2) {
start += 4;
}
var end = start + 4;
if (scanType == INTERSECT_QUAD || scanType == INTERSECT_QUAD_2 || scanType == INTERSECT_QUAD_NO) {
end += 2;
}
for (var idx = start; idx < end; idx += 2) {
xmin = Math.min(xmin, scan[idx]);
xmax = Math.max(xmax, scan[idx]);
ymin = Math.min(ymin, scan[idx + 1]);
ymax = Math.max(ymax, scan[idx + 1]);
}
}
scanType = -1;
}
srcWidth = xmax - xmin;
srcHeight = ymax - ymin;
var hscale = ctx.canvas.width / srcWidth;
var vscale = ctx.canvas.height / srcHeight;
var minScale = Math.min(hscale, vscale);
scale = minScale;
srcLeft = xmin;
srcTop = ymin;
}
function drawPoint(px, py) {
for (var pts = 0; pts < drawnPts.length; pts += 2) {
var x = drawnPts[pts];
var y = drawnPts[pts + 1];
if (px == x && py == y) {
return;
}
}
drawnPts.push(px);
drawnPts.push(py);
var label = px.toFixed(decimal_places) + ", " + py.toFixed(decimal_places);
var _px = (px - srcLeft)* scale;
var _py = (py - srcTop) * scale;
ctx.beginPath();
ctx.arc(_px, _py, 3, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
ctx.fillText(label, _px + 5, _py);
}
function drawLine(x1, y1, x2, y2, selected) {
for (var pts = 0; pts < drawnLines.length; pts += 4) {
if (x1 == drawnLines[pts] && y1 == drawnLines[pts + 1]) {
return;
}
if (x2 == drawnLines[pts + 2] && x2 == drawnLines[pts + 3]) {
return;
}
}
if (selected) {
drawnLines.push(x1);
drawnLines.push(y1);
drawnLines.push(x2);
drawnLines.push(y2);
ctx.beginPath();
ctx.moveTo((x1 - srcLeft) * scale,
(y1 - srcTop) * scale);
ctx.lineTo((x2 - srcLeft) * scale,
(y2 - srcTop) * scale);
ctx.stroke();
return;
}
deferredLines.push(x1);
deferredLines.push(y1);
deferredLines.push(x2);
deferredLines.push(y2);
}
function drawQuad(x1, y1, x2, y2, x3, y3, selected) {
for (var pts = 0; pts < drawnQuads.length; pts += 6) {
if (x1 == drawnQuads[pts] && y1 == drawnQuads[pts + 1]) {
return;
}
if (x2 == drawnQuads[pts + 2] && x2 == drawnQuads[pts + 3]) {
return;
}
if (x2 == drawnQuads[pts + 4] && x2 == drawnQuads[pts + 5]) {
return;
}
}
if (selected) {
drawnQuads.push(x1);
drawnQuads.push(y1);
drawnQuads.push(x2);
drawnQuads.push(y2);
drawnQuads.push(x3);
drawnQuads.push(y3);
ctx.beginPath();
ctx.moveTo((x1 - srcLeft) * scale,
(y1 - srcTop) * scale);
ctx.quadraticCurveTo((x2 - srcLeft) * scale,
(y2 - srcTop) * scale,
(x3 - srcLeft) * scale,
(y3 - srcTop) * scale);
ctx.stroke();
return;
}
deferredQuads.push(x1);
deferredQuads.push(y1);
deferredQuads.push(x2);
deferredQuads.push(y2);
deferredQuads.push(x3);
deferredQuads.push(y3);
}
function drawDeferred() {
for (var pts = 0; pts < deferredQuads.length; pts += 6) {
drawQuad(deferredQuads[pts], deferredQuads[pts + 1],
deferredQuads[pts + 2], deferredQuads[pts + 3],
deferredQuads[pts + 4], deferredQuads[pts + 5], true);
}
for (var pts = 0; pts < deferredLines.length; pts += 4) {
drawLine(deferredLines[pts], deferredLines[pts + 1],
deferredLines[pts + 2], deferredLines[pts + 3], true);
}
}
function draw(test, title) {
ctx.fillStyle = "rgba(0,0,0, 0.1)";
ctx.font = "normal 50px Arial";
ctx.fillText(title, 50, 50);
ctx.font = "normal 10px Arial";
ctx.lineWidth = "1.001"; "0.999";
var curId = -1;
var firstIdx;
var lastIdx;
var index_tst = -1;
drawnPts = [];
drawnLines = [];
drawnQuads = [];
deferredLines = [];
deferredQuads = [];
var scanType = -1;
var partIndex = 0;
for (var scansStr in test) {
var scans = parseInt(scansStr);
var scan = test[scans];
if (scanType == -1) {
scanType = scan;
continue;
}
partIndex++;
var hasId = scanType == ACTIVE_LINE_SPAN || scanType == ACTIVE_QUAD_SPAN ? SPAN_ID : -1;
if (hasId >= 0 && curId != scan[hasId]) {
curId = hasId;
firstIdx = lastIdx = partIndex;
index_tst++;
var nextIdx = lastIdx + 1;
while (nextIdx * 2 < test.length && test[nextIdx * 2][hasId] == curId) {
lastIdx = nextIdx++;
}
} else if (hasId < 0) {
firstIdx = lastIdx = partIndex;
index_tst++;
}
var seq = sequence % (test.length / 2);
var selected = sequence >= 0 ? seq == partIndex
: (index_bits & (1 << index_tst)) != 0 && partIndex == firstIdx;
var skippable = (sequence >= 0 && seq >= firstIdx && seq <= lastIdx)
|| partIndex != firstIdx;
if (skippable && !selected) {
scanType = -1;
continue;
}
var types = [scanType == ACTIVE_LINE_SPAN ? 0 : 1];
var pts = [];
if (scanType == ACTIVE_LINE_SPAN || scanType == ACTIVE_QUAD_SPAN) {
pts.push(SPAN_X1);
} else {
pts.push(scanType != INTERSECT_QUAD_NO && scanType != INTERSECT_QUAD_LINE_NO ? 2 : 1);
types.push(scanType == INTERSECT_QUAD_NO || scanType == INTERSECT_QUAD || scanType == INTERSECT_QUAD_2 ? 1 : 0);
pts.push(scanType == INTERSECT_QUAD_LINE || scanType == INTERSECT_QUAD ? 11
: scanType == INTERSECT_QUAD_LINE_2 ? 14 : scanType == INTERSECT_QUAD_2 ? 12 : 7);
}
ctx.strokeStyle = "red";
for (var typeIndex = 0; typeIndex < types.length; ++typeIndex) {
var type = types[typeIndex];
var index = pts[typeIndex];
if (type == 1) {
drawQuad(scan[index + 0], scan[index + 1], scan[index + 2], scan[index + 3],
scan[index + 4], scan[index + 5], selected);
} else {
drawLine(scan[index + 0], scan[index + 1], scan[index + 2], scan[index + 3],
selected);
}
}
if (debug_xy && selected) {
var debugText = "";
for (var typeIndex = 0; typeIndex < types.length; ++typeIndex) {
var type = types[typeIndex];
var index = pts[typeIndex];
for (var idx = pts[typeIndex]; idx < (type == 1 ? pts[typeIndex] + 6 : pts[typeIndex] + 4); idx += 2) {
var screenX = (scan[idx] - srcLeft) * scale;
var screenY = (scan[idx + 1] - srcTop) * scale;
debugText += screenX.toFixed(decimal_places) + ", ";
debugText += screenY.toFixed(decimal_places) + " ";
}
}
ctx.fillStyle="blue";
ctx.fillText(debugText, 50, partIndex * 50 + 100);
}
if (ptLabels && selected) {
ctx.fillStyle="blue";
for (var typeIndex = 0; typeIndex < types.length; ++typeIndex) {
var type = types[typeIndex];
var index = pts[typeIndex];
for (var idx = pts[typeIndex]; idx < (type == 1 ? pts[typeIndex] + 6 : pts[typeIndex] + 4); idx += 2) {
drawPoint(scan[idx], scan[idx + 1]);
}
}
}
var infoText = "";
if (info_mode && selected) {
infoText += hasId >= 0 ? "id=" + scan[hasId] : partIndex;
}
if (intersect_mode && selected) {
if (scanType == ACTIVE_QUAD_SPAN) {
infoText += " t=" + scan[SPAN_Q_T];
} else if (scanType == ACTIVE_LINE_SPAN) {
infoText += " t=" + scan[SPAN_L_T];
} else if (scanType == INTERSECT_QUAD_LINE ||scanType == INTERSECT_QUAD) {
infoText += " t0[0]=" + scan[1] + " t1[0]=" + scan[10];
} else if (scanType == INTERSECT_QUAD_LINE_2 || scanType == INTERSECT_QUAD_2) {
infoText += " t0[0]=" + scan[1] + " t0[1]=" + scan[10] + " t1[0]=" + scan[13];
if (scanType == INTERSECT_QUAD_LINE_2) {
infoText += " t1[1]=" + scan[18];
} else {
infoText += " t0[1]=" + scan[20];
}
}
}
if (infoText.length > 0) {
ctx.fillStyle="green";
ctx.fillText(infoText, 10, (hasId >= 0 && sequence >= 0
? hasId : partIndex) * 30 + 50);
}
if (intersect_mode && selected) {
ctx.fillStyle="rgba(50,100,200, 1.0)";
if (scanType == ACTIVE_QUAD_SPAN) {
drawPoint(scan[SPAN_Q_TX], scan[SPAN_Q_TY]);
} else if (scanType == ACTIVE_LINE_SPAN) {
drawPoint(scan[SPAN_L_TX], scan[SPAN_L_TY]);
} else if (scanType != INTERSECT_QUAD_NO && scanType != INTERSECT_QUAD_LINE_NO) {
drawPoint(scan[8], scan[9]);
if (scanType == INTERSECT_QUAD_LINE_2 || scanType == INTERSECT_QUAD_2) {
drawPoint(scan[11], scan[12]);
}
}
}
ctx.strokeStyle = "rgba(0,0,0, 0.2)";
scanType = -1;
}
drawDeferred();
}
function drawTop() {
init(tests[testIndex]);
redraw();
}
function redraw() {
ctx.beginPath();
ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.fillStyle="white";
ctx.fill();
draw(tests[testIndex], testTitles[testIndex]);
}
function doKeyPress(evt) {
var char = String.fromCharCode(evt.charCode);
switch (char) {
case '0':
case '1':
case '2':
case '3':
case '4':
case '5':
case '6':
case '7':
case '8':
case '9':
if (digit_mode) {
decimal_places = char - '0';
} else if (index_mode) {
index_bits ^= 1 << (char - '0');
}
redraw();
break;
case 'd':
digit_mode = true;
index_mode = false;
break;
case 'f':
info_mode ^= true;
redraw();
break;
case 'i':
digit_mode = false;
if (sequence >= 0) {
sequence = -1;
index_mode = false;
} else {
index_mode ^= true;
}
if (index_mode) {
index_bits = 0;
} else {
index_bits = -1;
}
redraw();
break;
case 'N':
testIndex += 9;
case 'n':
if (++testIndex >= tests.length)
testIndex = 0;
drawTop();
break;
case 'P':
testIndex -= 9;
case 'p':
if (--testIndex < 0)
testIndex = tests.length - 1;
drawTop();
break;
case 's':
sequence++;
redraw();
break;
case 'S':
sequence--;
if (sequence < 0) {
sequence = 0;
}
redraw();
break;
case 't':
intersect_mode ^= true;
redraw();
break;
case 'x':
ptLabels ^= true;
redraw();
break;
case 'y':
debug_xy ^= true;
redraw();
break;
case '-':
scale /= 2;
calcLeftTop();
redraw();
break;
case '=':
case '+':
scale *= 2;
calcLeftTop();
redraw();
break;
}
}
function calcXY() {
var e = window.event;
var tgt = e.target || e.srcElement;
var left = tgt.offsetLeft;
var top = tgt.offsetTop;
var unit = scale;
mouseX = (e.clientX - left) / scale + srcLeft;
mouseY = (e.clientY - top) / scale + srcTop;
}
function calcLeftTop() {
srcLeft = mouseX - screenWidth / 2 / scale;
srcTop = mouseY - screenHeight / 2 / scale;
}
function handleMouseClick() {
calcXY();
calcLeftTop();
redraw();
}
function handleMouseOver() {
calcXY();
var num = mouseX.toFixed(decimal_places) + ", " + mouseY.toFixed(decimal_places);
ctx.beginPath();
ctx.rect(300,100,200,10);
ctx.fillStyle="white";
ctx.fill();
ctx.fillStyle="black";
ctx.fillText(num, 300, 108);
}
function start() {
for (i = 0; i < testDivs.length; ++i) {
var title = testDivs[i].id.toString();
var str = testDivs[i].firstChild.data;
parse_debugShowActiveSpans(str, title);
parse_intersections(str, title);
}
drawTop();
window.addEventListener('keypress', doKeyPress, true);
window.onresize = function() {
drawTop();
}
}
</script>
</head>
<body onLoad="start();">
<canvas id="canvas" width="750" height="500"
onmousemove="handleMouseOver()"
onclick="handleMouseClick()"
></canvas >
</body>
</html>