Skip to content

Commit 2612051

Browse files
author
daniel-lundin
committed
Add skewing option
1 parent 33615fc commit 2612051

File tree

4 files changed

+85
-133
lines changed

4 files changed

+85
-133
lines changed

‎src/main.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,10 @@ snabbtjs.state_from_options = function(p, options, prefix) {
139139
p.ay = options[prefix + 'rot'][1];
140140
p.az = options[prefix + 'rot'][2];
141141
}
142+
if(options[prefix + 'skew']) {
143+
p.skew_x = options[prefix + 'skew'][0];
144+
p.skew_y = options[prefix + 'skew'][1];
145+
}
142146
if(options[prefix + 'rot_post']) {
143147
p.bx = options[prefix + 'rot_post'][0];
144148
p.by = options[prefix + 'rot_post'][1];

‎src/mat.js

Lines changed: 53 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -2,73 +2,25 @@ var snabbtjs = snabbtjs || {};
22

33
snabbtjs.assigned_matrix_multiplication = function(a, b, res) {
44
// Unrolled loop
5-
res[0] = a[0] * b[0] +
6-
a[1] * b[4] +
7-
a[2] * b[8] +
8-
a[3] * b[12];
9-
res[1] = a[0] * b[1] +
10-
a[1] * b[5] +
11-
a[2] * b[9] +
12-
a[3] * b[13];
13-
res[2] = a[0] * b[2] +
14-
a[1] * b[6] +
15-
a[2] * b[10] +
16-
a[3] * b[14];
17-
res[3] = a[0] * b[3] +
18-
a[1] * b[7] +
19-
a[2] * b[11] +
20-
a[3] * b[15];
21-
22-
res[4] = a[4] * b[0] +
23-
a[5] * b[4] +
24-
a[6] * b[8] +
25-
a[7] * b[12];
26-
res[5] = a[4] * b[1] +
27-
a[5] * b[5] +
28-
a[6] * b[9] +
29-
a[7] * b[13];
30-
res[6] = a[4] * b[2] +
31-
a[5] * b[6] +
32-
a[6] * b[10] +
33-
a[7] * b[14];
34-
res[7] = a[4] * b[3] +
35-
a[5] * b[7] +
36-
a[6] * b[11] +
37-
a[7] * b[15];
38-
39-
res[8] = a[8] * b[0] +
40-
a[9] * b[4] +
41-
a[10] * b[8] +
42-
a[11] * b[12];
43-
res[9] = a[8] * b[1] +
44-
a[9] * b[5] +
45-
a[10] * b[9] +
46-
a[11] * b[13];
47-
res[10] = a[8] * b[2] +
48-
a[9] * b[6] +
49-
a[10] * b[10] +
50-
a[11] * b[14];
51-
res[11] = a[8] * b[3] +
52-
a[9] * b[7] +
53-
a[10] * b[11] +
54-
a[11] * b[15];
55-
56-
res[12] = a[12] * b[0] +
57-
a[13] * b[4] +
58-
a[14] * b[8] +
59-
a[15] * b[12];
60-
res[13] = a[12] * b[1] +
61-
a[13] * b[5] +
62-
a[14] * b[9] +
63-
a[15] * b[13];
64-
res[14] = a[12] * b[2] +
65-
a[13] * b[6] +
66-
a[14] * b[10] +
67-
a[15] * b[14];
68-
res[15] = a[12] * b[3] +
69-
a[13] * b[7] +
70-
a[14] * b[11] +
71-
a[15] * b[15];
5+
res[0] = a[0] * b[0] + a[1] * b[4] + a[2] * b[8] + a[3] * b[12];
6+
res[1] = a[0] * b[1] + a[1] * b[5] + a[2] * b[9] + a[3] * b[13];
7+
res[2] = a[0] * b[2] + a[1] * b[6] + a[2] * b[10] + a[3] * b[14];
8+
res[3] = a[0] * b[3] + a[1] * b[7] + a[2] * b[11] + a[3] * b[15];
9+
10+
res[4] = a[4] * b[0] + a[5] * b[4] + a[6] * b[8] + a[7] * b[12];
11+
res[5] = a[4] * b[1] + a[5] * b[5] + a[6] * b[9] + a[7] * b[13];
12+
res[6] = a[4] * b[2] + a[5] * b[6] + a[6] * b[10] + a[7] * b[14];
13+
res[7] = a[4] * b[3] + a[5] * b[7] + a[6] * b[11] + a[7] * b[15];
14+
15+
res[8] = a[8] * b[0] + a[9] * b[4] + a[10] * b[8] + a[11] * b[12];
16+
res[9] = a[8] * b[1] + a[9] * b[5] + a[10] * b[9] + a[11] * b[13];
17+
res[10] = a[8] * b[2] + a[9] * b[6] + a[10] * b[10] + a[11] * b[14];
18+
res[11] = a[8] * b[3] + a[9] * b[7] + a[10] * b[11] + a[11] * b[15];
19+
20+
res[12] = a[12] * b[0] + a[13] * b[4] + a[14] * b[8] + a[15] * b[12];
21+
res[13] = a[12] * b[1] + a[13] * b[5] + a[14] * b[9] + a[15] * b[13];
22+
res[14] = a[12] * b[2] + a[13] * b[6] + a[14] * b[10] + a[15] * b[14];
23+
res[15] = a[12] * b[3] + a[13] * b[7] + a[14] * b[11] + a[15] * b[15];
7224

7325
return res;
7426
};
@@ -112,58 +64,52 @@ snabbtjs.mult = function(a, b) {
11264
return m;
11365
};
11466

115-
snabbtjs.rotX = function(rad) {
116-
var m = new Float32Array(16);
117-
m[0] = 1; m[1] = 0; m[2] = 0; m[3] = 0;
118-
m[4] = 0; m[5] = Math.cos(rad); m[6] = -Math.sin(rad); m[7] = 0;
119-
m[8] = 0; m[9] = Math.sin(rad); m[10] = Math.cos(rad); m[11] = 0;
120-
m[12] = 0; m[13] = 0; m[14] = 0; m[15] = 1;
121-
return m;
67+
snabbtjs.trans = function(x, y, z) {
68+
return new Float32Array([
69+
1, 0, 0, 0,
70+
0, 1, 0, 0,
71+
0, 0, 1, 0,
72+
x, y, z, 1
73+
]);
12274
};
12375

124-
snabbtjs.assign_rotX = function(m, rad) {
125-
m[0] = 1; m[1] = 0; m[2] = 0; m[3] = 0;
126-
m[4] = 0; m[5] = Math.cos(rad); m[6] = -Math.sin(rad); m[7] = 0;
127-
m[8] = 0; m[9] = Math.sin(rad); m[10] = Math.cos(rad); m[11] = 0;
128-
m[12] = 0; m[13] = 0; m[14] = 0; m[15] = 1;
129-
return m;
76+
snabbtjs.rotX = function(rad) {
77+
return new Float32Array([
78+
1, 0, 0, 0,
79+
0, Math.cos(rad), -Math.sin(rad), 0,
80+
0, Math.sin(rad), Math.cos(rad), 0,
81+
0, 0, 0, 1
82+
]);
13083
};
13184

13285
snabbtjs.rotY = function(rad) {
133-
var m = new Float32Array(16);
134-
m[0] = Math.cos(rad); m[1] = 0; m[2] = Math.sin(rad); m[3] = 0;
135-
m[4] = 0; m[5] = 1; m[6] = 0; m[7] = 0;
136-
m[8] = -Math.sin(rad); m[9] = 0; m[10] = Math.cos(rad); m[11] = 0;
137-
m[12] = 0; m[13] = 0; m[14] = 0; m[15] = 1;
138-
return m;
139-
};
140-
141-
snabbtjs.assign_rotY = function(m, rad) {
142-
m[0] = Math.cos(rad); m[1] = 0; m[2] = Math.sin(rad); m[3] = 0;
143-
m[4] = 0; m[5] = 1; m[6] = 0; m[7] = 0;
144-
m[8] = -Math.sin(rad); m[9] = 0; m[10] = Math.cos(rad); m[11] = 0;
145-
m[12] = 0; m[13] = 0; m[14] = 0; m[15] = 1;
146-
return m;
86+
return new Float32Array([
87+
Math.cos(rad), 0, Math.sin(rad), 0,
88+
0, 1, 0, 0,
89+
-Math.sin(rad), 0, Math.cos(rad), 0,
90+
0, 0, 0, 1
91+
]);
14792
};
14893

14994
snabbtjs.rotZ = function(rad) {
150-
var m = new Float32Array(16);
151-
m[0] = Math.cos(rad); m[1] = -Math.sin(rad); m[2] = 0; m[3] = 0;
152-
m[4] = Math.sin(rad); m[5] = Math.cos(rad); m[6] = 0; m[7] = 0;
153-
m[8] = 0; m[9] = 0; m[10] = 1; m[11] = 0;
154-
m[12] = 0; m[13] = 0; m[14] = 0; m[15] = 1;
155-
return m;
95+
return new Float32Array([
96+
Math.cos(rad), -Math.sin(rad), 0, 0,
97+
Math.sin(rad), Math.cos(rad), 0, 0,
98+
0, 0, 1, 0,
99+
0, 0, 0, 1
100+
]);
156101
};
157102

158-
snabbtjs.trans = function(x, y, z) {
159-
var m = new Float32Array(16);
160-
m[0] = 1; m[1] = 0; m[2] = 0; m[3] = 0;
161-
m[4] = 0; m[5] = 1; m[6] = 0; m[7] = 0;
162-
m[8] = 0; m[9] = 0; m[10] = 1; m[11] = 0;
163-
m[12] = x; m[13] = y; m[14] = z; m[15] = 1;
164-
return m;
103+
snabbtjs.skew = function(ax, ay) {
104+
return new Float32Array([
105+
1, Math.tan(ax), 0, 0,
106+
Math.tan(ay), 1, 0, 0,
107+
0, 0, 1, 0,
108+
0, 0, 0, 1,
109+
]);
165110
};
166111

112+
167113
snabbtjs.scale = function(x, y) {
168114
return new Float32Array([
169115
x, 0, 0, 0,
@@ -187,21 +133,9 @@ snabbtjs.set_css = function(el, matrix) {
187133
for(var i=0;i<el.length;++i) {
188134
el[i].style.webkitTransform = snabbtjs.mat_to_css(matrix);
189135
el[i].style.transform = snabbtjs.mat_to_css(matrix);
190-
//if(state.width !== undefined)
191-
// el[i].style.width = state.width + 'px';
192-
//if(state.height !== undefined)
193-
// el[i].style.height = state.height + 'px';
194-
//if(state.opacity !== undefined)
195-
// el[i].style.opacity = state.opacity;
196136
}
197137
} else {
198138
el.style.webkitTransform = snabbtjs.mat_to_css(matrix);
199139
el.style.transform = snabbtjs.mat_to_css(matrix);
200-
//if(state.width !== undefined)
201-
// el.style.width = state.width + 'px';
202-
//if(state.height !== undefined)
203-
// el.style.height = state.height + 'px';
204-
//if(state.opacity !== undefined)
205-
// el.style.opacity = state.opacity;
206140
}
207141
};

‎src/state.js

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
snabbtjs.State = function(config) {
2-
this.ax = config.ax || 0;
3-
this.ay = config.ay || 0;
4-
this.az = config.az || 0;
5-
this.x = config.x || 0;
6-
this.y = config.y || 0;
7-
this.z = config.z || 0;
8-
this.bx = config.bx || 0;
9-
this.by = config.by || 0;
10-
this.bz = config.bz || 0;
11-
this.offset_x = config.offset_x || 0;
12-
this.offset_y = config.offset_y || 0;
13-
this.offset_z = config.offset_z || 0;
14-
this.sx = config.sx || 1;
15-
this.sy = config.sy || 1;
2+
this.ax = snabbtjs.option_or_default(config.ax, 0);
3+
this.ay = snabbtjs.option_or_default(config.ay, 0);
4+
this.az = snabbtjs.option_or_default(config.az, 0);
5+
this.x = snabbtjs.option_or_default(config.x, 0);
6+
this.y = snabbtjs.option_or_default(config.y, 0);
7+
this.z = snabbtjs.option_or_default(config.z, 0);
8+
this.bx = snabbtjs.option_or_default(config.bx, 0);
9+
this.by = snabbtjs.option_or_default(config.by, 0);
10+
this.bz = snabbtjs.option_or_default(config.bz, 0);
11+
this.skew_x = snabbtjs.option_or_default(config.skew_x, 0);
12+
this.skew_y = snabbtjs.option_or_default(config.skew_y, 0);
13+
this.offset_x = snabbtjs.option_or_default(config.offset_x, 0);
14+
this.offset_y = snabbtjs.option_or_default(config.offset_y, 0);
15+
this.offset_z = snabbtjs.option_or_default(config.offset_z, 0);
16+
this.sx = snabbtjs.option_or_default(config.sx, 1);
17+
this.sy = snabbtjs.option_or_default(config.sy, 1);
1618
this.width = config.width;
1719
this.height = config.height;
1820
this.opacity = config.opacity;
@@ -29,6 +31,8 @@ snabbtjs.State.prototype.clone = function() {
2931
bx: this.bx,
3032
by: this.by,
3133
bz: this.bz,
34+
skew_x: this.skew_x,
35+
skew_y: this.skew_y,
3236
sx: this.sx,
3337
sy: this.sy,
3438
height: this.height,
@@ -48,6 +52,8 @@ snabbtjs.State.prototype.assign = function(p) {
4852
this.bx = p.bx;
4953
this.by = p.by;
5054
this.bz = p.bz;
55+
this.skew_x = p.skew_x;
56+
this.skew_y = p.skew_y;
5157
this.sx = p.sx;
5258
this.sy = p.sy;
5359
this.opacity = p.opacity;
@@ -59,6 +65,9 @@ snabbtjs.State.prototype.as_matrix = function() {
5965
// Scale
6066
var m = snabbtjs.scale(this.sx, this.sy);
6167

68+
// Skew
69+
m = snabbtjs.mult(m, snabbtjs.skew(this.skew_x, this.skew_y));
70+
6271
// Pre-rotation
6372
m = snabbtjs.mult(m, snabbtjs.rotX(this.ax));
6473
m = snabbtjs.mult(m, snabbtjs.rotY(this.ay));

‎src/tween.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ snabbtjs.TweenStates = function(start, end, result, tween_value) {
1212
var dbz = (end.bz - start.bz);
1313
var dsx = (end.sx - start.sx);
1414
var dsy = (end.sy - start.sy);
15+
var dskewx = (end.skew_x - start.skew_x);
16+
var dskewy = (end.skew_y - start.skew_y);
1517
var dwidth = (end.width - start.width);
1618
var dheight = (end.height - start.height);
1719
var dopacity = (end.opacity - start.opacity);
@@ -25,8 +27,11 @@ snabbtjs.TweenStates = function(start, end, result, tween_value) {
2527
result.bx = start.bx + tween_value*dbx;
2628
result.by = start.by + tween_value*dby;
2729
result.bz = start.bz + tween_value*dbz;
30+
result.skew_x = start.skew_x + tween_value*dskewx;
31+
result.skew_y = start.skew_y + tween_value*dskewy;
2832
result.sx = start.sx + tween_value*dsx;
2933
result.sy = start.sy + tween_value*dsy;
34+
3035
if(end.width !== undefined)
3136
result.width = start.width + tween_value*dwidth;
3237
if(end.height !== undefined)

0 commit comments

Comments
 (0)