deprived-main-website/src/lib/Cube3D.svelte

<script lang="ts">
    import planeImg from './images/PlaneGrid.png';
    import cubeSideImg from './images/CubeTexture.png';

    // Hyperparameters (fine to change)
    let startPosAnim: number = 1200; // Starts at scroll value
    let endPosAnim: number = 4000; // Ends at scroll value
    let parallexOutPadding = 700;
    let parallaxOutLength = 400; // How long the exit anim is



    // Define, don't touch
    let scrollPos: number = 0;
    let cubeRotY: number = 0;
    let cubeRotX: number = 0;

    // Total length of animation
    let totalAnimLength: number = endPosAnim - startPosAnim;

    // Front side text after fully scrolled
    let frontSideText: string[] = ["overlooked", "DEPRIVED"];

    function updateUI(){
        // Calculates the cube roation
        let time = (scrollPos - startPosAnim)/totalAnimLength;
        cubeRotY = lerp(0, 360, clamp(time, 0, 1), true);

        // Start exit anim after main anim
        time = (scrollPos - (endPosAnim + parallexOutPadding))/(parallaxOutLength + parallexOutPadding);
        cubeRotX = lerp(0, 15, clamp(time, 0, 1), true);

        // if rotated cube 180deg then change text
        let frontSide = document.getElementById('front');
        if (!!frontSide) // if not null
        {
            if (scrollPos - startPosAnim < totalAnimLength / 2){
                frontSide.innerHTML = frontSide.innerHTML.replace(frontSideText[1], frontSideText[0]);
            }
            else {
                frontSide.innerHTML = frontSide.innerHTML.replace(frontSideText[0], frontSideText[1]);
            }
        }

        // Hide plane3d if plane3d turned pass camera
        let plane3d = document.getElementById('plane3D');
        if (!!plane3d) // if not null
        {
            if (cubeRotX <= 10){
                plane3d.classList.remove("hide");
            }
            else{
                plane3d.classList.add("hide");
            }
        }
    }

    function lerp(from: number, to: number, time: number, clamped: boolean = false) : number {
        const lerped: number = from + (to - from) * time;
        
        if (clamped) {
        return from < to ? clamp(lerped, from, to) : clamp(lerped, to, from);
        }

        return lerped;
    }

    function clamp(value: number, min: number, max: number): number {
        return Math.min(Math.max(value, min), max);
    }
</script>

<svelte:window bind:scrollY={scrollPos} on:scroll={updateUI}/>

<style>
  @import './Cube3D.css';

    :root {
        --cube-size: 400px;
        --cube-color: rgba(125, 125, 125, 1);
    }

  #plane3D {
    --plane-size: 2500px;

    width: var(--plane-size);
    height: var(--plane-size);

    position: absolute;

    transform: 
        rotateX( -90deg ) 
        translateZ(calc(var(--plane-size) * -0.34))
        translateX(calc(var(--plane-size) * -0.45));
    -moz-transform: 
        rotateX( -90deg ) 
        translateZ(calc(var(--plane-size) * -0.34))
        translateX(calc(var(--plane-size) * -0.45));
    }

    .image {
        transform: translateX(calc(var(--cube-size)*-0.5));
    }

    .text{
        margin: 0;
    }
</style>

<div id="cube-3d-container">
    <div id="cube3d"style="transform: rotateY({cubeRotY}deg) rotateX({cubeRotX}deg);">
        <div id="front" class="cube-sides">
            <img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
            <p class="text" style="position: relative;">
                overlooked
            </p>
        </div>

        <div id="back" class="cube-sides">
            <img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
            <p class="text" style="position: relative;">
                constrained
            </p>
        </div>

        <div id="right" class="cube-sides">
            <img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
            <p class="text" style="position: relative;">
                drained
            </p>
        </div>

        <div id="left" class="cube-sides">
            <img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
            <p class="text" style="position: relative;">
                underfunded
            </p>
        </div>

        <!-- <div id="top" class="cube-sides">
            <img src="{cubeSideImg}" style="width: 100%;" alt="cube side texture"/>
            5
        </div>

        <div id="bottom" class="cube-sides">
            <img src="{cubeSideImg}" style="width: 100%;" alt="cube side texture"/>
            6
        </div> -->

        

        <img id="plane3D" src={planeImg} alt="3D ground plane"/>
    </div>

</div>