Performance and logo spin improvements

Author: freddxyz

index.html

@@ -74,7 +74,7 @@
                 </div>
                 <div class = "canvas-cover primary-cover">
                     <h1 class = "cover-header">Frederik Davidson</h1>
-                    <p>Thinker and Creator </p>
+                    <p>Engineer and Creator </p>
                 </div>
             </div>
         </div>

js/expanding-circle-canvas-driver.js

@@ -10,8 +10,8 @@ window.onload = () => {
 
     var createTicker = 0;
 
-    var creationInterval = 2;
-    var expandSpeed = 100;
+    var creationInterval = 4;
+    var expandSpeed = 50;
     var prevTick = Date.now();
 
     var testCircle = new Circle(1000, COLOR_RED, context);

js/landing.js

@@ -26,7 +26,7 @@ window.onload = function () {
 
     var baseFontSz = window.innerWidth / 10;
 
-    var text1 = 'Software Developer and Mentor';
+    var text1 = 'Engineer and Creator';
     var text2 = 'This is my website:';
 
     var redirecting = false;
@@ -63,7 +63,7 @@ window.onload = function () {
         } else if (ticker > 1 && ticker < 1.5) {
             squareOffset.x = cosineInterpolate(
                 0,
-                context.measureText('FradZGenius').width / 2 + sqDiag * 0.125,
+                context.measureText('Fred Davidson').width / 2 + sqDiag * 0.125,
                 (ticker - 1) / 0.5
             );
             whiteSquare.size.x = window.innerWidth / 10;
@@ -76,15 +76,15 @@ window.onload = function () {
             squareX = window.innerWidth / 2 - (ticker - 1) * 500;
         } else if (ticker > 1.5 && ticker < 2) {
             squareOffset.x =
-                context.measureText('FradZGenius').width / 2 + sqDiag * 0.125;
+                context.measureText('Fred Davidson').width / 2 + sqDiag * 0.125;
             context.fillStyle =
                 'rgba(255,255,255,' +
                 cosineInterpolate(0, 1, (ticker - 1.5) / 0.5) +
                 ')';
             context.textAlign = 'center';
             context.textBaseline = 'middle';
             context.fillText(
-                'FradZGenius',
+                'Fred Davidson',
                 window.innerWidth / 2 +
                     sqDiag * 1.125 -
                     cosineInterpolate(sqDiag, 0, (ticker - 1.5) / 0.5),
@@ -101,12 +101,12 @@ window.onload = function () {
             );
         } else if (ticker > 2 && ticker < 3) {
             squareOffset.x =
-                context.measureText('FradZGenius').width / 2 + sqDiag * 0.125;
+                context.measureText('Fred Davidson').width / 2 + sqDiag * 0.125;
             context.fillStyle = 'white';
             context.textAlign = 'center';
             context.textBaseline = 'middle';
             context.fillText(
-                'FradZGenius',
+                'Fred Davidson',
                 window.innerWidth / 2 + sqDiag * 1.125,
                 window.innerHeight / 2
             ); ///0.625
@@ -123,7 +123,7 @@ window.onload = function () {
                 cosineInterpolate(1, 0, (ticker - 3) * 2) +
                 ')';
             context.fillText(
-                'FradZGenius',
+                'Fred Davidson',
                 window.innerWidth / 2 +
                     sqDiag * 1.125 -
                     cosineInterpolate(0, sqDiag, (ticker - 3) / 0.5),
@@ -135,7 +135,7 @@ window.onload = function () {
                 (ticker - 3) / 0.5
             );
             squareOffset.x = cosineInterpolate(
-                context.measureText('FradZGenius').width / 2 + sqDiag * 0.125,
+                context.measureText('Fred Davidson').width / 2 + sqDiag * 0.125,
                 0,
                 (ticker - 3) / 0.5
             );

js/main-page-canvas-driver.js

@@ -22,9 +22,9 @@ window.onload = () => {
 
     var lineWidth = 200;
 
-    var lineSpeed = 200;
+    var lineSpeed = 50;
 
-    var frameRate = 40;
+    //var frameRate = 40;
 
     let a = window.innerHeight;
     let c = ROOT_2 * a;
@@ -72,7 +72,7 @@ window.onload = () => {
 
     var draw = (tick) => {
         let now = Date.now();
-        let dt = 1/frameRate;
+        let dt = 1/FRAME_RATE;
         prevTick = now;
 
         if (fadeTicker < 1) {

js/useful.js

@@ -1,4 +1,4 @@
-const FRAME_RATE = 40;
+const FRAME_RATE = 24;
 
 function degToRad(deg) {
     return deg * (Math.PI / 180);
@@ -111,5 +111,5 @@ class vec2 {
 
 const logo = document.getElementById('logo');
 window.onscroll = function () {
-    logo.style.transform = `rotate(${window.pageYOffset / 2}deg)`;
+    logo.style.transform = `rotate(${(window.pageYOffset / window.innerHeight) * 135}deg)`;
 };

style/essential.css

@@ -34,7 +34,7 @@ body {
 }
 
 .logo {
-    transition: transform 1s;
+    transition: transform .1s;
     transition-timing-function: ease-out;
     display: block;
     width: 150px;