fixing alignment

mattdesl · Jun 1, 2018 · 4aafcf6 · 4aafcf6
1 parent 19bb8ac
commit 4aafcf6
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 33 deletions.
diff --git a/src/assets/CSS.js b/src/assets/CSS.js
@@ -8,7 +8,7 @@ module.exports = `
   html {
     font-family: 'Domus', Helvetica, sans-serif;
     display: flex;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
     height: 100%;
     width: 100%;
@@ -17,8 +17,8 @@ module.exports = `
   .canvas-text-container {
     position: absolute;
     color: white;
-    top: 0;
-    left: 0;
+    top: 0.25vmax;
+    left: -0.75vmax;
     width: 100%;
     height: 100%;
     display: flex;
@@ -27,19 +27,20 @@ module.exports = `
   }
 
   .canvas-text {
-    font-size: 1.75vmax;
+    font-size: 1.0vmax;
     text-align: center;
-    width: 27vw;
+    width: 15vw;
     user-select: none;
     position: absolute;
   }
 
+
   .canvas-big-text:not(:empty) + .canvas-text {
-    top: calc(50% - 2.5vmax);
+    top: calc(50% - 1.75vmax);
   }
 
   .canvas-big-text {
-    font-size: 3.75vmax;
+    font-size: 2.5vmax;
     text-align: center;
     width: 27vw;
     user-select: none;
@@ -55,7 +56,7 @@ module.exports = `
   .text-chunk {
     display: inline-block;
     position: relative;
-    margin-right: 3px;
-    margin-left: 3px;
+    margin-right: 0.15vmax;
+    margin-left: 0.15vmax;
   }
 `;
diff --git a/src/createArtwork.js b/src/createArtwork.js
@@ -30,7 +30,7 @@ function createArtwork(canvas, params = {}) {
   // const targetAspect = 1416 / 334
 
   // You can also test full screen, it will give a different look...
-  const useFullscreen = defined(params.fullscreen, query.fullscreen, false);
+  const useFullscreen = defined(params.fullscreen, query.fullscreen, true);
   const autoplay = defined(params.autoplay, query.autoplay, true);
 
   const renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
@@ -73,7 +73,8 @@ function createArtwork(canvas, params = {}) {
   // scene.backgroundValue = app.colorPalette.background;
   // scene.background = new THREE.Color(scene.backgroundValue);
 
-  const isInitiallyIntro = defined(params.intro, query.intro, false);
+  const isIntroDefault = true;
+  const isInitiallyIntro = defined(params.intro, query.intro, isIntroDefault);
   const defaultPreset = isInitiallyIntro ? 'intro0' : 'default';
   const initialPresetKey = defined(params.preset, query.preset, defaultPreset);
 
@@ -135,7 +136,8 @@ function createArtwork(canvas, params = {}) {
       // scene.background = new THREE.Color(scene.backgroundValue);
       // repeated code ends here
 
-      app.intro = opt.intro;
+      const introMode = defined(opt.intro, isIntroDefault);
+      app.intro = introMode;
 
       if (!hasInit) {
         needsStart = true;
@@ -148,7 +150,7 @@ function createArtwork(canvas, params = {}) {
         if (needsStart) {
           traverse('onTrigger', 'start', opt);
         }
-        if (opt.intro) {
+        if (introMode) {
           setPreset('intro0');
           setBackground('#000');
           transitionBackground(presets.intro0.background, {
@@ -171,7 +173,7 @@ function createArtwork(canvas, params = {}) {
         return style;
       };
 
-      if (opt.intro) {
+      if (introMode) {
         styleEl = setupCSS();
 
         setBackground('#000');
@@ -283,16 +285,23 @@ function createArtwork(canvas, params = {}) {
   }
 
   function resize(width, height, pixelRatio) {
-    width = defined(width, window.innerWidth);
-    if (useFullscreen) {
-      height = defined(height, window.innerHeight);
+    if (query.test) {
+      width = defined(width, window.innerWidth);
+      height = useFullscreen ? window.innerHeight : Math.floor(width / targetAspect);
+    } else if (useFullscreen) {
+      // width =
+      width = 6540;
+      height = window.innerHeight;
     } else {
-      height = Math.floor(width / targetAspect);
+
     }
+
     pixelRatio = defined(pixelRatio, window.devicePixelRatio);
 
     if (renderer.getPixelRatio() !== pixelRatio) renderer.setPixelRatio(pixelRatio);
     renderer.setSize(width, height);
+    const el = document.querySelector('.canvas-text-container');
+    el.style.width = `${width}px`;
 
     const aspect = width / height;
     camera.scale.x = aspect;

diff --git a/src/index.js b/src/index.js
@@ -3,13 +3,9 @@ const query = require('./util/query');
 const createArtwork = require('./createArtwork');
 const keycode = require('keycode');
 const canvas = document.querySelector('#canvas');
-const isFullscreen = !!query.fullscreen;
 
 // Create the API. You should only create this once and re-use it.
 const artwork = createArtwork(canvas, {
-  // In the staging link prototype, test with a fixed aspect ratio
-  // In your redux/react app, set this to true to get full width/height
-  fullscreen: isFullscreen
 });
 
 artwork.onFinishIntro = () => {

diff --git a/src/scene/MainScene.js b/src/scene/MainScene.js
@@ -42,9 +42,10 @@ const makeMaterialTypesWeights = (mode, opt = {}) => {
 };
 
 const makeScale = ({ mode, materialType }) => {
+  if (mode === 'ambient' && materialType === 'fill') return RND.randomFloat(0.5, 1);
   return RND.weighted([
-    { weight: 100, value: RND.randomFloat(0.5, 2.5) },
-    { weight: 50, value: RND.randomFloat(0.5, 3) }
+    { weight: 100, value: RND.randomFloat(0.5, 1.0) },
+    { weight: 50, value: RND.randomFloat(0.5, 2) }
   ]);
   // if (RND.randomFloat(1) > 0.75) return RND.randomFloat(0.5, 3);
   // return RND.randomFloat(0.5, 3.0);
@@ -113,7 +114,8 @@ module.exports = class MainScene extends THREE.Object3D {
       return mesh;
     });
 
-    this.textCollider = colliderCircle({ radius: 1.8 });
+    this.textCollider = colliderCircle({ radius: 0.85 });
+    this.textCollider.center.x = -0.1;
     if (this.textCollider.mesh) this.add(this.textCollider.mesh);
   }
 
@@ -192,7 +194,7 @@ module.exports = class MainScene extends THREE.Object3D {
     if (dense) positions.sort((a, b) => b.collisions - a.collisions);
     else positions.sort((a, b) => a.collisions - b.collisions);
 
-    const p = positions[0].position.multiplyScalar(RND.randomFloat(0.8, 1.2));
+    const p = positions[0].position.multiplyScalar(RND.randomFloat(0.5, 1.2));
 
     // ensure it doesn't spawn right in center
     const deltaTxtSq = p.distanceToSquared(textSphere.center);
@@ -204,8 +206,6 @@ module.exports = class MainScene extends THREE.Object3D {
       p.addScaledVector(dir, textSphere.radius);
     }
 
-    // const scalar = RND.randomFloat(0.85, 1.0);
-    // p.multiplyScalar(scalar);
     return p;
   }
 

diff --git a/src/scene/presets.js b/src/scene/presets.js
@@ -1,8 +1,8 @@
 const defaultIntroSettings = {
   foreground: '#FFFFFF',
   mode: 'intro',
-  capacity: 45,
-  initialCapacity: 30,
+  capacity: 55,
+  initialCapacity: 55,
   zigZagCapacity: 0
 };
 
@@ -11,8 +11,8 @@ module.exports = {
     mode: 'default',
     background: '#f3ecda',
     foreground: '#304061',
-    capacity: 35,
-    initialCapacity: 35,
+    capacity: 45,
+    initialCapacity: 45,
     zigZagCapacity: 5,
     colors: [
       { weight: 100, value: '#e10079' },

diff --git a/src/util/createAudio.js b/src/util/createAudio.js
@@ -48,7 +48,7 @@ module.exports = function () {
   const lowpass = context.createBiquadFilter();
   lowpass.type = 'lowpass';
   lowpass.frequency.setValueAtTime(200, context.currentTime);
-  lowpass.connect(context.destination);
+  // lowpass.connect(context.destination);
 
   player.node.connect(lowpass);
   player.node.connect(biquadFilter);