blob: 8f867fbbe1e4d7ef3322c17a17b7eb9ca8272b6e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
const css = window.document.styleSheets[0]
let currentTarget={
fromLeft: 5,
toLeft: 5, // left: 5%;
fromTop:25,
toTop: 25, // top: 25%;
time: 0,
}
function genTarget(){
currentTarget.fromLeft = currentTarget.toLeft;
currentTarget.fromTop = currentTarget.toTop;
currentTarget.toLeft = 5 + (randn_bm() - 0.5)*10
currentTarget.toTop = 25 + (randn_bm()-0.5)*10
currentTarget.time = randn_bm() * 0.4 +0.05
}
cssIndex = undefined;
const toMove = document.getElementById("indihome-content");
let keyframeId = 0;
function move(){
genTarget()
if(cssIndex!=undefined){
css.deleteRule(cssIndex)
}
cssIndex = css.cssRules.length
toMove.style.animation = ""
css.insertRule(
"@keyframes move"+keyframeId+" {\n" +
" 0% {\n" +
" left: "+currentTarget.fromLeft+"%;\n" +
" top: "+currentTarget.fromTop+"%;\n" +
" }\n" +
" 100% {\n" +
" left: "+currentTarget.toLeft+"%;\n" +
" top: "+currentTarget.toTop+"%;\n" +
" }\n" +
"}"
,cssIndex)
toMove.style.animation = "move"+keyframeId+" "+currentTarget.time+"s linear"
keyframeId++;
}
function moveLoop(){
move()
setTimeout(moveLoop, currentTarget.time*1000)
}
moveLoop()
/**
* this code uses the Box–Muller transform to give you a normal distribution between 0 and 1 inclusive.
* https://stackoverflow.com/questions/25582882/javascript-math-random-normal-distribution-gaussian-bell-curve
*/
function randn_bm() {
let u = 0, v = 0;
while(u === 0) u = Math.random(); //Converting [0,1) to (0,1)
while(v === 0) v = Math.random();
let num = Math.sqrt( -2.0 * Math.log( u ) ) * Math.cos( 2.0 * Math.PI * v );
num = num / 10.0 + 0.5; // Translate to 0 -> 1
if (num > 1 || num < 0) return randn_bm() // resample between 0 and 1
return num
}
|
