Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
🎩 use Hemisphere in santorini; backface in shades
+28
-67
+2
-3
demo/santorini/index.html
+2
-3
demo/santorini/index.html
···
31
31
<body>
32
32
33
33
<div class="container">
34
-
<svg class="illo"></svg>
35
-
<!-- <p>Click & drag to rotate</p> -->
34
+
<canvas class="illo"></canvas>
36
35
<p>
37
36
<button class="reset-button">Reset</button>
38
37
</p>
···
48
47
<script src="../../js/rect.js"></script>
49
48
<script src="../../js/ellipse.js"></script>
50
49
<script src="../../js/group.js"></script>
50
+
<script src="../../js/hemisphere.js"></script>
51
51
<script src="../../js/dragger.js"></script>
52
52
<script src="../../js/illustration.js"></script>
53
53
<script src="../fps-counter.js"></script>
54
54
<script src="make-window.js"></script>
55
55
<script src="make-building.js"></script>
56
-
<script src="make-dome.js"></script>
57
56
<script src="make-rock.js"></script>
58
57
<script src="buildings.js"></script>
59
58
<script src="santorini.js"></script>
-25
demo/santorini/make-dome.js
-25
demo/santorini/make-dome.js
···
1
-
var roof = '#06B';
2
-
var TAU = Zdog.TAU;
3
-
4
-
function makeDome( options ) {
5
-
var d = options.size;
6
-
var r = d/2;
7
-
var domePanel = new Zdog.Shape( Zdog.extend( options, {
8
-
path: [
9
-
{ x: -r, y: 0, z: r },
10
-
{ arc: [
11
-
{ x: -r, y: -d, z: r },
12
-
{ x: 0, y: -d, z: 0 },
13
-
]},
14
-
{ arc: [
15
-
{ x: r, y: -d, z: -r },
16
-
{ x: r, y: 0, z: -r },
17
-
]},
18
-
],
19
-
color: roof,
20
-
}));
21
-
22
-
domePanel.copy({
23
-
rotate: { y: TAU/4 },
24
-
});
25
-
}
+15
-13
demo/santorini/santorini.js
+15
-13
demo/santorini/santorini.js
···
1
-
/* globals makeBuilding, makeDome, oneStoryBuilding, twoStoryBuilding, oneStorySlanter, makeRock */
1
+
/* globals makeBuilding, oneStoryBuilding, twoStoryBuilding, oneStorySlanter, makeRock */
2
2
3
3
// -------------------------- demo -------------------------- //
4
4
···
29
29
// var southWall = white;
30
30
// var westWall = '#CDE';
31
31
// var eastWall = '#8AD';
32
-
// var roof = '#06B';
32
+
var roof = '#06B';
33
33
// var northWall = roof;
34
34
// var navy = '#037';
35
35
// var midnight = '#024';
···
191
191
});
192
192
193
193
// cathedral dome
194
-
195
-
makeDome({
196
-
size: 6,
194
+
var dome = new Zdog.Hemisphere({
197
195
addTo: cathBaseAnchor,
196
+
diameter: 6,
198
197
translate: { y: -30 },
198
+
rotate: { x: TAU/4 },
199
+
color: roof,
200
+
stroke: false,
199
201
});
200
202
201
203
// ----- ----- //
···
348
350
],
349
351
});
350
352
351
-
makeDome({
352
-
size: 4,
353
+
dome.copy({
354
+
diameter: 4,
353
355
addTo: centralTower2ndAnchor,
354
356
translate: { y: -8 },
355
357
});
···
415
417
],
416
418
});
417
419
418
-
makeDome({
419
-
size: 4,
420
+
dome.copy({
421
+
diameter: 4,
420
422
addTo: temple3rdFloor,
421
423
translate: { y: -6 },
422
424
});
···
442
444
],
443
445
});
444
446
445
-
makeDome({
446
-
size: 6,
447
+
dome.copy({
448
+
diameter: 6,
447
449
addTo: westPerchAnchor,
448
450
translate: { y: -6 },
449
451
});
···
535
537
ewWindows: [ { y: -27 } ],
536
538
});
537
539
538
-
makeDome({
540
+
dome.copy({
539
541
addTo: backTowerAnchor,
540
542
translate: { y: -30 },
541
-
size: 4,
543
+
diameter: 4,
542
544
});
543
545
544
546
// -- animate --- //
+11
-26
demo/shade-and-shades/shade-and-shades.js
+11
-26
demo/shade-and-shades/shade-and-shades.js
···
158
158
scale: { x: -lensScale },
159
159
});
160
160
161
-
// glasses arm
162
-
var glassesArmA = new Zdog.Shape({
161
+
var glassesArm = new Zdog.Shape({
163
162
path: [
164
-
{ z: 12, y: 0 },
165
-
{ z: -1, y: 0 },
163
+
{ x: 12, y: 0 },
164
+
{ x: -1, y: 0 },
166
165
{ arc: [
167
-
{ z: -1 - 8*quarterView, y: 0 },
168
-
{ z: -1 - 8*quarterView, y: 8 },
166
+
{ x: -1 - 8*quarterView, y: 0 },
167
+
{ x: -1 - 8*quarterView, y: 8 },
169
168
]},
170
169
],
171
170
addTo: hat,
172
171
translate: { x: -16, y: 8 },
172
+
rotate: { y: TAU/4 },
173
+
// only see one arm at time
174
+
backface: false,
173
175
});
174
-
var glassesArmB = glassesArmA.copy({
176
+
glassesArm.copy({
177
+
scale: { x: -1 },
175
178
translate: { x: 16, y: 8 },
179
+
rotate: { y: -TAU/4 },
176
180
});
177
-
178
-
// do not display glassesArm if behind lenses
179
-
glassesArmA.render = function() {
180
-
var ry = hat.rotate.y;
181
-
var isRotateYBlocking = ry > 0 && ry < TAU/4;
182
-
if ( isRotateXFlat && isRotateYBlocking ) {
183
-
return;
184
-
}
185
-
Zdog.Shape.prototype.render.apply( this, arguments );
186
-
};
187
-
188
-
glassesArmB.render = function() {
189
-
var ry = hat.rotate.y;
190
-
var isRotateYBlocking = ry > TAU*3/4 && ry < TAU;
191
-
if ( isRotateXFlat && isRotateYBlocking ) {
192
-
return;
193
-
}
194
-
Zdog.Shape.prototype.render.apply( this, arguments );
195
-
};
196
181
197
182
// -- animate --- //
198
183