Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
🎩 fullscreen demos
+159
-245
+9
-15
demos/box-cross/box-cross.js
+9
-15
demos/box-cross/box-cross.js
···
1
-
// -------------------------- demo -------------------------- //
1
+
// ----- setup ----- //
2
2
3
-
var illoElem = document.querySelector('.illo');
4
-
var w = 9;
5
-
var h = 9;
6
-
var minWindowSize = Math.min( window.innerWidth - 20 , window.innerHeight - 20 );
7
-
var zoom = Math.floor( minWindowSize / w );
8
-
illoElem.setAttribute( 'width', w * zoom );
9
-
illoElem.setAttribute( 'height', h * zoom );
3
+
var sceneSize = 9;
10
4
var isSpinning = true;
11
5
var TAU = Zdog.TAU;
12
6
// colors
13
-
// var white = 'white';
14
7
var yellow = '#ED0';
15
8
var gold = '#EA0';
16
9
var orange = '#E62';
17
10
var garnet = '#C25';
18
-
// var navy = '#369';
19
-
// var denim = '#345';
20
11
var eggplant = '#636';
21
12
22
13
var initRotate = { x: (35/360) * TAU, y: TAU/8 };
23
14
24
15
var illo = new Zdog.Illustration({
25
-
element: illoElem,
26
-
zoom: zoom,
16
+
element: '.illo',
27
17
rotate: initRotate,
18
+
resize: 'fullscreen',
28
19
dragRotate: true,
29
20
onDragStart: function() {
30
21
isSpinning = false;
31
22
},
23
+
onResize: function( width, height ) {
24
+
this.zoom = Math.floor( Math.min( width, height ) / sceneSize );
25
+
},
32
26
});
33
27
34
-
// -- illustration shapes --- //
28
+
// ----- model ----- //
35
29
36
30
var model = new Zdog.Anchor({
37
31
addTo: illo,
···
111
105
color: eggplant,
112
106
});
113
107
114
-
// -- animate --- //
108
+
// ----- animate ----- //
115
109
116
110
var ticker = 0;
117
111
var cycleCount = 150;
+4
-9
demos/box-cross/index.html
+4
-9
demos/box-cross/index.html
···
12
12
body {
13
13
min-height: 100%;
14
14
margin: 0;
15
-
display: flex;
16
-
align-items: center;
17
-
justify-content: center;
18
-
font-family: sans-serif;
19
-
text-align: center;
20
15
}
21
16
22
17
.illo {
23
18
display: block;
24
-
margin: 0px auto;
19
+
width: 100%;
20
+
height: 100%;
25
21
background: #FDB;
26
22
cursor: move;
27
23
}
···
30
26
</head>
31
27
<body>
32
28
33
-
<div class="container">
34
-
<canvas class="illo"></canvas>
35
-
</div>
29
+
30
+
<canvas class="illo"></canvas>
36
31
37
32
<script src="../../js/boilerplate.js"></script>
38
33
<script src="../../js/canvas-renderer.js"></script>
+6
-10
demos/dot-cube/dot-cube.js
+6
-10
demos/dot-cube/dot-cube.js
···
1
-
// ------------------------- demo ------------------------- //
1
+
// ----- setup ----- //
2
2
3
-
var illoElem = document.querySelector('.illo');
4
3
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
4
var TAU = Zdog.TAU;
11
5
12
6
var illo = new Zdog.Illustration({
13
-
element: illoElem,
14
-
zoom: zoom,
7
+
element: '.illo',
15
8
rotate: { x: TAU * -35/360, y: TAU * 1/8 },
16
9
dragRotate: true,
10
+
resize: 'fullscreen',
11
+
onResize: function( width, height ) {
12
+
this.zoom = Math.floor( Math.min( width, height ) / sceneSize );
13
+
},
17
14
});
18
15
19
16
// ----- model ----- //
···
35
32
translate: oneUnit.copy(),
36
33
stroke: 1,
37
34
color: 'white',
38
-
// visible: false,
39
35
});
40
36
41
37
dot.copy({ translate: { x: -1, y: 1 } });
+3
-9
demos/dot-cube/index.html
+3
-9
demos/dot-cube/index.html
···
12
12
body {
13
13
min-height: 100%;
14
14
margin: 0;
15
-
display: flex;
16
-
align-items: center;
17
-
justify-content: center;
18
15
background: black;
19
16
color: white;
20
-
font-family: sans-serif;
21
-
text-align: center;
22
17
}
23
18
24
19
.illo {
25
20
display: block;
26
-
margin: 0px auto 20px;
21
+
width: 100%;
22
+
height: 100%;
27
23
cursor: move;
28
24
}
29
25
</style>
···
31
27
</head>
32
28
<body>
33
29
34
-
<div class="container">
35
-
<canvas class="illo"></canvas>
36
-
</div>
30
+
<canvas class="illo"></canvas>
37
31
38
32
<script src="../../js/boilerplate.js"></script>
39
33
<script src="../../js/canvas-renderer.js"></script>
+2
-3
demos/fullscreen/fullscreen.js
+2
-3
demos/fullscreen/fullscreen.js
···
1
-
// ------------------------- demo ------------------------- //
1
+
// ----- setup ----- //
2
2
3
-
var zoom = 4;
4
3
var isSpinning = true;
5
4
var gold = '#EA0';
6
5
var orange = '#E62';
···
9
8
10
9
var illo = new Zdog.Illustration({
11
10
element: '.illo',
12
-
zoom: zoom,
11
+
zoom: 4,
13
12
resize: 'fullscreen',
14
13
dragRotate: true,
15
14
onDragStart: function() {
+2
-2
demos/fullscreen/index.html
+2
-2
demos/fullscreen/index.html
···
17
17
width: 100%;
18
18
height: 100%;
19
19
cursor: move;
20
-
background: #FED;
20
+
background: #FDB;
21
21
}
22
22
</style>
23
23
24
24
</head>
25
25
<body>
26
26
27
-
<canvas class="illo" width="300" height="200"></canvas>
27
+
<canvas class="illo"></canvas>
28
28
29
29
<script src="../../js/boilerplate.js"></script>
30
30
<script src="../../js/canvas-renderer.js"></script>
+7
-11
demos/hemisphere-cone-ball/hemisphere-cone-ball.js
+7
-11
demos/hemisphere-cone-ball/hemisphere-cone-ball.js
···
1
-
// -------------------------- demo -------------------------- //
2
-
3
-
var illoElem = document.querySelector('.illo');
4
-
var w = 48;
5
-
var h = 48;
6
-
var minWindowSize = Math.min( window.innerWidth, window.innerHeight );
7
-
var zoom = Math.floor( minWindowSize / w );
8
-
illoElem.setAttribute( 'width', w * zoom );
9
-
illoElem.setAttribute( 'height', h * zoom );
1
+
// ----- setup ----- //
10
2
3
+
var sceneSize = 48;
11
4
var isSpinning = true;
12
5
var TAU = Zdog.TAU;
13
6
14
7
var illo = new Zdog.Illustration({
15
-
element: illoElem,
16
-
zoom: zoom,
8
+
element: '.illo',
17
9
dragRotate: true,
10
+
resize: 'fullscreen',
18
11
onDragStart: function() {
19
12
isSpinning = false;
13
+
},
14
+
onResize: function( width, height ) {
15
+
this.zoom = Math.floor( Math.min( width, height ) / sceneSize );
20
16
},
21
17
});
22
18
+4
-10
demos/hemisphere-cone-ball/index.html
+4
-10
demos/hemisphere-cone-ball/index.html
···
12
12
body {
13
13
min-height: 100%;
14
14
margin: 0;
15
-
display: flex;
16
-
align-items: center;
17
-
justify-content: center;
18
-
font-family: sans-serif;
19
-
text-align: center;
20
15
}
21
16
22
17
.illo {
23
-
background: #FDB;
24
18
display: block;
25
-
margin: 0px auto;
19
+
width: 100%;
20
+
height: 100%;
21
+
background: #FDB;
26
22
cursor: move;
27
23
}
28
24
</style>
···
30
26
</head>
31
27
<body>
32
28
33
-
<div class="container">
34
-
<canvas class="illo"></canvas>
35
-
</div>
29
+
<canvas class="illo"></canvas>
36
30
37
31
<script src="../../js/boilerplate.js"></script>
38
32
<script src="../../js/canvas-renderer.js"></script>
+6
-9
demos/houses/houses.js
+6
-9
demos/houses/houses.js
···
1
-
// ------------------------- demo ------------------------- //
1
+
// ----- setup ----- //
2
2
3
-
var illoElem = document.querySelector('.illo');
4
3
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
4
var isSpinning = true;
11
5
var TAU = Zdog.TAU;
12
6
···
27
21
var turnRatio = 1 / Math.sin( TAU/8 );
28
22
29
23
var illo = new Zdog.Illustration({
30
-
element: illoElem,
31
-
zoom: zoom,
24
+
element: '.illo',
32
25
rotate: initRotate,
33
26
// stretch looks circular at 1/8 turn
34
27
scale: { x: turnRatio, z: turnRatio },
35
28
dragRotate: true,
29
+
resize: 'fullscreen',
36
30
onDragStart: function() {
37
31
isSpinning = false;
32
+
},
33
+
onResize: function( width, height ) {
34
+
this.zoom = Math.floor( Math.min( width, height ) / sceneSize );
38
35
},
39
36
});
40
37
+2
-1
demos/houses/index.html
+2
-1
demos/houses/index.html
+3
-9
demos/kirby-parasol/index.html
+3
-9
demos/kirby-parasol/index.html
···
12
12
body {
13
13
min-height: 100%;
14
14
margin: 0;
15
-
display: flex;
16
-
align-items: center;
17
-
justify-content: center;
18
15
background: #425;
19
16
color: white;
20
-
font-family: sans-serif;
21
-
text-align: center;
22
17
}
23
18
24
19
.illo {
25
20
display: block;
26
-
margin: 0px auto 20px;
21
+
width: 100%;
22
+
height: 100%;
27
23
cursor: move;
28
24
}
29
25
</style>
···
31
27
</head>
32
28
<body>
33
29
34
-
<div class="container">
35
-
<canvas class="illo"></canvas>
36
-
</div>
30
+
<canvas class="illo"></canvas>
37
31
38
32
<script src="../../js/boilerplate.js"></script>
39
33
<script src="../../js/canvas-renderer.js"></script>
+17
-23
demos/kirby-parasol/kirby-parasol.js
+17
-23
demos/kirby-parasol/kirby-parasol.js
···
1
-
// -------------------------- demo -------------------------- //
2
-
3
-
var illoElem = document.querySelector('.illo');
4
-
var w = 80;
5
-
var h = 80;
6
-
var minWindowSize = Math.min( window.innerWidth, window.innerHeight );
7
-
var zoom = Math.min( 7, Math.floor( minWindowSize / w ) );
8
-
illoElem.setAttribute( 'width', w * zoom );
9
-
illoElem.setAttribute( 'height', h * zoom );
1
+
// ----- setup ----- //
10
2
3
+
var sceneSize = 80;
11
4
var isSpinning = true;
12
5
var TAU = Zdog.TAU;
6
+
// colors
7
+
var pink = '#F8B';
8
+
var blush = '#F5A';
9
+
var black = '#333';
10
+
var shoe = '#D03';
11
+
var red = '#E10';
12
+
var yellow = '#FD0';
13
13
14
14
var illo = new Zdog.Illustration({
15
-
element: illoElem,
16
-
zoom: zoom,
15
+
element: '.illo',
17
16
dragRotate: true,
17
+
resize: 'fullscreen',
18
18
onDragStart: function() {
19
19
isSpinning = false;
20
20
},
21
+
onResize: function( width, height ) {
22
+
this.zoom = Math.floor( Math.min( width, height ) / sceneSize );
23
+
},
21
24
});
22
25
23
-
// colors
24
-
var pink = '#F8B';
25
-
var blush = '#F5A';
26
-
var black = '#333';
27
-
var shoe = '#D03';
28
-
var red = '#E10';
29
-
var yellow = '#FD0';
30
-
31
-
// -- illustration shapes --- //
26
+
// ----- model ----- //
32
27
33
28
var body = new Zdog.Shape({
34
29
stroke: 22,
···
263
258
}
264
259
})();
265
260
266
-
// ----- floater stars ----- //
267
-
261
+
// floater stars
268
262
( function() {
269
263
for ( var i=0; i < 6; i++ ) {
270
264
var starHolder = new Zdog.Anchor({
···
279
273
}
280
274
})();
281
275
282
-
// -- animate --- //
276
+
// ----- animate ----- //
283
277
284
278
function animate() {
285
279
illo.rotate.y += isSpinning ? -0.03 : 0;
+1
-1
demos/resize/index.html
+1
-1
demos/resize/index.html
+10
-6
demos/resize/resize.js
+10
-6
demos/resize/resize.js
···
1
-
// ------------------------- demo ------------------------- //
1
+
// ----- setup ----- //
2
2
3
3
var zoom = 4;
4
4
var isSpinning = true;
5
+
var gold = '#EA0';
6
+
var orange = '#E62';
7
+
var garnet = '#C25';
8
+
var eggplant = '#636';
5
9
6
10
var model = new Zdog.Anchor();
7
11
···
31
35
},
32
36
});
33
37
34
-
// HACK set initial zoom
38
+
// HACK set initial zoom for SVG
35
39
svgIllo.setSize( svgIllo.width, svgIllo.height );
36
40
37
41
// ----- model ----- //
···
42
46
addTo: model,
43
47
translate: { z: -10 },
44
48
stroke: 2,
45
-
color: '#E21',
49
+
color: garnet,
46
50
});
47
51
48
52
new Zdog.Ellipse({
···
50
54
addTo: model,
51
55
translate: { z: 10 },
52
56
stroke: 4,
53
-
color: '#19F',
57
+
color: eggplant,
54
58
});
55
59
56
60
new Zdog.Shape({
···
63
67
addTo: model,
64
68
stroke: 2,
65
69
fill: true,
66
-
color: '#EA0',
70
+
color: gold,
67
71
});
68
72
69
73
new Zdog.Shape({
70
74
translate: { x: 10, y: -5 },
71
75
addTo: model,
72
76
stroke: 7,
73
-
color: '#246',
77
+
color: orange,
74
78
});
75
79
76
80
model.copyGraph({
+3
-9
demos/shade-and-shades/index.html
+3
-9
demos/shade-and-shades/index.html
···
12
12
body {
13
13
min-height: 100%;
14
14
margin: 0;
15
-
display: flex;
16
-
align-items: center;
17
-
justify-content: center;
18
-
font-family: sans-serif;
19
-
text-align: center;
20
15
}
21
16
22
17
.illo {
23
18
display: block;
24
-
margin: 20px auto;
19
+
width: 100%;
20
+
height: 100%;
25
21
background: #FDB;
26
22
cursor: move;
27
23
}
···
30
26
</head>
31
27
<body>
32
28
33
-
<div class="container">
34
-
<canvas class="illo"></canvas>
35
-
</div>
29
+
<canvas class="illo"></canvas>
36
30
37
31
<script src="../../js/boilerplate.js"></script>
38
32
<script src="../../js/canvas-renderer.js"></script>
+10
-13
demos/shade-and-shades/shade-and-shades.js
+10
-13
demos/shade-and-shades/shade-and-shades.js
···
1
-
// -------------------------- demo -------------------------- //
1
+
// ----- setup ----- //
2
2
3
-
var illoElem = document.querySelector('.illo');
4
-
var w = 96;
5
-
var h = 96;
6
-
var minWindowSize = Math.min( window.innerWidth, window.innerHeight );
7
-
var zoom = Math.min( 8, Math.floor( minWindowSize / w ) );
8
-
illoElem.setAttribute( 'width', w * zoom );
9
-
illoElem.setAttribute( 'height', h * zoom );
10
-
// colors
3
+
var sceneSize = 96;
11
4
var orange = '#E62';
12
5
var eggplant = '#636';
13
6
7
+
// shape defaults
14
8
Zdog.Shape.defaults.closed = false;
15
9
[ Zdog.Shape, Zdog.Ellipse ].forEach( function( ShapeClass ) {
16
10
ShapeClass.defaults.stroke = 3;
···
22
16
var initialRotate = { y: -TAU/8 };
23
17
24
18
var illo = new Zdog.Illustration({
25
-
element: illoElem,
26
-
zoom: zoom,
19
+
element: '.illo',
27
20
rotate: initialRotate,
28
21
dragRotate: true,
22
+
resize: 'fullscreen',
29
23
onDragStart: function() {
30
24
isSpinning = false;
31
-
}
25
+
},
26
+
onResize: function( width, height ) {
27
+
this.zoom = Math.floor( Math.min( width, height ) / sceneSize );
28
+
},
32
29
});
33
30
34
31
// -- illustration shapes --- //
···
174
171
translate: { x: 16, y: 8 },
175
172
});
176
173
177
-
// -- animate --- //
174
+
// ----- animate ----- //
178
175
179
176
var ticker = 0;
180
177
var cycleCount = 150;
+3
-10
demos/shapes/index.html
+3
-10
demos/shapes/index.html
···
12
12
body {
13
13
min-height: 100%;
14
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
15
}
22
16
23
17
.illo {
24
18
display: block;
19
+
width: 100%;
20
+
height: 100%;
25
21
background: #FDB;
26
-
margin: 0px auto;
27
22
cursor: move;
28
23
}
29
24
</style>
···
31
26
</head>
32
27
<body>
33
28
34
-
<div class="container">
35
-
<canvas class="illo"></canvas>
36
-
</div>
29
+
<canvas class="illo"></canvas>
37
30
38
31
<script src="../../js/boilerplate.js"></script>
39
32
<script src="../../js/canvas-renderer.js"></script>
+6
-9
demos/shapes/shapes.js
+6
-9
demos/shapes/shapes.js
···
1
-
// ------------------------- demo ------------------------- //
1
+
// ----- setup ----- //
2
2
3
-
var illoElem = document.querySelector('.illo');
4
3
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
4
var isSpinning = true;
11
5
var TAU = Zdog.TAU;
12
6
var offWhite = '#FED';
···
16
10
var eggplant = '#636';
17
11
18
12
var illo = new Zdog.Illustration({
19
-
element: illoElem,
20
-
zoom: zoom,
13
+
element: '.illo',
21
14
dragRotate: true,
15
+
resize: 'fullscreen',
22
16
onDragStart: function() {
23
17
isSpinning = false;
18
+
},
19
+
onResize: function( width, height ) {
20
+
this.zoom = Math.floor( Math.min( width, height ) / sceneSize );
24
21
},
25
22
});
26
23
+4
-10
demos/solids/index.html
+4
-10
demos/solids/index.html
···
12
12
body {
13
13
min-height: 100%;
14
14
margin: 0;
15
-
display: flex;
16
-
align-items: center;
17
-
justify-content: center;
18
-
background: #FDB;
19
-
font-family: sans-serif;
20
-
text-align: center;
21
15
}
22
16
23
17
.illo {
24
18
display: block;
25
-
margin: 0px auto 20px;
19
+
width: 100%;
20
+
height: 100%;
21
+
background: #FDB;
26
22
cursor: move;
27
23
}
28
24
</style>
···
30
26
</head>
31
27
<body>
32
28
33
-
<div class="container">
34
-
<canvas class="illo"></canvas>
35
-
</div>
29
+
<canvas class="illo"></canvas>
36
30
37
31
<script src="../../js/boilerplate.js"></script>
38
32
<script src="../../js/canvas-renderer.js"></script>
+10
-11
demos/solids/solids.js
+10
-11
demos/solids/solids.js
···
1
-
// -------------------------- demo -------------------------- //
1
+
// ----- setup ----- //
2
2
3
3
var illoElem = document.querySelector('.illo');
4
4
var sceneSize = 96;
5
-
var minWindowSize = Math.min( window.innerWidth, window.innerHeight );
6
-
var zoom = Math.min( 6, Math.floor( minWindowSize / sceneSize ) );
7
-
var illoSize = sceneSize * zoom;
8
-
illoElem.setAttribute( 'width', illoSize );
9
-
illoElem.setAttribute( 'height', illoSize );
10
-
11
5
var TAU = Zdog.TAU;
12
6
var ROOT3 = Math.sqrt(3);
13
7
var ROOT5 = Math.sqrt(5);
14
8
var PHI = ( 1 + ROOT5 ) / 2;
15
9
var isSpinning = true;
16
10
var viewRotation = new Zdog.Vector();
11
+
var displaySize;
17
12
18
-
// warm colors
13
+
// colors
19
14
var eggplant = '#636';
20
15
var garnet = '#C25';
21
16
var orange = '#E62';
···
24
19
25
20
var illo = new Zdog.Illustration({
26
21
element: illoElem,
27
-
zoom: zoom,
28
22
scale: 8,
23
+
resize: 'fullscreen',
24
+
onResize: function( width, height ) {
25
+
displaySize = Math.min( width, height );
26
+
this.zoom = Math.floor( displaySize / sceneSize );
27
+
},
29
28
});
30
29
31
30
var solids = [];
···
438
437
dragStartRY = viewRotation.y;
439
438
},
440
439
onDragMove: function( pointer, moveX, moveY ) {
441
-
viewRotation.x = dragStartRX - ( moveY / illoSize * TAU );
442
-
viewRotation.y = dragStartRY - ( moveX / illoSize * TAU );
440
+
viewRotation.x = dragStartRX - ( moveY / displaySize * TAU );
441
+
viewRotation.y = dragStartRY - ( moveX / displaySize * TAU );
443
442
},
444
443
});
+4
-11
demos/strutter/index.html
+4
-11
demos/strutter/index.html
···
12
12
body {
13
13
min-height: 100%;
14
14
margin: 0;
15
-
display: flex;
16
-
align-items: center;
17
-
justify-content: center;
18
-
font-family: sans-serif;
19
-
text-align: center;
20
15
}
21
16
22
17
.illo {
18
+
display: block;
19
+
width: 100%;
20
+
height: 100%;
23
21
background: #FDB;
24
-
display: block;
25
-
margin: 0px auto 20px;
26
22
cursor: move;
27
23
}
28
24
···
31
27
</head>
32
28
<body>
33
29
34
-
<div class="container">
35
-
<svg class="illo"></svg>
36
-
</div>
30
+
<canvas class="illo"></canvas>
37
31
38
32
<script src="../../js/boilerplate.js"></script>
39
33
<script src="../../js/canvas-renderer.js"></script>
40
-
<script src="../../js/svg-renderer.js"></script>
41
34
<script src="../../js/vector.js"></script>
42
35
<script src="../../js/anchor.js"></script>
43
36
<script src="../../js/path-command.js"></script>
+7
-9
demos/strutter/strutter.js
+7
-9
demos/strutter/strutter.js
···
1
-
// -------------------------- demo -------------------------- //
1
+
// ----- setup ----- //
2
2
3
-
var illoElem = document.querySelector('.illo');
4
3
var sceneSize = 48;
5
-
var minWindowSize = Math.min( window.innerWidth - 20 , window.innerHeight - 20 );
6
-
var zoom = Math.floor( minWindowSize / sceneSize );
7
-
illoElem.setAttribute( 'width', sceneSize * zoom );
8
-
illoElem.setAttribute( 'height', sceneSize * zoom );
9
4
var isSpinning = true;
10
5
var TAU = Zdog.TAU;
11
6
// colors
···
16
11
17
12
var illo = new Zdog.Illustration({
18
13
element: '.illo',
19
-
zoom: zoom,
20
14
rotate: { y: -TAU/8 },
21
15
translate: { y: 4 },
22
16
dragRotate: true,
17
+
resize: 'fullscreen',
23
18
onDragStart: function() {
24
19
isSpinning = false;
25
20
},
21
+
onResize: function( width, height ) {
22
+
this.zoom = Math.floor( Math.min( width, height ) / sceneSize );
23
+
},
26
24
});
27
25
28
-
// -- illustration shapes --- //
26
+
// ----- model ----- //
29
27
30
28
var hipX = 3;
31
29
···
203
201
});
204
202
205
203
206
-
// -- animate --- //
204
+
// ----- animate ----- //
207
205
208
206
var ticker = 0;
209
207
var cycleCount = 150;
+3
-10
demos/zdog-logo/index.html
+3
-10
demos/zdog-logo/index.html
···
12
12
body {
13
13
min-height: 100%;
14
14
margin: 0;
15
-
display: flex;
16
-
align-items: center;
17
-
justify-content: center;
18
-
font-family: sans-serif;
19
-
text-align: center;
20
15
}
21
16
22
17
.illo {
23
18
display: block;
24
-
margin: 0px auto 20px;
19
+
width: 100%;
20
+
height: 100%;
25
21
cursor: move;
26
22
background: #FDB;
27
-
border-radius: 20px;
28
23
}
29
24
</style>
30
25
31
26
</head>
32
27
<body>
33
28
34
-
<div class="container">
35
-
<canvas class="illo"></canvas>
36
-
</div>
29
+
<canvas class="illo"></canvas>
37
30
38
31
<script src="../../js/boilerplate.js"></script>
39
32
<script src="../../js/canvas-renderer.js"></script>
+33
-35
demos/zdog-logo/zdog-logo.js
+33
-35
demos/zdog-logo/zdog-logo.js
···
1
+
// ----- setup ----- //
1
2
2
-
// -------------------------- demo -------------------------- //
3
-
4
-
var illoElem = document.querySelector('.illo');
5
-
var w = 128;
6
-
var h = 128;
7
-
var minWindowSize = Math.min( window.innerWidth - 20 , window.innerHeight - 20 );
8
-
var zoom = Math.floor( (minWindowSize*2) / w ) / 2;
9
-
illoElem.setAttribute( 'width', w * zoom );
10
-
illoElem.setAttribute( 'height', h * zoom );
3
+
var sceneSize = 100;
11
4
var isSpinning = true;
12
5
var TAU = Zdog.TAU;
13
6
var initRotate = { x: 20/360 * TAU, y: -50/360 * TAU };
7
+
var orange = '#E62';
8
+
var gold = '#EA0';
9
+
var eggplant = '#636';
10
+
var depth = 20;
11
+
var lineWidth = 8;
14
12
15
13
var illo = new Zdog.Illustration({
16
-
element: illoElem,
17
-
zoom: zoom,
14
+
element: '.illo',
18
15
rotate: initRotate,
19
16
dragRotate: true,
17
+
resize: 'fullscreen',
20
18
onDragStart: function() {
21
19
isSpinning = false;
22
20
},
21
+
onResize: function( width, height ) {
22
+
this.zoom = Math.floor( Math.min( width, height ) * 2 / sceneSize ) / 2;
23
+
},
23
24
});
24
25
25
-
var red = '#E62';
26
-
var gold = '#EA0';
27
-
var denim = '#636';
28
-
29
-
var depth = 20;
30
-
var lineWidth = 8;
31
-
32
-
// -- illustration shapes --- //
26
+
// ----- model ----- //
33
27
34
28
var bigGroup = new Zdog.Group({
35
29
addTo: illo,
···
50
44
rotate: { x: TAU/4 },
51
45
fill: true,
52
46
stroke: lineWidth,
53
-
color: red,
47
+
color: orange,
54
48
});
55
49
topSide.copy({
56
50
translate: { y: 20 },
···
64
58
translate: { x: -20, y: -16 },
65
59
rotate: { y: TAU/4 },
66
60
fill: true,
67
-
color: red,
61
+
color: orange,
68
62
stroke: lineWidth,
63
+
backface: false,
69
64
});
70
65
endCap.copy({
71
-
translate: { x: -20, y: 16 },
66
+
translate: { x: 20, y: 16 },
67
+
rotate: { y: -TAU/4 },
72
68
});
73
-
endCap.copy({
74
-
translate: { x: 20, y: -16 },
75
-
rotate: { y: -TAU/4 },
69
+
70
+
var cornerCap = endCap.copy({
71
+
height: 10,
72
+
translate: { x: -20, y: 15 },
76
73
});
77
-
endCap.copy({
78
-
translate: { x: 20, y: 16 },
74
+
cornerCap.copy({
75
+
translate: { x: 20, y: -15 },
79
76
rotate: { y: -TAU/4 },
80
77
});
81
78
···
87
84
rotate: { x: -TAU/4 },
88
85
stroke: lineWidth,
89
86
fill: true,
90
-
color: red,
87
+
color: orange,
91
88
});
92
89
underside.copy({
93
90
translate: { x: 5, y: 12 },
···
102
99
addTo: backGroup,
103
100
width: Math.sqrt( slopeH*slopeH + slopeW*slopeW ),
104
101
height: depth,
105
-
translate: { x: -5 },
102
+
translate: { x: -5, y: -1 },
106
103
rotate: { x: TAU/4, y: slopeAngle },
107
104
stroke: lineWidth,
108
105
fill: true,
109
-
color: red,
106
+
color: orange,
107
+
backface: false,
110
108
});
111
109
112
110
slope.copy({
113
-
translate: { x: 5, y: 0 },
111
+
translate: { x: 5, y: 1 },
114
112
rotate: { x: -TAU/4, y: -slopeAngle },
115
113
});
116
114
···
122
120
closed: false,
123
121
translate: { x: 22, y: -4 },
124
122
rotate: { z: TAU/4 },
125
-
color: red,
123
+
color: orange,
126
124
stroke: lineWidth,
127
125
});
128
126
···
157
155
rotate: { x: TAU/4 - Math.atan(16/22) },
158
156
fill: true,
159
157
stroke: 4,
160
-
color: denim,
158
+
color: eggplant,
161
159
162
160
});
163
161
···
202
200
rotate: { y: TAU/4, z: TAU/4 },
203
201
fill: true,
204
202
stroke: 5,
205
-
color: denim,
203
+
color: eggplant,
206
204
closed: true,
207
205
// backface: false,
208
206
});
···
231
229
scale: { z: -1 },
232
230
});
233
231
234
-
// -- animate --- //
232
+
// ----- animate ----- //
235
233
236
234
var keyframes = [
237
235
{ y: 0 + initRotate.y, z: 0 },