Circle placement, trigonometry

Gulpfile.js

@@ -3,8 +3,8 @@ var sass = require('gulp-sass');
 var sourcemaps = require('gulp-sourcemaps');
 var autoprefixer = require('gulp-autoprefixer');
 
-var input = './stylesheets/**/*.scss';
-var output = './public/css';
+var input = './stylesheets/style.scss';
+var output = './stylesheets';
 var sassOptions = {
   errLogToConsole: true,
   outputStyle: 'expanded'

stylesheets/style.scss

@@ -1,33 +1,33 @@
 @import "trigonometry";
 
 $circles: 4;
+$points: 12;
+$angle: pi() / 5;
 
-* {
+.imbb_container {
+  font-family: 'Gotham SSm A','Gotham SSm B',Helvetica Neue,Helvetica,Arial,sans-serif;
+  height: inherit;
   margin: 0;
   padding: 0;
+  position: relative;
 }
 
-body {
-  font-family: 'Gotham SSm A','Gotham SSm B',Helvetica Neue,Helvetica,Arial,sans-serif;
-}
-
-$i: 0;
-@while $i < $circles {
-  #human-$i {
-    left: (1 - sin($i*pi()/4)) * 1%;
-    top: (1 - cos($i*pi()/4)) * 1%;
-  }
-  .small-$i {
-    left: (1 - sin($i*pi()/4)) * 1%;
-    top: (1 - cos($i*pi()/4)) * 1%;
-  }
-  .circle-$i {
-    $width: 80% - $i*5%;
+@for $i from 0 through $circles {
+  .circle-#{$i} {
+    $width: 80% - $i*10%;
     width: $width;
-    margin: ((100% - $width) / 2) auto;
-    position: relative;
+    top: ($i - 1)*5%;
+    left: ($i - 1)*5%;
+    position: absolute;
+    z-index: $i;
+  }
+}
+
+@for $i from 1 through $points {
+  #human-#{$i},
+  .small-#{$i} {
+    @include on-circle($i, $points);
   }
-  $i: $i + 1;
 }
 
 .humans {
@@ -76,8 +76,6 @@ $i: 0;
   .avatars {
     display: block;
     animation: rotat 100s linear infinite;
-    /*left:0;
-    top:0;*/
     position: absolute;
     width: 100%;
     margin: 0 auto;
@@ -98,8 +96,15 @@ $i: 0;
   border: 5px solid white;
 }
 
-.circle-$circles {
-  animation-play-state: paused;
+.circle-#{$circles} {
+  &, .avatars {
+    animation-play-state: paused;
+  }
+  img {
+    margin: 15% 15%;
+    max-width: 70%;
+    max-height: 70%;
+  }
 }
 .circles {
   border: 1px dashed;

stylesheets/trigonometry.scss

@@ -60,3 +60,44 @@
 @function tan($angle) {
   @return sin($angle) / cos($angle);
 }
+
+/**
+ * on-circle takes a radius, position on a circle, number of possible positions and returns top and left properties
+ *
+ * $radius {Number}    radius of the circle in pixels
+ * $ordinalPosition {Number} the position of the item on the circle, counting from 1 (North) through N
+ * $positions {Number}   the number of positions on the circle
+ * $originX {Number}   optional X origin point for the circle, defaults to the radius
+ * $originY {Number}   optional Y origin point for the circle, defaults to the radius
+ * $offsetX {Number}   optional X offset for the item, you might use 1/2 of the width of an item, default is 0
+ * $offsetY {Number}   optional Y offset for the item, you might use 1/2 of the height of an item, default is 0
+ */
+@mixin on-circle ($ordinalPosition, $positions, $radius: 90%, $originX: 0, $originY: 0, $offsetX: 0, $offsetY: 0) {
+
+ /*
+  Determine the angle for the position:
+  Multiply the adjusted zero-based index of the position by the degrees-per-position (360 degrees divided by the 
+  number of positions) and subtract 90 degrees (adjusting to begin at North)
+  */
+ $positionAngleDegrees: ($ordinalPosition - 1)*360/$positions - 90;
+
+ /*
+  Convert the angle to radians:
+  Multiply the angle by pi and then divide by 180 degrees.
+
+  NOTE: This step is necessary because of a bug in handling of the degrees unit when doing iterations, AFAICT
+  */
+ $positionAngleRadians: $positionAngleDegrees * pi() / 180;
+
+ /*
+   Apply the parametric equation of the circle,
+    http://en.wikipedia.org/wiki/Circle#Equations
+   via:
+    http://stackoverflow.com/questions/839899/how-do-i-calculate-a-point-on-a-circles-circumference
+
+    x = [origin x] + (r * cos angle)
+    y = [origin y] + (r * sin angle)
+  */
+ top: #{$originY + $offsetY + $radius * sin($positionAngleRadians)}px;
+ left: #{$originX + $offsetX + $radius * cos($positionAngleRadians)}px;
+}

userlist.php

@@ -76,7 +76,7 @@ function imbb_usergalaxy() {
   ));
 ?>
 <div class="all">
-	<div class="container">
+	<div class="imbb_container">
     <div class="circles circle-1">
 <?php 
     for ($i = 1; $i <= count($query); $i++) {
@@ -101,13 +101,16 @@ function imbb_usergalaxy() {
           $posts[$level] = [];
         }
         $posts[$level][] = $post;
-      }
+      } 
       foreach ($posts[3] as $post) {
         galaxyuser($post, $i);
         $i++;
       }
 ?>
-			<div class="circles circle-2">
+      </div>
+    </div>
+		<div class="circles circle-2">
+      <div class="avatars">
 <?php if (isset($posts[2])) {
         foreach ($posts[2] as $post) {
           galaxyuser($post, $i);
@@ -115,7 +118,10 @@ function imbb_usergalaxy() {
         } 
       }
 ?>
-				<div class="circles circle-3"> 
+      </div>
+    </div>
+		<div class="circles circle-3"> 
+      <div class="avatars">
 <?php if (isset($posts[1])) {
         foreach ($posts[1] as $post) {
           galaxyuser($post, $i);
@@ -123,17 +129,18 @@ function imbb_usergalaxy() {
         }
       }
 ?>
-	      </div>
 	    </div>
 	  </div>
     <div class="circles circle-4">
+      <div class="avatars">
 <?php if (isset($posts[0])) {
   foreach ($posts[0] as $post) {
     echo '<img src="'.get_post_meta( $post->ID, 'imbb_image', TRUE ).'">';
     $i++;
   }
 } ?>
-   </div>
+     </div>
+	 </div>
 	</div>
 </div>
 <?php