10000 gh-pages init · JavaScriptCodes/snabbt.js@f8f231a · GitHub
[go: up one dir, main page]
Skip to content

Commit f8f231a

Browse files
daniel-lundindaniel-lundin
committed
gh-pages init
0 parents  commit f8f231a

File tree

5 files changed

+590
-0
lines changed

5 files changed

+590
-0
lines changed

‎animations.js

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
// Steppers
2+
function pow2_stepper(curr, max) {
3+
return Math.pow(curr/max, 0.5);
4+
}
5+
6+
function linear_stepper(curr, max) {
7+
return curr/max;
8+
}
9+
10+
function cos_stepper(curr, max) {
11+
return (Math.cos((curr/max)*Math.PI + Math.PI) + 1)/2;
12+
}
13+
14+
function create_cubic_bezier_stepper(p1, p2, p3, p4) {
15+
return function(curr, max) {
16+
var t = curr/max;
17+
return Math.pow(1-t, 3)*p1 + 3*Math.pow(1-t, 2)*t*p2 + 3*(1-t)*Math.pow(t, 2)*p3 + Math.pow(t, 3)*p4;
18+
}
19+
}
20+
21+
function cubic_stepper(curr, max) {
22+
var t = curr/max;
23+
return (Math.pow(2*t - 1, 3)+1)/2;
24+
}
25+
26+
function cos_wooble_stepper(curr, max) {
27+
var t = curr/max;
28+
return t*Math.cos(4*Math.PI*t);
29+
}
30+
31+
function atan_stepper(curr, max) {
32+
var t = curr/max;
33+
return (Math.atan(Math.PI*t - Math.PI/2) + 1)/2;
34+
}
35+
36+
function sinc_wobbler_stepper(curr, max) {
37+
var t = curr/max;
38+
var k = 5;
39+
return (-Math.sin(k*Math.PI*t)/(k*t) + Math.PI)/Math.PI;
40+
}
41+
42+
function Animation(options) {
43+
this.start_pos = options.start_pos || new Position({});
44+
this.end_pos = options.end_pos || new Position({});
45< B41A /td>+
this.duration = options.duration || 500;
46+
this.stepper = options.stepper || linear_stepper;
47+
this.transition = options.transition || closest;
48+
49+
this.start_time = 0;
50+
this.current_time = 0;
51+
}
52+
53+
Animation.prototype.tick = function(time) {
54+
// If first tick, set start_time
55+
if(!this.start_time) {
56+
this.start_time = time;
57+
}
58+
this.current_time = time;
59+
};
60+
61+
Animation.prototype.current_transform = function() {
62+
var curr = Math.min(Math.max(0.001, this.current_time - this.start_time), this.duration);
63+
var max = this.duration;
64+
var q = curr/max;
65+
return this.transition(this.start_pos, this.end_pos, curr, max, this.stepper);
66+
};
67+
68+
Animation.prototype.completed = function() {
69+
if(this.start_time === 0) {
70+
return false;
71+
}
72+
return this.current_time - this.start_time > this.duration;
73+
//return this.step >= this.steps;
74+
};
75+
76+
Animation.prototype.end_position = function() {
77+
//return this.current_transform();
78+
return this.end_pos;
79+
};
80+
81+
82+
// Transitions
83+
function closest(start_pos, end_pos, step, steps, stepper) {
84+
var x = (end_pos.x - start_pos.x);
85+
var y = (end_pos.y - start_pos.y);
86+
var z = (end_pos.z - start_pos.z);
87+
var ax = (end_pos.ax - start_pos.ax);
88+
var ay = (end_pos.ay - start_pos.ay);
89+
var az = (end_pos.az - start_pos.az);
90+
var bx = (end_pos.bx - start_pos.bx);
91+
var by = (end_pos.by - start_pos.by);
92+
var bz = (end_pos.bz - start_pos.bz);
93+
if(ay >= Math.PI)
94+
ay -= 2*Math.PI;
95+
if(ay < -Math.PI)
96+
ay += 2*Math.PI;
97+
if(by >= Math.PI)
98+
by -= 2*Math.PI;
99+
if(by <= -Math.PI)
100+
by += 2*Math.PI;
101+
102+
var s = this.stepper(step, steps);
103+
var p = new Position({
104+
ax: start_pos.ax + s*ax,
105+
ay: start_pos.ay + s*ay,
106+
az: start_pos.az + s*az,
107+
x: start_pos.x + s*x,
108+
y: start_pos.y + s*y,
109+
z: start_pos.z + s*z,
110+
bx: start_pos.bx + s*bx,
111+
by: start_pos.by + s*by,
112+
bz: start_pos.bz + s*bz,
113+
});
114+
return p;
115+
}
116+
117+
function back_and_forth(start, end, step, steps, stepper) {
118+
var x = (end.x - start.x);
119+
var y = (end.y - start.y);
120+
var z = (end.z - start.z);
121+
var ax = (end.ax - start.ax);
122+
var ay = (end.ay - start.ay);
123+
var az = (end.az - start.az);
124+
var bx = (end.bx - start.bx);
125+
var by = (end.by - start.by);
126+
var bz = (end.bz - start.bz);
127+
128+
var s = this.stepper(this.step, this.steps);
129+
130+
if(s > 0.5)
131+
s = 1 - s;
132+
var p = new Position({
133+
ax: start.ax + s*ax,
134+
ay: start.ay + s*ay,
135+
az: start.az + s*az,
136+
x: start.x + s*x,
137+
y: start.y + s*y,
138+
z: start.z + s*z,
139+
bx: start.bx + s*bx,
140+
by: start.by + s*by,
141+
bz: start.bz + s*bz,
142+
});
143+
return p;
144+
}

‎cardwall.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<script src="mat.js"></script>
7+
<script src="animations.js"></script>
8+
<script src="element.js"></script>
9+
<script src="cardwall.js"></script>
10+
<style>
11+
body {
12+
background: #933;
13+
}
14+
.patch {
15+
position: absolute;
16+
width: 70px;
17+
height: 70px;
18+
background: #ddd;
19+
}
20+
</style>
21+
</head>
22+
<body>
23+
<script>
24+
var scene = new CardWall(25);
25+
function animationLoop(t) {
26+
window.requestAnimationFrame(animationLoop);
27+
scene.tick(t);
28+
}
29+
animationLoop();
30+
</script>
31+
</body>
32+
</html>
33+

‎cardwall.js

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
function CardWall() {
2+
this.elem_count = 36;
3+
this.elems_per_row = 6;
4+
this.sides = 1;
5+
this.expanded = false;
6+
//this.stepper = create_cubic_bezier_stepper(0, 0.72, 1.25, 1);
7+
this.stepper = sinc_wobbler_stepper;
8+
this.setup();
9+
//this.stepper = cos_wooble_stepper;
10+
}
11+
12+
CardWall.prototype.setup = function() {
13+
// Setup centered root element
14+
var x = document.body.clientWidth/2;
15+
//var y = document.body.scrollHeight/2;
16+
var y = window.innerHeight/2;
17+
var root = document.createElement('div');
18+
var root_transform = trans(x, y, 0);
19+
set_css_transform(root, root_transform.m);
20+
21+
// Create elements
22+
this.elems = [];
23+
var self = this;
24+
for(var i=0;i<this.sides*this.elem_count;++i) {
25+
var e = document.createElement('div');
26+
e.className = 'patch';
27+
root.appendChild(e);
28+
var pos = new Position({});
29+
var elem = new Element(e, pos);
30+
this.elems.push(elem);
31+
(function(binded_elem) {
32+
binded_elem.e.onclick = function() {
33+
self.toggle_expanded();
34+
};
35+
})(elem);
36+
}
37+
38+
document.body.appendChild(root);
39+
};
40+
41+
42+
CardWall.prototype.toggle_expanded = function() {
43+
console.log('toggle');
44+
if(this.expanded)
45+
this.start_state();
46+
else
47+
this.cube_formation();
48+
this.expanded = !this.expanded;
49+
};
50+
51+
CardWall.prototype.start_state = function() {
52+
for(var i=0;i<this.sides*this.elem_count;++i) {
53+
var pos = new Position({});
54+
var start = this.elems[i].pos;
55+
if(this.elems[i].animation)
56+
start = this.elems[i].animation.current_transform();
57+
this.elems[i].animation = new Animation({
58+
start_pos: start,
59+
end_pos: pos,
60+
stepper: cos_stepper,
61+
duration: 200
62+
});
63+
}
64+
};
65+
66+
CardWall.prototype.cube_formation = function() {
67+
var width = 120;
68+
var rows = this.elem_count / this.elems_per_row;
69+
var x, y, to_pos;
70+
for(var i=0;i<this.elem_count;++i) {
71+
/*x = 40 + -(this.elems_per_row*width)/2+ (i % this.elems_per_row) * width;
72+
to_pos = new Position({
73+
x: x,
74+
y: 40 -((rows+1)/2)*width + Math.floor(i/this.elems_per_row) * width,
75+
z: -100,
76+
az: Math.PI,
77+
ax: 2*Math.PI
78+
});
79+
this.elems[i].animation = new Animation({
80+
start_pos: this.elems[i].pos,
81+
end_pos:to_pos,
82+
stepper: this.stepper,
83+
duration: 2000
84+
});*/
85+
var self = this;
86+
(function(j) {
87+
setTimeout(function() {
88+
var start = self.elems[j].pos;
89+
if(self.elems[j].animation)
90+
start = self.elems[j].animation.current_transform();
91+
92+
x = 40 + -(self.elems_per_row*width)/2+ (j % self.elems_per_row) * width;
93+
to_pos = new Position({
94+
x: x,
95+
y: 40 -((rows+1)/2)*width + Math.floor(j/self.elems_per_row) * width,
96+
z: -100,
97+
az: Math.PI,
98+
ax: 2*Math.PI
99+
});
100+
self.elems[j].animation = new Animation({
101+
start_pos: start,
102+
end_pos: to_pos,
103+
stepper: self.stepper,
104+
duration: 1000
105+
});
106+
}, j*100);
107+
})(i);
108+
109+
}
110+
/*
111+
if(this.sides > 1) {
112+
for(i=0;i<this.elem_count;++i) {
113+
x = 40 + -(this.elems_per_row*width)/2+ (i % this.elems_per_row) * width;
114+
to_pos = new Position({
115+
x: x,
116+
y: 40 -((rows+1)/2)*width + Math.floor(i/this.elems_per_row) * width,
117+
z: 100
118+
});
119+
this.elems[i+this.elem_count].animation = new Animation(this.elems[i+this.elem_count].pos, to_pos, this.stepper);
120+
}
121+
}
122+
if(this.sides > 2) {
123+
for(i=0;i<this.elem_count;++i) {
124+
z = 40 + -(this.elems_per_row*width)/2+ (i % this.elems_per_row) * width;
125+
to_pos = new Position({
126+
x: 100,
127+
y: 40 -((rows+1)/2)*width + Math.floor(i/this.elems_per_row) * width,
128+
z: z
129+
});
130+
this.elems[i+2*this.elem_count].animation = new Animation(this.elems[i+2*this.elem_count].pos, to_pos, this.stepper);
131+
}
132+
}*/
133+
};
134+
135+
CardWall.prototype.tick = function(time) {
136+
for(var i=0;i<this.sides*this.elem_count;++i) {
137+
this.elems[i].tick(time);
138+
}
139+< 3321 div class="diff-text-inner">}

0 commit comments

Comments
 (0)
0