( function() { var app = window.app = window.app || {}; window.ccc = console.log; let FACETS_COUNT = 10; let Z_INDEX_MAX = 6000000; let ANIMATION_CYCLE_DURATION = 20; //sec let ROTATE_CLOCKWISE = false; //true; //false = right-to-left along x axis; rotation around y axis let SPRITE_WIDTH = 400; let SPRITE_HEIGHT = 300; let DISTANCE_TO_CAROUSEL = 300; //=perspective let PERSPECTIVE_ORIGIN = [ 400, 400 ]; //was ${(PARENT_WIDTH/2).toFixed(0)}${spUn} ${(PARENT_HEIGHT/2).toFixed(0)}${spUn}; let SPATIAL_UNITS = 'px'; //px; don't do '%' ... it has problems yet //:inner config let DIGITS_FOR_CSS = 10; let PARENT_WIDTH = 10; let PARENT_HEIGHT = 10; //:spawning config let rad2deg = Math.PI / 180; let phaseStep = 100 / FACETS_COUNT; let turnStep = 360 / FACETS_COUNT; let zIndexStep = Z_INDEX_MAX / FACETS_COUNT; let rotationDir = ROTATE_CLOCKWISE ? 1 : -1; let facets2 = FACETS_COUNT / 2; let spUn = SPATIAL_UNITS; let pX = PERSPECTIVE_ORIGIN[ 0 ]; let pY = PERSPECTIVE_ORIGIN[ 1 ]; let spriteWidth2 = 0.5 * SPRITE_WIDTH; let centerShiftX = spriteWidth2; let centerShiftZ = -spriteWidth2 / Math.tan( rad2deg * turnStep / 2 ); let parentStyle =` .view_port { position:relative; padding: 0px; top:0px; background-color:#EEEEEE; height: ${PARENT_WIDTH}${spUn}; width: ${PARENT_HEIGHT}${spUn}; perspective: ${DISTANCE_TO_CAROUSEL}px; perspective-origin: ${pX}${spUn} ${pY}${spUn}; transform-style: preserve-3d; } .sprite { position:absolute; background-color: transparent; color:white; height: ${SPRITE_HEIGHT}${spUn}; width: ${SPRITE_WIDTH}${spUn}; margin:0px; padding:0px; transform-origin: ${centerShiftX}${spUn} 0 ${centerShiftZ}${spUn}; } `; // //\\ helpers // transform: rotateY( ${turn}deg ); z-index: ${zIndex}; function makeTurnPhase( phase, turn, zIndex ) { return ` ${phase}% { transform: rotateY( ${turn}deg ); }`; }; function makeZIndex( ePhase ) { return Math.floor( Z_INDEX_MAX * Math.abs( ( facets2 - ePhase ) / facets2 ) ); } // \\// helpers // //\\// doing the job let anim = ''; let sprites = ''; let html = ''; for( let iFacet = 0; iFacet < FACETS_COUNT; iFacet++ ) { let an = ''; for( let iPhase = 0; iPhase <= FACETS_COUNT; iPhase++ ) { let absPhase = iPhase + iFacet; let ePhase = absPhase % FACETS_COUNT; let deb = an += makeTurnPhase( ( iPhase * phaseStep ).toFixed( DIGITS_FOR_CSS ), ( rotationDir * absPhase * turnStep ).toFixed( DIGITS_FOR_CSS ), makeZIndex( ePhase ) ); } anim += ` @keyframes move_sprite_${iFacet} {${an} }`; let colorGrain = FACETS_COUNT / 3; let cMas = 3 * iFacet / FACETS_COUNT; let colorGroup = Math.floor( cMas ); let subColor = cMas - colorGroup + 1/3; let subColorValue = [ [ 254, 0, 0 ], [ 0, 254, 0 ], [ 0, 0, 254 ] ]; let rr = subColorValue[ colorGroup ][0] * subColor; let gg = subColorValue[ colorGroup ][1] * subColor; let bb = subColorValue[ colorGroup ][2] * subColor; let color = 'rgb(' + rr.toFixed(0) + ', ' + gg.toFixed(0) + ', ' + bb.toFixed(0) + ')'; ////sprites let wAn = `${ANIMATION_CYCLE_DURATION}s linear 0s infinite normal move_sprite_${iFacet}`; sprites += ` #sprite-${iFacet} { background-color: ${color}; -webkit-animation: ${wAn}; animation: ${wAn}; }`; html += `