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.

🎩 keyframes, ticker, spin, 0.03

lint demos

+133 -101
+1 -1
Makefile
··· 8 8 npx uglifyjs dist/zdog.dist.js -o dist/zdog.dist.min.js --mangle --comments /^!/ 9 9 10 10 lint: 11 - npx jshint js/*.js 11 + npx jshint js/*.js demos/**/*.js 12 12 13 13 dist: hint bundle uglify
+20 -14
demos/box-cross/box-cross.js
··· 113 113 114 114 // -- animate --- // 115 115 116 - var t = 0; 116 + var ticker = 0; 117 + var cycleCount = 150; 117 118 118 119 function animate() { 119 - if ( isSpinning ) { 120 - var turn = Math.floor( t % 4 ); 121 - var theta = Zdog.easeInOut( t%1, 3 ) * TAU; 122 - if ( turn === 0 || turn == 2 ) { 123 - model.rotate.y = theta; 124 - } else if ( turn == 1 ) { 125 - model.rotate.x = theta; 126 - } else if ( turn == 3 ) { 127 - model.rotate.z = theta; 128 - } 129 - t += 1/150; 130 - } 131 - 120 + spin(); 132 121 illo.updateRenderGraph(); 133 122 requestAnimationFrame( animate ); 123 + } 124 + 125 + function spin() { 126 + if ( !isSpinning ) { 127 + return; 128 + } 129 + var progress = ticker / cycleCount; 130 + var turn = Math.floor( progress % 4 ); 131 + var theta = Zdog.easeInOut( progress % 1, 3 ) * TAU; 132 + if ( turn == 0 || turn == 2 ) { 133 + model.rotate.y = theta; 134 + } else if ( turn == 1 ) { 135 + model.rotate.x = theta; 136 + } else if ( turn == 3 ) { 137 + model.rotate.z = theta; 138 + } 139 + ticker++; 134 140 } 135 141 136 142 animate();
+1 -1
demos/box-cross/index.html
··· 21 21 22 22 .illo { 23 23 display: block; 24 - margin: 20px auto; 24 + margin: 0px auto; 25 25 background: #FDB; 26 26 cursor: move; 27 27 }
+9 -8
demos/dot-cube/dot-cube.js
··· 71 71 ]; 72 72 73 73 var ticker = 0; 74 - 74 + var cycleCount = 75; 75 + var turnLimit = keyframes.length - 1; 75 76 76 77 function animate() { 77 - var easeT = Zdog.easeInOut( ticker % 1, 4 ); 78 - var turnLimit = keyframes.length - 1; 79 - var turn = Math.floor( ticker % turnLimit ); 78 + var progress = ticker / cycleCount; 79 + var tween = Zdog.easeInOut( progress % 1, 4 ); 80 + var turn = Math.floor( progress % turnLimit ); 80 81 var keyA = keyframes[ turn ]; 81 82 var keyB = keyframes[ turn + 1 ]; 82 - cube.rotate.x = Zdog.lerp( keyA.x, keyB.x, easeT ); 83 - cube.rotate.y = Zdog.lerp( keyA.y, keyB.y, easeT ); 84 - cube.rotate.z = Zdog.lerp( keyA.z, keyB.z, easeT ); 85 - ticker += 1/75; 83 + cube.rotate.x = Zdog.lerp( keyA.x, keyB.x, tween ); 84 + cube.rotate.y = Zdog.lerp( keyA.y, keyB.y, tween ); 85 + cube.rotate.z = Zdog.lerp( keyA.z, keyB.z, tween ); 86 + ticker++; 86 87 87 88 illo.updateRenderGraph(); 88 89 requestAnimationFrame( animate );
+10 -7
demos/fullscreen/fullscreen.js
··· 2 2 3 3 var zoom = 4; 4 4 var isSpinning = true; 5 - var TAU = Zdog.TAU; 5 + var gold = '#EA0'; 6 + var orange = '#E62'; 7 + var garnet = '#C25'; 8 + var eggplant = '#636'; 6 9 7 10 var illo = new Zdog.Illustration({ 8 - element: 'canvas', 11 + element: '.illo', 9 12 zoom: zoom, 10 13 resize: 'fullscreen', 11 14 dragRotate: true, ··· 25 28 addTo: illo, 26 29 translate: { z: -10 }, 27 30 stroke: 2, 28 - color: '#E21', 31 + color: garnet, 29 32 }); 30 33 31 34 new Zdog.Ellipse({ ··· 33 36 addTo: illo, 34 37 translate: { z: 10 }, 35 38 stroke: 4, 36 - color: '#19F', 39 + color: eggplant, 37 40 }); 38 41 39 42 new Zdog.Shape({ ··· 46 49 addTo: illo, 47 50 stroke: 2, 48 51 fill: true, 49 - color: '#EA0', 52 + color: gold, 50 53 }); 51 54 52 55 new Zdog.Shape({ 53 56 translate: { x: 10, y: -5 }, 54 57 addTo: illo, 55 58 stroke: 7, 56 - color: '#246', 59 + color: orange, 57 60 }); 58 61 59 62 // ----- animate ----- // 60 63 61 64 function animate() { 62 - illo.rotate.y += isSpinning ? +TAU/150 : 0; 65 + illo.rotate.y += isSpinning ? 0.03 : 0; 63 66 illo.updateRenderGraph(); 64 67 requestAnimationFrame( animate ); 65 68 }
+12 -12
demos/hemisphere-cone-ball/hemisphere-cone-ball.js
··· 4 4 var w = 48; 5 5 var h = 48; 6 6 var minWindowSize = Math.min( window.innerWidth, window.innerHeight ); 7 - var zoom = Math.min( 10, Math.floor( minWindowSize / w ) ); 7 + var zoom = Math.floor( minWindowSize / w ); 8 8 illoElem.setAttribute( 'width', w * zoom ); 9 9 illoElem.setAttribute( 'height', h * zoom ); 10 10 ··· 52 52 var colorWheel = [ eggplant, garnet, orange, gold, yellow, ]; 53 53 54 54 [ true, false ].forEach( function( isHemi ) { 55 - var ySide = isHemi ? -1 : 1; 56 55 var shape = isHemi ? hemi : cone; 57 56 58 57 for ( var i=0; i < 5; i++ ) { ··· 81 80 { x: TAU * 1, y: TAU * 1 }, 82 81 ]; 83 82 84 - var t = 0; 85 - var cycleFrame = 360; 83 + var ticker = 0; 84 + var cycleCount = 180; 85 + var turnLimit = keyframes.length - 1; 86 86 87 87 function animate() { 88 - rotate(); 88 + spin(); 89 89 illo.updateRenderGraph(); 90 90 requestAnimationFrame( animate ); 91 91 } ··· 94 94 95 95 // -- update -- // 96 96 97 - function rotate() { 97 + function spin() { 98 98 if ( !isSpinning ) { 99 99 return; 100 100 } 101 - var easeT = Zdog.easeInOut( t % 1, 3 ); 102 - var turnLimit = keyframes.length - 1; 103 - var turn = Math.floor( t % turnLimit ); 101 + var progress = ticker / cycleCount; 102 + var tween = Zdog.easeInOut( progress % 1, 3 ); 103 + var turn = Math.floor( progress % turnLimit ); 104 104 var keyA = keyframes[ turn ]; 105 105 var keyB = keyframes[ turn + 1 ]; 106 - var thetaX = Zdog.lerp( keyA.x, keyB.x, easeT ); 106 + var thetaX = Zdog.lerp( keyA.x, keyB.x, tween ); 107 107 illo.rotate.x = Math.cos( thetaX ) * TAU/12; 108 - illo.rotate.y = Zdog.lerp( keyA.y, keyB.y, easeT ) ; 109 - t += 1/180; 108 + illo.rotate.y = Zdog.lerp( keyA.y, keyB.y, tween ) ; 109 + ticker++; 110 110 }
+1 -1
demos/hemisphere-cone-ball/index.html
··· 22 22 .illo { 23 23 background: #FDB; 24 24 display: block; 25 - margin: 0px auto 20px; 25 + margin: 0px auto; 26 26 cursor: move; 27 27 } 28 28 </style>
+5 -3
demos/houses/houses.js
··· 192 192 // ----- animate ----- // 193 193 194 194 var ticker = 0; 195 + var cycleCount = 240; 195 196 196 197 function animate() { 197 198 if ( isSpinning ) { 198 - var easeT = Zdog.easeInOut( ticker % 1, 3 ); 199 - illo.rotate.y = easeT * TAU + initRotate.y; 200 - ticker += 1/240; // 1 rotation every 240 frames 199 + var progress = ticker / cycleCount; 200 + var tween = Zdog.easeInOut( progress % 1, 3 ); 201 + illo.rotate.y = tween * TAU + initRotate.y; 202 + ticker++; 201 203 } 202 204 illo.updateRenderGraph(); 203 205 requestAnimationFrame( animate );
+1 -1
demos/houses/index.html
··· 22 22 23 23 .illo { 24 24 display: block; 25 - margin: 0px auto 20px; 25 + margin: 0px auto; 26 26 background: #FDB; 27 27 cursor: move; 28 28 }
+5 -2
demos/kid-kit/index.html
··· 4 4 <meta charset="utf-8" /> 5 5 <meta name="viewport" content="width=device-width" /> 6 6 7 - <title>kid-kit</title> 7 + <title>Kid Kit</title> 8 8 9 9 <style> 10 10 html { height: 100%; } ··· 30 30 </head> 31 31 <body> 32 32 33 - <canvas class="illo"></canvas> 33 + <div class="container"> 34 + <h1>Kid Kit</h1> 35 + <canvas class="illo" width="300" height="300"></canvas> 36 + </div> 34 37 35 38 <script src="../../js/boilerplate.js"></script> 36 39 <script src="../../js/canvas-renderer.js"></script>
+4 -10
demos/kid-kit/kid-kit.js
··· 1 - var illoElem = document.querySelector('.illo'); 2 - var w = 72; 3 - var h = 72; 4 - var minWindowSize = Math.min( window.innerWidth - 20 , window.innerHeight - 20 ); 5 - var zoom = Math.floor( minWindowSize / w ); 6 - illoElem.setAttribute( 'width', w * zoom ); 7 - illoElem.setAttribute( 'height', h * zoom ); 1 + // --- variables --- // 8 2 9 3 var offWhite = '#FED'; 10 4 var gold = '#EA0'; ··· 12 6 var eggplant = '#636'; 13 7 14 8 var illo = new Zdog.Illustration({ 15 - element: illoElem, 16 - zoom: zoom, 9 + element: '.illo', 10 + zoom: 4, 17 11 dragRotate: true, 18 12 }); 19 13 20 - // -- illustration shapes --- // 14 + // --- model --- // 21 15 22 16 // body center 23 17 new Zdog.Shape({
+1 -1
demos/kirby-parasol/kirby-parasol.js
··· 282 282 // -- animate --- // 283 283 284 284 function animate() { 285 - illo.rotate.y += isSpinning ? -TAU/150 : 0; 285 + illo.rotate.y += isSpinning ? -0.03 : 0; 286 286 illo.updateRenderGraph(); 287 287 requestAnimationFrame( animate ); 288 288 }
+1 -1
demos/no-illo-svg/no-illo-svg.js
··· 42 42 // ----- animate ----- // 43 43 44 44 function animate() { 45 - scene.rotate.y += isSpinning ? +TAU/150 : 0; 45 + scene.rotate.y += isSpinning ? 0.03 : 0; 46 46 scene.updateGraph(); 47 47 render(); 48 48 requestAnimationFrame( animate );
+1 -2
demos/resize/resize.js
··· 2 2 3 3 var zoom = 4; 4 4 var isSpinning = true; 5 - var TAU = Zdog.TAU; 6 5 7 6 var model = new Zdog.Anchor(); 8 7 ··· 81 80 // ----- animate ----- // 82 81 83 82 function animate() { 84 - model.rotate.y += isSpinning ? +TAU/150 : 0; 83 + model.rotate.y += isSpinning ? 0.03 : 0; 85 84 model.updateGraph(); 86 85 svgIllo.renderGraph( model ); 87 86 canvasIllo.renderGraph( model );
+6 -3
demos/shade-and-shades/shade-and-shades.js
··· 176 176 177 177 // -- animate --- // 178 178 179 - var t = 0; 179 + var ticker = 0; 180 + var cycleCount = 150; 180 181 181 182 function animate() { 182 183 if ( isSpinning ) { 183 - illo.rotate.y = Zdog.easeInOut( t % 1, 4 ) * TAU + initialRotate.y; 184 - t += 1/150; 184 + var progress = ticker / cycleCount; 185 + var tween = Zdog.easeInOut( progress % 1, 4 ); 186 + illo.rotate.y = tween * TAU + initialRotate.y; 187 + ticker++; 185 188 } 186 189 187 190 illo.updateRenderGraph();
+1 -1
demos/shapes/index.html
··· 23 23 .illo { 24 24 display: block; 25 25 background: #FDB; 26 - margin: 0px auto 20px; 26 + margin: 0px auto; 27 27 cursor: move; 28 28 } 29 29 </style>
+5 -3
demos/shapes/shapes.js
··· 122 122 123 123 // ----- animate ----- // 124 124 125 - var clock = 0; 125 + var ticker = 0; 126 + var cycleCount = 360; 126 127 127 128 function animate() { 128 129 if ( isSpinning ) { 129 - var theta = Zdog.easeInOut( clock % 1, 3 ) * TAU; 130 + var progress = ticker / cycleCount; 131 + var theta = Zdog.easeInOut( progress % 1, 3 ) * TAU; 130 132 illo.rotate.y = theta * 2; 131 133 illo.rotate.x = Math.sin( theta ) * 0.5; 132 - clock += 1/360; // cycle ever 360 frames 134 + ticker++; 133 135 } 134 136 illo.updateRenderGraph(); 135 137 requestAnimationFrame( animate );
+18 -8
demos/solids/solids.js
··· 13 13 var ROOT5 = Math.sqrt(5); 14 14 var PHI = ( 1 + ROOT5 ) / 2; 15 15 var isSpinning = true; 16 - var t = 0; 17 - var tSpeed = 1/180; 18 16 var viewRotation = new Zdog.Vector(); 19 17 20 18 // warm colors ··· 390 388 391 389 // -- animate --- // 392 390 391 + var keyframes = [ 392 + { x: 0, y: 0 }, 393 + { x: 0, y: TAU }, 394 + { x: TAU, y: TAU }, 395 + ]; 396 + 397 + var ticker = 0; 398 + var cycleCount = 180; 399 + var turnLimit = keyframes.length - 1; 400 + 393 401 function animate() { 394 402 update(); 395 403 illo.renderGraph(); ··· 399 407 animate(); 400 408 401 409 function update() { 402 - viewRotation.y += isSpinning ? +TAU/150 : 0; 403 410 404 411 if ( isSpinning ) { 405 - t += tSpeed; 406 - var theta = Zdog.easeInOut( t % 1 ) * TAU; 407 - var everyOtherCycle = t % 2 < 1; 408 - viewRotation.y = everyOtherCycle ? theta : 0; 409 - viewRotation.x = everyOtherCycle ? 0 : -theta; 412 + var progress = ticker / cycleCount; 413 + var tween = Zdog.easeInOut( progress % 1, 4 ); 414 + var turn = Math.floor( progress % turnLimit ); 415 + var keyA = keyframes[ turn ]; 416 + var keyB = keyframes[ turn + 1 ]; 417 + viewRotation.x = Zdog.lerp( keyA.x, keyB.x, tween ); 418 + viewRotation.y = Zdog.lerp( keyA.y, keyB.y, tween ); 419 + ticker++; 410 420 } 411 421 412 422 solids.forEach( function( solid ) {
+6 -5
demos/strutter/strutter.js
··· 205 205 206 206 // -- animate --- // 207 207 208 - var t = 0; 208 + var ticker = 0; 209 + var cycleCount = 150; 209 210 210 211 function animate() { 211 212 if ( isSpinning ) { 212 - illo.rotate.y = Zdog.easeInOut( t % 1, 4 ) * TAU - TAU/8; 213 - t += 1/150; 213 + var progress = ticker / cycleCount; 214 + illo.rotate.y = Zdog.easeInOut( progress % 1, 4 ) * TAU - TAU/8; 215 + ticker++; 214 216 } 215 - illo.updateGraph(); 216 - illo.renderGraph(); 217 + illo.updateRenderGraph(); 217 218 requestAnimationFrame( animate ); 218 219 } 219 220
+25 -17
demos/zdog-logo/zdog-logo.js
··· 233 233 234 234 // -- animate --- // 235 235 236 - var t = 0; 237 - var tSpeed = 1/180; 236 + var keyframes = [ 237 + { y: 0 + initRotate.y, z: 0 }, 238 + { y: TAU + initRotate.y, z: 0 }, 239 + { y: TAU + initRotate.y, z: TAU }, 240 + ]; 241 + 242 + var ticker = 0; 243 + var cycleCount = 180; 244 + var turnLimit = keyframes.length - 1; 238 245 239 246 function animate() { 240 - // update 241 - if ( isSpinning ) { 242 - var turn = Math.floor( t % 2 ); 243 - var easeT = Zdog.easeInOut( t % 1, 4 ); 244 - if ( turn == 0 ) { 245 - illo.rotate.y = easeT * TAU + initRotate.y; 246 - } else if ( turn == 1 ) { 247 - illo.rotate.z = easeT * TAU; 248 - // scene.rotate.x = easeT * TAU + initRotate.x; 249 - } 250 - t += tSpeed; 247 + spin(); 248 + illo.updateRenderGraph(); 249 + requestAnimationFrame( animate ); 250 + } 251 + 252 + function spin() { 253 + if ( !isSpinning ) { 254 + return; 251 255 } 252 - illo.updateGraph(); 253 - // render 254 - illo.renderGraph(); 255 - requestAnimationFrame( animate ); 256 + var progress = ticker / cycleCount; 257 + var tween = Zdog.easeInOut( progress % 1, 4 ); 258 + var turn = Math.floor( progress % turnLimit ); 259 + var keyA = keyframes[ turn ]; 260 + var keyB = keyframes[ turn + 1 ]; 261 + illo.rotate.y = Zdog.lerp( keyA.y, keyB.y, tween ); 262 + illo.rotate.z = Zdog.lerp( keyA.z, keyB.z, tween ); 263 + ticker++; 256 264 } 257 265 258 266 animate();