maxwellbo.github.io/butterfly.html at master · MaxwellBo/maxwellbo.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>butterfly</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: transparent;
            overflow: hidden;
        }

        #butterfly {
            width: 32px;
            height: 32px;
            display: block;
        }
    </style>
</head>
<body>
    <img id="butterfly" src="img/butterfly/0.gif" alt="Butterfly">

    <script>
        const butterfly = document.getElementById('butterfly');
        let currentFrame = 0;
        const totalFrames = 6; // 0.gif to 5.gif

        // Animation variables
        let time = 0;
        let startX = window.screenX || 0;
        let startY = window.screenY || 0;

        // Initialize starting position at middle right if not already positioned
        if (startX === 0 && startY === 0) {
            startX = window.screen.width - 82; // 32px width + 50px margin
            startY = (window.screen.height / 2) - 16; // Middle of screen minus half butterfly height
            window.moveTo(startX, startY);
        } else {
            startX = window.screenX;
            startY = window.screenY;
        }

        // Function to update the butterfly frame and move the window
        let animationInterval;

        function animate() {
            // Update the image source
            butterfly.src = `img/butterfly/${currentFrame}.gif`;

            if (window.moveTo) {
                // Sine wave motion parameters
                const amplitude = 30; // Height of the sine wave
                const frequency = 0.1; // How tight the wave is
                const leftwardSpeed = 12; // How fast it moves left
                const upwardSpeed = 2; // How fast it moves up overall

                // Calculate new position
                const newX = startX - (time * leftwardSpeed);
                const sineOffset = Math.sin(time * frequency - Math.PI/2) * amplitude; // -π/2 offset to start moving up
                const newY = startY - (time * upwardSpeed) + sineOffset;

                // Check if butterfly has reached the left edge of the screen
                if (newX <= 0) {
                    clearInterval(animationInterval);
                    window.close();
                    return;
                }

                // Move the window to the new position
                window.moveTo(Math.round(newX), Math.round(newY));

                // Update time for next frame
                time += 1;
            }

            // Increment frame counter
            currentFrame = (currentFrame + 1) % totalFrames;
        }

        // Start animation after a brief delay
        setTimeout(() => {
            animationInterval = setInterval(animate, 100);
        }, 100);
    </script>
</body>
</html>