lots of updates to timings

Author: flokleiser

README.md

@@ -53,12 +53,17 @@ ___
 #### Visual:
 - [ ] Finish all the details
     - [x] maybe smaller birds
+    - [x] **Maybe shooting stars**
+    - [x] Fix plane trails?
+    - [ ] toggle borealis automatically
+    - [x] Change chimney smoke color
 
-    - [ ] **Maybe shooting stars**
-
-    - [ ] Fix plane trails?
+- [ ] Fade outs:
+    - [ ] Plane trails
+    - [ ] 
 
-    - [x] Change chimney smoke color
+- [ ] Repeats
+    - [ ] Bird idle
 
 #### End product
 - [ ] Tie everything together
@@ -79,9 +84,9 @@ ___
       - [ ] 
 
     - [ ] Night
-      - [ ] Occasionally turn on borealis
+      - [x] Occasionally turn on borealis
       - [ ] Better night airplanes
-      - [ ] Loop night airplanes
+      - [x] Loop night airplanes
 
 ### Ideas/Brainstorming
 

effects/birdFlock.js

@@ -1,47 +1,90 @@
 var canvasBirdFlock= document.getElementById('canvasBirdFlock');
 var ctxBirdFlock= canvasBirdFlock.getContext('2d')
+var canvasBirdFlockReversed= document.getElementById('canvasBirdFlock2');
+var ctxBirdFlockReversed= canvasBirdFlockReversed.getContext('2d')
 
 canvasBirdFlock.width = 2000
 canvasBirdFlock.height = 2000
 
+canvasBirdFlockReversed.width = 3000
+canvasBirdFlockReversed.height = 3000
+
 var birdFlock= new Image();
 birdFlock.src = "images/birdflock test2.png";
 
-var birdFlockActive 
+var birdFlockReversed= new Image();
+// birdFlockReversed.src = "images/birdflock reversed.png";
+birdFlockReversed.src = "images/birdflock reversed2.png";
+
+var birdFlockActive = false
+var birdFlockActiveReversed = false
+// var birdFlockActiveReversed
+
+var birdFlockReverseInterval
 
 var colsTest = 10;
 var rowsTest = 1;
 
+var colsReversed= 10;
+var rowsReversed= 1;
+
 var totalFramesTest = 10;
 var currentFrameTest = 0;
 var framesDrawnTest = 0;
 
+var totalFramesReversed= 10;
+var currentFrameReversed= 0;
+var framesDrawnReversed= 0;
+
 var srcXTest = 0;
 var srcYTest = 0;
+var srcXReversed= 0;
+var srcYReversed= 0;
 
 var xBirdTest 
 var yBirdTest
+var xBirdReversed
+var yBirdReversed
+
+// var birdSpeedTest
+var birdSpeedReversed
 
 var spriteWidthTest = birdFlock.width/colsTest
 var spriteHeightTest = birdFlock.height/rowsTest
+var spriteWidthReversed= birdFlockReversed.width/colsReversed
+var spriteHeightReversed= birdFlockReversed.height/rowsReversed
 
 xBirdTest = canvasBirdFlock.width - 30
 yBirdTest = canvasBirdFlock.height/4
 
+xBirdReversed= - 120
+yBirdReversed= canvasBirdFlock.height/4.5
+
 birdSpeedTest= -1.2;
+birdSpeedReversed= 1;
+// birdSpeedReversed= 4;
 
 ctxBirdFlock.globalAlpha = 0.4;
+ctxBirdFlockReversed.globalAlpha = 0.3;
 
 
 
 function toggleBirdFlock() {
   birdFlockActive = !birdFlockActive
+  birdFlockActiveReversed = !birdFlockActiveReversed
+
   if (birdFlockActive) {
     animateBirdFlock();
-    console.log('test active')
   }
+
+  if (birdFlockActiveReversed) {
+    setTimeout(function() { 
+      animateBirdFlockReverse();
+    },5000)
+  }
+
   else {
-    console.log('test off')
+    clearInterval(birdFlockReverseInterval)
   }
 }
 
@@ -56,16 +99,18 @@ function animateBirdFlock() {
 
     xBirdTest += birdSpeedTest;
 
-    if (xBirdTest < -30) {
-      // console.log('test');
-      xBirdTest =  canvasBirdFlock.width - 30
+    if (xBirdTest < -60) {
+      setTimeout(function() { 
+      xBirdTest =  canvasBirdFlock.width + 120
+      },5000)
     }
 
     framesDrawnTest++;
         if (framesDrawnTest > 5) { 
             currentFrameTest++;
             framesDrawnTest = 0;
         }
+
     requestAnimationFrame(animateBirdFlock)
   }
   else {
@@ -74,3 +119,33 @@ function animateBirdFlock() {
 }
 
 
+function animateBirdFlockReverse() {
+  // if (birdFlockActiveReversed) {
+  if (birdFlockActiveReversed) {
+    ctxBirdFlockReversed.clearRect(0,0,canvasBirdFlockReversed.width,canvasBirdFlockReversed.height)
+
+    currentFrameReversed= currentFrameReversed% totalFramesReversed;
+    srcXReversed= currentFrameReversed* spriteWidthReversed;
+
+    ctxBirdFlockReversed.drawImage(birdFlockReversed, srcXReversed, srcYReversed, spriteWidthReversed, spriteHeightReversed, xBirdReversed, yBirdReversed, spriteWidthReversed, spriteHeightReversed)
+
+    xBirdReversed += birdSpeedReversed;
+
+    if (xBirdReversed > canvasBirdFlockReversed.width + 60) {
+      setTimeout(function() { 
+        xBirdReversed = -120
+      }, 8000)
+    }
+
+    framesDrawnReversed++;
+      if (framesDrawnReversed> 5) { 
+          currentFrameReversed++;
+          framesDrawnReversed= 0;
+      }
+
+    requestAnimationFrame(animateBirdFlockReverse)
+  }
+  else {
+    ctxBirdFlockReversed.clearRect(0,0,canvasBirdFlockReversed.width,canvasBirdFlockReversed.height);
+  }
+}

effects/borealis.js

@@ -45,10 +45,10 @@ function animateBorealis() {
             framesDrawnB = 0;
         }
 
-        if (borealisOpacity < 0.3) {
+        if (borealisOpacity < 0.2) {
             ctxBorealis.globalAlpha = borealisOpacity
             // borealisOpacity += 0.0005;
-            borealisOpacity += 0.0005;
+            borealisOpacity += 0.0004;
         }
 
     }
@@ -60,7 +60,7 @@ function animateBorealis() {
         if (borealisFadeOut) {
             if (borealisOpacity > 0) {
                 ctxBorealis.globalAlpha = borealisOpacity;
-                borealisOpacity += -0.005;
+                borealisOpacity += -0.0005;
             }
             requestAnimationFrame(animateBorealis);
         }
@@ -72,27 +72,25 @@ function toggleBorealis() {
     borealisActive = !borealisActive;
         if (borealisActive) {
         borealisFadeOut= false;
-        console.log('borealis on')
-        animateBorealis();
-        // canvasBorealis.width = 1000
-        // canvasBorealis.height = 1000
-        // ctxBorealis.drawImage(borealis,0,0,canvasBorealis.width, canvasBorealis.height)
-
-        // ctxBorealis.globalAlpha = 0.3
-        // ctxBorealis.globalAlpha = 1
-        // setTimeout(function(){ 
-        //     // ctxBorealis.filter = "blur(5px)"
-        //     ctxBorealis.globalAlpha = 0.3;
+        setTimeout(function() { 
+            animateBorealis();
+            setTimeout(function() {
+                toggleBorealis();
+            }, 20000)
+            // }, 2000)
+        },15000)
         // },1000)
 
-
     } else {
         borealisFadeOut= true;
-        // console.log('borealis off')
+        console.log('borealis off')
         setTimeout(function() { 
             ctxBorealis.clearRect(0,0,canvasBorealis.width,canvasBorealis.height);     
-            console.log('test')
             borealisFadeOut = false;
-        },3000)
+        },9000)
+        // if (borealisOpacity < 0.1) {
+        //     ctxBorealis.clearRect(0,0,canvasBorealis.width,canvasBorealis.height);     
+        //     borealisFadeOut = false;
+        // }
     }
 }

effects/buttons.js

@@ -12,7 +12,6 @@ $(document).on('click', 'button2', function() {
 });
 
 var cloudyButton= document.createElement('buttonSound');
-// cloudyButton.innerHTML = "<i class='material-icons'>rainy</i>"
 cloudyButton.innerHTML = "<i class='material-icons'>filter_drama</i>"
 cloudyButton.onclick = function() {
     cloudImage(); toggleRain(); toggleClouds(); toggleTitleBool();
@@ -21,17 +20,17 @@ document.body.appendChild(cloudyButton);
 
 var dayButton= document.createElement('buttonSound');
 dayButton.innerHTML = "<i class='material-icons'>sunny</i>"
-// dayButton.onclick= dayImage;
 dayButton.onclick= function() {
-    dayImage(); toggleBird(); 
+    dayImage(); 
+    toggleBird();  
+    toggleBirdFlock(); 
+    togglePlane();
     toggleTitleBool();
-    // toggleTitle();//toggleCloudsDay();
+    toggleCloudsDay();
 }
 document.body.appendChild(dayButton);
 
 var halfNightButton= document.createElement('buttonSound');
-// halfNightButton.textContent = "🌆"
-// halfNightButton.onclick = halfNight;
 halfNightButton.innerHTML = "<i class='material-icons'>wb_twilight</i>"
 halfNightButton.onclick = function() {
     halfNight(); toggleTitleBool(); 
@@ -40,11 +39,9 @@ halfNightButton.onclick = function() {
 document.body.appendChild(halfNightButton);
 
 var fullNightButton= document.createElement('buttonSound');
-// fullNightButton.textContent = "🌃"
-// fullNightButton.textContent = "🌌"
 fullNightButton.innerHTML = "<i class='material-icons'>nights_stay</i>"
 fullNightButton.onclick = function() {
-    fullNight(); toggleStars(); toggleTitleBool(); toggleComet();
+    fullNight(); toggleStars(); toggleTitleBool(); toggleComet(); toggleBorealis();
 }
 document.body.appendChild(fullNightButton);
 

effects/nightPlane.js

@@ -32,7 +32,7 @@ canvasNightPlane.height = 1000;
 xNightPlane = canvasNightPlane.width;
 yNightPlane = canvasNightPlane.height/2;
 
-ctxNightPlane.globalAlpha = 0.2
+ctxNightPlane.globalAlpha = 0.1
 ctxNightPlane.filter = "blur(5px)"
 
 function toggleNightPlane() {