Fixed animation, reduced fps, changed information

Fixed the sliding animation on the first page to be less graphically intensive and work better, plus lowered the FPS. Also changed the text on a few pages to make it more formal and presentable.

Author: freddxyz

about.html

@@ -95,20 +95,17 @@ <h1 class = "card-title">
                                 Who Am I?
                             </h1>
                             <p class = "card-text">
-                                I'm Fred. Hello.
-
+                                I am a rising high school senior and the programming team lead for FRC Team 6423. 
                             </p>
                         </div>
                         <div class = "showcase-card">
                             <h1 class = "card-title">
                                 Interests
                             </h1>
                             <p class = "card-text">
-                                Some of my interests include game development, web development, programming, math, computer science, and really just building anything in general.
-                                I also like to teach my skills to others. I am currently working part time as a Mentor/Student Mentor at 
-                                <a class = "link-in-text" href = "https://kidoyo.com/" target = "_blank" rel = "noopener noreferrer">KidOYO</a>
-                                and I run a <a class = "link-in-text" href = "https://www.youtube.com/channel/UCxkhPyPBxjc_AfXWWrP_JGw" target = "_blank" rel = "noopener noreferrer">YouTube channel</a>
-                                where I post videos teaching people how to build cool stuff.
+                                Some of my interests include game development, embedded systems, software, math, computer science, and engineering.
+                                I also like to teach my skills to others. I currently run a <a class = "link-in-text" href = "https://www.youtube.com/channel/UCxkhPyPBxjc_AfXWWrP_JGw" target = "_blank" rel = "noopener noreferrer">YouTube channel</a>
+                                where I sometimes post videos teaching people how to build cool stuff.
 
                             </p>
                         </div>
@@ -117,7 +114,7 @@ <h1 class = "card-title">
                                 Other Things I Like To Do
                             </h1>
                             <p class = "card-text">
-                                I like to ski, play badminton, swim, bike, and occasionally play video games.
+                                I like to ski, play badminton, swim, bike, and work on personal projects.
 
                             </p>
                         </div>
@@ -132,7 +129,7 @@ <h1 class = "card-title">
                                 Discord: fredd#5872
                             </p>
                             <p class = "card-text">
-                                Email: thefradzgenius@gmail.com
+                                Email: freddy.davidson@yahoo.com
                             </p>
                         </div>
                     </div>

index.html

@@ -73,8 +73,8 @@
                     <canvas class = "background-canvas" id = "canvas"></canvas>
                 </div>
                 <div class = "canvas-cover primary-cover">
-                    <h1 class = "cover-header">Hi, I'm Fred.</h1>
-                    <p>I like programming, computer science, math, and game development. IDK what else to put here</p>
+                    <h1 class = "cover-header">Frederik Davidson</h1>
+                    <p>Software Developer</p>
                 </div>
             </div>
         </div>

js/expanding-circle-canvas-driver.js

@@ -103,7 +103,6 @@ window.onload = () => {
     var dt = 0;
 
     var draw = () => {
-        requestAnimationFrame(draw);
         if (window.innerWidth < MIN_WIDTH) {
             return;
         }
@@ -121,6 +120,8 @@ window.onload = () => {
         circleCreation();
 
         deleteCircles();
+        setTimeout(()=>{requestAnimationFrame(draw);}, 1000/FRAME_RATE);
+        
     };
 
     window.onfocus = window.onresize = initCircles;

js/landing.js

@@ -26,8 +26,8 @@ window.onload = function () {
 
     var baseFontSz = window.innerWidth / 10;
 
-    var text1 = 'Mentor and Game Developer';
-    var text2 = 'Welcome to My Site.';
+    var text1 = 'Software Developer and Mentor';
+    var text2 = 'This is my website:';
 
     var redirecting = false;
 

js/main-page-canvas-driver.js

@@ -16,33 +16,36 @@ window.onload = () => {
 
     var lastColor = 'white';
 
+    var trailingLine;
+
     var ROOT_2 = Math.sqrt(2);
 
     var lineWidth = 200;
 
     var lineSpeed = 200;
 
+    var frameRate = 40;
+
     let a = window.innerHeight;
     let c = ROOT_2 * a;
     let b = Math.sqrt(Math.pow(c, 2) - Math.pow(a, 2));
-    let sqDiag = lineWidth * ROOT_2;
-
+    let sqDiag = 2 * Math.cos(degToRad(45)) * lineWidth;//lineWidth * (ROOT_2/2);
+    //2cos(45 deg) / width
     var initLines = () => {
         a = window.innerHeight;
         c = ROOT_2 * a;
         b = Math.sqrt(Math.pow(c, 2) - Math.pow(a, 2));
         let linesRequired =
-            Math.ceil((window.innerWidth + b + sqDiag) / sqDiag) + 1;
+            Math.ceil(window.innerWidth/sqDiag)+1//Math.ceil((window.innerWidth + b + sqDiag) / sqDiag) + 1;
         linesRequired =
             linesRequired % 2 == 0 ? linesRequired : linesRequired + 1;
 
         lines = [];
-        console.log(linesRequired);
         lastColor = 'white';
-        for (let i = 0; i < linesRequired; i++) {
+        for (let i = linesRequired; i > 0; i--) {
             let rect = new Rectangle(lineWidth, 100000, COLOR_WHITE, context);
             rect.rotation = 45;
-            rect.position = new vec2(i * sqDiag - sqDiag, 0);
+            rect.position = new vec2(i * sqDiag,0) //- sqDiag, 0);
             if (lastColor == 'red') {
                 rect.color = COLOR_WHITE;
                 lastColor = 'white';
@@ -51,6 +54,7 @@ window.onload = () => {
                 lastColor = 'red';
             }
             lines.push(rect);
+            trailingLine = rect;
         }
         if (lastColor == 'red') {
             lastColor = 'white';
@@ -68,7 +72,7 @@ window.onload = () => {
 
     var draw = (tick) => {
         let now = Date.now();
-        let dt = Math.min((now - prevTick) / 1000, 1);
+        let dt = 1/frameRate;
         prevTick = now;
 
         if (fadeTicker < 1) {
@@ -78,19 +82,21 @@ window.onload = () => {
 
         canvas.width = window.innerWidth;
         canvas.height = window.innerHeight + 50;
-        if (ticker >= sqDiag / lineSpeed) {
+        if (trailingLine.position.x > 0){//ticker >= (sqDiag) / lineSpeed) {
+            console.log(trailingLine.color)
             ticker = 0;
             let rect = new Rectangle(lineWidth, 100000, COLOR_WHITE, context);
             rect.rotation = 45;
-            if (lastColor == 'red') {
+            if (trailingLine.color == COLOR_RED) {
                 rect.color = COLOR_WHITE;
                 lastColor = 'white';
             } else {
                 rect.color = COLOR_RED;
                 lastColor = 'red';
             }
-            rect.position = new vec2(-sqDiag, 0);
+            rect.position = new vec2(trailingLine.position.x - sqDiag, 0);
             lines.push(rect);
+            trailingLine = rect;
         }
         let newLines = [];
         lines.forEach((item) => {
@@ -103,7 +109,7 @@ window.onload = () => {
         });
         lines = newLines;
         ticker += dt;
-        requestAnimationFrame(draw);
+        setTimeout(()=>{requestAnimationFrame(draw);}, (1/FRAME_RATE) * 1000);
     };
 
     window.onfocus = () => {

js/useful.js

@@ -1,3 +1,9 @@
+const FRAME_RATE = 40;
+
+function degToRad(deg) {
+    return deg * (Math.PI / 180);
+}
+
 function randint(min, max) {
     return Math.floor(Math.random() * max) + min;
 }