html5 - Overlap/hit test in javascript -
im trying hit test/overlap test work in below code creates 200 circles in random position on canvas. trying store positions of circles in array , checking array each time circle created in loop, if randomly created x , y close created circle should keep getting new random x , y until isnt close created circle.
i cant work in while loop.
any please...
thanks
<script type="text/javascript"> document.addeventlistener("domcontentloaded", canvasdraw); function canvasdraw () { var c = document.getelementbyid("canvas"); var w = window.innerwidth; var h = window.innerheight; c.width = w; c.height = h; var ctx = c.getcontext("2d"); ctx.clearrect(0,0,c.width, c.height); var abc = 0; var colours = new array ("rgb(0,100,0)", "rgb(51,102,255)"); var positions = new array(); function hittest(x, y) { for(var p in positions) { pp = p.split(","); pp[0] = parseint(pp[0]); pp[1] = parseint(pp[1]); if(((x > (pp[0] - 24)) && (x < (pp[0] + 24))) && ((y > (pp[1] - 24)) && (y < (pp[1] + 24)))) { return true; } } return false; } //loop 200 times 200 circles (i=0; i<200; i++) { var x = math.floor(math.random()*c.width); var y = math.floor(math.random()*c.height); while(hittest(x, y) == true){ var x = math.floor(math.random()*c.width); var y = math.floor(math.random()*c.height); } var pos = x.tostring() + "," + y.tostring(); positions.push(pos); var radius = 10; var r = radius.tostring(); var b = colours[math.floor(math.random()*colours.length)]; circle(ctx,x,y, radius, b); } } function circle (ctx, x, y, radius, b) { ctx.fillstyle = b; ctx.beginpath(); ctx.arc(x, y, radius, 0, math.pi*2, true); ctx.closepath(); ctx.fill(); } </script>
some things before beginning:
- don't create arrays
new array(), unless specify initial length. use[]; - don't iterate through arrays using
for...in: use standardforcounter. more practice; - converting numbers strings , converting numbers useless , expensive. use small array store both values;
- don't use "magic numbers", i.e. number precise value hard recognize immediately. use named "constants" or put comment near each of them telling mean, future maintenance.
ok, let's see code.
if(((x > (pp[0] - 24)) && (x < (pp[0] + 24))) && ((y > (pp[1] - 24)) && (y < (pp[1] + 24)))) honestly, this? i'd call cranky , obscure snippet. recall you've learnt @ school:
var dx = pp[0] - x, dy = pp[1] - y; if (dx * dx + dy * dy < 400) return true; isn't clearer?
let's see whole function:
function canvasdraw () { var c = document.getelementbyid("canvas"); var w = window.innerwidth; var h = window.innerheight; c.width = w; c.height = h; var ctx = c.getcontext("2d"); ctx.clearrect(0,0,c.width, c.height); // lolwut? // var abc = 0; var colours = ["rgb(0,100,0)", "rgb(51,102,255)"]; var positions = []; function hittest(x, y) { (var j = 0; j < positions.length; j++) { var pp = positions[j]; var dx = pp[0] - x, dy = pp[1] - y; if (dx * dx + dy * dy < 400) return true; } return false; } // declare radius once , var radius = 10; // declare local scoped variables. forgot var x, y, i; (i=0; i<200; i++) { // how do...while instead of while? { var x = math.floor(math.random()*c.width); var y = math.floor(math.random()*c.height); // testing === faster, if know type // i'll let here, if type boolean, can avoid testing // @ all, in while (hittest(x, y)); } while (hittest(x, y) === true); positions.push([x, y]); // instruction useless // var r = radius.tostring(); var b = colours[math.floor(math.random()*colours.length)]; circle(ctx,x,y, radius, b); } } beware, though, depending on canvas size, there no more room circle, end in infinite loop. try put 200 circles radius of 10 inside 40x40 box... there should test do, , that complicated.
Comments
Post a Comment