javascript - Rendering concentric hexes on Canvas -


i've written loop in javascript render rings of concentric hexagons around central hexagon on html canvas.

i start innermost ring, draw hex @ 3 o'clock, continue around in circle until hexes rendered. move on next ring , repeat.

when draw hexagons way (instead of tiling them using solely x , y offsets) hexagon not divisible 60 not same distance center hex divisible 60 (because these hexes comprise flat edges, not vertices, of larger hex).

the problem i'm having these hexes (those not divisible 60 degrees) rendering in off position. i'm not sure if floating point math problem, problem algorithm, problem rusty trig, or plain stupidity. i'm betting 3 out of 4. cut chase, @ line if (alpha % 60 !== 0) in code below.

as point of information, decided draw grid way because needed easy way map coordinates of each hex data structure, each hex being identified ring # , id# within ring. if there better way i'm ears, however, i'd still know why rendering off.

https://www.dropbox.com/s/2moe9ysrrw865vh/hexes.jpg?dl=0

here amateur code, bear me.

  <script type="text/javascript">         window.addeventlistener('load', eventwindowloaded, false);         function eventwindowloaded() {             canvasapp();         }      function canvasapp(){         var xorigin;         var yorigin;         var scalefactor = 30;          var thecanvas = document.getelementbyid("canvas");         var context;          if (canvas.getcontext) {             context = thecanvas.getcontext("2d");             window.addeventlistener('resize', resizecanvas, false);             window.addeventlistener('orientationchange', resizecanvas, false);             resizecanvas();         }         drawscreen();          function resizecanvas() {             var imgdata = context.getimagedata(0,0, thecanvas.width, thecanvas.height);             thecanvas.width = window.innerwidth;             thecanvas.height = window.innerheight;             context.putimagedata(imgdata,0,0);             xorigin = thecanvas.width / 2;             yorigin = thecanvas.height / 2;         }          function drawscreen() {             var rings = 3;             var alpha = 0;             var modifier = 1;              context.clearrect(0, 0, thecanvas.width, thecanvas.height);             drawhex(0,0);              (var = 1; i<=rings; i++) {                 (var j = 1; j<=i*6; j++) {                      if (alpha % 60 !== 0) {                          var h = modifier * scalefactor / math.cos(dtr(360 / (6 * i)));                          drawhex(h * (math.cos(dtr(alpha))), h * math.sin(dtr(alpha)));                     }                     else {                         drawhex(2 * scalefactor * * math.cos(dtr(alpha)), 2 * scalefactor * * math.sin(dtr(alpha)));                     }                     alpha += 360 / (i*6);                 }                 modifier+=2;             }         }          function drawhex(xoff, yoff) {             context.fillstyle = '#aaaaaa';             context.strokestyle = 'black';             context.linewidth = 2;             context.linecap = 'square';             context.beginpath();             context.moveto(xorigin+xoff-scalefactor,yorigin+yoff-math.tan(dtr(30))*scalefactor);             context.lineto(xorigin+xoff,yorigin+yoff-scalefactor/math.cos(dtr(30)));             context.lineto(xorigin+xoff+scalefactor,yorigin+yoff-math.tan(dtr(30))*scalefactor);             context.lineto(xorigin+xoff+scalefactor,yorigin+yoff+math.tan(dtr(30))*scalefactor);             context.lineto(xorigin+xoff,yorigin+yoff+scalefactor/math.cos(dtr(30)));             context.lineto(xorigin+xoff-scalefactor,yorigin+yoff+math.tan(dtr(30))*scalefactor);             context.closepath();             context.stroke();         }          function dtr(ang) {             return ang * math.pi / 180;         }          function rtd(ang) {             return ang * 180 / math.pi;         }     }     </script>

man took me longer i'd admit find pattern hexagonal circles. i'm tired right explain since think i'll need make assisting illustrations in order explain it.

in short, each "circle" of hexagonal shapes hexagonal. number of hexagonal shapes along 1 edge same number of steps center.

var c = document.getelementbyid("canvas");  var ctx = c.getcontext("2d");  c.width = 500;  c.height = 500;      var hexradius = 20;  var innercircleradius = hexradius/2*math.sqrt(3);  var to_radians = math.pi/180;    function drawhex(x,y) {      var r = hexradius;      ctx.beginpath();      ctx.moveto(x,y-r);      (var = 0; i<=6; i++) {           ctx.lineto(x+math.cos((i*60-90)*to_radians)*r,y+math.sin((i*60-90)*to_radians)*r);      }      ctx.closepath();      ctx.stroke();  }    drawhexcircle(250,250,4);    function drawhexcircle(x,y,circles) {      var rc = innercircleradius;      drawhex(250,250); //center            (var = 1; i<=circles; i++) {          (var j = 0; j<6; j++) {              var currentx = x+math.cos((j*60)*to_radians)*rc*2*i;              var currenty = y+math.sin((j*60)*to_radians)*rc*2*i;                  drawhex(currentx,currenty);              (var k = 1; k<i; k++) {                  var newx = currentx + math.cos((j*60+120)*to_radians)*rc*2*k;                  var newy = currenty + math.sin((j*60+120)*to_radians)*rc*2*k;                  drawhex(newx,newy);              }          }      }        }
canvas {      border: 1px solid black;  }
<canvas id="canvas"></canvas>


Comments

Post a Comment

Popular posts from this blog

c# - Validate object ID from GET to POST -

i have method allows user access comment have made on site. have post method lets them update comment. my normal solution send entire comment model through, let them update it, update on database when post back. involve sending commentid through in hiddenfor , can manipulated. how can verify commentid sent in get method same i'm getting in post , not able alter comment wish? how can verify commentid sent in method same i'm getting in post? basically have validate following things in post - user logged-in user. authenticated users post comments. commentid in post , should valid commentid , should present in database. userid associated logged-in user should same userid associated comment . comment should contain userid column, can check @ time of update. to make sure update happens comment has been sent in get - hold commentid in session , in post action compare commentid value in session .
Read more

node.js - Custom Model Validator SailsJS -

when using custom model validator checks record within model. return within spread doesn't seem end control flow. //post.js model /** * custom validator **/ types: { isuservalid: function(user_id) { var promise = require('bluebird'); promise.all([ user.findone({id: user_id}) ]) .spread(function(user) { console.log(user); if (user === null || user === undefined) { console.log('failed'); return false; }else{ console.log('passed'); return true; } }); } }, my response standard validation failed response. { "error": "e_validation", "status": 400, "summary": "1 attribute invalid", "model": "post", "invalidattributes": { "owner": [ { "rule": "isuservalid", ...
Read more

php - Find a regex to take part of Email -

i have following emails need extract part from: bestellnummer xxx: 1 von xxx, 1er pack ------------- anfang der nachricht ------------- foo bar baz foo bar baz // <<<<< need text here ------------- ende der nachricht ------------- ------------- anfang der nachricht ------------- foo bar baz foo bar baz ------------- ende der nachricht ------------- there 0 unlimited occurences of ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- and i'm able extract first part regex: $re = "/------------- .*? -------------.?(.*?).?------------- .*? -------------/s"; but, i'm quite new on learning regex, i'm pretty sure there must better regex extract part (foo bar baz foo bar baz) of text between ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- as can in different languages, i'm using .? to match between hyphens. i...
Read more