Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
2
fork

Configure Feed

Select the types of activity you want to include in your feed.

🎩 fullscreen demos

+159 -245
+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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 22 22 23 23 .illo { 24 24 display: block; 25 - margin: 0px auto; 25 + width: 100%; 26 + height: 100%; 26 27 background: #FDB; 27 28 cursor: move; 28 29 }
+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
··· 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
··· 23 23 .illo { 24 24 display: block; 25 25 cursor: move; 26 - background: #FED; 26 + background: #FDB; 27 27 border-radius: 8px; 28 28 margin: 20px 2%; 29 29 width: 46%;
+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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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 },