|
| 1 | +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| 2 | + "http://www.w3.org/TR/html4/loose.dtd"> |
| 3 | + |
| 4 | +<html lang="en"> |
| 5 | +<head> |
| 6 | + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
| 7 | + <title>Circle Pack</title> |
| 8 | + <style type="text/css"> |
| 9 | + body { background-color: #fff; padding: 0 2em; } |
| 10 | + #display { display: block; margin: 0 auto; border: 1px solid #ccc; } |
| 11 | + </style> |
| 12 | + <script type="text/javascript" charset="utf-8"> |
| 13 | + /* |
| 14 | + This algorithm hinges on the abilility to find a new configuration for two overlapping circles such that they become tangent |
| 15 | + and the deviation from their original positions is minimized. The symetry of the problem suggests that the solution leaves |
| 16 | + the centers of the circles on the line between the original centers and leaves the midpoint between the centers the same. |
| 17 | + If the centers are (x1,y1) and (x2,y2) and the radius is r, then the midpoint is |
| 18 | + (mx,my) = (x2+(x1-x2)/2, y2+(y1-y2)/2) and the distance betwen the original centers is d = sqrt((x1-x2)^2 + (y1-y2)^2). |
| 19 | + Then (x1',y1') = (2r(x1-mx)/d + mx, 2r(y1-my)/d + my) and (x1',y1') = (2r(x1-mx)/d + mx, 2r(y1-my)/d + my) |
| 20 | + */ |
| 21 | + var CARD_STYLE = { fill:'rgba(0,0,0,.05)', stroke:'rgba(0,0,0,.5)',width:.25 }; |
| 22 | + var TOUCH_STYLE = { fill:'rgba(255,200,0,.10)', stroke:'rgba(100,80,0,.5)',width:.25 }; |
| 23 | + var REVISED_STYLE = { fill:'rgba(0,255,0,.10)', stroke:'rgba(0,0,0,.5)',width:.75 }; |
| 24 | + var OUTLINE = { stroke:'rgba(0,0,0,.5)',width:.75 }; |
| 25 | + var POINTS = 60; |
| 26 | + var RADIUS = 30; |
| 27 | + var ITERATIONS = 20; |
| 28 | + var DEGREE = .2; |
| 29 | + |
| 30 | + var MARGIN = 80; |
| 31 | + |
| 32 | + var points = []; |
| 33 | + var revised = []; |
| 34 | + |
| 35 | + function el(id) { return document.getElementById(id); } |
| 36 | + function each(a,f) { for (var i=0,l=a.length; i<l; i++) f(a[i],i); } |
| 37 | + function eachm(m,f) { for (var k in m) f(k,m[k]); } |
| 38 | + |
| 39 | + function init() { |
| 40 | + for (var i=0; i < POINTS; i++) |
| 41 | + points.push( {x:Math.random() * 840, y:Math.random() * 440, style:CARD_STYLE, index:i} ); |
| 42 | + points.sort( function(p1,p2) { return p1.x-p2.x;}) |
| 43 | + draw(); |
| 44 | + } |
| 45 | + |
| 46 | + function draw() { |
| 47 | + var ctx = el('display').getContext('2d'); |
| 48 | + ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); |
| 49 | + var width = ctx.canvas.width - 2*MARGIN, height = ctx.canvas.height - 2*MARGIN; |
| 50 | + var originalByIndex = []; |
| 51 | + var start, i, j, p, po, rad2 = 2.0*RADIUS, rad2sqr=rad2*rad2, dx, dy, mx, my, d; |
| 52 | + |
| 53 | + for (i=0; p = points[i]; i++) { |
| 54 | + originalByIndex[p.index] = {x:p.x,y:p.y}; |
| 55 | + for (j=i-1; j>=0; j--) { |
| 56 | + po = points[j]; |
| 57 | + dx = p.x - po.x; |
| 58 | + if (dx > rad2) break; |
| 59 | + dy = p.y - po.y; |
| 60 | + if (Math.abs(dy) < rad2) { |
| 61 | + if ( dy*dy+dx*dx < rad2sqr) |
| 62 | + p.style = po.style = TOUCH_STYLE; |
| 63 | + } |
| 64 | + } |
| 65 | + } |
| 66 | + |
| 67 | + each( points, function(point, index) { |
| 68 | + var x = MARGIN + point.x, y = MARGIN + point.y; |
| 69 | + circle( ctx, x, y, RADIUS, point.style ); |
| 70 | +// center_text(ctx, point.index, x, y, { font:'8pt Verdana', color:'#ccc', yoffset:2}) |
| 71 | + }); |
| 72 | + |
| 73 | + start = new Date(); |
| 74 | + |
| 75 | + for (var it=0; it < ITERATIONS; it++) { |
| 76 | + points.sort( function(p1,p2) { return p1.x-p2.x;} ); |
| 77 | + for (i=0; p = points[i]; i++) { |
| 78 | + for (j=i-1; po = points[j]; j--) { |
| 79 | + dx = p.x - po.x; |
| 80 | + if (Math.abs(dx) >= rad2) break; |
| 81 | + dy = p.y - po.y; |
| 82 | + if (Math.abs(dy) < rad2) { |
| 83 | + d = dy*dy + dx*dx; |
| 84 | + if ( d < rad2sqr ) { |
| 85 | + mx = po.x+dx/2; my = po.y+dy/2; |
| 86 | + d = Math.sqrt(d); |
| 87 | + ratio = d + DEGREE*(2*RADIUS - d); |
| 88 | + p.x = ratio*(p.x - mx)/d + mx; p.y = ratio*(p.y - my)/d + my; |
| 89 | + po.x = ratio*(po.x - mx)/d + mx; po.y = ratio*(po.y - my)/d + my; |
| 90 | + p.style = po.style = REVISED_STYLE; |
| 91 | + } |
| 92 | + } |
| 93 | + } |
| 94 | + } |
| 95 | + } |
| 96 | + |
| 97 | + console.debug( new Date().getTime() - start.getTime() ); |
| 98 | + |
| 99 | + each( points, function(point, index) { |
| 100 | + var x = MARGIN + point.x, y = MARGIN + point.y; |
| 101 | + if ( point.style == REVISED_STYLE ) { |
| 102 | + circle( ctx, x, y, RADIUS, point.style ); |
| 103 | +// center_text(ctx, point.index, x, y, { font:'8pt Verdana', color:'#6f6', yoffset:2}) |
| 104 | + op = originalByIndex[point.index]; |
| 105 | + ctx.strokeStyle='#00f';ctx.lineWidth=1; line(ctx,x,y,MARGIN+op.x,MARGIN+op.y); |
| 106 | + } else if ( point.style == CARD_STYLE ) { |
| 107 | + circle( ctx, x, y, RADIUS, OUTLINE ); |
| 108 | + } |
| 109 | + }); |
| 110 | + } |
| 111 | + |
| 112 | + function circle( ctx, x, y, r, style ) { |
| 113 | + ctx.beginPath(); |
| 114 | + ctx.arc(x, y, r, 0, Math.PI*2, true); |
| 115 | + ctx.closePath(); |
| 116 | + drawPath(ctx, style); |
| 117 | + } |
| 118 | + |
| 119 | + function drawPath( ctx, style ) { |
| 120 | + if ( style.fill ) { |
| 121 | + if ( style.shadow ) { |
| 122 | + var s = style.shadow; |
| 123 | + ctx.shadowOffsetX = s.x; |
| 124 | + ctx.shadowOffsetY = s.y; |
| 125 | + ctx.shadowBlur = s.blur; |
| 126 | + ctx.shadowColor = s.color; |
| 127 | + } |
| 128 | + ctx.fillStyle = style.fill; |
| 129 | + ctx.fill(); |
| 130 | + } |
| 131 | + if ( style.stroke ) { |
| 132 | + ctx.shadowBlur = 0; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; |
| 133 | + ctx.strokeStyle = style.stroke; |
| 134 | + ctx.lineWidth = style.width || 1; |
| 135 | + ctx.stroke(); |
| 136 | + } |
| 137 | + } |
| 138 | + |
| 139 | + function center_text( ctx, text, x, y, fontStyle ) { |
| 140 | + ctx.fillStyle = fontStyle.color; |
| 141 | + ctx.shadowBlur = 0; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; |
| 142 | + ctx.font = fontStyle.font; |
| 143 | + |
| 144 | + var metrics = ctx.measureText(text); |
| 145 | + |
| 146 | + ctx.beginPath(); |
| 147 | + ctx.fillText(text, x - metrics.width/2.0, y + fontStyle.yoffset ); |
| 148 | + } |
| 149 | + |
| 150 | + function line( ctx, x1, y1, x2, y2 ) { |
| 151 | + ctx.beginPath(); |
| 152 | + ctx.moveTo( x1, y1 ); |
| 153 | + ctx.lineTo( x2, y2 ); |
| 154 | + ctx.closePath(); |
| 155 | + ctx.stroke(); |
| 156 | + } |
| 157 | + |
| 158 | + </script> |
| 159 | +</head> |
| 160 | +<body onload="init()"> |
| 161 | +<canvas id="display" width="1000" height="600"></canvas> |
| 162 | +</body> |
| 163 | +</html> |
0 commit comments