Search code examples
javascriptjquerymathgsap

Make a Circle Radius Based on viewportwidth (vw)

I have a free jQuery image gallery that I am trying to make some modifications to to make it suit my project.

The gallery is a spinning circle with images.

The radius of the circle is defined in this manner:

radius = Math.round( (250) / Math.tan( Math.PI / itemLength ) );

However what I need is to make a new radius based on viewportwidth (vw)

Can anyone help me approach this correctly?

Also I would be very appreciative if someone would help me understand what is happening in the above code.

Here is the context for that line of code:

w = $(window);
container = $( '#contentContainer' );
carousel = $( '#carouselContainer' );
item = $( '.carouselItem' );
itemLength = $( '.carouselItem' ).length;
fps = $('#fps');
rY = 360 / itemLength;
radius = Math.round( (250) / Math.tan( Math.PI / itemLength ) );

https://jsfiddle.net/mxp5svjx/

here is a picture as requested:

enter image description here

the main problem is when i resize the window then radius of the circle stays the same.

here is a working demo: http://codepen.io/johnblazek/full/nceyw/

Solution

  • I Found out the Key is 250. 250 is 13.02% of 1920 assuming you have a 1920px width window which I do. So i fiqured out I need 13.02% of window width.

    I have obtained that by doing this: 

    radius = Math.round10( (($(window).width()) * 0.1302) / Math.tan( Math.PI / itemLength ) );

Math.round10(); // rounds to the nearest decimal. 
$(window).width(); // is the width of the window. In my case 1920px
0.1302 is 13.02% // when you multiply it with something.

    Final result is that I get a radius based on 13.02vw