interactive header and better loading
This commit is contained in:
parent
c84b9796df
commit
95de8de58e
|
@ -0,0 +1,125 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>An Interactive Comic</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/comic.css"/>
|
||||||
|
<meta name="viewport" content="width=600">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
||||||
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
||||||
|
<!-- CHAPTER 0: INTRODUCTION - -->
|
||||||
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
||||||
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
||||||
|
|
||||||
|
<a name="0"></a>
|
||||||
|
<div class="divider divider_big_height">
|
||||||
|
<iframe class="splash" src="sims/splash/" scrolling="no"></iframe>
|
||||||
|
<div id="divider_container">
|
||||||
|
<div id="chapter_name">
|
||||||
|
HOW TO REMEMBER ANYTHING FOREVER-ISH
|
||||||
|
</div>
|
||||||
|
<div style="text-align:right;">
|
||||||
|
by nicky case · oct 2018
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br><br><br>
|
||||||
|
<br><br><br>
|
||||||
|
<br><br><br>
|
||||||
|
<br><br><br>
|
||||||
|
|
||||||
|
<a name="1"></a>
|
||||||
|
<div class="divider divider_big_height">
|
||||||
|
<iframe class="splash" src="sims/splash/" scrolling="no"></iframe>
|
||||||
|
<div id="divider_container">
|
||||||
|
<div id="chapter_name">
|
||||||
|
THE SCIENCE of
|
||||||
|
SPACED REPETITION
|
||||||
|
</div>
|
||||||
|
<div id="chapter_links"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br><br><br>
|
||||||
|
<br><br><br>
|
||||||
|
<br><br><br>
|
||||||
|
<br><br><br>
|
||||||
|
<br><br><br>
|
||||||
|
|
||||||
|
|
||||||
|
<a name="2"></a>
|
||||||
|
<div class="divider divider_big_height">
|
||||||
|
<iframe class="splash" src="sims/splash/" scrolling="no"></iframe>
|
||||||
|
<div id="divider_container">
|
||||||
|
<div id="chapter_name">
|
||||||
|
THE ART of
|
||||||
|
SPACED REPETITION
|
||||||
|
</div>
|
||||||
|
<div id="chapter_links"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br><br><br>
|
||||||
|
<br><br><br>
|
||||||
|
<br><br><br>
|
||||||
|
<br><br><br>
|
||||||
|
<br><br><br>
|
||||||
|
|
||||||
|
|
||||||
|
<a name="3"></a>
|
||||||
|
<div class="divider divider_small_height">
|
||||||
|
<iframe class="splash" src="sims/splash/" scrolling="no"></iframe>
|
||||||
|
<div id="divider_container">
|
||||||
|
<div id="chapter_name">
|
||||||
|
GET STARTED TODAY!
|
||||||
|
</div>
|
||||||
|
<div id="chapter_links"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br><br><br>
|
||||||
|
<br><br><br>
|
||||||
|
<br><br><br>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div id="labels">
|
||||||
|
|
||||||
|
<!-- Chapter Links -->
|
||||||
|
<span id="label_chapter_links">
|
||||||
|
<a href="#0">
|
||||||
|
Intro
|
||||||
|
</a>
|
||||||
|
·
|
||||||
|
<a href="#1">
|
||||||
|
The Science
|
||||||
|
</a>
|
||||||
|
·
|
||||||
|
<a href="#2">
|
||||||
|
The Art
|
||||||
|
</a>
|
||||||
|
·
|
||||||
|
<a href="#3">
|
||||||
|
Get Started!
|
||||||
|
</a>
|
||||||
|
·
|
||||||
|
<a href="#bye">
|
||||||
|
Credits
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<script src="js/howler.core.min.js"></script>
|
||||||
|
<script src="js/minpubsub.src.js"></script>
|
||||||
|
<script src="js/comic.js"></script>
|
|
@ -10,6 +10,7 @@
|
||||||
html, body{
|
html, body{
|
||||||
width:100%;
|
width:100%;
|
||||||
height:100%;
|
height:100%;
|
||||||
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
body{
|
body{
|
||||||
background: #eeeeee;
|
background: #eeeeee;
|
||||||
|
@ -34,38 +35,61 @@ a{
|
||||||
/**********/
|
/**********/
|
||||||
|
|
||||||
.divider{
|
.divider{
|
||||||
background: #000;
|
position: relative;
|
||||||
background-image: url(../pics/bg.png);
|
|
||||||
background-size: 150px;
|
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
/*height: 200px;*/
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-align: center;
|
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);
|
width: calc(100% - 100px);
|
||||||
min-width: 600px;
|
min-width: 550px;
|
||||||
max-width: 960px;
|
max-width: 960px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
.divider > #chapter_name{
|
.divider > #divider_container > #chapter_name{
|
||||||
font-size: 100px;
|
font-size: 100px;
|
||||||
line-height: 0.75em;
|
line-height: 0.75em;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
.divider > #chapter_links{
|
.divider > #divider_container > #chapter_links{
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
pointer-events: all;
|
||||||
}
|
}
|
||||||
.divider .small_of{
|
.divider > #divider_container > .small_of{
|
||||||
font-size:0.75em; line-height:0;
|
font-size:0.75em; line-height:0;
|
||||||
}
|
}
|
||||||
.divider > #chapter_subtitle{
|
.divider > #divider_container > #chapter_subtitle{
|
||||||
text-align: right;
|
text-align: right;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
|
.divider > iframe{
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
position: absolute;
|
||||||
|
border: none;
|
||||||
|
top:0; left:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*********/
|
/*********/
|
||||||
|
|
63
full.html
63
full.html
|
@ -4,6 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>An Interactive Comic</title>
|
<title>An Interactive Comic</title>
|
||||||
<link rel="stylesheet" type="text/css" href="css/comic.css"/>
|
<link rel="stylesheet" type="text/css" href="css/comic.css"/>
|
||||||
|
<meta name="viewport" content="width=600">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
@ -16,12 +17,15 @@
|
||||||
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
||||||
|
|
||||||
<a name="0"></a>
|
<a name="0"></a>
|
||||||
<div class="divider">
|
<div class="divider divider_small_height">
|
||||||
<div id="chapter_name">
|
<iframe class="splash" src="sims/splash/" scrolling="no"></iframe>
|
||||||
[todo: come up with a title]
|
<div id="divider_container">
|
||||||
</div>
|
<div id="chapter_name">
|
||||||
<div style="text-align: right;">
|
[todo: some friggin' title]
|
||||||
by nicky case · oct 2018
|
</div>
|
||||||
|
<div style="text-align:right;">
|
||||||
|
by nicky case · oct 2018
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -225,16 +229,15 @@ Like so:
|
||||||
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
||||||
|
|
||||||
<a name="1"></a>
|
<a name="1"></a>
|
||||||
<div class="divider">
|
<div class="divider divider_big_height">
|
||||||
<div id="chapter_name">
|
<iframe class="splash" src="sims/splash/" scrolling="no"></iframe>
|
||||||
THE SCIENCE
|
<div id="divider_container">
|
||||||
<span class="small_of">
|
<div id="chapter_name">
|
||||||
of
|
THE SCIENCE of
|
||||||
</span>
|
SPACED REPETITION
|
||||||
<br>
|
</div>
|
||||||
SPACED REPETITION
|
<div id="chapter_links"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="chapter_links"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="comic">
|
<div class="comic">
|
||||||
|
@ -555,16 +558,15 @@ It’s actually so simple, you can even create your own automatic scheduler...
|
||||||
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
||||||
|
|
||||||
<a name="2"></a>
|
<a name="2"></a>
|
||||||
<div class="divider">
|
<div class="divider divider_big_height">
|
||||||
<div id="chapter_name">
|
<iframe class="splash" src="sims/splash/" scrolling="no"></iframe>
|
||||||
THE ART
|
<div id="divider_container">
|
||||||
<span class="small_of">
|
<div id="chapter_name">
|
||||||
of
|
THE ART of
|
||||||
</span>
|
SPACED REPETITION
|
||||||
<br>
|
</div>
|
||||||
SPACED REPETITION
|
<div id="chapter_links"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="chapter_links"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="comic">
|
<div class="comic">
|
||||||
|
@ -1051,11 +1053,14 @@ It’s actually so simple, you can even create your own automatic scheduler...
|
||||||
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
|
||||||
|
|
||||||
<a name="3"></a>
|
<a name="3"></a>
|
||||||
<div class="divider">
|
<div class="divider divider_small_height">
|
||||||
<div id="chapter_name">
|
<iframe class="splash" src="sims/splash/" scrolling="no"></iframe>
|
||||||
GET STARTED TODAY!
|
<div id="divider_container">
|
||||||
|
<div id="chapter_name">
|
||||||
|
GET STARTED TODAY!
|
||||||
|
</div>
|
||||||
|
<div id="chapter_links"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="chapter_links"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="comic">
|
<div class="comic">
|
||||||
|
@ -1475,7 +1480,7 @@ Before sleeping, coz otherwise you'd just stress-binge on twitter
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=600 h=400 bg="#e0e0e0">
|
<panel w=600 h=400 bg="#e0e0e0">
|
||||||
<sim x=0 y=0 w=600 h=400 src="sims/multicard/?final=yes&cards=you_what,sci_a,leit_a,intro_a,you_why,sci_b,leit_b,intro_b,you_how,sci_c,leit_c,you_when,leit_d,intro_c"></sim>
|
<sim x=0 y=0 w=600 h=400 src="sims/multicard/?final=yes&cards=intro_a,sci_a,leit_a,you_what,intro_b,sci_b,leit_b,you_why,sci_c,leit_c,you_how,leit_d,you_when,intro_c"></sim>
|
||||||
</panel>
|
</panel>
|
||||||
|
|
||||||
<panel w=240 h=300>
|
<panel w=240 h=300>
|
||||||
|
|
72
js/comic.js
72
js/comic.js
|
@ -48,8 +48,11 @@ window.onload = function(){
|
||||||
|
|
||||||
// Create & append iframe
|
// Create & append iframe
|
||||||
var iframe = document.createElement("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.scrolling = "no";
|
||||||
|
iframe.className = "simulation";
|
||||||
sim.appendChild(iframe);
|
sim.appendChild(iframe);
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@ -82,6 +85,12 @@ window.onload = function(){
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// On scroll
|
||||||
|
window.onscroll();
|
||||||
|
|
||||||
|
// Load sounds
|
||||||
|
loadSounds();
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
window.getLabel = function(name){
|
window.getLabel = function(name){
|
||||||
|
@ -231,11 +240,18 @@ function makeWallpaper(){
|
||||||
|
|
||||||
var linx = $("#label_chapter_links");
|
var linx = $("#label_chapter_links");
|
||||||
if(linx){
|
if(linx){
|
||||||
$all(".divider > #chapter_links").forEach(function(linkContainer){
|
$all("#chapter_links").forEach(function(linkContainer){
|
||||||
linkContainer.innerHTML = linx.innerHTML;
|
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 ////////////
|
// SOUNDS ////////////
|
||||||
|
@ -261,17 +277,19 @@ var SOUNDS_TO_LOAD = [
|
||||||
["win_final",1],
|
["win_final",1],
|
||||||
];
|
];
|
||||||
var SOUNDS = {};
|
var SOUNDS = {};
|
||||||
SOUNDS_TO_LOAD.forEach(function(config){
|
function loadSounds(){
|
||||||
|
SOUNDS_TO_LOAD.forEach(function(config){
|
||||||
var name = config[0];
|
|
||||||
var vol = config[1];
|
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){
|
window.playSound = function(name){
|
||||||
SOUNDS[name].play();
|
SOUNDS[name].play();
|
||||||
};
|
};
|
||||||
|
@ -284,3 +302,35 @@ subscribe("PREflip_spaced_rep",function(){
|
||||||
subscribe("PREflip_the_end",function(){
|
subscribe("PREflip_the_end",function(){
|
||||||
SOUNDS.applause.play();
|
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;i<splashes.length;i++){
|
||||||
|
var s = splashes[i];
|
||||||
|
var bounds = s.getBoundingClientRect();
|
||||||
|
s.contentWindow.IS_IN_SIGHT = (bounds.y<innerHeight && bounds.y+bounds.height>0);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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<innerHeight+BUFFER && bounds.y+bounds.height>-BUFFER){
|
||||||
|
sim.src = sim.getAttribute("will_source");
|
||||||
|
console.log("Loading "+sim.src+"...");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
};
|
||||||
|
|
BIN
pics/bg.png
BIN
pics/bg.png
Binary file not shown.
Before Width: | Height: | Size: 14 KiB |
|
@ -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);
|
Binary file not shown.
After Width: | Height: | Size: 493 B |
|
@ -0,0 +1,12 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Splash</title>
|
||||||
|
</head>
|
||||||
|
<body style="margin:0; background:#000;">
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<script src="../helpers.js"></script>
|
||||||
|
<script src="Mouse.js"></script>
|
||||||
|
<script src="splash.js"></script>
|
|
@ -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; i<N; i++){
|
||||||
|
|
||||||
|
// Find position that's not too close to others
|
||||||
|
var x,y;
|
||||||
|
for(var j=0; j<1000; j++){
|
||||||
|
x = (Math.random()*(window.innerWidth+PADDING*2))-PADDING;
|
||||||
|
y = (Math.random()*(window.innerHeight+PADDING*2))-PADDING;
|
||||||
|
if(!_tooClose(x,y)){
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Place new card
|
||||||
|
var c = new Card(x,y);
|
||||||
|
cards.push(c);
|
||||||
|
|
||||||
|
}
|
||||||
|
var FALL_SPEED = 0.5;
|
||||||
|
function Card(x,y){
|
||||||
|
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
self.x = x;
|
||||||
|
self.y = y;
|
||||||
|
self.velX = 0;
|
||||||
|
self.velY = 0;
|
||||||
|
self.rotation = (Math.random()-0.5)*0.4;
|
||||||
|
|
||||||
|
self.update = function(){
|
||||||
|
|
||||||
|
// MOUSE
|
||||||
|
if(Mouse.velX!==undefined){
|
||||||
|
|
||||||
|
var speed = 0.05;
|
||||||
|
if(Mouse.pressed) speed*=4;
|
||||||
|
|
||||||
|
var dx = Mouse.x-self.x;
|
||||||
|
var dy = Mouse.y-self.y;
|
||||||
|
var d = Math.sqrt(dx*dx+dy*dy);
|
||||||
|
var r = 100;
|
||||||
|
var relativeSpeed = Math.max( (r-d)/r, 0 );
|
||||||
|
speed *= relativeSpeed;
|
||||||
|
|
||||||
|
self.velX += Mouse.velX*speed;
|
||||||
|
self.velY += Mouse.velY*speed;
|
||||||
|
}
|
||||||
|
|
||||||
|
// VELOCITY
|
||||||
|
self.x += self.velX;
|
||||||
|
self.y += self.velY;
|
||||||
|
self.velX *= 0.9;
|
||||||
|
self.velY *= 0.9;
|
||||||
|
|
||||||
|
// FALL
|
||||||
|
self.y += FALL_SPEED;
|
||||||
|
|
||||||
|
// LOOP
|
||||||
|
if(self.y>window.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<self.x) self.x++;
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
var w = 60;
|
||||||
|
var h = w*(240/400);
|
||||||
|
self.draw = function(ctx){
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
|
||||||
|
ctx.translate(self.x, self.y);
|
||||||
|
ctx.rotate(self.rotation);
|
||||||
|
|
||||||
|
//ctx.fillStyle = "rgba(255,255,255,0.15)";
|
||||||
|
ctx.drawImage(cardImage, -w/2, -h/2, w, h);
|
||||||
|
|
||||||
|
ctx.restore();
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
function _tooClose(x1,y1){
|
||||||
|
for(var i=0; i<cards.length; i++){
|
||||||
|
|
||||||
|
var c = cards[i];
|
||||||
|
var x2 = c.x;
|
||||||
|
var y2 = c.y;
|
||||||
|
|
||||||
|
var dx = x1-x2;
|
||||||
|
var dy = y1-y2;
|
||||||
|
var d2 = dx*dx+dy*dy;
|
||||||
|
|
||||||
|
if(d2<R2){
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
/////////////////////////////////////////
|
||||||
|
|
||||||
|
window.IS_IN_SIGHT = false;
|
||||||
|
function update(){
|
||||||
|
|
||||||
|
if(window.IS_IN_SIGHT){
|
||||||
|
|
||||||
|
// UPDATE
|
||||||
|
|
||||||
|
Mouse.update();
|
||||||
|
|
||||||
|
cards.forEach(function(card){
|
||||||
|
card.update(ctx);
|
||||||
|
});
|
||||||
|
|
||||||
|
// DRAW
|
||||||
|
|
||||||
|
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
|
||||||
|
ctx.save();
|
||||||
|
ctx.scale(2,2);
|
||||||
|
|
||||||
|
cards.forEach(function(card){
|
||||||
|
card.draw(ctx);
|
||||||
|
});
|
||||||
|
|
||||||
|
ctx.restore();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
requestAnimationFrame(update);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
requestAnimationFrame(update);
|
Loading…
Reference in New Issue