diff --git a/ahhh.html b/ahhh.html new file mode 100644 index 0000000..22dde55 --- /dev/null +++ b/ahhh.html @@ -0,0 +1,125 @@ + + + + + An Interactive Comic + + + + + + + + + + + + + + +
+ +
+
+ HOW TO REMEMBER ANYTHING FOREVER-ISH +
+
+ by nicky case · oct 2018 +
+
+
+ +


+


+


+


+ + +
+ +
+
+ THE SCIENCE of + SPACED REPETITION +
+ +
+
+ +


+


+


+


+


+ + + +
+ +
+
+ THE ART of + SPACED REPETITION +
+ +
+
+ +


+


+


+


+


+ + + +
+ +
+
+ GET STARTED TODAY! +
+ +
+
+ +


+


+


+ + + +
+ + + + + Intro + +· + + The Science + +· + + The Art + +· + + Get Started! + +· + + Credits + + + +
+ + + + + + + + diff --git a/css/comic.css b/css/comic.css index b18f7dd..c630dff 100644 --- a/css/comic.css +++ b/css/comic.css @@ -10,6 +10,7 @@ html, body{ width:100%; height:100%; + scroll-behavior: smooth; } body{ background: #eeeeee; @@ -34,38 +35,61 @@ a{ /**********/ .divider{ - background: #000; - background-image: url(../pics/bg.png); - background-size: 150px; - + position: relative; width: 100%; - /*height: 200px;*/ color: #fff; text-align: center; - padding: 50px 0; } -.divider > div{ +.divider_small_height{ + height: 220px; +} +.divider_big_height{ + height: 300px; +} +@media (max-width:1000px) { + .divider_small_height{ + height: 290px; + } + .divider_big_height{ + height: 370px; + } +} +.divider > #divider_container{ + width: 100%; + position: absolute; + margin-top: 50px; + pointer-events: none; +} +.divider > #divider_container > div{ width: calc(100% - 100px); - min-width: 600px; + min-width: 550px; max-width: 960px; margin: 0 auto; } -.divider > #chapter_name{ +.divider > #divider_container > #chapter_name{ font-size: 100px; line-height: 0.75em; text-align: left; margin-bottom: 10px; } -.divider > #chapter_links{ +.divider > #divider_container > #chapter_links{ text-align: right; + pointer-events: all; } -.divider .small_of{ +.divider > #divider_container > .small_of{ font-size:0.75em; line-height:0; } -.divider > #chapter_subtitle{ +.divider > #divider_container > #chapter_subtitle{ text-align: right; font-size: 30px; } +.divider > iframe{ + width:100%; + height:100%; + position: absolute; + border: none; + top:0; left:0; +} /*********/ diff --git a/full.html b/full.html index 291e124..74e3d46 100644 --- a/full.html +++ b/full.html @@ -4,6 +4,7 @@ An Interactive Comic + @@ -16,12 +17,15 @@ -
-
- [todo: come up with a title] -
-
- by nicky case · oct 2018 +
+ +
+
+ [todo: some friggin' title] +
+
+ by nicky case · oct 2018 +
@@ -225,16 +229,15 @@ Like so: -
-
- THE SCIENCE - - of - -
- SPACED REPETITION +
+ +
+
+ THE SCIENCE of + SPACED REPETITION +
+
-
@@ -555,16 +558,15 @@ It’s actually so simple, you can even create your own automatic scheduler... -
-
- THE ART - - of - -
- SPACED REPETITION +
+ +
+
+ THE ART of + SPACED REPETITION +
+
-
@@ -1051,11 +1053,14 @@ It’s actually so simple, you can even create your own automatic scheduler... -
-
- GET STARTED TODAY! +
+ +
+
+ GET STARTED TODAY! +
+
-
@@ -1475,7 +1480,7 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter - + diff --git a/js/comic.js b/js/comic.js index 56b3441..246a008 100644 --- a/js/comic.js +++ b/js/comic.js @@ -48,8 +48,11 @@ window.onload = function(){ // Create & append iframe var iframe = document.createElement("iframe"); - iframe.src = sim.getAttribute("src"); + //iframe.src = sim.getAttribute("src"); + var src = sim.getAttribute("src"); + iframe.setAttribute("will_source", src); iframe.scrolling = "no"; + iframe.className = "simulation"; sim.appendChild(iframe); }); @@ -82,6 +85,12 @@ window.onload = function(){ }); + // On scroll + window.onscroll(); + + // Load sounds + loadSounds(); + }; window.getLabel = function(name){ @@ -231,11 +240,18 @@ function makeWallpaper(){ var linx = $("#label_chapter_links"); if(linx){ - $all(".divider > #chapter_links").forEach(function(linkContainer){ + $all("#chapter_links").forEach(function(linkContainer){ linkContainer.innerHTML = linx.innerHTML; }); } +// HACK: Duplicate header text for absolute positioning coz CSS sucks +/*$all(".divider").forEach(function(divider){ + + var html = divider.querySelector("div").innerHTML; + divider.querySelector("#divider_container").innerHTML = html; + +});*/ ////////////////////// // SOUNDS //////////// @@ -261,17 +277,19 @@ var SOUNDS_TO_LOAD = [ ["win_final",1], ]; var SOUNDS = {}; -SOUNDS_TO_LOAD.forEach(function(config){ - - var name = config[0]; - var vol = config[1]; +function loadSounds(){ + SOUNDS_TO_LOAD.forEach(function(config){ + + var name = config[0]; + var vol = config[1]; + + SOUNDS[name] = new Howl({ + src: ["audio/"+name+".mp3"], + volume: vol + }); - SOUNDS[name] = new Howl({ - src: ["audio/"+name+".mp3"], - volume: vol }); - -}); +} window.playSound = function(name){ SOUNDS[name].play(); }; @@ -284,3 +302,35 @@ subscribe("PREflip_spaced_rep",function(){ subscribe("PREflip_the_end",function(){ SOUNDS.applause.play(); }); + +///////////////////////////// +// IFRAME SCROLL //////////// +///////////////////////////// + +var splashes = $all("iframe.splash"); + +window.onscroll = function(){ + + // Playables - PAUSE & UNPAUSE + var scrollY = window.pageYOffset; + var innerHeight = window.innerHeight; + for(var i=0;i0); + } + + // Also, iframe scrollables + var BUFFER = innerHeight/2; + var simulations = $all("iframe.simulation"); + simulations.forEach(function(sim){ + if(!sim.src){ + var bounds = sim.getBoundingClientRect(); + if(bounds.y-BUFFER){ + sim.src = sim.getAttribute("will_source"); + console.log("Loading "+sim.src+"..."); + } + } + }); + +}; diff --git a/pics/bg.png b/pics/bg.png deleted file mode 100644 index a349084..0000000 Binary files a/pics/bg.png and /dev/null differ diff --git a/sims/splash/Mouse.js b/sims/splash/Mouse.js new file mode 100644 index 0000000..b2f04db --- /dev/null +++ b/sims/splash/Mouse.js @@ -0,0 +1,60 @@ +(function(exports){ + + // Singleton + var Mouse = { + x: undefined, + y: undefined, + pressed: false, + update: function(){ + + if(Mouse.x!==undefined && Mouse.y!==undefined){ + + if(Mouse.lastX===undefined) Mouse.lastX=Mouse.x; + if(Mouse.lastY===undefined) Mouse.lastY=Mouse.y; + + Mouse.velX = Mouse.x-Mouse.lastX; + Mouse.velY = Mouse.y-Mouse.lastY; + + Mouse.lastX=Mouse.x; + Mouse.lastY=Mouse.y; + + } + + } + }; + exports.Mouse = Mouse; + + // Event Handling + var onMouseMove,onTouchMove; + + document.body.addEventListener("mousedown",function(event){ + Mouse.pressed = true; + onMouseMove(event); + },false); + + document.body.addEventListener("mouseup",function(event){ + Mouse.pressed = false; + },false); + + document.body.addEventListener("mousemove",onMouseMove = function(event){ + Mouse.x = event.pageX; + Mouse.y = event.pageY - window.pageYOffset; + },false); + + document.body.addEventListener("touchstart",function(event){ + Mouse.pressed = true; + onTouchMove(event); + },false); + + document.body.addEventListener("touchend",function(event){ + Mouse.pressed = false; + },false); + + document.body.addEventListener("touchmove",onTouchMove = function(event){ + Mouse.x = event.changedTouches[0].clientX; + Mouse.y = event.changedTouches[0].clientY - window.pageYOffset; + event.preventDefault(); + },false); + + +})(window); \ No newline at end of file diff --git a/sims/splash/card.png b/sims/splash/card.png new file mode 100644 index 0000000..0e4a20e Binary files /dev/null and b/sims/splash/card.png differ diff --git a/sims/splash/index.html b/sims/splash/index.html new file mode 100644 index 0000000..d2cc38b --- /dev/null +++ b/sims/splash/index.html @@ -0,0 +1,12 @@ + + + + Splash + + + + + + + + \ No newline at end of file diff --git a/sims/splash/splash.js b/sims/splash/splash.js new file mode 100644 index 0000000..6e8e6d2 --- /dev/null +++ b/sims/splash/splash.js @@ -0,0 +1,167 @@ +var canvas = document.createElement("canvas"); +var ctx = canvas.getContext('2d'); + +canvas.width = window.innerWidth*2; +canvas.height = window.innerHeight*2; +canvas.style.width = window.innerWidth+"px"; +canvas.style.height = window.innerHeight+"px"; + +document.body.appendChild(canvas); + +var cardImage = new Image(); +cardImage.src = "card.png"; + +///////////////////////////////////////// + +// Make a whole bunch of cards. Randomly place 'em +var cards = []; +var PADDING = 50; +var RADIUS = 60; +var R2 = RADIUS*RADIUS; +var N = (window.innerWidth*window.innerHeight)/4000; +for(var i=0; iwindow.innerHeight+PADDING){ + + var x,y; + for(var j=0; j<100; j++){ + x = (Math.random()*(window.innerWidth+PADDING*2))-PADDING; + y = -PADDING; + if(!_tooClose(x,y)){ + break; + } + } + + self.x = x; + self.y = y; + + } + //if(Mouse.x/2