jaromino.com / ZDog
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.

🛠 isRotating ↔️ isSpinning

David DeSandro bf154bb2 e367a805

+112 -112
+3 -3
demo/bird-house/bird-house.js
··· 7 7 var zoom = Math.floor( minWindowSize / w ); 8 8 illoElem.setAttribute( 'width', w * zoom ); 9 9 illoElem.setAttribute( 'height', h * zoom ); 10 - var isRotating = false; 10 + var isSpinning = false; 11 11 var TAU = Zdog.TAU; 12 12 // colors 13 13 var yellow = "#ED0"; ··· 26 26 zoom: zoom, 27 27 dragRotate: true, 28 28 onDragStart: function() { 29 - isRotating = false; 29 + isSpinning = false; 30 30 }, 31 31 }); 32 32 ··· 127 127 // -- animate --- // 128 128 129 129 function animate() { 130 - illo.rotate.y += isRotating ? +TAU/150 : 0; 130 + illo.rotate.y += isSpinning ? +TAU/150 : 0; 131 131 illo.updateRenderGraph(); 132 132 requestAnimationFrame( animate ); 133 133 }
+3 -3
demo/boxes/boxes.js
··· 7 7 var zoom = Math.floor( minWindowSize / w ); 8 8 illoElem.setAttribute( 'width', w * zoom ); 9 9 illoElem.setAttribute( 'height', h * zoom ); 10 - var isRotating = true; 10 + var isSpinning = true; 11 11 var TAU = Zdog.TAU; 12 12 // colors 13 13 // var white = 'white'; ··· 27 27 rotate: initRotate, 28 28 dragRotate: true, 29 29 onDragStart: function() { 30 - isRotating = false; 30 + isSpinning = false; 31 31 }, 32 32 }); 33 33 ··· 116 116 var t = 0; 117 117 118 118 function animate() { 119 - if ( isRotating ) { 119 + if ( isSpinning ) { 120 120 var turn = Math.floor( t % 4 ); 121 121 var theta = Zdog.easeInOut( t%1, 3 ) * TAU; 122 122 if ( turn === 0 || turn == 2 ) {
+3 -3
demo/castle/castle.js
··· 17 17 18 18 var white = 'white'; 19 19 var black = '#333'; 20 - var isRotating = true; 20 + var isSpinning = true; 21 21 var TAU = Zdog.TAU; 22 22 var initRotate = { y: TAU/4 }; 23 23 ··· 27 27 rotate: initRotate, 28 28 dragRotate: true, 29 29 onDragStart: function() { 30 - isRotating = false; 30 + isSpinning = false; 31 31 }, 32 32 }); 33 33 ··· 249 249 250 250 function animate() { 251 251 // update 252 - if ( isRotating ) { 252 + if ( isSpinning ) { 253 253 var easeT = Zdog.easeInOut( t % 1, 4 ); 254 254 var turnLimit = keyframes.length - 1; 255 255 var turn = Math.floor( t % turnLimit );
+4 -4
demo/codepen-logo/codepen-logo.js
··· 9 9 illoElem.setAttribute( 'height', h * zoom ); 10 10 11 11 var TAU = Zdog.TAU; 12 - var isRotating = true; 12 + var isSpinning = true; 13 13 14 14 var illo = new Zdog.Illustration({ 15 15 element: illoElem, ··· 17 17 zoom: zoom, 18 18 dragRotate: true, 19 19 onDragStart: function() { 20 - isRotating = false; 20 + isSpinning = false; 21 21 }, 22 22 }); 23 23 ··· 73 73 74 74 function animate() { 75 75 // update 76 - if ( isRotating ) { 76 + if ( isSpinning ) { 77 77 var easeT = Zdog.easeInOut( t % 1, 3 ); 78 78 var turn = Math.floor( t ); 79 79 if ( turn === 0 ) { ··· 101 101 function reset() { 102 102 t = 0; 103 103 illo.rotate.set({}); 104 - isRotating = true; 104 + isSpinning = true; 105 105 }
+3 -3
demo/composite-shapes-scale-svg/composite-shapes-scale-svg.js
··· 6 6 var zoom = Math.floor( minWindowSize / sceneSize ); 7 7 svg.setAttribute( 'width', sceneSize * zoom ); 8 8 svg.setAttribute( 'height', sceneSize * zoom ); 9 - var isRotating = true; 9 + var isSpinning = true; 10 10 var TAU = Zdog.TAU; 11 11 12 12 var illo = new Zdog.Illustration({ ··· 15 15 scale: 2, 16 16 dragRotate: true, 17 17 onDragStart: function() { 18 - isRotating = false; 18 + isSpinning = false; 19 19 }, 20 20 }); 21 21 ··· 90 90 // -- animate --- // 91 91 92 92 function animate() { 93 - illo.rotate.y += isRotating ? +TAU/150 : 0; 93 + illo.rotate.y += isSpinning ? +TAU/150 : 0; 94 94 illo.updateGraph(); 95 95 illo.renderGraph(); 96 96 requestAnimationFrame( animate );
+3 -3
demo/composite-shapes-scale/composite-shapes-scale.js
··· 9 9 illoElem.setAttribute( 'height', h * zoom ); 10 10 11 11 var TAU = Zdog.TAU; 12 - var isRotating = true; 12 + var isSpinning = true; 13 13 14 14 var illo = new Zdog.Illustration({ 15 15 element: illoElem, ··· 17 17 scale: 2, 18 18 dragRotate: true, 19 19 onDragStart: function() { 20 - isRotating = false; 20 + isSpinning = false; 21 21 }, 22 22 }); 23 23 ··· 92 92 // -- animate --- // 93 93 94 94 function animate() { 95 - illo.rotate.y += isRotating ? +TAU/150 : 0; 95 + illo.rotate.y += isSpinning ? +TAU/150 : 0; 96 96 illo.updateGraph(); 97 97 illo.renderGraph(); 98 98 requestAnimationFrame( animate );
+3 -3
demo/cones/cones.js
··· 8 8 illoElem.setAttribute( 'width', w * zoom ); 9 9 illoElem.setAttribute( 'height', h * zoom ); 10 10 11 - var isRotating = true; 11 + var isSpinning = true; 12 12 var TAU = Zdog.TAU; 13 13 14 14 var illo = new Zdog.Illustration({ ··· 16 16 zoom: zoom, 17 17 dragRotate: true, 18 18 onDragStart: function() { 19 - isRotating = false; 19 + isSpinning = false; 20 20 }, 21 21 }); 22 22 ··· 134 134 // -- update -- // 135 135 136 136 function rotate() { 137 - if ( !isRotating ) { 137 + if ( !isSpinning ) { 138 138 return; 139 139 } 140 140 t += 1/cycleFrame;
+3 -3
demo/crypto-kitty/crypto-kitty.js
··· 8 8 illoElem.setAttribute( 'width', w * zoom ); 9 9 illoElem.setAttribute( 'height', h * zoom ); 10 10 11 - var isRotating = true; 11 + var isSpinning = true; 12 12 var TAU = Zdog.TAU; 13 13 14 14 var illo = new Zdog.Illustration({ ··· 17 17 rotate: { x: -TAU/32 }, 18 18 dragRotate: true, 19 19 onDragStart: function() { 20 - isRotating = false; 20 + isSpinning = false; 21 21 }, 22 22 }); 23 23 ··· 227 227 // -- animate --- // 228 228 229 229 function animate() { 230 - illo.rotate.y += isRotating ? -TAU/150 : 0; 230 + illo.rotate.y += isSpinning ? -TAU/150 : 0; 231 231 illo.updateRenderGraph(); 232 232 requestAnimationFrame( animate ); 233 233 }
+3 -3
demo/cylinders/cylinders.js
··· 8 8 illoElem.setAttribute( 'width', w * zoom ); 9 9 illoElem.setAttribute( 'height', h * zoom ); 10 10 11 - var isRotating = true; 11 + var isSpinning = true; 12 12 var TAU = Zdog.TAU; 13 13 14 14 var illo = new Zdog.Illustration({ ··· 16 16 zoom: zoom, 17 17 dragRotate: true, 18 18 onDragStart: function() { 19 - isRotating = false; 19 + isSpinning = false; 20 20 }, 21 21 }); 22 22 ··· 97 97 // -- update -- // 98 98 99 99 function rotate() { 100 - if ( !isRotating ) { 100 + if ( !isSpinning ) { 101 101 return; 102 102 } 103 103
+3 -3
demo/davey-nippu/davey-nippu.js
··· 8 8 illoElem.setAttribute( 'width', w * zoom ); 9 9 illoElem.setAttribute( 'height', h * zoom ); 10 10 11 - var isRotating = true; 11 + var isSpinning = true; 12 12 var TAU = Zdog.TAU; 13 13 var sceneStartRotation = { y: -TAU/8 }; 14 14 ··· 18 18 rotate: sceneStartRotation, 19 19 dragRotate: true, 20 20 onDragStart: function() { 21 - isRotating = false; 21 + isSpinning = false; 22 22 }, 23 23 }); 24 24 ··· 825 825 826 826 function animate() { 827 827 // update 828 - if ( isRotating ) { 828 + if ( isSpinning ) { 829 829 t += tSpeed; 830 830 var theta = Zdog.easeInOut( t % 1 ) * TAU; 831 831 illo.rotate.y = -theta + sceneStartRotation.y;
+3 -3
demo/fizzy-bear/fizzy-bear.js
··· 17 17 unibodyCanvas.height = bodyLinesCanvas.height = canvasHeight; 18 18 19 19 var camera = new Zdog.Anchor(); 20 - var isRotating = true; 20 + var isSpinning = true; 21 21 var TAU = Zdog.TAU; 22 22 23 23 var mainIllo = new Zdog.Illustration({ ··· 25 25 zoom: zoom, 26 26 dragRotate: camera, 27 27 onDragStart: function() { 28 - isRotating = false; 28 + isSpinning = false; 29 29 }, 30 30 }); 31 31 ··· 410 410 // -- update -- // 411 411 412 412 function update() { 413 - if ( isRotating ) { 413 + if ( isSpinning ) { 414 414 t += 1/180; 415 415 var easeT = Zdog.easeInOut( t % 1, 3 ); 416 416 camera.rotate.y = easeT*TAU*2 + jumpRotation.y;
+3 -3
demo/gear-icon/gear-icon.js
··· 7 7 var zoom = Math.floor( minWindowSize / w ); 8 8 illoElem.setAttribute( 'width', w * zoom ); 9 9 illoElem.setAttribute( 'height', h * zoom ); 10 - var isRotating = true; 10 + var isSpinning = true; 11 11 var TAU = Zdog.TAU; 12 12 13 13 var illo = new Zdog.Illustration({ ··· 16 16 rotate: { x: -TAU/8 }, 17 17 dragRotate: true, 18 18 onDragStart: function() { 19 - isRotating = false; 19 + isSpinning = false; 20 20 }, 21 21 }); 22 22 ··· 103 103 // -- animate --- // 104 104 105 105 function animate() { 106 - illo.rotate.y += isRotating ? +TAU/240 : 0; 106 + illo.rotate.y += isSpinning ? +TAU/240 : 0; 107 107 illo.updateRenderGraph(); 108 108 requestAnimationFrame( animate ); 109 109 }
+4 -4
demo/happy-town/happy-town.js
··· 10 10 illoElem.setAttribute( 'width', w * zoom ); 11 11 illoElem.setAttribute( 'height', h * zoom ); 12 12 13 - var isRotating = true; 13 + var isSpinning = true; 14 14 var TAU = Zdog.TAU; 15 15 16 16 var illo = new Zdog.Illustration({ ··· 19 19 rotate: { y: TAU/8 }, 20 20 dragRotate: true, 21 21 onDragStart: function() { 22 - isRotating = false; 22 + isSpinning = false; 23 23 }, 24 24 }); 25 25 ··· 910 910 var now = new Date(); 911 911 var delta = now - then; 912 912 913 - if ( isRotating ) { 913 + if ( isSpinning ) { 914 914 t += tSpeed * delta/60; 915 915 var theta = Zdog.easeInOut( t % 1 ) * TAU; 916 916 var rev = 1; ··· 955 955 // ----- inputs ----- // 956 956 957 957 document.querySelector('.reset-button').onclick = function() { 958 - isRotating = false; 958 + isSpinning = false; 959 959 illo.rotate.set({ x: 0, y: TAU/8 }); 960 960 };
+3 -3
demo/hemisphere-ball/hemisphere-ball.js
··· 8 8 illoElem.setAttribute( 'width', w * zoom ); 9 9 illoElem.setAttribute( 'height', h * zoom ); 10 10 11 - var isRotating = true; 11 + var isSpinning = true; 12 12 var TAU = Zdog.TAU; 13 13 14 14 var illo = new Zdog.Illustration({ ··· 16 16 zoom: zoom, 17 17 dragRotate: true, 18 18 onDragStart: function() { 19 - isRotating = false; 19 + isSpinning = false; 20 20 }, 21 21 }); 22 22 ··· 84 84 // -- update -- // 85 85 86 86 function rotate() { 87 - if ( !isRotating ) { 87 + if ( !isSpinning ) { 88 88 return; 89 89 } 90 90
+3 -3
demo/hemisphere-cone-ball/hemisphere-cone-ball.js
··· 8 8 illoElem.setAttribute( 'width', w * zoom ); 9 9 illoElem.setAttribute( 'height', h * zoom ); 10 10 11 - var isRotating = true; 11 + var isSpinning = true; 12 12 var TAU = Zdog.TAU; 13 13 14 14 var illo = new Zdog.Illustration({ ··· 16 16 zoom: zoom, 17 17 dragRotate: true, 18 18 onDragStart: function() { 19 - isRotating = false; 19 + isSpinning = false; 20 20 }, 21 21 }); 22 22 ··· 89 89 // -- update -- // 90 90 91 91 function rotate() { 92 - if ( !isRotating ) { 92 + if ( !isSpinning ) { 93 93 return; 94 94 } 95 95
+3 -3
demo/inside-house/inside-house.js
··· 8 8 illoElem.setAttribute( 'width', w * zoom ); 9 9 illoElem.setAttribute( 'height', h * zoom ); 10 10 11 - var isRotating = true; 11 + var isSpinning = true; 12 12 var TAU = Zdog.TAU; 13 13 14 14 // default to flat, filled shapes ··· 24 24 zoom: zoom, 25 25 dragRotate: true, 26 26 onDragStart: function() { 27 - isRotating = false; 27 + isSpinning = false; 28 28 }, 29 29 }); 30 30 ··· 154 154 // -- animate --- // 155 155 156 156 function animate() { 157 - illo.rotate.y += isRotating ? +TAU/240 : 0; 157 + illo.rotate.y += isSpinning ? +TAU/240 : 0; 158 158 illo.updateRenderGraph(); 159 159 requestAnimationFrame( animate ); 160 160 }
+3 -3
demo/kirby-parasol/kirby-parasol.js
··· 8 8 illoElem.setAttribute( 'width', w * zoom ); 9 9 illoElem.setAttribute( 'height', h * zoom ); 10 10 11 - var isRotating = true; 11 + var isSpinning = true; 12 12 var TAU = Zdog.TAU; 13 13 14 14 var illo = new Zdog.Illustration({ ··· 16 16 zoom: zoom, 17 17 dragRotate: true, 18 18 onDragStart: function() { 19 - isRotating = false; 19 + isSpinning = false; 20 20 }, 21 21 }); 22 22 ··· 282 282 // -- animate --- // 283 283 284 284 function animate() { 285 - illo.rotate.y += isRotating ? -TAU/150 : 0; 285 + illo.rotate.y += isSpinning ? -TAU/150 : 0; 286 286 illo.updateRenderGraph(); 287 287 requestAnimationFrame( animate ); 288 288 }
+4 -4
demo/little-forest/little-forest.js
··· 8 8 illoElem.setAttribute( 'width', w * zoom ); 9 9 illoElem.setAttribute( 'height', h * zoom ); 10 10 11 - var isRotating = true; 11 + var isSpinning = true; 12 12 var TAU = Zdog.TAU; 13 13 14 14 var illo = new Zdog.Illustration({ ··· 16 16 zoom: zoom, 17 17 dragRotate: true, 18 18 onDragStart: function() { 19 - isRotating = false; 19 + isSpinning = false; 20 20 }, 21 21 }); 22 22 ··· 737 737 738 738 function animate() { 739 739 // update 740 - if ( isRotating ) { 740 + if ( isSpinning ) { 741 741 t += tSpeed; 742 742 var theta = Zdog.easeInOut( t % 1 ) * TAU; 743 743 var delta = TAU * -3/64; ··· 755 755 // ----- inputs ----- // 756 756 757 757 document.querySelector('.reset-button').onclick = function() { 758 - isRotating = false; 758 + isSpinning = false; 759 759 illo.rotate.set({}); 760 760 };
+4 -4
demo/madeline/madeline.js
··· 10 10 illoElem.setAttribute( 'width', w * zoom ); 11 11 illoElem.setAttribute( 'height', h * zoom ); 12 12 13 - var isRotating = true; 13 + var isSpinning = true; 14 14 var TAU = Zdog.TAU; 15 15 16 16 var illo = new Zdog.Illustration({ ··· 19 19 rotate: { y: -TAU/4 }, 20 20 dragRotate: true, 21 21 onDragStart: function() { 22 - isRotating = false; 22 + isSpinning = false; 23 23 }, 24 24 }); 25 25 ··· 205 205 206 206 // -- animate --- // 207 207 208 - var isRotating = true; 208 + var isSpinning = true; 209 209 var rotateSpeed = -TAU/60; 210 210 var xClock = 0; 211 211 var then = new Date() - 1/60; ··· 224 224 var now = new Date(); 225 225 var delta = now - then; 226 226 // auto rotate 227 - if ( isRotating ) { 227 + if ( isSpinning ) { 228 228 var theta = rotateSpeed/60 * delta * -1; 229 229 illo.rotate.y += theta; 230 230 xClock += theta/4;
+3 -3
demo/mario/mario.js
··· 8 8 illoElem.setAttribute( 'width', w * zoom ); 9 9 illoElem.setAttribute( 'height', h * zoom ); 10 10 11 - var isRotating = true; 11 + var isSpinning = true; 12 12 var TAU = Zdog.TAU; 13 13 14 14 var illo = new Zdog.Illustration({ ··· 16 16 zoom: zoom, 17 17 dragRotate: true, 18 18 onDragStart: function() { 19 - isRotating = false; 19 + isSpinning = false; 20 20 }, 21 21 }); 22 22 ··· 454 454 // -- animate --- // 455 455 456 456 function animate() { 457 - illo.rotate.y += isRotating ? -0.05 : 0; 457 + illo.rotate.y += isSpinning ? -0.05 : 0; 458 458 illo.updateRenderGraph(); 459 459 requestAnimationFrame( animate ); 460 460 }
+4 -4
demo/mega-man/mega-man.js
··· 7 7 var zoom = Math.min( 7, Math.floor( minWindowSize / w ) ); 8 8 illoElem.setAttribute( 'width', w * zoom ); 9 9 illoElem.setAttribute( 'height', h * zoom ); 10 - var isRotating = true; 10 + var isSpinning = true; 11 11 var TAU = Zdog.TAU; 12 12 13 13 var illo = new Zdog.Illustration({ ··· 15 15 zoom: zoom, 16 16 dragRotate: true, 17 17 onDragStart: function() { 18 - isRotating = false; 18 + isSpinning = false; 19 19 }, 20 20 }); 21 21 ··· 311 311 312 312 // -- animate --- // 313 313 314 - var isRotating = true; 314 + var isSpinning = true; 315 315 316 316 function animate() { 317 317 update(); ··· 324 324 // -- update -- // 325 325 326 326 function update() { 327 - illo.rotate.y += isRotating ? -TAU/150 : 0; 327 + illo.rotate.y += isSpinning ? -TAU/150 : 0; 328 328 illo.normalizeRotate(); 329 329 330 330 // change pupil position
+3 -3
demo/no-illo-canvas/no-illo-canvas.js
··· 5 5 var illoSize = 48; 6 6 var zoom = 8; 7 7 var canvasSize = canvas.width = canvas.height = illoSize * zoom; 8 - var isRotating = true; 8 + var isSpinning = true; 9 9 var TAU = Zdog.TAU; 10 10 11 11 var scene = new Zdog.Anchor(); ··· 55 55 ctx.lineCap = 'round'; 56 56 57 57 function animate() { 58 - scene.rotate.y += isRotating ? +TAU/150 : 0; 58 + scene.rotate.y += isSpinning ? +TAU/150 : 0; 59 59 scene.updateGraph(); 60 60 render(); 61 61 requestAnimationFrame( animate ); ··· 80 80 new Zdog.Dragger({ 81 81 startElement: canvas, 82 82 onDragStart: function() { 83 - isRotating = false; 83 + isSpinning = false; 84 84 dragStartRX = scene.rotate.x; 85 85 dragStartRY = scene.rotate.y; 86 86 },
+3 -3
demo/no-illo-svg/no-illo-svg.js
··· 8 8 sceneSize + ' ' + sceneSize ); 9 9 svg.style.width = svg.style.height = illoSize + 'px'; 10 10 11 - var isRotating = true; 11 + var isSpinning = true; 12 12 var TAU = Zdog.TAU; 13 13 14 14 var scene = new Zdog.Anchor(); ··· 58 58 // ----- animate ----- // 59 59 60 60 function animate() { 61 - scene.rotate.y += isRotating ? +TAU/150 : 0; 61 + scene.rotate.y += isSpinning ? +TAU/150 : 0; 62 62 scene.updateGraph(); 63 63 render(); 64 64 requestAnimationFrame( animate ); ··· 83 83 new Zdog.Dragger({ 84 84 startElement: svg, 85 85 onDragStart: function() { 86 - isRotating = false; 86 + isSpinning = false; 87 87 dragStartRX = scene.rotate.x; 88 88 dragStartRY = scene.rotate.y; 89 89 },
+3 -3
demo/santorini/santorini.js
··· 10 10 var zoom = 5; 11 11 illoElem.setAttribute( 'width', w * zoom ); 12 12 illoElem.setAttribute( 'height', h * zoom ); 13 - var isRotating = false; 13 + var isSpinning = false; 14 14 var TAU = Zdog.TAU; 15 15 var initRotate = { y: TAU/8 }; 16 16 ··· 20 20 rotate: initRotate, 21 21 dragRotate: true, 22 22 onDragStart: function() { 23 - isRotating = false; 23 + isSpinning = false; 24 24 }, 25 25 }); 26 26 ··· 546 546 // -- animate --- // 547 547 548 548 function animate() { 549 - illo.rotate.y += isRotating ? TAU/150 : 0; 549 + illo.rotate.y += isSpinning ? TAU/150 : 0; 550 550 illo.updateRenderGraph(); 551 551 requestAnimationFrame( animate ); 552 552 }
+5 -5
demo/sauropod/sauropod.js
··· 7 7 var zoom = Math.min( 5, Math.floor( minWindowSize / w ) ); 8 8 illoElem.setAttribute( 'width', w * zoom ); 9 9 illoElem.setAttribute( 'height', h * zoom ); 10 - var isRotating = true; 10 + var isSpinning = true; 11 11 var TAU = Zdog.TAU; 12 12 // ratio to make things look square when rotated a quarter 13 13 var antiTwist = 1 / Math.cos( TAU/8 ); ··· 23 23 rotate: initialRotate, 24 24 dragRotate: true, 25 25 onDragStart: function() { 26 - isRotating = false; 26 + isSpinning = false; 27 27 }, 28 28 }); 29 29 ··· 195 195 196 196 function animate() { 197 197 // update 198 - if ( isRotating ) { 198 + if ( isSpinning ) { 199 199 var easeT = Zdog.easeInOut( t % 1, 3 ); 200 200 illo.rotate.y = easeT*-TAU + TAU/8; 201 201 illo.rotate.x = ( Math.cos( easeT * TAU ) * 0.5 + -0.5 ) * TAU/12; ··· 211 211 212 212 document.querySelector('.reset-button').onclick = function() { 213 213 illo.rotate.set( initialRotate ); 214 - isRotating = false; 214 + isSpinning = false; 215 215 }; 216 216 217 217 document.querySelector('.rotate-button').onclick = function() { 218 - isRotating = true; 218 + isSpinning = true; 219 219 t = 0; 220 220 }; 221 221
+3 -3
demo/shade-and-shades-simple/shade-and-shades-simple.js
··· 17 17 ShapeClass.defaults.color = orange; 18 18 }); 19 19 20 - var isRotating = true; 20 + var isSpinning = true; 21 21 var TAU = Zdog.TAU; 22 22 var initialRotate = { y: -TAU/8 }; 23 23 ··· 27 27 rotate: initialRotate, 28 28 dragRotate: true, 29 29 onDragStart: function() { 30 - isRotating = false; 30 + isSpinning = false; 31 31 } 32 32 }); 33 33 ··· 179 179 var t = 0; 180 180 181 181 function animate() { 182 - if ( isRotating ) { 182 + if ( isSpinning ) { 183 183 illo.rotate.y = Zdog.easeInOut( t % 1, 4 ) * TAU + initialRotate.y; 184 184 t += 1/150; 185 185 }
+3 -3
demo/shade-and-shades/shade-and-shades.js
··· 20 20 var TAU = Zdog.TAU; 21 21 var quarterView = 1/Math.sin(TAU/8); 22 22 var isRotateXFlat; 23 - var isRotating = true; 23 + var isSpinning = true; 24 24 25 25 var illo = new Zdog.Illustration({ 26 26 element: illoElem, 27 27 zoom: zoom, 28 28 onDragStart: function() { 29 - isRotating = false; 29 + isSpinning = false; 30 30 } 31 31 }); 32 32 ··· 198 198 function update() { 199 199 200 200 201 - if ( isRotating ) { 201 + if ( isSpinning ) { 202 202 t += 1/cycleFrame; 203 203 t = t % 1; 204 204 var isFirstHalf = t < 0.5;
+4 -4
demo/solids/solids.js
··· 12 12 var ROOT3 = Math.sqrt(3); 13 13 var ROOT5 = Math.sqrt(5); 14 14 var PHI = ( 1 + ROOT5 ) / 2; 15 - var isRotating = true; 15 + var isSpinning = true; 16 16 var t = 0; 17 17 var tSpeed = 1/180; 18 18 var viewRotation = new Zdog.Vector(); ··· 399 399 animate(); 400 400 401 401 function update() { 402 - viewRotation.y += isRotating ? +TAU/150 : 0; 402 + viewRotation.y += isSpinning ? +TAU/150 : 0; 403 403 404 - if ( isRotating ) { 404 + if ( isSpinning ) { 405 405 t += tSpeed; 406 406 var theta = Zdog.easeInOut( t % 1 ) * TAU; 407 407 var everyOtherCycle = t % 2 < 1; ··· 423 423 new Zdog.Dragger({ 424 424 startElement: illoElem, 425 425 onDragStart: function() { 426 - isRotating = false; 426 + isSpinning = false; 427 427 dragStartAngleX = viewRotation.x; 428 428 dragStartAngleY = viewRotation.y; 429 429 },
+3 -3
demo/starter-demo/starter-demo.js
··· 1 - var isRotating = true; 1 + var isSpinning = true; 2 2 var TAU = Zdog.TAU; 3 3 4 4 var illo = new Zdog.Illustration({ ··· 6 6 zoom: 4, 7 7 dragRotate: true, 8 8 onDragStart: function() { 9 - isRotating = false; // stop rotating 9 + isSpinning = false; // stop rotating 10 10 }, 11 11 }); 12 12 ··· 37 37 38 38 // animate 39 39 function animate() { 40 - if ( isRotating ) { 40 + if ( isSpinning ) { 41 41 illo.rotate.y += TAU/150; 42 42 } 43 43 illo.updateRenderGraph();
+3 -3
demo/strutter-tutorial/strutter-tutorial.js
··· 1 1 // -------------------------- demo -------------------------- // 2 2 3 - var isRotating = true; 3 + var isSpinning = true; 4 4 // colors 5 5 var gold = '#EA0'; 6 6 var garnet = '#C25'; ··· 14 14 rotate: initalRotate, 15 15 dragRotate: true, 16 16 onDragStart: function() { 17 - isRotating = false; 17 + isSpinning = false; 18 18 }, 19 19 }); 20 20 ··· 151 151 var t = 0; 152 152 153 153 function animate() { 154 - if ( isRotating ) { 154 + if ( isSpinning ) { 155 155 illo.rotate.y = Zdog.easeInOut( t % 1, 4 ) * TAU + initalRotate.y; 156 156 t += 1/150; 157 157 }
+3 -3
demo/strutter/strutter.js
··· 6 6 var zoom = Math.floor( minWindowSize / sceneSize ); 7 7 illoElem.setAttribute( 'width', sceneSize * zoom ); 8 8 illoElem.setAttribute( 'height', sceneSize * zoom ); 9 - var isRotating = true; 9 + var isSpinning = true; 10 10 var TAU = Zdog.TAU; 11 11 // colors 12 12 var gold = '#EA0'; ··· 21 21 translate: { y: 4 }, 22 22 dragRotate: true, 23 23 onDragStart: function() { 24 - isRotating = false; 24 + isSpinning = false; 25 25 }, 26 26 }); 27 27 ··· 208 208 var t = 0; 209 209 210 210 function animate() { 211 - if ( isRotating ) { 211 + if ( isSpinning ) { 212 212 illo.rotate.y = Zdog.easeInOut( t % 1, 4 ) * TAU - TAU/8; 213 213 t += 1/150; 214 214 }
+3 -3
demo/template/demo.js
··· 7 7 var illoSize = sceneSize * zoom; 8 8 illoElem.setAttribute( 'width', illoSize ); 9 9 illoElem.setAttribute( 'height', illoSize ); 10 - var isRotating = true; 10 + var isSpinning = true; 11 11 var TAU = Zdog.TAU; 12 12 13 13 var illo = new Zdog.Illustration({ ··· 15 15 zoom: zoom, 16 16 dragRotate: true, 17 17 onDragStart: function() { 18 - isRotating = false; 18 + isSpinning = false; 19 19 }, 20 20 }); 21 21 ··· 61 61 // ----- animate ----- // 62 62 63 63 function animate() { 64 - illo.rotate.y += isRotating ? +TAU/150 : 0; 64 + illo.rotate.y += isSpinning ? +TAU/150 : 0; 65 65 illo.updateRenderGraph(); 66 66 requestAnimationFrame( animate ); 67 67 }
+2 -2
demo/tri-prism/tri-prism.js
··· 22 22 }); 23 23 24 24 25 - var isRotating = false; 25 + var isSpinning = false; 26 26 27 27 var navy = '#456'; 28 28 var red = '#D21'; ··· 195 195 new Zdog.Dragger({ 196 196 startElement: canvas, 197 197 onDragStart: function() { 198 - isRotating = false; 198 + isSpinning = false; 199 199 dragStartAngleX = illo.rotate.x; 200 200 dragStartAngleY = illo.rotate.y; 201 201 },
+3 -3
demo/unpkg-explode/unpkg-explode.js
··· 10 10 illoElem.setAttribute( 'height', h * zoom ); 11 11 var TAU = Zdog.TAU; 12 12 13 - var isRotating = false; 13 + var isSpinning = false; 14 14 15 15 var illo = new Zdog.Illustration({ 16 16 element: illoElem, ··· 18 18 rotate: { x: TAU * (35/360), y: TAU/8 }, 19 19 dragRotate: true, 20 20 onDragStart: function() { 21 - isRotating = false; 21 + isSpinning = false; 22 22 }, 23 23 }); 24 24 ··· 86 86 function animate() { 87 87 illo.updateRenderGraph(); 88 88 requestAnimationFrame( animate ); 89 - illo.rotate.y += isRotating ? +TAU/150 : 0; 89 + illo.rotate.y += isSpinning ? +TAU/150 : 0; 90 90 } 91 91 92 92 animate();
+3 -3
demo/zdog-logo/zdog-logo.js
··· 8 8 var zoom = Math.floor( (minWindowSize*2) / w ) / 2; 9 9 illoElem.setAttribute( 'width', w * zoom ); 10 10 illoElem.setAttribute( 'height', h * zoom ); 11 - var isRotating = true; 11 + var isSpinning = true; 12 12 var TAU = Zdog.TAU; 13 13 var initRotate = { x: 20/360 * TAU, y: -50/360 * TAU }; 14 14 ··· 18 18 rotate: initRotate, 19 19 dragRotate: true, 20 20 onDragStart: function() { 21 - isRotating = false; 21 + isSpinning = false; 22 22 }, 23 23 }); 24 24 ··· 238 238 239 239 function animate() { 240 240 // update 241 - if ( isRotating ) { 241 + if ( isSpinning ) { 242 242 var turn = Math.floor( t % 2 ); 243 243 var easeT = Zdog.easeInOut( t % 1, 4 ); 244 244 if ( turn == 0 ) {