Folding in click drag changes to release demos, editing index page to…

… make demo links more obvious, moving mountain up in viewer
JGL · Nov 13, 2016 · 65bd572 · 65bd572
1 parent fceda58
commit 65bd572
Show file tree

Hide file tree

Showing 22 changed files with 13,020 additions and 11,858 deletions.
diff --git a/docs/build.js b/docs/build.js
diff --git a/docs/buildForRelease.js b/docs/buildForRelease.js
diff --git a/docs/cameraAndMouseAndTouch.html b/docs/cameraAndMouseAndTouch.html
@@ -19,5 +19,40 @@
       <!--Light-->
       <a-entity light="type: ambient;"></a-entity>
     </a-scene>
+    <script>
+      function randomHsl() {
+        //via http://stackoverflow.com/a/25873123/7116094 and http://caniuse.com/#feat=css3-colors so valid
+        return 'hsla(' + (Math.random() * 360) + ', 100%, 50%, 1)';
+      }
+      function randomRgb(){
+        //via https://www.sitepoint.com/generating-random-color-values/
+        return 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
+      }
+      function randomVec3(){
+        return {x: Math.floor(Math.random() * 10)-5, y: Math.floor(Math.random() * 10)-5, z: Math.floor(Math.random() * 10)-5};
+      }
+      function generateNewMountain() {
+        //how to make functions http://www.w3schools.com/js/js_functions.asp
+        //Gaining access to the landscape element via it's ID
+        var mountainEl = document.querySelector('#mountain');
+        mountainEl.components['mountain'].update(); //tip from Don McCurdy
+        mountainEl.setAttribute('color', randomHsl());
+        mountainEl.setAttribute('shadowColor', randomHsl());
+        mountainEL.setAttribute('sunPosition', randomVec3());
+        //- console.log("New color is: ", mountainEl.getAttribute('color'));
+      }
+      document.addEventListener("click", function(){
+        //via http://www.w3schools.com/jsref/met_document_addeventlistener.asp
+        //and https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
+        console.log("Click event");
+        generateNewMountain();
+      });
+      document.addEventListener("touchend", function(){
+        //via https://developer.mozilla.org/en-US/docs/Web/Events/touchend
+        //and https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW6
+        console.log("Touchend event");
+        generateNewMountain();
+      });        
+    </script>
   </body>
 </html>
diff --git a/docs/fasterStaticPanorama.html b/docs/fasterStaticPanorama.html
@@ -15,12 +15,47 @@
       <a-entity position="0 0 0" rotation="0 0 0">
         <a-entity camera look-controls></a-entity>
       </a-entity>
-      <!--Mountain, seems to be on a large scale!-->
+      <!--Mountain-->
       <a-mountain id="mountain" color="rgb(128,0,128)" shadowColor="rgb(255,165,0)" world-depth="128" world-width="128" position="0 2000 0" material-side-modifier-mountain></a-mountain>
       <!--Sky-->
       <a-sky src="#sky"></a-sky>
       <!--Light-->
       <a-entity light="type: ambient;"></a-entity>
     </a-scene>
   </body>
+  <script>
+    function randomHsl() {
+      //via http://stackoverflow.com/a/25873123/7116094 and http://caniuse.com/#feat=css3-colors so valid
+      return 'hsla(' + (Math.random() * 360) + ', 100%, 50%, 1)';
+    }
+    function randomRgb(){
+      //via https://www.sitepoint.com/generating-random-color-values/
+      return 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
+    }
+    function randomVec3(){
+      return {x: Math.floor(Math.random() * 10)-5, y: Math.floor(Math.random() * 10)-5, z: Math.floor(Math.random() * 10)-5};
+    }
+    function generateNewMountain() {
+      //how to make functions http://www.w3schools.com/js/js_functions.asp
+      //Gaining access to the landscape element via it's ID
+      var mountainEl = document.querySelector('#mountain');
+      mountainEl.components['mountain'].update(); //tip from Don McCurdy
+      mountainEl.setAttribute('color', randomHsl());
+      mountainEl.setAttribute('shadowColor', randomHsl());
+      mountainEL.setAttribute('sunPosition', randomVec3());
+      //- console.log("New color is: ", mountainEl.getAttribute('color'));
+    }
+    document.addEventListener("click", function(){
+      //via http://www.w3schools.com/jsref/met_document_addeventlistener.asp
+      //and https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
+      console.log("Click event");
+      generateNewMountain();
+    });
+    document.addEventListener("touchend", function(){
+      //via https://developer.mozilla.org/en-US/docs/Web/Events/touchend
+      //and https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW6
+      console.log("Touchend event");
+      generateNewMountain();
+    });
+  </script>
 </html>
diff --git a/docs/index.html b/docs/index.html
@@ -6,7 +6,12 @@
     <meta name="description" content="Demonstration Files for the A piece of Art as big as India project">
   </head>
   <body>
-    <p>A series of demonstration and test files for <a href="http://joelgethinlewis.com/category/projects/a-piece-of-art-as-big-as-india/">A piece of Art as big as India project</a> by <a href="http://www.joelgethinlewis.com">Joel Gethin Lewis</a>.</p>
+    <p>Demonstration files for user testing in India:</p>
+    <ol>
+      <li><h1><a href="releaseAR.html">Augmented Reality version for Google Pixel phones and laptops with cameras</a>.</h1></li>
+      <li><h1><a href="releaseStaticPanorama.html">Panorama version for iPhones and laptops or computers without cameras</a>.</h1></li>
+    </ol>
+    <p>A series of demonstration and test files for <a href="http://joelgethinlewis.com/category/projects/a-piece-of-art-as-big-as-india/">A piece of Art as big as India project</a> by <a href="http://www.joelgethinlewis.com">Joel Gethin Lewis</a>.</p>    
     <ol>
       <li><a href="AFrameTest.html">A-Frame Boilerplate demo</a>.</li>
       <li><a href="aframe-heightgrid-component/examples/basic/index.html"><i>Non-functioning</i> basic HeightGrid demo</a> via <a href="https://github.com/andreasplesch/aframe-heightgrid-component">HeightGrid Component</a> by <a href="https://github.com/andreasplesch">andreasplesch</a>.</li>

diff --git a/docs/mountainComponentWithColliderCheckAndUpdate.html b/docs/mountainComponentWithColliderCheckAndUpdate.html
@@ -17,7 +17,7 @@
           <a-entity raycaster="objects: .clickable" cursor="fuse: true; fuseTimeout: 500" position="0 0 -10" geometry="primitive: ring" material="color: black; shader: flat"></a-entity>
         </a-entity>
       </a-entity>
-      <!--Mountain, seems to be on a large scale!-->
+      <!--Mountain,-->
       <a-mountain class="clickable" id="mountain" color="rgb(128,0,128)" shadowColor="rgb(255,165,0)" position="0 2000 0" material-side-modifier-mountain collider-check-and-update></a-mountain>
       <!--Sky-->
       <a-sky src="#sky"></a-sky>

diff --git a/docs/mountainComponentWithMouseAndTouchInteraction.html b/docs/mountainComponentWithMouseAndTouchInteraction.html
@@ -15,7 +15,7 @@
       <a-entity position="0 0 0" rotation="0 0 0">
         <a-entity camera look-controls></a-entity>
       </a-entity>
-      <!--Mountain, seems to be on a large scale!-->
+      <!--Mountain-->
       <a-mountain id="mountain" color="rgb(128,0,128)" shadowColor="rgb(255,165,0)" position="0 2000 0" material-side-modifier-mountain></a-mountain>
       <!--Sky-->
       <a-sky src="#sky"></a-sky>

diff --git a/docs/releaseAR.html b/docs/releaseAR.html
@@ -16,9 +16,35 @@
         <a-entity camera look-controls></a-entity>
       </a-entity>
       <!--Mountain-->
-      <a-mountain id="mountain" color="rgb(128,0,128)" shadowColor="rgb(255,165,0)" world-depth="128" world-width="128" position="0 2000 0" material-side-modifier-mountain></a-mountain>
+      <a-mountain id="mountain" click-drag color="rgb(128,0,128)" shadowColor="rgb(255,165,0)" world-depth="128" world-width="128" position="0 3000 0" material-side-modifier-mountain></a-mountain>
       <!--Light-->
       <a-entity light="type: ambient;"></a-entity>
     </a-scene>
   </body>
+  <script>
+    document.querySelector('#mountain').addEventListener('dragstart', function(e) {
+      generateNewMountain();
+    });
+    function randomHsl() {
+      //via http://stackoverflow.com/a/25873123/7116094 and http://caniuse.com/#feat=css3-colors so valid
+      return 'hsla(' + (Math.random() * 360) + ', 100%, 50%, 1)';
+    }
+    function randomRgb(){
+      //via https://www.sitepoint.com/generating-random-color-values/
+      return 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
+    }
+    function randomVec3(){
+      return {x: Math.floor(Math.random() * 10)-5, y: Math.floor(Math.random() * 10)-5, z: Math.floor(Math.random() * 10)-5};
+    }
+    function generateNewMountain() {
+      //how to make functions http://www.w3schools.com/js/js_functions.asp
+      //Gaining access to the landscape element via it's ID
+      var mountainEl = document.querySelector('#mountain');
+      mountainEl.components['mountain'].update(); //tip from Don McCurdy
+      mountainEl.setAttribute('color', randomHsl());
+      mountainEl.setAttribute('shadowColor', randomHsl());
+      mountainEl.setAttribute('sunPosition', randomVec3());
+      //- console.log("New color is: ", mountainEl.getAttribute('color'));
+    }
+  </script>
 </html>
diff --git a/docs/releaseStaticPanorama.html b/docs/releaseStaticPanorama.html
@@ -16,11 +16,37 @@
         <a-entity camera look-controls></a-entity>
       </a-entity>
       <!--Mountain-->
-      <a-mountain id="mountain" color="rgb(128,0,128)" shadowColor="rgb(255,165,0)" world-depth="128" world-width="128" position="0 2000 0" material-side-modifier-mountain></a-mountain>
+      <a-mountain id="mountain" click-drag color="rgb(128,0,128)" shadowColor="rgb(255,165,0)" world-depth="128" world-width="128" position="0 3000 0" material-side-modifier-mountain></a-mountain>
       <!--Sky-->
       <a-sky src="#sky"></a-sky>
       <!--Light-->
       <a-entity light="type: ambient;"></a-entity>
     </a-scene>
   </body>
+  <script>
+    document.querySelector('#mountain').addEventListener('dragstart', function(e) {
+      generateNewMountain();
+    });
+    function randomHsl() {
+      //via http://stackoverflow.com/a/25873123/7116094 and http://caniuse.com/#feat=css3-colors so valid
+      return 'hsla(' + (Math.random() * 360) + ', 100%, 50%, 1)';
+    }
+    function randomRgb(){
+      //via https://www.sitepoint.com/generating-random-color-values/
+      return 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
+    }
+    function randomVec3(){
+      return {x: Math.floor(Math.random() * 10)-5, y: Math.floor(Math.random() * 10)-5, z: Math.floor(Math.random() * 10)-5};
+    }
+    function generateNewMountain() {
+      //how to make functions http://www.w3schools.com/js/js_functions.asp
+      //Gaining access to the landscape element via it's ID
+      var mountainEl = document.querySelector('#mountain');
+      mountainEl.components['mountain'].update(); //tip from Don McCurdy
+      mountainEl.setAttribute('color', randomHsl());
+      mountainEl.setAttribute('shadowColor', randomHsl());
+      mountainEl.setAttribute('sunPosition', randomVec3());
+      //- console.log("New color is: ", mountainEl.getAttribute('color'));
+    }
+  </script>
 </html>
diff --git a/docs/touchMountain.html b/docs/touchMountain.html
@@ -15,7 +15,7 @@
       <a-entity position="0 0 0" rotation="0 0 0">
         <a-entity camera look-controls></a-entity>
       </a-entity>
-      <!--Mountain, seems to be on a large scale!-->
+      <!--Mountain-->
       <a-mountain id="mountain" click-drag color="rgb(128,0,128)" shadowColor="rgb(255,165,0)" position="0 2000 0" material-side-modifier-mountain></a-mountain>
       <!--Sky-->
       <a-sky src="#sky"></a-sky>

diff --git a/docs/withCamera.html b/docs/withCamera.html
@@ -14,7 +14,7 @@
       <a-entity position="0 0 0" rotation="0 0 0">
         <a-entity camera look-controls></a-entity>
       </a-entity>
-      <!--Mountain, seems to be on a large scale!-->
+      <!--Mountain-->
       <a-mountain id="mountain" color="rgb(128,0,128)" shadowColor="rgb(255,165,0)" position="0 2000 0" material-side-modifier-mountain></a-mountain>
       <!--Light-->
       <a-entity light="type: ambient;"></a-entity>

diff --git a/package.json b/package.json
@@ -29,13 +29,13 @@
   "dependencies": {
     "aframe": "^0.3.2",
     "aframe-animation-component": "^3.0.4",
+    "aframe-click-drag-component": "^2.0.0",
     "aframe-event-set-component": "^3.0.1",
     "aframe-extras": "^2.6.0",
     "aframe-layout-component": "^3.0.1",
     "aframe-mountain-component": "^0.3.1",
     "aframe-template-component": "^3.1.1",
     "aframe-terrain-model-component": "^0.1.0",
-    "aframe-click-drag-component": "^2.0.0",
     "browser-sync": "^2.17.5",
     "browserify": "^13.1.1",
     "express": "^4.14.0",

diff --git a/src/js/main.js b/src/js/main.js
@@ -27,7 +27,6 @@ require('./material-side-modifier-ocean.js');
 require('./collider-check.js');
 //now trying to run the update() method of an attached component using the collider to attach
 require('./collider-check-and-update.js');
-
 //var clickdrag = require('aframe-click-drag-component');
-var clickdrag = require('clickdrag.js');
+var clickdrag = require('./clickdrag.js');
 clickdrag.default(AFRAME);
diff --git a/src/js/mainForRelease.js b/src/js/mainForRelease.js
@@ -3,4 +3,7 @@ require('aframe-mountain-component');
 //second interaction demo, working with the Mountain component instead
 require('./material-side-modifier-mountain.js');
 //starting up touch and click events and random functions
-require('./touchEventsAndClickEventsAndRandomColours.js');
+//require('./touchEventsAndClickEventsAndRandomColours.js'); //folded in individually now...
+//click and drag
+var clickdrag = require('./clickdrag.js');
+clickdrag.default(AFRAME);
diff --git a/src/pug/cameraAndMouseAndTouch.pug b/src/pug/cameraAndMouseAndTouch.pug
@@ -16,3 +16,37 @@ html
       a-mountain(id='mountain' color='rgb(128,0,128)' shadowColor='rgb(255,165,0)' position='0 2000 0' material-side-modifier-mountain)
       //Light
       a-entity(light='type: ambient;')
+    script.
+      function randomHsl() {
+        //via http://stackoverflow.com/a/25873123/7116094 and http://caniuse.com/#feat=css3-colors so valid
+        return 'hsla(' + (Math.random() * 360) + ', 100%, 50%, 1)';
+      }
+      function randomRgb(){
+        //via https://www.sitepoint.com/generating-random-color-values/
+        return 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
+      }
+      function randomVec3(){
+        return {x: Math.floor(Math.random() * 10)-5, y: Math.floor(Math.random() * 10)-5, z: Math.floor(Math.random() * 10)-5};
+      }
+      function generateNewMountain() {
+        //how to make functions http://www.w3schools.com/js/js_functions.asp
+        //Gaining access to the landscape element via it's ID
+        var mountainEl = document.querySelector('#mountain');
+        mountainEl.components['mountain'].update(); //tip from Don McCurdy
+        mountainEl.setAttribute('color', randomHsl());
+        mountainEl.setAttribute('shadowColor', randomHsl());
+        mountainEL.setAttribute('sunPosition', randomVec3());
+        //- console.log("New color is: ", mountainEl.getAttribute('color'));
+      }
+      document.addEventListener("click", function(){
+        //via http://www.w3schools.com/jsref/met_document_addeventlistener.asp
+        //and https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
+        console.log("Click event");
+        generateNewMountain();
+      });
+      document.addEventListener("touchend", function(){
+        //via https://developer.mozilla.org/en-US/docs/Web/Events/touchend
+        //and https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW6
+        console.log("Touchend event");
+        generateNewMountain();
+      });        
diff --git a/src/pug/fasterStaticPanorama.pug b/src/pug/fasterStaticPanorama.pug
@@ -14,9 +14,43 @@ html
       //Camera
       a-entity(position='0 0 0' rotation='0 0 0')
         a-entity(camera look-controls)
-      //Mountain, seems to be on a large scale!
+      //Mountain
       a-mountain(id='mountain' color='rgb(128,0,128)' shadowColor='rgb(255,165,0)' world-depth='128' world-width='128' position='0 2000 0' material-side-modifier-mountain)
       //Sky
       a-sky(src='#sky')
       //Light
       a-entity(light='type: ambient;')
+  script.
+    function randomHsl() {
+      //via http://stackoverflow.com/a/25873123/7116094 and http://caniuse.com/#feat=css3-colors so valid
+      return 'hsla(' + (Math.random() * 360) + ', 100%, 50%, 1)';
+    }
+    function randomRgb(){
+      //via https://www.sitepoint.com/generating-random-color-values/
+      return 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
+    }
+    function randomVec3(){
+      return {x: Math.floor(Math.random() * 10)-5, y: Math.floor(Math.random() * 10)-5, z: Math.floor(Math.random() * 10)-5};
+    }
+    function generateNewMountain() {
+      //how to make functions http://www.w3schools.com/js/js_functions.asp
+      //Gaining access to the landscape element via it's ID
+      var mountainEl = document.querySelector('#mountain');
+      mountainEl.components['mountain'].update(); //tip from Don McCurdy
+      mountainEl.setAttribute('color', randomHsl());
+      mountainEl.setAttribute('shadowColor', randomHsl());
+      mountainEL.setAttribute('sunPosition', randomVec3());
+      //- console.log("New color is: ", mountainEl.getAttribute('color'));
+    }
+    document.addEventListener("click", function(){
+      //via http://www.w3schools.com/jsref/met_document_addeventlistener.asp
+      //and https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
+      console.log("Click event");
+      generateNewMountain();
+    });
+    document.addEventListener("touchend", function(){
+      //via https://developer.mozilla.org/en-US/docs/Web/Events/touchend
+      //and https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW6
+      console.log("Touchend event");
+      generateNewMountain();
+    });
diff --git a/src/pug/mountainComponentWithColliderCheckAndUpdate.pug b/src/pug/mountainComponentWithColliderCheckAndUpdate.pug
@@ -18,7 +18,7 @@ html
             position='0 0 -10'
             geometry='primitive: ring'
             material='color: black; shader: flat')
-      //Mountain, seems to be on a large scale!
+      //Mountain,
       a-mountain(id='mountain' color='rgb(128,0,128)' shadowColor='rgb(255,165,0)' position='0 2000 0' class="clickable" material-side-modifier-mountain collider-check-and-update)
       //Sky
       a-sky(src='#sky')

diff --git a/src/pug/mountainComponentWithMouseAndTouchInteraction.pug b/src/pug/mountainComponentWithMouseAndTouchInteraction.pug
@@ -14,7 +14,7 @@ html
       //Camera
       a-entity(position='0 0 0' rotation='0 0 0')
         a-entity(camera look-controls)
-      //Mountain, seems to be on a large scale!
+      //Mountain
       a-mountain(id='mountain' color='rgb(128,0,128)' shadowColor='rgb(255,165,0)' position='0 2000 0' material-side-modifier-mountain)
       //Sky
       a-sky(src='#sky')