2

I am trying to position some diamond divs using some trigonometry in javascript but it seems my logic fails somewhere.

You can see that I tried this formula: pos + trig * dimension. I hoped it would give me the right coordinates so that I can construct my diamond grid. So my question is, how can I align the diamond borders with trigonometry? 

var div = document.getElementsByTagName('div');

var x1 = div[0].offsetTop + Math.cos(45) * div[0].offsetHeight;
var y1 = div[0].offsetLeft + Math.sin(45) * div[0].offsetWidth;

div[1].style.top = y1 + 'px';
div[1].style.left = x1 + 'px';

The entire jsfiddle can be found here: https://jsfiddle.net/hmfxmvvs/

Edit: My intended result is this: https://jsfiddle.net/hmfxmvvs/5/

Asperger
  • 3,064
  • 8
  • 52
  • 100

1 Answers1

2

Try removing .offsetHeight , .offsetWidth from calculations

var x1 = div[0].offsetTop + (Math.cos(45));
var y1 = div[0].offsetLeft + (Math.sin(45));
div[1].style.top = Math.round(y1) + 'px';
div[1].style.left = Math.round(x1) - 9 + 'px';

jsfiddle https://jsfiddle.net/hmfxmvvs/2/

guest271314
  • 1
  • 15
  • 104
  • 177
  • Im trying to get a alignment similar to http://www.winterbrose.com/products/software/Grid-Maker/pix/GMv1_Diamond1_160.png – Asperger Feb 21 '16 at 01:20
  • Elements should be adjacent to each other ? With right side of left element touching left side of right element ? – guest271314 Feb 21 '16 at 01:22
  • Yes, adjacent to eachother where the bottom right border of div 1 touches the top left border of div 2 – Asperger Feb 21 '16 at 01:23
  • @Asperger Try swapping `x1` to `top` , `y1` to `left` , adding `-130` to `left` before `"px"` https://jsfiddle.net/hmfxmvvs/3/ – guest271314 Feb 21 '16 at 01:26
  • See also http://stackoverflow.com/questions/29137152/looping-using-position-absolute-to-form-9-boxes/ . Try setting `transform:rotate(45deg)` at `css` at http://jsfiddle.net/k554x7vs/6/ , e.g.; http://jsfiddle.net/k554x7vs/8/ – guest271314 Feb 21 '16 at 01:47
  • https://jsfiddle.net/hmfxmvvs/5/ doesnt resolve the question because I still have to tweak the numbers manually (20, 275). I just need to find out how to get that same position with the trig functions. – Asperger Feb 21 '16 at 01:55
  • 1
    I think it does, check it out https://jsfiddle.net/hmfxmvvs/8/ what do you say`? any tips for improvement? I know this can be done with trigonometry though which is what my question was actually about. If you can find a way i would gladly accept your answer. – Asperger Feb 21 '16 at 02:21
  • No tips, the `1/2` is simpler than subtracting `4.5` https://jsfiddle.net/hmfxmvvs/9/ – guest271314 Feb 21 '16 at 02:22
  • Also it does seem to be more exact too. – Asperger Feb 21 '16 at 02:23
  • 1
    If your requirement is for a trigonometric solution, you should probably specify that at original Question. Or, post and accept your own solution to current Question and include requirement for a trigonometric solution at another Question – guest271314 Feb 21 '16 at 02:25
  • Edited my question : ) – Asperger Feb 21 '16 at 02:28
  • 1
    You might also consider including `math` and `css` tags at Question and specify "Trigonometric _solution_" – guest271314 Feb 21 '16 at 02:31
  • Thank you so much for the tips! – Asperger Feb 21 '16 at 02:33