Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
🎩 houses demo
+264
-4
+4
-4
demos/dot-cube/dot-cube.js
+4
-4
demos/dot-cube/dot-cube.js
···
70
70
{ x: -TAU/4, y: 0, z: TAU/2 },
71
71
];
72
72
73
-
var t = 0;
73
+
var ticker = 0;
74
74
75
75
76
76
function animate() {
77
-
var easeT = Zdog.easeInOut( t % 1, 4 );
77
+
var easeT = Zdog.easeInOut( ticker % 1, 4 );
78
78
var turnLimit = keyframes.length - 1;
79
-
var turn = Math.floor( t % turnLimit );
79
+
var turn = Math.floor( ticker % turnLimit );
80
80
var keyA = keyframes[ turn ];
81
81
var keyB = keyframes[ turn + 1 ];
82
82
cube.rotate.x = Zdog.lerp( keyA.x, keyB.x, easeT );
83
83
cube.rotate.y = Zdog.lerp( keyA.y, keyB.y, easeT );
84
84
cube.rotate.z = Zdog.lerp( keyA.z, keyB.z, easeT );
85
-
t += 1/75;
85
+
ticker += 1/75;
86
86
87
87
illo.updateRenderGraph();
88
88
requestAnimationFrame( animate );
+207
demos/houses/houses.js
+207
demos/houses/houses.js
···
1
+
// ------------------------- demo ------------------------- //
2
+
3
+
var illoElem = document.querySelector('.illo');
4
+
var sceneSize = 56;
5
+
var minWindowSize = Math.min( window.innerWidth - 20 , window.innerHeight - 20 );
6
+
var zoom = Math.floor( minWindowSize / sceneSize );
7
+
var illoSize = sceneSize * zoom;
8
+
illoElem.setAttribute( 'width', illoSize );
9
+
illoElem.setAttribute( 'height', illoSize );
10
+
var isSpinning = true;
11
+
var TAU = Zdog.TAU;
12
+
13
+
var offWhite = '#FED';
14
+
var yellow = '#ED0';
15
+
var gold = '#EA0';
16
+
var orange = '#E62';
17
+
var garnet = '#C25';
18
+
var eggplant = '#636';
19
+
20
+
// enable fill, disable stroke for all defaults
21
+
[ Zdog.Rect, Zdog.Shape, Zdog.Ellipse ].forEach( function( Item ) {
22
+
Item.defaults.fill = true;
23
+
Item.defaults.stroke = false;
24
+
});
25
+
26
+
var initRotate = { y: TAU/8 };
27
+
var turnRatio = 1 / Math.sin( TAU/8 );
28
+
29
+
var illo = new Zdog.Illustration({
30
+
element: illoElem,
31
+
zoom: zoom,
32
+
rotate: initRotate,
33
+
// stretch looks circular at 1/8 turn
34
+
scale: { x: turnRatio, z: turnRatio },
35
+
dragRotate: true,
36
+
onDragStart: function() {
37
+
isSpinning = false;
38
+
},
39
+
});
40
+
41
+
// ----- model ----- //
42
+
43
+
var house = new Zdog.Anchor({
44
+
addTo: illo,
45
+
translate: { x: -2, y: 2, z: 8 },
46
+
});
47
+
48
+
var frontGroup = new Zdog.Group({
49
+
addTo: house,
50
+
translate: { z: 5 },
51
+
});
52
+
// front wall
53
+
new Zdog.Rect({
54
+
addTo: frontGroup,
55
+
width: 14,
56
+
height: 14,
57
+
color: garnet,
58
+
});
59
+
60
+
var frontWindow = new Zdog.Rect({
61
+
addTo: frontGroup,
62
+
width: 2,
63
+
height: 4,
64
+
translate: { x: -4, y: -3 },
65
+
color: eggplant,
66
+
});
67
+
frontWindow.copy({
68
+
translate: { y: -3 },
69
+
});
70
+
frontWindow.copy({
71
+
translate: { x: 4, y: -3 },
72
+
});
73
+
frontWindow.copy({
74
+
translate: { x: -4, y: 3 },
75
+
});
76
+
// door
77
+
new Zdog.Shape({
78
+
addTo: frontGroup,
79
+
path: [
80
+
{ x: -2, y: 3 },
81
+
{ x: -2, y: -1 },
82
+
{ arc: [
83
+
{ x: -2, y: -3 },
84
+
{ x: 0, y: -3 },
85
+
]},
86
+
{ arc: [
87
+
{ x: 2, y: -3 },
88
+
{ x: 2, y: -1 },
89
+
]},
90
+
{ x: 2, y: 3 }
91
+
],
92
+
translate: { x: 2, y: 4 },
93
+
color: eggplant,
94
+
});
95
+
96
+
// backWall
97
+
var backGroup = frontGroup.copyGraph({
98
+
translate: { z: -5 },
99
+
rotate: { y: TAU/2 },
100
+
});
101
+
102
+
backGroup.children.forEach( function( child, i ) {
103
+
// orange windows, yellow wall
104
+
child.color = i ? orange : yellow;
105
+
});
106
+
107
+
var rightGroup = new Zdog.Group({
108
+
addTo: house,
109
+
translate: { x: 7 },
110
+
rotate: { y: -TAU/4 },
111
+
});
112
+
// right wall
113
+
new Zdog.Shape({
114
+
addTo: rightGroup,
115
+
path: [
116
+
{ x: -5, y: 7 },
117
+
{ x: -5, y: -7 },
118
+
{ x: 0, y: -12 },
119
+
{ x: 5, y: -7 },
120
+
{ x: 5, y: 7 },
121
+
],
122
+
width: 10,
123
+
height: 14,
124
+
color: offWhite,
125
+
});
126
+
127
+
var sideWindow = frontWindow.copy({
128
+
addTo: rightGroup,
129
+
translate: { x: -2, y: -3 },
130
+
color: gold,
131
+
});
132
+
sideWindow.copy({
133
+
translate: { x: 2, y: -3 },
134
+
});
135
+
sideWindow.copy({
136
+
translate: { x: 2, y: 3 },
137
+
});
138
+
sideWindow.copy({
139
+
translate: { x: -2, y: 3 },
140
+
});
141
+
142
+
// porthole
143
+
new Zdog.Ellipse({
144
+
addTo: rightGroup,
145
+
width: 2,
146
+
height: 2,
147
+
translate: { y: -8 },
148
+
color: gold,
149
+
});
150
+
151
+
var leftGroup = rightGroup.copyGraph({
152
+
translate: { x: -7 },
153
+
rotate: { y: TAU/4 },
154
+
});
155
+
156
+
leftGroup.children.forEach( function( child, i ) {
157
+
// eggplant windows, yellow wall
158
+
child.color = i ? eggplant : orange;
159
+
});
160
+
161
+
// front roof
162
+
var frontRoof = new Zdog.Shape({
163
+
addTo: house,
164
+
path: [
165
+
{ x: -7, y: -7, z: 5 },
166
+
{ x: -7, y: -12, z: 0 },
167
+
{ x: 7, y: -12, z: 0 },
168
+
{ x: 7, y: -7, z: 5 },
169
+
],
170
+
color: eggplant,
171
+
});
172
+
173
+
frontRoof.copy({
174
+
scale: { z: -1 },
175
+
color: garnet,
176
+
});
177
+
178
+
// floor
179
+
new Zdog.Rect({
180
+
addTo: house,
181
+
width: 14,
182
+
height: 10,
183
+
translate: { y: 7 },
184
+
rotate: { x: TAU/4 },
185
+
color: eggplant,
186
+
});
187
+
188
+
house.copyGraph({
189
+
translate: house.translate.copy().multiply( -1 ),
190
+
});
191
+
192
+
// ----- animate ----- //
193
+
194
+
var ticker = 0;
195
+
196
+
function animate() {
197
+
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
201
+
}
202
+
illo.updateRenderGraph();
203
+
requestAnimationFrame( animate );
204
+
}
205
+
206
+
animate();
207
+
+53
demos/houses/index.html
+53
demos/houses/index.html
···
1
+
<!doctype html>
2
+
<html lang="en">
3
+
<head>
4
+
<meta charset="utf-8" />
5
+
<meta name="viewport" content="width=device-width" />
6
+
7
+
<title>houses</title>
8
+
9
+
<style>
10
+
html { height: 100%; }
11
+
12
+
body {
13
+
min-height: 100%;
14
+
margin: 0;
15
+
display: flex;
16
+
align-items: center;
17
+
justify-content: center;
18
+
background: white;
19
+
font-family: sans-serif;
20
+
text-align: center;
21
+
}
22
+
23
+
.illo {
24
+
display: block;
25
+
margin: 0px auto 20px;
26
+
background: #FDB;
27
+
cursor: move;
28
+
}
29
+
</style>
30
+
31
+
</head>
32
+
<body>
33
+
34
+
<div class="container">
35
+
<canvas class="illo"></canvas>
36
+
</div>
37
+
38
+
<script src="../../js/boilerplate.js"></script>
39
+
<script src="../../js/canvas-renderer.js"></script>
40
+
<script src="../../js/svg-renderer.js"></script>
41
+
<script src="../../js/vector.js"></script>
42
+
<script src="../../js/anchor.js"></script>
43
+
<script src="../../js/path-command.js"></script>
44
+
<script src="../../js/shape.js"></script>
45
+
<script src="../../js/ellipse.js"></script>
46
+
<script src="../../js/rect.js"></script>
47
+
<script src="../../js/group.js"></script>
48
+
<script src="../../js/dragger.js"></script>
49
+
<script src="../../js/illustration.js"></script>
50
+
<script src="houses.js"></script>
51
+
52
+
</body>
53
+
</html>