8byt.com/index.html at master · 8byt/8byt.com · 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
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>8byt</title>
    <style type="text/css">
        body {
            background-color: #70DBFF;
        }

        #city {
            position: relative;
            background-image: url('images/CitygenLarge.png');
            margin-left: auto;
            margin-right: auto;
            width: 512px;
            height: 512px;
            margin-top: 50px;
            margin-bottom: auto;
        }

        #particle {
            position: relative;
            overflow: visible;
            width: 0px;
            height: 0px;
            z-index: -100;
        }

        #particle1 {
            width: 8px;
            height: 8px;
            z-index: -100;
            background-color: #38261a;
        }
    </style>
    <script type="text/javascript">
        // NOTE(danny): This code was written in 2013. I'm leaving it largely unchanged.
        // Thank you Wayback Machine for saving what I didn't.
        function init() {
            px = new Array(0);
            py = new Array(0);
            pyf = new Array(0);
            cur = 0;
            chance = .99;
            called = 0;
            skyrot = 0;
            setTimeout(animate, 10);
        }
        function range(x, low, high) {
            return Math.max(Math.min(x, high), low);
        }
        function fade(r1, g1, b1, r2, g2, b2, x) {
            return 'rgb(' + Math.round(r2 * x + r1 * (1 - x)) + ',' + Math.round(g2 * x + g1 * (1 - x)) + ',' + Math.round(b2 * x + b1 * (1 - x)) + ')';
        }

        function animate() {
            var city = document.getElementById("city");
            offset = ((Math.cos(cur) + 1) * 25) + 50;
            city.style.marginTop = offset + "px";
            cur += (3.14159 / 500);
            skyrot += .001;

            document.getElementsByTagName("body")[0].style.backgroundColor = fade(0, 174, 255, 25, 0, 30, (Math.sin(skyrot) + 1) / 2);

            if (Math.random() > chance && px.length < 64) {
                px.push(Math.floor((Math.random() * 56) + 4) * 8);
                py.push(370);
                pyf.push(0);
                var cur1 = px.length - 1;
            }

            if (px.length > 0) {
                city.innerHTML = "";
                for (var i = 0; i < px.length; i++) {
                    city.innerHTML += "<div id='particle' style='left:" + px[i] + "px; top:" + py[i] + "px; opacity:" + (1 - Math.pow(range(((py[i] / 512)), 0, 1), 10)) + "; z-index:" + (-25 - i) + ";'><div id='particle1'></div></div>";
                    pyf[i] += .001;
                    py[i] += pyf[i];
                    if (py[i] > 512) {
                        if (i != -1) px.splice(i, 1);
                        if (i != -1) py.splice(i, 1);
                        if (i != -1) pyf.splice(i, 1);
                    }
                }

            }

            setTimeout(animate, 10);
        }
    </script>
</head>

<body onload="init()">
    <div id="city"></div>
</body>

</html>