Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
🎩 keyframes, ticker, spin, 0.03
lint demos
+133
-101
+1
-1
Makefile
+1
-1
Makefile
+20
-14
demos/box-cross/box-cross.js
+20
-14
demos/box-cross/box-cross.js
···
113
113
114
114
// -- animate --- //
115
115
116
-
var t = 0;
116
+
var ticker = 0;
117
+
var cycleCount = 150;
117
118
118
119
function animate() {
119
-
if ( isSpinning ) {
120
-
var turn = Math.floor( t % 4 );
121
-
var theta = Zdog.easeInOut( t%1, 3 ) * TAU;
122
-
if ( turn === 0 || turn == 2 ) {
123
-
model.rotate.y = theta;
124
-
} else if ( turn == 1 ) {
125
-
model.rotate.x = theta;
126
-
} else if ( turn == 3 ) {
127
-
model.rotate.z = theta;
128
-
}
129
-
t += 1/150;
130
-
}
131
-
120
+
spin();
132
121
illo.updateRenderGraph();
133
122
requestAnimationFrame( animate );
123
+
}
124
+
125
+
function spin() {
126
+
if ( !isSpinning ) {
127
+
return;
128
+
}
129
+
var progress = ticker / cycleCount;
130
+
var turn = Math.floor( progress % 4 );
131
+
var theta = Zdog.easeInOut( progress % 1, 3 ) * TAU;
132
+
if ( turn == 0 || turn == 2 ) {
133
+
model.rotate.y = theta;
134
+
} else if ( turn == 1 ) {
135
+
model.rotate.x = theta;
136
+
} else if ( turn == 3 ) {
137
+
model.rotate.z = theta;
138
+
}
139
+
ticker++;
134
140
}
135
141
136
142
animate();
+1
-1
demos/box-cross/index.html
+1
-1
demos/box-cross/index.html
+9
-8
demos/dot-cube/dot-cube.js
+9
-8
demos/dot-cube/dot-cube.js
···
71
71
];
72
72
73
73
var ticker = 0;
74
-
74
+
var cycleCount = 75;
75
+
var turnLimit = keyframes.length - 1;
75
76
76
77
function animate() {
77
-
var easeT = Zdog.easeInOut( ticker % 1, 4 );
78
-
var turnLimit = keyframes.length - 1;
79
-
var turn = Math.floor( ticker % turnLimit );
78
+
var progress = ticker / cycleCount;
79
+
var tween = Zdog.easeInOut( progress % 1, 4 );
80
+
var turn = Math.floor( progress % turnLimit );
80
81
var keyA = keyframes[ turn ];
81
82
var keyB = keyframes[ turn + 1 ];
82
-
cube.rotate.x = Zdog.lerp( keyA.x, keyB.x, easeT );
83
-
cube.rotate.y = Zdog.lerp( keyA.y, keyB.y, easeT );
84
-
cube.rotate.z = Zdog.lerp( keyA.z, keyB.z, easeT );
85
-
ticker += 1/75;
83
+
cube.rotate.x = Zdog.lerp( keyA.x, keyB.x, tween );
84
+
cube.rotate.y = Zdog.lerp( keyA.y, keyB.y, tween );
85
+
cube.rotate.z = Zdog.lerp( keyA.z, keyB.z, tween );
86
+
ticker++;
86
87
87
88
illo.updateRenderGraph();
88
89
requestAnimationFrame( animate );
+10
-7
demos/fullscreen/fullscreen.js
+10
-7
demos/fullscreen/fullscreen.js
···
2
2
3
3
var zoom = 4;
4
4
var isSpinning = true;
5
-
var TAU = Zdog.TAU;
5
+
var gold = '#EA0';
6
+
var orange = '#E62';
7
+
var garnet = '#C25';
8
+
var eggplant = '#636';
6
9
7
10
var illo = new Zdog.Illustration({
8
-
element: 'canvas',
11
+
element: '.illo',
9
12
zoom: zoom,
10
13
resize: 'fullscreen',
11
14
dragRotate: true,
···
25
28
addTo: illo,
26
29
translate: { z: -10 },
27
30
stroke: 2,
28
-
color: '#E21',
31
+
color: garnet,
29
32
});
30
33
31
34
new Zdog.Ellipse({
···
33
36
addTo: illo,
34
37
translate: { z: 10 },
35
38
stroke: 4,
36
-
color: '#19F',
39
+
color: eggplant,
37
40
});
38
41
39
42
new Zdog.Shape({
···
46
49
addTo: illo,
47
50
stroke: 2,
48
51
fill: true,
49
-
color: '#EA0',
52
+
color: gold,
50
53
});
51
54
52
55
new Zdog.Shape({
53
56
translate: { x: 10, y: -5 },
54
57
addTo: illo,
55
58
stroke: 7,
56
-
color: '#246',
59
+
color: orange,
57
60
});
58
61
59
62
// ----- animate ----- //
60
63
61
64
function animate() {
62
-
illo.rotate.y += isSpinning ? +TAU/150 : 0;
65
+
illo.rotate.y += isSpinning ? 0.03 : 0;
63
66
illo.updateRenderGraph();
64
67
requestAnimationFrame( animate );
65
68
}
+12
-12
demos/hemisphere-cone-ball/hemisphere-cone-ball.js
+12
-12
demos/hemisphere-cone-ball/hemisphere-cone-ball.js
···
4
4
var w = 48;
5
5
var h = 48;
6
6
var minWindowSize = Math.min( window.innerWidth, window.innerHeight );
7
-
var zoom = Math.min( 10, Math.floor( minWindowSize / w ) );
7
+
var zoom = Math.floor( minWindowSize / w );
8
8
illoElem.setAttribute( 'width', w * zoom );
9
9
illoElem.setAttribute( 'height', h * zoom );
10
10
···
52
52
var colorWheel = [ eggplant, garnet, orange, gold, yellow, ];
53
53
54
54
[ true, false ].forEach( function( isHemi ) {
55
-
var ySide = isHemi ? -1 : 1;
56
55
var shape = isHemi ? hemi : cone;
57
56
58
57
for ( var i=0; i < 5; i++ ) {
···
81
80
{ x: TAU * 1, y: TAU * 1 },
82
81
];
83
82
84
-
var t = 0;
85
-
var cycleFrame = 360;
83
+
var ticker = 0;
84
+
var cycleCount = 180;
85
+
var turnLimit = keyframes.length - 1;
86
86
87
87
function animate() {
88
-
rotate();
88
+
spin();
89
89
illo.updateRenderGraph();
90
90
requestAnimationFrame( animate );
91
91
}
···
94
94
95
95
// -- update -- //
96
96
97
-
function rotate() {
97
+
function spin() {
98
98
if ( !isSpinning ) {
99
99
return;
100
100
}
101
-
var easeT = Zdog.easeInOut( t % 1, 3 );
102
-
var turnLimit = keyframes.length - 1;
103
-
var turn = Math.floor( t % turnLimit );
101
+
var progress = ticker / cycleCount;
102
+
var tween = Zdog.easeInOut( progress % 1, 3 );
103
+
var turn = Math.floor( progress % turnLimit );
104
104
var keyA = keyframes[ turn ];
105
105
var keyB = keyframes[ turn + 1 ];
106
-
var thetaX = Zdog.lerp( keyA.x, keyB.x, easeT );
106
+
var thetaX = Zdog.lerp( keyA.x, keyB.x, tween );
107
107
illo.rotate.x = Math.cos( thetaX ) * TAU/12;
108
-
illo.rotate.y = Zdog.lerp( keyA.y, keyB.y, easeT ) ;
109
-
t += 1/180;
108
+
illo.rotate.y = Zdog.lerp( keyA.y, keyB.y, tween ) ;
109
+
ticker++;
110
110
}
+1
-1
demos/hemisphere-cone-ball/index.html
+1
-1
demos/hemisphere-cone-ball/index.html
+5
-3
demos/houses/houses.js
+5
-3
demos/houses/houses.js
···
192
192
// ----- animate ----- //
193
193
194
194
var ticker = 0;
195
+
var cycleCount = 240;
195
196
196
197
function animate() {
197
198
if ( isSpinning ) {
198
-
var easeT = Zdog.easeInOut( ticker % 1, 3 );
199
-
illo.rotate.y = easeT * TAU + initRotate.y;
200
-
ticker += 1/240; // 1 rotation every 240 frames
199
+
var progress = ticker / cycleCount;
200
+
var tween = Zdog.easeInOut( progress % 1, 3 );
201
+
illo.rotate.y = tween * TAU + initRotate.y;
202
+
ticker++;
201
203
}
202
204
illo.updateRenderGraph();
203
205
requestAnimationFrame( animate );
+1
-1
demos/houses/index.html
+1
-1
demos/houses/index.html
+5
-2
demos/kid-kit/index.html
+5
-2
demos/kid-kit/index.html
···
4
4
<meta charset="utf-8" />
5
5
<meta name="viewport" content="width=device-width" />
6
6
7
-
<title>kid-kit</title>
7
+
<title>Kid Kit</title>
8
8
9
9
<style>
10
10
html { height: 100%; }
···
30
30
</head>
31
31
<body>
32
32
33
-
<canvas class="illo"></canvas>
33
+
<div class="container">
34
+
<h1>Kid Kit</h1>
35
+
<canvas class="illo" width="300" height="300"></canvas>
36
+
</div>
34
37
35
38
<script src="../../js/boilerplate.js"></script>
36
39
<script src="../../js/canvas-renderer.js"></script>
+4
-10
demos/kid-kit/kid-kit.js
+4
-10
demos/kid-kit/kid-kit.js
···
1
-
var illoElem = document.querySelector('.illo');
2
-
var w = 72;
3
-
var h = 72;
4
-
var minWindowSize = Math.min( window.innerWidth - 20 , window.innerHeight - 20 );
5
-
var zoom = Math.floor( minWindowSize / w );
6
-
illoElem.setAttribute( 'width', w * zoom );
7
-
illoElem.setAttribute( 'height', h * zoom );
1
+
// --- variables --- //
8
2
9
3
var offWhite = '#FED';
10
4
var gold = '#EA0';
···
12
6
var eggplant = '#636';
13
7
14
8
var illo = new Zdog.Illustration({
15
-
element: illoElem,
16
-
zoom: zoom,
9
+
element: '.illo',
10
+
zoom: 4,
17
11
dragRotate: true,
18
12
});
19
13
20
-
// -- illustration shapes --- //
14
+
// --- model --- //
21
15
22
16
// body center
23
17
new Zdog.Shape({
+1
-1
demos/kirby-parasol/kirby-parasol.js
+1
-1
demos/kirby-parasol/kirby-parasol.js
+1
-1
demos/no-illo-svg/no-illo-svg.js
+1
-1
demos/no-illo-svg/no-illo-svg.js
+1
-2
demos/resize/resize.js
+1
-2
demos/resize/resize.js
···
2
2
3
3
var zoom = 4;
4
4
var isSpinning = true;
5
-
var TAU = Zdog.TAU;
6
5
7
6
var model = new Zdog.Anchor();
8
7
···
81
80
// ----- animate ----- //
82
81
83
82
function animate() {
84
-
model.rotate.y += isSpinning ? +TAU/150 : 0;
83
+
model.rotate.y += isSpinning ? 0.03 : 0;
85
84
model.updateGraph();
86
85
svgIllo.renderGraph( model );
87
86
canvasIllo.renderGraph( model );
+6
-3
demos/shade-and-shades/shade-and-shades.js
+6
-3
demos/shade-and-shades/shade-and-shades.js
···
176
176
177
177
// -- animate --- //
178
178
179
-
var t = 0;
179
+
var ticker = 0;
180
+
var cycleCount = 150;
180
181
181
182
function animate() {
182
183
if ( isSpinning ) {
183
-
illo.rotate.y = Zdog.easeInOut( t % 1, 4 ) * TAU + initialRotate.y;
184
-
t += 1/150;
184
+
var progress = ticker / cycleCount;
185
+
var tween = Zdog.easeInOut( progress % 1, 4 );
186
+
illo.rotate.y = tween * TAU + initialRotate.y;
187
+
ticker++;
185
188
}
186
189
187
190
illo.updateRenderGraph();
+1
-1
demos/shapes/index.html
+1
-1
demos/shapes/index.html
+5
-3
demos/shapes/shapes.js
+5
-3
demos/shapes/shapes.js
···
122
122
123
123
// ----- animate ----- //
124
124
125
-
var clock = 0;
125
+
var ticker = 0;
126
+
var cycleCount = 360;
126
127
127
128
function animate() {
128
129
if ( isSpinning ) {
129
-
var theta = Zdog.easeInOut( clock % 1, 3 ) * TAU;
130
+
var progress = ticker / cycleCount;
131
+
var theta = Zdog.easeInOut( progress % 1, 3 ) * TAU;
130
132
illo.rotate.y = theta * 2;
131
133
illo.rotate.x = Math.sin( theta ) * 0.5;
132
-
clock += 1/360; // cycle ever 360 frames
134
+
ticker++;
133
135
}
134
136
illo.updateRenderGraph();
135
137
requestAnimationFrame( animate );
+18
-8
demos/solids/solids.js
+18
-8
demos/solids/solids.js
···
13
13
var ROOT5 = Math.sqrt(5);
14
14
var PHI = ( 1 + ROOT5 ) / 2;
15
15
var isSpinning = true;
16
-
var t = 0;
17
-
var tSpeed = 1/180;
18
16
var viewRotation = new Zdog.Vector();
19
17
20
18
// warm colors
···
390
388
391
389
// -- animate --- //
392
390
391
+
var keyframes = [
392
+
{ x: 0, y: 0 },
393
+
{ x: 0, y: TAU },
394
+
{ x: TAU, y: TAU },
395
+
];
396
+
397
+
var ticker = 0;
398
+
var cycleCount = 180;
399
+
var turnLimit = keyframes.length - 1;
400
+
393
401
function animate() {
394
402
update();
395
403
illo.renderGraph();
···
399
407
animate();
400
408
401
409
function update() {
402
-
viewRotation.y += isSpinning ? +TAU/150 : 0;
403
410
404
411
if ( isSpinning ) {
405
-
t += tSpeed;
406
-
var theta = Zdog.easeInOut( t % 1 ) * TAU;
407
-
var everyOtherCycle = t % 2 < 1;
408
-
viewRotation.y = everyOtherCycle ? theta : 0;
409
-
viewRotation.x = everyOtherCycle ? 0 : -theta;
412
+
var progress = ticker / cycleCount;
413
+
var tween = Zdog.easeInOut( progress % 1, 4 );
414
+
var turn = Math.floor( progress % turnLimit );
415
+
var keyA = keyframes[ turn ];
416
+
var keyB = keyframes[ turn + 1 ];
417
+
viewRotation.x = Zdog.lerp( keyA.x, keyB.x, tween );
418
+
viewRotation.y = Zdog.lerp( keyA.y, keyB.y, tween );
419
+
ticker++;
410
420
}
411
421
412
422
solids.forEach( function( solid ) {
+6
-5
demos/strutter/strutter.js
+6
-5
demos/strutter/strutter.js
···
205
205
206
206
// -- animate --- //
207
207
208
-
var t = 0;
208
+
var ticker = 0;
209
+
var cycleCount = 150;
209
210
210
211
function animate() {
211
212
if ( isSpinning ) {
212
-
illo.rotate.y = Zdog.easeInOut( t % 1, 4 ) * TAU - TAU/8;
213
-
t += 1/150;
213
+
var progress = ticker / cycleCount;
214
+
illo.rotate.y = Zdog.easeInOut( progress % 1, 4 ) * TAU - TAU/8;
215
+
ticker++;
214
216
}
215
-
illo.updateGraph();
216
-
illo.renderGraph();
217
+
illo.updateRenderGraph();
217
218
requestAnimationFrame( animate );
218
219
}
219
220
+25
-17
demos/zdog-logo/zdog-logo.js
+25
-17
demos/zdog-logo/zdog-logo.js
···
233
233
234
234
// -- animate --- //
235
235
236
-
var t = 0;
237
-
var tSpeed = 1/180;
236
+
var keyframes = [
237
+
{ y: 0 + initRotate.y, z: 0 },
238
+
{ y: TAU + initRotate.y, z: 0 },
239
+
{ y: TAU + initRotate.y, z: TAU },
240
+
];
241
+
242
+
var ticker = 0;
243
+
var cycleCount = 180;
244
+
var turnLimit = keyframes.length - 1;
238
245
239
246
function animate() {
240
-
// update
241
-
if ( isSpinning ) {
242
-
var turn = Math.floor( t % 2 );
243
-
var easeT = Zdog.easeInOut( t % 1, 4 );
244
-
if ( turn == 0 ) {
245
-
illo.rotate.y = easeT * TAU + initRotate.y;
246
-
} else if ( turn == 1 ) {
247
-
illo.rotate.z = easeT * TAU;
248
-
// scene.rotate.x = easeT * TAU + initRotate.x;
249
-
}
250
-
t += tSpeed;
247
+
spin();
248
+
illo.updateRenderGraph();
249
+
requestAnimationFrame( animate );
250
+
}
251
+
252
+
function spin() {
253
+
if ( !isSpinning ) {
254
+
return;
251
255
}
252
-
illo.updateGraph();
253
-
// render
254
-
illo.renderGraph();
255
-
requestAnimationFrame( animate );
256
+
var progress = ticker / cycleCount;
257
+
var tween = Zdog.easeInOut( progress % 1, 4 );
258
+
var turn = Math.floor( progress % turnLimit );
259
+
var keyA = keyframes[ turn ];
260
+
var keyB = keyframes[ turn + 1 ];
261
+
illo.rotate.y = Zdog.lerp( keyA.y, keyB.y, tween );
262
+
illo.rotate.z = Zdog.lerp( keyA.z, keyB.z, tween );
263
+
ticker++;
256
264
}
257
265
258
266
animate();