projects / fp-lecture.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 0a1df14)
Animated cloud guy!
authorCameron Ball <cameron@cameron1729.xyz>
Fri, 13 Mar 2020 19:14:34 +0000 (03:14 +0800)
committerCameron Ball <cameron@cameron1729.xyz>
Fri, 13 Mar 2020 19:14:34 +0000 (03:14 +0800)
img/cloudguy.gif [new file with mode: 0644] patch | blob
img/wip/cloudguy-anim.png patch | blob | history
img/wip/f1.png [new file with mode: 0644] patch | blob
img/wip/f2.png [new file with mode: 0644] patch | blob
img/wip/f3.png [new file with mode: 0644] patch | blob
img/wip/f4.png [new file with mode: 0644] patch | blob
img/wip/f5.png [new file with mode: 0644] patch | blob
index.html patch | blob | history

diff --git a/img/cloudguy.gif b/img/cloudguy.gif
new file mode 100644 (file)
index 0000000..7d2a8b9
Binary files /dev/null and b/img/cloudguy.gif differ
diff --git a/img/wip/cloudguy-anim.png b/img/wip/cloudguy-anim.png
index e351fe7..ee6d749 100644 (file)
Binary files a/img/wip/cloudguy-anim.png and b/img/wip/cloudguy-anim.png differ
diff --git a/img/wip/f1.png b/img/wip/f1.png
new file mode 100644 (file)
index 0000000..647282c
Binary files /dev/null and b/img/wip/f1.png differ
diff --git a/img/wip/f2.png b/img/wip/f2.png
new file mode 100644 (file)
index 0000000..8b55d23
Binary files /dev/null and b/img/wip/f2.png differ
diff --git a/img/wip/f3.png b/img/wip/f3.png
new file mode 100644 (file)
index 0000000..286aa4b
Binary files /dev/null and b/img/wip/f3.png differ
diff --git a/img/wip/f4.png b/img/wip/f4.png
new file mode 100644 (file)
index 0000000..6362f67
Binary files /dev/null and b/img/wip/f4.png differ
diff --git a/img/wip/f5.png b/img/wip/f5.png
new file mode 100644 (file)
index 0000000..67dd444
Binary files /dev/null and b/img/wip/f5.png differ
diff --git a/index.html b/index.html
index eddb754..458decc 100644 (file)
--- a/index.html
+++ b/index.html
@@ -57,6 +57,12 @@
          display: flex;
          justify-content: center;
          align-items: center;
+         flex-wrap: wrap;
+     }
+
+     #cgquotes {
+         font-size: 30px;
+         text-shadow: 2px 2px 0 #000;
      }
 
      #slide-1 .slide div {
@@ -110,7 +116,10 @@
 <body>
     <div id="slide-0">
         <div id="cloudguy">
-            <img class="shake-constant shake-slow" style="height: 20%; animation-duration: 15s" src="img/cloudguy.png" />
+            <div style="height: 20%; text-align: center;">
+                <img style="height: 100%; display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px;" src="img/cloudguy.gif" />
+                <div id="cgquotes" style="width: 80%; margin: auto;">Welcome to the talk!</div>
+            </div>
         </div>
     </div>
     <div id="slide-1">
@@ -149,77 +158,76 @@
     .then(x => Promise.resolve(x + " and finally here!"))</code></pre>
             <h1>Haskell</h1>
             <pre><code class="haskell">Right("We start here")
-            <span class="code-friends1" onmouseenter="activateFriends(1);" onmouseleave="deactivateFriends(1);" style="display: inline-block">>>=</span> (\x -> Right (x ++ " then get here"))
+                <span class="code-friends1" onmouseenter="activateFriends(1);" onmouseleave="deactivateFriends(1);" style="display: inline-block">>>=</span> (\x -> Right (x ++ " then get here"))
             >>= (\x -> Right (x ++ " and finally here!"))</code></pre>
         </div>
     </div>
 </body>
 <script>
- (function() {
-     var div, i, j, span, duration = "";
-     var crazyTexts = [];
-     var opacyTexts = [];
-     div = document.querySelectorAll("#rant > span.crazy");
-     for (j = 0; j < div.length; j++) {
-         span=""
-         for (i = 0; i < div[j].innerText.length; i++) {
-             duration = Math.floor(Math.random() * 5) + 100
-             span += "<span class=\"letter shake-constant shake-little\" style=\"animation-duration: " + duration + "ms\">";
-             span += div[j].innerText[i] == " " ? "&nbsp;" : div[j].innerText[i];
-             span += "</span>";
-         }
-         crazyTexts.push(span);
+ var div, i, j, span, duration = "";
+ var crazyTexts = [];
+ var opacyTexts = [];
+ div = document.querySelectorAll("#rant > span.crazy");
+ for (j = 0; j < div.length; j++) {
+     span=""
+     for (i = 0; i < div[j].innerText.length; i++) {
+         duration = Math.floor(Math.random() * 5) + 100
+         span += "<span class=\"letter shake-constant shake-little\" style=\"animation-duration: " + duration + "ms\">";
+         span += div[j].innerText[i] == " " ? "&nbsp;" : div[j].innerText[i];
+         span += "</span>";
      }
+     crazyTexts.push(span);
+ }
 
-     opacities = document.querySelectorAll("#rant > span.shake-opacity");
-     for (k = 0; k < opacities.length; k++) {
-         shrek=Math.random();
-         opacities[k].style.animationDuration = shrek + 's';
-         opacyTexts.push(opacities[k].outerHTML);
-     }
+ opacities = document.querySelectorAll("#rant > span.shake-opacity");
+ for (k = 0; k < opacities.length; k++) {
+     shrek=Math.random();
+     opacities[k].style.animationDuration = shrek + 's';
+     opacyTexts.push(opacities[k].outerHTML);
+ }
 
-     allText = ""
-     for (l = 0; l< crazyTexts.length; l++) {
-         allText+=crazyTexts[l] + "&nbsp;" + (opacyTexts[l] ? opacyTexts[l] : "") + "&nbsp";
-     }
+ allText = ""
+ for (l = 0; l< crazyTexts.length; l++) {
+     allText+=crazyTexts[l] + "&nbsp;" + (opacyTexts[l] ? opacyTexts[l] : "") + "&nbsp";
+ }
 
-     document.getElementById('rant').innerHTML = allText;
+ document.getElementById('rant').innerHTML = allText;
 
-     var x = 0;
-     var y = 0;
-     var b = document.querySelectorAll('body')[0];
-     setInterval(function(){
-         x+=2;
-         y-=2;
-         b.style.backgroundPosition = x + 'px ' + y + 'px';
-     }, 250);
+ var x = 0;
+ var y = 0;
+ var b = document.querySelectorAll('body')[0];
+ setInterval(function(){
+     x+=2;
+     y-=2;
+     b.style.backgroundPosition = x + 'px ' + y + 'px';
+ }, 250);
 
-     urlParts = document.URL.split('#');
-     window.console.log(urlParts);
-     var currentSlide = urlParts.length > 1 ? urlParts[1] : 0;
-     document.getElementById('slide-' + currentSlide).style.display = 'block';
-     document.onkeydown = checkKey;
+ urlParts = document.URL.split('#');
+ window.console.log(urlParts);
+ var currentSlide = urlParts.length > 1 ? urlParts[1] : 0;
+ document.getElementById('slide-' + currentSlide).style.display = 'block';
+ document.onkeydown = checkKey;
 
-     function checkKey(e) {
+ function checkKey(e) {
 
-         e = e || window.event;
-         if (e.keyCode == '37') {
-             if (document.getElementById('slide-' + currentSlide)) {
-                 document.getElementById('slide-' + currentSlide).style.display = 'none';
-             }
-             currentSlide--;
-             document.getElementById('slide-' + currentSlide).style.display = 'block';
+     e = e || window.event;
+     if (e.keyCode == '37') {
+         if (document.getElementById('slide-' + currentSlide)) {
+             document.getElementById('slide-' + currentSlide).style.display = 'none';
          }
-         else if (e.keyCode == '39') {
-             if (document.getElementById('slide-' + currentSlide)) {
-                 document.getElementById('slide-' + currentSlide).style.display = 'none';
-             }
-             currentSlide++;
-             document.getElementById('slide-' + currentSlide).style.display = 'block';
+         currentSlide--;
+         document.getElementById('slide-' + currentSlide).style.display = 'block';
+     }
+     else if (e.keyCode == '39') {
+         if (document.getElementById('slide-' + currentSlide)) {
+             document.getElementById('slide-' + currentSlide).style.display = 'none';
          }
-
+         currentSlide++;
+         document.getElementById('slide-' + currentSlide).style.display = 'block';
      }
- })();
+
+ }
+
  function activateFriends(n) {
      f = document.querySelectorAll('.code-friends' + n);
      f[0].classList.add("shake-constant");
@@ -239,5 +247,29 @@
      f[1].classList.remove("shake-slow");
      f[1].classList.remove("on");
  }
+
+ cloudGuyQuotes = [
+     "Welcome to the talk!",
+     "I hope we'll have fun exploring functional programming together!",
+     "But while we wait let's share interesting facts and anectodes :)",
+     "If you can be disgruntled, can you also be gruntled?",
+     "0.9 recurring is exactly equal to one if you think about it.",
+     "In English, the word \"ghoti\" can be pronounced as \"fish\".",
+     "Your credit card details are somewhere in Pi.",
+     "It takes 366 people to make sure two of them share a birthday, but only 23 people to ensure a 50% chance.",
+     "1729 is the best number (I checked them all).",
+     "The secret to strengh is to eat only a banana for breakfast",
+     "All of Back to the Future happened in the past.",
+     "Everything is in the future."
+ ];
+
+ cgq = document.getElementById("cgquotes");
+ numQuotes = cloudGuyQuotes.length;
+ currentQuote = 0;
+ setInterval(function(){
+     cgq.innerText = cloudGuyQuotes[currentQuote];
+     currentQuote = (currentQuote + 1) % numQuotes;
+ }, 5000);
+
 </script>
 </html>
Interactive functional programming lecture slides