include new font + new button look + logo

torinmb · torinmb · commit b913223142da · 2021-10-07T18:38:14.000-04:00
diff --git a/fonts/RegolaPro-Bold.woff2 b/fonts/RegolaPro-Bold.woff2
diff --git a/fonts/RegolaPro-Book.woff2 b/fonts/RegolaPro-Book.woff2
diff --git a/index.html b/index.html
@@ -10,10 +10,11 @@
   </head>  
   <body>
     <div class="editor-action-buttons">
-      <button class="show-hide-editor">></button>
-      <button class="permalink">permalink</button>
+      <button class="show-hide-editor editor-button">Hide Code</button>
+      <button class="permalink editor-button">Permalink</button>
     </div>
     <div class="code-container"></div>
     <script src="./index.js" type="module"></script>
+    <a href="https://www.shaderpark.com" target="_blank"><h1 class="logo">SHADER PARK</h1></a>
   </body>
 </html>
diff --git a/index.js b/index.js
@@ -4,14 +4,27 @@ import { createSculptureWithGeometry, sculptToThreeJSMaterial } from 'shader-par
 import { spCode } from './src/spCode.js';
 import { initUIInteractions } from './src/ui.js';
 import {createEditor} from './src/editor.js';
+import {Pane} from 'tweakpane';
 
+
+
+// import {font} from './src/helvetiker_regular1.typeface.json';
+
+// let fonts = JSON.parse(font)
 let state = {};
+
+// const pane = new Pane();
+
 initUIInteractions(state);
 
 let startCode = spCode();
 
 let scene = new Scene();
-let params = { time: 0 };
+let params = { time: 0, test: {'x':.2, 'y': .4}};
+// pane.addInput(
+//   params, 'test',
+//   {min: 0, max: 2 }
+// );
 
 let camera = new PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
 camera.position.z = 4;
@@ -46,11 +59,14 @@ let mesh = createSculptureWithGeometry(geometry, startCode, () => ( {
     time: params.time,
     _scale: scale
 } ));
+
+
 scene.add(mesh);
 
 if( 'text' in qParams) {
   const loader = new FontLoader();
-  loader.load( 'https://cdn.glitch.com/44b034f5-6c9a-414c-96b3-8280ecf82f27%2Fhelvetiker_regular.typeface.json?v=1615399030749', function ( font ) {
+
+  loader.load( './helvetiker_regular1.typeface.json', function ( font ) {
     mesh.geometry = new TextBufferGeometry( qParams['text'], {
       font: font,
       size: 2,
@@ -77,6 +93,8 @@ camera.position.z = 2;
 
 window.controls = controls;
 
+const uniformsToExclude = { 'sculptureCenter': 0, 'msdf': 0, 'opacity': 0, 'time': 0, 'stepSize': 0, '_scale' : 1, 'resolution': 0};;
+
 let onCodeChange = (code) => {
   state.code = code;
   try {
@@ -86,7 +104,12 @@ let onCodeChange = (code) => {
     // scene.remove(mesh);
     // scene.add(newMesh);
     // mesh = newMesh;
+
     mesh.material = sculptToThreeJSMaterial(code);
+    let uniforms = mesh.material.uniformDescriptions;
+    uniforms = uniforms.filter(uniform => !(uniform.name in uniformsToExclude))
+    
+    console.log(uniforms);
   } catch (error) {
     console.error(error);
   }
diff --git a/src/ui.js b/src/ui.js
@@ -24,14 +24,18 @@ const createPermaLink = (state) => {
 
 const showHideButtonInteraction = () => {
     let codeContainer = document.querySelector('.code-container');
+    let logo = document.querySelector('.logo');
+    let permalink = document.querySelector('.permalink');
+    let elements = [codeContainer, logo];
+    
     let showHideButton = document.querySelector('.show-hide-editor');
     toggleButton('.show-hide-editor', (active) => {
         if(active) {
-            showHideButton.innerHTML= '>';
-            codeContainer.style.display = 'block';
+            showHideButton.innerHTML= 'Hide Code';
+            elements.forEach(el => el.style.display = 'block');
         } else {
-            showHideButton.innerHTML= '^';
-            codeContainer.style.display = 'none';
+            showHideButton.innerHTML= 'Show Code';
+            elements.forEach(el => el.style.display = 'none');
         }
     });
     // showHideButton.addEventListener('click', (el) => {
diff --git a/style.css b/style.css
@@ -1,5 +1,12 @@
 /* CSS files add styling rules to your content */
 
+@font-face {
+  font-family: 'Regolapro';
+  src: url('./fonts/RegolaPro-Book.woff2') format('opentype');
+  font-weight: 700;
+  font-style: normal;
+}
+
 body {
   font-family: helvetica, arial, sans-serif;
   margin: 2em;
@@ -14,7 +21,7 @@ body {
 .code-container {
   position: fixed;
   left: 0px;
-  top: 20px;
+  top: 30px;
   width: 50vw;
   height: 100vh;
 }
@@ -25,10 +32,6 @@ body {
   }
 }
 
-h1 {
-  font-style: italic;
-  color: #373fff;
-}
 
 canvas {
   width: 100%;
@@ -44,4 +47,34 @@ canvas {
   position: fixed;
   top: 0px;
   left: 0px;
+}
+
+.logo {
+  position: fixed;
+  right: 15px;
+  bottom: 10px;
+  margin: 0px;
+  padding: 0px;
+  color: white;
+  font-family: Regolapro;
+  font-weight: 700;
+}
+
+.editor-button {
+  padding: 5px 15px 5px 15px;
+  border-radius: 50px;
+  /* border: 1px solid lightgrey; */
+  /* box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15); */
+  margin-top: 2.5px;
+  transition: all 300ms ease-in-out ;
+  color: rgb(165, 165, 165);
+  border-color: rgb(165, 165, 165);
+  background-color: transparent;
+  -webkit-transition: all 300ms ease-in-out;
+  cursor: pointer;
+}
+.editor-button:hover {
+    color: white;
+    border-color: white;
+    /* box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2); */
 }
