Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
🎩 add shapes & path-commands demos
+334
+49
demos/path-commands/index.html
+49
demos/path-commands/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>Path commands</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
+
font-family: sans-serif;
19
+
text-align: center;
20
+
}
21
+
22
+
.illo {
23
+
display: block;
24
+
margin: 20px auto;
25
+
background: #FDB;
26
+
cursor: move;
27
+
}
28
+
</style>
29
+
30
+
</head>
31
+
<body>
32
+
33
+
<div class="container">
34
+
<h1>Path commands</h1>
35
+
<canvas class="illo" width="300" height="300"></canvas>
36
+
</div>
37
+
38
+
<script src="../../js/boilerplate.js"></script>
39
+
<script src="../../js/canvas-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/dragger.js"></script>
45
+
<script src="../../js/illustration.js"></script>
46
+
<script src="path-commands.js"></script>
47
+
48
+
</body>
49
+
</html>
+87
demos/path-commands/path-commands.js
+87
demos/path-commands/path-commands.js
···
1
+
// ----- variables ----- //
2
+
3
+
var eggplant = '#636';
4
+
5
+
// ----- model ----- //
6
+
7
+
var illo = new Zdog.Illustration({
8
+
element: '.illo',
9
+
zoom: 5,
10
+
dragRotate: true,
11
+
});
12
+
13
+
// lines
14
+
new Zdog.Shape({
15
+
addTo: illo,
16
+
path: [
17
+
{ x: -6, y: -6 },
18
+
{ x: 6, y: -6 },
19
+
{ x: -6, y: 6 },
20
+
{ x: 6, y: 6 },
21
+
],
22
+
translate: { x: -12, y: -12 },
23
+
closed: false,
24
+
color: eggplant,
25
+
stroke: 2,
26
+
});
27
+
28
+
// move
29
+
new Zdog.Shape({
30
+
addTo: illo,
31
+
path: [
32
+
{ x: -6, y: -6 },
33
+
{ x: 6, y: -6 },
34
+
{ move: { x: -6, y: 6 } },
35
+
{ x: 6, y: 6 },
36
+
],
37
+
translate: { x: 12, y: -12 },
38
+
closed: false,
39
+
color: eggplant,
40
+
stroke: 2,
41
+
});
42
+
43
+
// arc
44
+
new Zdog.Shape({
45
+
addTo: illo,
46
+
path: [
47
+
{ x: -6, y: -6 }, // start
48
+
{ arc: [
49
+
{ x: 2, y: -6 }, // corner
50
+
{ x: 2, y: 2 }, // end point
51
+
]},
52
+
{ arc: [ // start next arc from last end point
53
+
{ x: 2, y: 6 }, // corner
54
+
{ x: 6, y: 6 }, // end point
55
+
]},
56
+
],
57
+
translate: { x: -12, y: 12 },
58
+
closed: false,
59
+
color: eggplant,
60
+
stroke: 2,
61
+
});
62
+
63
+
// bezier
64
+
new Zdog.Shape({
65
+
addTo: illo,
66
+
path: [
67
+
{ x: -6, y: -6 }, // start
68
+
{ bezier: [
69
+
{ x: 2, y: -6 }, // start control point
70
+
{ x: 2, y: 6 }, // end control point
71
+
{ x: 6, y: 6 }, // end control point
72
+
]},
73
+
],
74
+
translate: { x: 12, y: 12 },
75
+
closed: false,
76
+
color: eggplant,
77
+
stroke: 2,
78
+
});
79
+
80
+
// ----- animate ----- //
81
+
82
+
function animate() {
83
+
illo.updateRenderGraph();
84
+
requestAnimationFrame( animate );
85
+
}
86
+
87
+
animate();
+59
demos/shapes/index.html
+59
demos/shapes/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>shapes</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
+
background: #FDB;
26
+
margin: 0px auto 20px;
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/rounded-rect.js"></script>
48
+
<script src="../../js/polygon.js"></script>
49
+
<script src="../../js/group.js"></script>
50
+
<script src="../../js/hemisphere.js"></script>
51
+
<script src="../../js/cylinder.js"></script>
52
+
<script src="../../js/cone.js"></script>
53
+
<script src="../../js/box.js"></script>
54
+
<script src="../../js/dragger.js"></script>
55
+
<script src="../../js/illustration.js"></script>
56
+
<script src="shapes.js"></script>
57
+
58
+
</body>
59
+
</html>
+139
demos/shapes/shapes.js
+139
demos/shapes/shapes.js
···
1
+
// ------------------------- demo ------------------------- //
2
+
3
+
var illoElem = document.querySelector('.illo');
4
+
var sceneSize = 24;
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
+
var offWhite = '#FED';
13
+
var gold = '#EA0';
14
+
var orange = '#E62';
15
+
var garnet = '#C25';
16
+
var eggplant = '#636';
17
+
18
+
var illo = new Zdog.Illustration({
19
+
element: illoElem,
20
+
zoom: zoom,
21
+
dragRotate: true,
22
+
onDragStart: function() {
23
+
isSpinning = false;
24
+
},
25
+
});
26
+
27
+
// ----- model ----- //
28
+
29
+
new Zdog.Rect({
30
+
addTo: illo,
31
+
width: 4,
32
+
height: 4,
33
+
translate: { x: -4, y: -4, z: 4 },
34
+
stroke: 1,
35
+
color: orange,
36
+
});
37
+
38
+
new Zdog.RoundedRect({
39
+
addTo: illo,
40
+
width: 4,
41
+
height: 4,
42
+
cornerRadius: 1,
43
+
translate: { x: -4, y: 4, z: -4 },
44
+
stroke: 1,
45
+
color: eggplant,
46
+
});
47
+
48
+
new Zdog.Ellipse({
49
+
addTo: illo,
50
+
diameter: 4,
51
+
translate: { x: 4, y: 4, z: 4 },
52
+
stroke: 1,
53
+
color: garnet,
54
+
});
55
+
56
+
new Zdog.Polygon({
57
+
addTo: illo,
58
+
sides: 3,
59
+
radius: 2.5,
60
+
translate: { x: 4, y: -4, z: -4 },
61
+
stroke: 1,
62
+
color: orange,
63
+
});
64
+
65
+
new Zdog.Shape({
66
+
addTo: illo,
67
+
path: [
68
+
{ x: -1 },
69
+
{ x: 1 },
70
+
{ move: { y: -1 } },
71
+
{ y: 1 },
72
+
{ move: { z: -1 } },
73
+
{ z: 1 }
74
+
],
75
+
scale: 1.25,
76
+
stroke: 1,
77
+
color: offWhite,
78
+
});
79
+
80
+
new Zdog.Hemisphere({
81
+
addTo: illo,
82
+
diameter: 5,
83
+
translate: { x: -4, y: -4, z: -4 },
84
+
color: garnet,
85
+
backface: gold,
86
+
stroke: false,
87
+
});
88
+
89
+
new Zdog.Cylinder({
90
+
addTo: illo,
91
+
diameter: 5,
92
+
length: 4,
93
+
translate: { x: -4, y: 4, z: 4 },
94
+
color: gold,
95
+
backface: offWhite,
96
+
stroke: false,
97
+
});
98
+
99
+
new Zdog.Cone({
100
+
addTo: illo,
101
+
diameter: 5,
102
+
length: 4,
103
+
translate: { x: 4, y: -4, z: 4 },
104
+
color: eggplant,
105
+
backface: garnet,
106
+
stroke: false,
107
+
});
108
+
109
+
new Zdog.Box({
110
+
addTo: illo,
111
+
width: 5,
112
+
height: 5,
113
+
depth: 5,
114
+
translate: { x: 4, y: 4, z: -4 },
115
+
color: orange,
116
+
topFace: gold,
117
+
leftFace: garnet,
118
+
rightFace: garnet,
119
+
bottomFace: eggplant,
120
+
stroke: false,
121
+
});
122
+
123
+
// ----- animate ----- //
124
+
125
+
var clock = 0;
126
+
127
+
function animate() {
128
+
if ( isSpinning ) {
129
+
var theta = Zdog.easeInOut( clock % 1, 3 ) * TAU;
130
+
illo.rotate.y = theta * 2;
131
+
illo.rotate.x = Math.sin( theta ) * 0.5;
132
+
clock += 1/360; // cycle ever 360 frames
133
+
}
134
+
illo.updateRenderGraph();
135
+
requestAnimationFrame( animate );
136
+
}
137
+
138
+
animate();
139
+