( function() { var app = window.app = window.app || {}; window.ccc = console.log; let Z_INDEX_SCALE = 100000; //making it too big appar. crashes anim. let DISTANCE_TO_CAROUSEL = 300; //=perspective let PERSPECTIVE_ORIGIN = [ 400, 400 ]; let CAROUSELS = [ { facetsCount : 10, animationCycleDuration : 60, //sec position : { left : 0, top : 0, zz : 0 }, //no zz yet rotation : [ 0, 1, 0 ], spriteWidth : 450, spriteHeight : 300, rotateClockwise : false //true; //false = right-to-left along x axis; rotation around y axis }, { facetsCount : 10, animationCycleDuration : 60, //sec position : { left : 600, top : 0, zz : 0 }, rotation : [ 1, 0, 0 ], spriteWidth : 400, spriteHeight : 600, rotateClockwise : true //true; //false = right-to-left along x axis; rotation around y axis } ]; //:inner config let DIGITS_FOR_CSS = 10; let PARENT_WIDTH = 1000; let PARENT_HEIGHT = 800; //.vital to set safely let zInverter = 2000 + //2radius DISTANCE_TO_CAROUSEL; //:spawning config let rad2deg = Math.PI / 180; let pX = PERSPECTIVE_ORIGIN[ 0 ]; let pY = PERSPECTIVE_ORIGIN[ 1 ]; let parentStyle =` .view_port { position: relative; padding: 0px; margin: 0; top:0px; background-color: #000000; width: ${PARENT_WIDTH}px; height: ${PARENT_HEIGHT}px; perspective: ${DISTANCE_TO_CAROUSEL}px; perspective-origin: ${pX}px ${pY}px; overflow: hidden; } `; // //\\ helpers function makeTurnPhase( rotateAxis, phase, turn, zIndex ) { //function makeTurnPhase( rotateAxis, phase, turn, zIndex, preShift ) { //misses: transform: ${preShift}rotate3d( ${rotateAxis}, ${turn}deg ); z-index: ${zIndex}; return ` ${phase}% { transform: rotate3d( ${rotateAxis}, ${turn}deg ); z-index: ${zIndex}; }`; }; // \\// helpers function makeCarousel ( startCssId, crs ) { let FACETS_COUNT = crs.facetsCount; let phaseStep = 100 / FACETS_COUNT; let turnStep = 360 / FACETS_COUNT; let rotationDir = crs.rotateClockwise ? 1 : -1; let facets2 = FACETS_COUNT / 2; let spriteWidth2 = 0.5 * crs.spriteWidth; let centerShiftX = 0; let centerShiftY = 0; let rotationRadius; //from center of facet, not from its edge; if( crs.rotation[ 0 ] ) { ////around axis X centerShiftY = 0.5 * crs.spriteHeight; rotationRadius = centerShiftY / Math.tan( rad2deg * turnStep / 2 ); } else { centerShiftX = 0.5 * crs.spriteWidth; rotationRadius = centerShiftX / Math.tan( rad2deg * turnStep / 2 ); } let rotation = crs.rotation[ 0 ] + ', ' + crs.rotation[ 1 ] + ', ' + crs.rotation[ 2 ]; //let preShift = ''; //crs.position.zz ? `translate3d( 0, 0, ${crs.position.zz} ); ` : ''; let anim = ''; let sprites = ''; let html = ''; let spriteStyle = ` .sprite-${startCssId} { position: absolute; background-color: transparent; color: white; height: ${crs.spriteHeight}px; width: ${crs.spriteWidth}px; margin: 0px; padding: 0px; left: ${crs.position.left}px; top: ${crs.position.top}px; /*. sprite rotates over this point */ transform-origin: ${centerShiftX}px ${centerShiftY}px ${-rotationRadius}px; } `; for( let iFacet = 0; iFacet < FACETS_COUNT; iFacet++ ) { let sId = `sprite-${startCssId}-${iFacet}` let an = ''; for( let iPhase = 0; iPhase <= FACETS_COUNT; iPhase++ ) { let absPhase = iPhase + iFacet; let ePhase = absPhase % FACETS_COUNT; let floatPhase = ePhase / FACETS_COUNT let distance2observer = DISTANCE_TO_CAROUSEL - crs.position.zz + rotationRadius * ( 1 - Math.cos( floatPhase * 2 * Math.PI ) ); let inverseDistance = zInverter - distance2observer; let zIndex = ( Z_INDEX_SCALE * inverseDistance ).toFixed( 0 ); an += makeTurnPhase( rotation, ( iPhase * phaseStep ).toFixed( DIGITS_FOR_CSS ), ( rotationDir * absPhase * turnStep ).toFixed( DIGITS_FOR_CSS ), zIndex //preShift ); } anim += ` @keyframes move_sprite_${startCssId}_${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 = `${crs.animationCycleDuration}s linear 0s infinite normal move_sprite_${startCssId}_${iFacet}`; sprites += ` #${sId} { background-color: ${color}; -webkit-animation: ${wAn}; animation: ${wAn}; }`; html += `