Browse Source

Circle placement, trigonometry

master
Alexander Yakovlev 5 years ago
parent
commit
cd1d8fa1a7
  1. 4
      Gulpfile.js
  2. 51
      stylesheets/style.scss
  3. 41
      stylesheets/trigonometry.scss
  4. 19
      userlist.php

4
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'

51
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;
@for $i from 0 through $circles {
.circle-#{$i} {
$width: 80% - $i*10%;
width: $width;
top: ($i - 1)*5%;
left: ($i - 1)*5%;
position: absolute;
z-index: $i;
}
}
$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%;
@for $i from 1 through $points {
#human-#{$i},
.small-#{$i} {
@include on-circle($i, $points);
}
.circle-$i {
$width: 80% - $i*5%;
width: $width;
margin: ((100% - $width) / 2) auto;
position: relative;
}
$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;

41
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;
}

19
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

Loading…
Cancel
Save