Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
🐞 address burger patty z-sort problem
🎩 gear-icon doesn't need Group
+134
-5
+4
-5
demo/gear-icon/gear-icon.js
+4
-5
demo/gear-icon/gear-icon.js
···
51
51
rotate: { x: TAU/4 },
52
52
});
53
53
54
-
var faceGroup = new Zdog.Group({
54
+
var gearSide = new Zdog.Anchor({
55
55
addTo: gear,
56
56
translate: frontZ,
57
57
});
58
58
// gear face
59
59
new Zdog.Shape({
60
-
addTo: faceGroup,
60
+
addTo: gearSide,
61
61
path: gearPath,
62
62
color: colorA,
63
63
backface: false,
···
68
68
});
69
69
// nub
70
70
new Zdog.Cylinder({
71
-
addTo: faceGroup,
71
+
addTo: gearSide,
72
72
diameter: 6,
73
73
length: 2,
74
74
color: colorB,
···
78
78
stroke: false,
79
79
});
80
80
81
-
faceGroup.copyGraph({
81
+
gearSide.copyGraph({
82
82
rotate: { y: TAU/2 },
83
83
translate: backZ,
84
84
});
85
85
86
86
gearPath.forEach( function( corner, i ) {
87
-
// return;
88
87
var nextCorner = gearPath[ i + 1 ] || gearPath[0];
89
88
new Zdog.Shape({
90
89
addTo: gear,
+52
demo/patties/index.html
+52
demo/patties/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>template</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
+
cursor: move;
27
+
}
28
+
</style>
29
+
30
+
</head>
31
+
<body>
32
+
33
+
<div class="container">
34
+
<svg class="illo"></svg>
35
+
</div>
36
+
37
+
<script src="../../js/utils.js"></script>
38
+
<script src="../../js/canvas-renderer.js"></script>
39
+
<script src="../../js/svg-renderer.js"></script>
40
+
<script src="../../js/vector.js"></script>
41
+
<script src="../../js/anchor.js"></script>
42
+
<script src="../../js/path-command.js"></script>
43
+
<script src="../../js/shape.js"></script>
44
+
<script src="../../js/ellipse.js"></script>
45
+
<script src="../../js/rect.js"></script>
46
+
<script src="../../js/group.js"></script>
47
+
<script src="../../js/dragger.js"></script>
48
+
<script src="../../js/illustration.js"></script>
49
+
<script src="patties.js"></script>
50
+
51
+
</body>
52
+
</html>
+59
demo/patties/patties.js
+59
demo/patties/patties.js
···
1
+
// ------------------------- demo ------------------------- //
2
+
3
+
var illoElem = document.querySelector('.illo');
4
+
var sceneSize = 48;
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 illo = new Zdog.Illustration({
14
+
element: illoElem,
15
+
zoom: zoom,
16
+
dragRotate: true,
17
+
onDragStart: function() {
18
+
isSpinning = false;
19
+
},
20
+
});
21
+
22
+
// ----- model ----- //
23
+
24
+
var rect = new Zdog.Rect({
25
+
width: 20,
26
+
height: 20,
27
+
addTo: illo,
28
+
translate: { y: 2 },
29
+
rotate: { x: TAU/4 },
30
+
stroke: 2,
31
+
color: '#E21',
32
+
});
33
+
34
+
new Zdog.Ellipse({
35
+
diameter: 20,
36
+
addTo: illo,
37
+
translate: { y: -2 },
38
+
rotate: { x: TAU/4 },
39
+
stroke: 2,
40
+
color: '#19F',
41
+
});
42
+
43
+
new Zdog.Shape({
44
+
addTo: rect,
45
+
translate: { y: -10, z: 2 },
46
+
stroke: 2,
47
+
color: '#EA0',
48
+
})
49
+
50
+
// ----- animate ----- //
51
+
52
+
function animate() {
53
+
illo.rotate.y += isSpinning ? +TAU/150 : 0;
54
+
illo.updateRenderGraph();
55
+
requestAnimationFrame( animate );
56
+
}
57
+
58
+
animate();
59
+
+11
js/ellipse.js
+11
js/ellipse.js
···
62
62
}
63
63
};
64
64
65
+
Ellipse.prototype.updateSortValue = function() {
66
+
Shape.prototype.updateSortValue.apply( this, arguments );
67
+
if ( this.quarters != 4 ) {
68
+
return;
69
+
}
70
+
// ellipse is self closing, do not count last point twice
71
+
var length = this.pathCommands.length;
72
+
var lastPoint = this.pathCommands[ length - 1 ].endRenderPoint;
73
+
this.sortValue -= lastPoint.z / length;
74
+
};
75
+
65
76
return Ellipse;
66
77
67
78
}));
+8
js/rounded-rect.js
+8
js/rounded-rect.js
···
73
73
this.path = path;
74
74
};
75
75
76
+
RoundedRect.prototype.updateSortValue = function() {
77
+
Shape.prototype.updateSortValue.apply( this, arguments );
78
+
// ellipse is self closing, do not count last point twice
79
+
var length = this.pathCommands.length;
80
+
var lastPoint = this.pathCommands[ length - 1 ].endRenderPoint;
81
+
this.sortValue -= lastPoint.z / length;
82
+
};
83
+
76
84
return RoundedRect;
77
85
78
86
}));