made sizing better

Author: zesameri

css/secrets.css

@@ -1,14 +1,28 @@
 body {
   overflow: hidden;
+  position: relative;
+  left: -100px;
+  top: -100px;
+  background: #000;
 }
 
 .row {
   display: flex;
   margin-left: 1em;
 }
+.row:nth-child(2n) {
+  position: relative;
+  left: -75px;
+}
+
+svg {
+  margin: 8px;
+}
 
 .cell:hover, .cell:visited, .cell:focus {
   animation: loaderAnim 5s ease-in-out infinite normal forwards;
+  padding: 0;
+  margin: 0;
 }
 
 
@@ -17,7 +31,7 @@ body {
     transform:rotate(0deg);
   }
   50% {
-    transform:rotate(180deg);
+    transform:rotate(90deg);
   }
   100% {
     transform:rotate(0deg);

js/2secrets.js

@@ -1,65 +1,53 @@
-document.body.style.background = 'black';
-
 var height = $('body').height();
 var width = $('body').width();
-var mobileSize = 200;
-var desktopSize = 150;
-var radius = 0, rows  = 0, cols = 0, size;
+// var mobileSize = 200;
+// var desktopSize = 150;
+var radius = 0, rows  = 0, cols = 0, size = 150;
 
 // Define rows, colnums, and shape radius based on document size
-// var isMobile = window.matchMedia("only screen and (max-width: 850px)").matches ||
-//                 /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-// var isOtherMediaQuery = window.matchMedia("only screen and (min-width:1080px)").matches;
-size = desktopSize;
+var isMobile = window.matchMedia("only screen and (max-width: 850px)").matches ||
+                /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+var isOtherMediaQuery = window.matchMedia("only screen and (min-width:1080px)").matches;
+if(isMobile && !isOtherMediaQuery) {
+  size = 200;
+} else {
+  size = 150;
+}
+
 rows = Math.floor(height / size);
 cols = Math.floor(width / size);
 radius = Math.floor(Math.max(width, height) / Math.max(rows, cols)) / 2;
 
-var shapes = makeFlowers();
-var flowers = [];
+console.log(rows);
+console.log(cols);
 
 for (var r = 0; r < rows; r++) {
   var rowId = "row" + r;
   var row = $("<div/>").addClass("row").attr("id", rowId).appendTo('body');
-  // even rows have an offset of 0.5
-  var even = !!(r % 2);
   var vi = r / (rows - 1);
   for (var c = 0; c < cols; c++) {
-    // var cell = $("<div/>").addClass("cell").appendTo(row);
     var cellId = "cell" + ((r * rows) + c);
-    $(row).append('<div class="cell" id="' + cellId + '"></div>')
-    var k = c;
-    if (even) {
-      k += 0.5;
-      // we skip the final col on even rows to avoid overflow
-      if (c  >=  cols -  1) {
-        continue;
-      }
-    } else {
-      row.css("position", "relative");
-      row.css("left", (size / 2 * -1 + "px"));
-    }
-    var hi = k /(cols -  1);
-    var shape = pickFlower(shapes);
-    shape.translation.set((size + 25) / 2, (size + 25) / 2);
-    // shape.translation.set(hi * width, vi * height);
-    // Setup the canvas
-    var two = new Two({
-      width: size + 25,
-      height:size + 25
-    }).appendTo(document.getElementById(cellId));
-
-    // $(cellId).click(function(e) {
-    //   document.getElementById(cellId)
-    // }
-
-    two.add(shape);
-    two.update();
-    flowers.push(shape);
+    $(row).append('<div class="cell" id="' + cellId + '"></div>');
   }
 }
 
-// 
+
+var flowers = [];
+var shapes = makeFlowers();
+
+$(".cell").each(function (index, object) {
+  var two = new Two({
+    width: size + 20,
+    height:size + 20
+  }).appendTo(object);
+  var shape = pickFlower(shapes);
+  shape.translation.set(two.width / 2, two.height / 2);
+  two.add(shape);
+  two.update();
+  flowers.push(shape);
+});
+
+//
 // for (var f in flowers) {
 //   var flower = flowers[f];
 //   $(flower._renderer.elem)
@@ -68,7 +56,6 @@ for (var r = 0; r < rows; r++) {
 //     })
 // }
 
-
 function roseMath(v, k, t) {
   v.x = radius * Math.cos(k * t) * Math.cos(t);
   v.y = radius * Math.cos(k * t) * Math.sin(t);
@@ -95,7 +82,7 @@ function pickFlower(flowers) {
   var f = Math.floor(Math.random() * flowers.length);
   var flower = flowers[f].clone();
   // Style the shape
-  var colors = ['tomato', 'orangered',
+  var colors = ['tomato', 'orangered', 'floralwhite',
     'gold', 'red', 'darkorange'];
   var color = colors[Math.floor(Math.random() * colors.length)];
   flower.stroke = color;

js/secrets.js

@@ -5,24 +5,24 @@ var two = new Two({
   fullscreen: true,
     autostart: true
 }).appendTo(document.body);
-document.body.style.background = 'black';
+// document.body.style.background = 'black';
 
 
-var radius = 0, rows  = 0, cols = 0;
+var radius = 0, rows  = 0, cols = 0, size;
 var isMobile = window.matchMedia("only screen and (max-width: 850px)").matches ||
                 /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
 var isOtherMediaQuery = window.matchMedia("only screen and (min-width:1080px)").matches;
 if(isMobile && !isOtherMediaQuery) {
-  rows = Math.floor(two.height / 200);
-  cols = Math.floor(two.width / 200);
-  radius = Math.floor(two.height / rows) * .62;
+  size = 200;
 } else {
-  rows = Math.floor(two.height / 150);
-  cols = Math.floor(two.width / 150);
-  radius = Math.floor(Math.max(two.width, two.height) / Math.max(rows, cols)) / 2;
+  size = 150;
 }
-var shapes = makeFlowers();
+rows = Math.floor(two.height / size);
+cols = Math.floor(two.width / size);
+radius = Math.floor(Math.max(two.width, two.height) / Math.max(rows, cols)) / 2;
 var flowers = [];
+var shapes = makeFlowers();
+
 
 for (var r = 0; r < rows; r++) {
   // even rows have an offset of 0.5
@@ -77,21 +77,28 @@ function makeFlowers() {
   }
   return flowers;
 }
-
+var f = 0;
 function pickFlower(flowers) {
-  var f = Math.floor(Math.random() * flowers.length);
+  // var f = Math.floor(Math.random() * flowers.length);
+  if (f == flowers.length) {
+    f = 0;
+  }
+  if (typeof flowers[f] === 'undefined') {
+    f++;
+  }
   var flower = flowers[f].clone();
+  f++;
   // Style the shape
-  var colors = ['tomato', 'lightsalmon', 'floralwhite', 'orangered',
-    'gold', 'red', 'darkorange'];
-  var color = colors[Math.floor(Math.random() * colors.length)];
-  flower.stroke = color;
-  flower.fill = color;
+  // var colors = ['tomato', 'lightsalmon', 'floralwhite', 'orangered',
+  //   'gold', 'red', 'darkorange'];
+  // var color = colors[Math.floor(Math.random() * colors.length)];
+  // flower.stroke = color;
+  // flower.fill = color;
   flower.linewidth = 4;
   flower.cap = 'round';
   // flower.rotation = Math.floor(Math.random() * 4) * Math.PI / 2 + Math.PI / 4;
   // For animation later on
-  flower.step = (Math.floor(Math.random() * 8) / 8) * Math.PI / 60;
-  flower.step *= Math.random() > 0.5 ? - 1 : 1;
+  // flower.step = (Math.floor(Math.random() * 8) / 8) * Math.PI / 60;
+  // flower.step *= Math.random() > 0.5 ? - 1 : 1;
   return flower;
 }