ForestBackground/index.html at main · Woulfty/ForestBackground · 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
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Document</title>
</head>
    <body>
        <canvas id="canvas"></canvas>
    </body>
    <script>
        let c = init("canvas"),
        w = (canvas.width = window.innerWidth),
        h = (canvas.height = window.innerHeight);
        //initiation

        class firefly{
            constructor(){
                this.x = Math.random()*w;
                this.y = Math.random()*h;
                this.s = Math.random()*2;
                this.ang = Math.random()*2*Math.PI;
                this.v = this.s*this.s/4;
            }
            move(){
                this.x += this.v*Math.cos(this.ang);
                this.y += this.v*Math.sin(this.ang);
                this.ang += Math.random()*20*Math.PI/180-10*Math.PI/180;
            }
            show(){
                c.beginPath();
                c.arc(this.x,this.y,this.s,0,2*Math.PI);
                c.fillStyle="#fddba3";
                c.fill();
            }
        }

        let f = [];

        function draw() {
            if(f.length < 100){
                for(let j = 0; j < 10; j++){
                f.push(new firefly());
                }
            }
            //animation
            for(let i = 0; i < f.length; i++){
                f[i].move();
                f[i].show();
                if(f[i].x < 0 || f[i].x > w || f[i].y < 0 || f[i].y > h){
                f.splice(i,1);
                }
            }
        }

        let mouse = {};
        let last_mouse = {};

        canvas.addEventListener(
            "mousemove",
            function(e) {
                last_mouse.x = mouse.x;
                last_mouse.y = mouse.y;

                mouse.x = e.pageX - this.offsetLeft;
                mouse.y = e.pageY - this.offsetTop;
            },
            false
        );
        function init(elemid) {
            let canvas = document.getElementById(elemid),
                c = canvas.getContext("2d"),
                w = (canvas.width = window.innerWidth),
                h = (canvas.height = window.innerHeight);
            c.fillStyle = "rgba(30,30,30,1)";
            c.fillRect(0, 0, w, h);
            return c;
        }

        window.requestAnimFrame = (function() {
            return (
                window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function(callback) {
                    window.setTimeout(callback);
                }
            );
        });

        function loop() {
            window.requestAnimFrame(loop);
            c.clearRect(0, 0, w, h);
            draw();
        }

        window.addEventListener("resize", function() {
            (w = canvas.width = window.innerWidth),
            (h = canvas.height = window.innerHeight);
            loop();
        });

        loop();
        setInterval(loop, 1000 / 60);
    </script>
</html>