🎩 fullscreen demos

metafizzy · May 20, 2019 · c020d9b · c020d9b
1 parent 8e0e4bb
commit c020d9b
Show file tree

Hide file tree

Showing 24 changed files with 160 additions and 246 deletions.
diff --git a/demos/box-cross/box-cross.js b/demos/box-cross/box-cross.js
@@ -1,37 +1,31 @@
-// -------------------------- demo -------------------------- //
+// ----- setup ----- //
 
-var illoElem = document.querySelector('.illo');
-var w = 9;
-var h = 9;
-var minWindowSize = Math.min( window.innerWidth - 20 , window.innerHeight - 20 );
-var zoom = Math.floor( minWindowSize / w );
-illoElem.setAttribute( 'width', w * zoom );
-illoElem.setAttribute( 'height', h * zoom );
+var sceneSize = 9;
 var isSpinning = true;
 var TAU = Zdog.TAU;
 // colors
-// var white = 'white';
 var yellow = '#ED0';
 var gold = '#EA0';
 var orange = '#E62';
 var garnet = '#C25';
-// var navy = '#369';
-// var denim = '#345';
 var eggplant = '#636';
 
 var initRotate = { x: (35/360) * TAU, y: TAU/8 };
 
 var illo = new Zdog.Illustration({
-  element: illoElem,
-  zoom: zoom,
+  element: '.illo',
   rotate: initRotate,
+  resize: 'fullscreen',
   dragRotate: true,
   onDragStart: function() {
     isSpinning = false;
   },
+  onResize: function( width, height ) {
+    this.zoom = Math.floor( Math.min( width, height ) / sceneSize );
+  },
 });
 
-// -- illustration shapes --- //
+// ----- model ----- //
 
 var model = new Zdog.Anchor({
   addTo: illo,
@@ -111,7 +105,7 @@ dot.copy({
   color: eggplant,
 });
 
-// -- animate --- //
+// ----- animate ----- //
 
 var ticker = 0;
 var cycleCount = 150;

diff --git a/demos/box-cross/index.html b/demos/box-cross/index.html
@@ -12,16 +12,12 @@
     body {
       min-height: 100%;
       margin: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-family: sans-serif;
-      text-align: center;
     }
 
     .illo {
       display: block;
-      margin: 0px auto;
+      width: 100%;
+      height: 100%;
       background: #FDB;
       cursor: move;
     }
@@ -30,9 +26,8 @@
 </head>
 <body>
 
-<div class="container">
-  <canvas class="illo"></canvas>
-</div>
+
+<canvas class="illo"></canvas>
 
 <script src="../../js/boilerplate.js"></script>
 <script src="../../js/canvas-renderer.js"></script>

diff --git a/demos/dot-cube/dot-cube.js b/demos/dot-cube/dot-cube.js
@@ -1,19 +1,16 @@
-// ------------------------- demo ------------------------- //
+// ----- setup ----- //
 
-var illoElem = document.querySelector('.illo');
 var sceneSize = 24;
-var minWindowSize = Math.min( window.innerWidth - 20 , window.innerHeight - 20 );
-var zoom = Math.floor( minWindowSize / sceneSize );
-var illoSize = sceneSize * zoom;
-illoElem.setAttribute( 'width', illoSize );
-illoElem.setAttribute( 'height', illoSize );
 var TAU = Zdog.TAU;
 
 var illo = new Zdog.Illustration({
-  element: illoElem,
-  zoom: zoom,
+  element: '.illo',
   rotate: { x: TAU * -35/360, y: TAU * 1/8 },
   dragRotate: true,
+  resize: 'fullscreen',
+  onResize: function( width, height ) {
+    this.zoom = Math.floor( Math.min( width, height ) / sceneSize );
+  },
 });
 
 // ----- model ----- //
@@ -35,7 +32,6 @@ var dot = new Zdog.Shape({
   translate: oneUnit.copy(),
   stroke: 1,
   color: 'white',
-  // visible: false,
 });
 
 dot.copy({ translate: { x: -1, y:  1 } });

diff --git a/demos/dot-cube/index.html b/demos/dot-cube/index.html
@@ -12,28 +12,22 @@
     body {
       min-height: 100%;
       margin: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
       background: black;
       color: white;
-      font-family: sans-serif;
-      text-align: center;
     }
 
     .illo {
       display: block;
-      margin: 0px auto 20px;
+      width: 100%;
+      height: 100%;
       cursor: move;
     }
   </style>
 
 </head>
 <body>
 
-<div class="container">
-  <canvas class="illo"></canvas>
-</div>
+<canvas class="illo"></canvas>
 
 <script src="../../js/boilerplate.js"></script>
 <script src="../../js/canvas-renderer.js"></script>

diff --git a/demos/fullscreen/fullscreen.js b/demos/fullscreen/fullscreen.js
@@ -1,6 +1,5 @@
-// ------------------------- demo ------------------------- //
+// ----- setup ----- //
 
-var zoom = 4;
 var isSpinning = true;
 var gold = '#EA0';
 var orange = '#E62';
@@ -9,7 +8,7 @@ var eggplant = '#636';
 
 var illo = new Zdog.Illustration({
   element: '.illo',
-  zoom: zoom,
+  zoom: 4,
   resize: 'fullscreen',
   dragRotate: true,
   onDragStart: function() {

diff --git a/demos/fullscreen/index.html b/demos/fullscreen/index.html
@@ -17,14 +17,14 @@
       width: 100%;
       height: 100%;
       cursor: move;
-      background: #FED;
+      background: #FDB;
     }
   </style>
 
 </head>
 <body>
 
-<canvas class="illo" width="300" height="200"></canvas>
+<canvas class="illo"></canvas>
 
 <script src="../../js/boilerplate.js"></script>
 <script src="../../js/canvas-renderer.js"></script>

diff --git a/demos/hemisphere-cone-ball/hemisphere-cone-ball.js b/demos/hemisphere-cone-ball/hemisphere-cone-ball.js
@@ -1,23 +1,19 @@
-// -------------------------- demo -------------------------- //
-
-var illoElem = document.querySelector('.illo');
-var w = 48;
-var h = 48;
-var minWindowSize = Math.min( window.innerWidth, window.innerHeight );
-var zoom = Math.floor( minWindowSize / w );
-illoElem.setAttribute( 'width', w * zoom );
-illoElem.setAttribute( 'height', h * zoom );
+// ----- setup ----- //
 
+var sceneSize = 48;
 var isSpinning = true;
 var TAU = Zdog.TAU;
 
 var illo = new Zdog.Illustration({
-  element: illoElem,
-  zoom: zoom,
+  element: '.illo',
   dragRotate: true,
+  resize: 'fullscreen',
   onDragStart: function() {
     isSpinning = false;
   },
+  onResize: function( width, height ) {
+    this.zoom = Math.floor( Math.min( width, height ) / sceneSize );
+  },
 });
 
 // colors

diff --git a/demos/hemisphere-cone-ball/index.html b/demos/hemisphere-cone-ball/index.html
@@ -12,27 +12,21 @@
     body {
       min-height: 100%;
       margin: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-family: sans-serif;
-      text-align: center;
     }
 
     .illo {
-      background: #FDB;
       display: block;
-      margin: 0px auto;
+      width: 100%;
+      height: 100%;
+      background: #FDB;
       cursor: move;
     }
   </style>
 
 </head>
 <body>
 
-<div class="container">
-  <canvas class="illo"></canvas>
-</div>
+<canvas class="illo"></canvas>
 
 <script src="../../js/boilerplate.js"></script>
 <script src="../../js/canvas-renderer.js"></script>

diff --git a/demos/houses/houses.js b/demos/houses/houses.js
@@ -1,12 +1,6 @@
-// ------------------------- demo ------------------------- //
+// ----- setup ----- //
 
-var illoElem = document.querySelector('.illo');
 var sceneSize = 56;
-var minWindowSize = Math.min( window.innerWidth - 20 , window.innerHeight - 20 );
-var zoom = Math.floor( minWindowSize / sceneSize );
-var illoSize = sceneSize * zoom;
-illoElem.setAttribute( 'width', illoSize );
-illoElem.setAttribute( 'height', illoSize );
 var isSpinning = true;
 var TAU = Zdog.TAU;
 
@@ -27,15 +21,18 @@ var initRotate = { y: TAU/8 };
 var turnRatio = 1 / Math.sin( TAU/8 );
 
 var illo = new Zdog.Illustration({
-  element: illoElem,
-  zoom: zoom,
+  element: '.illo',
   rotate: initRotate,
   // stretch looks circular at 1/8 turn
   scale: { x: turnRatio, z: turnRatio },
   dragRotate: true,
+  resize: 'fullscreen',
   onDragStart: function() {
     isSpinning = false;
   },
+  onResize: function( width, height ) {
+    this.zoom = Math.floor( Math.min( width, height ) / sceneSize );
+  },
 });
 
 // ----- model ----- //

diff --git a/demos/houses/index.html b/demos/houses/index.html
@@ -22,7 +22,8 @@
 
     .illo {
       display: block;
-      margin: 0px auto;
+      width: 100%;
+      height: 100%;
       background: #FDB;
       cursor: move;
     }

diff --git a/demos/kirby-parasol/index.html b/demos/kirby-parasol/index.html
@@ -12,28 +12,22 @@
     body {
       min-height: 100%;
       margin: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
       background: #425;
       color: white;
-      font-family: sans-serif;
-      text-align: center;
     }
 
     .illo {
       display: block;
-      margin: 0px auto 20px;
+      width: 100%;
+      height: 100%;
       cursor: move;
     }
   </style>
 
 </head>
 <body>
 
-<div class="container">
-  <canvas class="illo"></canvas>
-</div>
+<canvas class="illo"></canvas>
 
 <script src="../../js/boilerplate.js"></script>
 <script src="../../js/canvas-renderer.js"></script>

diff --git a/demos/kirby-parasol/kirby-parasol.js b/demos/kirby-parasol/kirby-parasol.js
@@ -1,25 +1,8 @@
-// -------------------------- demo -------------------------- //
-
-var illoElem = document.querySelector('.illo');
-var w = 80;
-var h = 80;
-var minWindowSize = Math.min( window.innerWidth, window.innerHeight );
-var zoom = Math.min( 7, Math.floor( minWindowSize / w ) );
-illoElem.setAttribute( 'width', w * zoom );
-illoElem.setAttribute( 'height', h * zoom );
+// ----- setup ----- //
 
+var sceneSize = 80;
 var isSpinning = true;
 var TAU = Zdog.TAU;
-
-var illo = new Zdog.Illustration({
-  element: illoElem,
-  zoom: zoom,
-  dragRotate: true,
-  onDragStart: function() {
-    isSpinning = false;
-  },
-});
-
 // colors
 var pink = '#F8B';
 var blush = '#F5A';
@@ -28,7 +11,19 @@ var shoe = '#D03';
 var red = '#E10';
 var yellow = '#FD0';
 
-// -- illustration shapes --- //
+var illo = new Zdog.Illustration({
+  element: '.illo',
+  dragRotate: true,
+  resize: 'fullscreen',
+  onDragStart: function() {
+    isSpinning = false;
+  },
+  onResize: function( width, height ) {
+    this.zoom = Math.floor( Math.min( width, height ) / sceneSize );
+  },
+});
+
+// ----- model ----- //
 
 var body = new Zdog.Shape({
   stroke: 22,
@@ -263,8 +258,7 @@ new Zdog.Shape({
   }
 })();
 
-// ----- floater stars ----- //
-
+// floater stars
 ( function() {
   for ( var i=0; i < 6; i++ ) {
     var starHolder = new Zdog.Anchor({
@@ -279,7 +273,7 @@ new Zdog.Shape({
   }
 })();
 
-// -- animate --- //
+// ----- animate ----- //
 
 function animate() {
   illo.rotate.y += isSpinning ? -0.03 : 0;