WWPOL.github.io/index.html at master · WWPOL/WWPOL.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
88
89
90
<html>
<head>
  <title>Willy Wonka's Programming Oompa Loompas</title>
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
  <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">

  <link href="//fonts.googleapis.com/css?family=Monoton" rel="stylesheet">

  <style>
    html, * {
      padding: 0;
      margin: 0;
      overflow: hidden;
    }

    h1 {
      color: #0F0;
      position: absolute;
      font-family: 'Monoton', cursive;
      font-weight: 100;
    }

    body {
      font-size: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <h1>WWPOL</h1>
  <canvas id="q"></canvas>

  <script>
    var start = performance.now();
    var s = window.screen;
    var width = q.width = window.innerWidth;
    var height = q.height = window.innerHeight;
    var letters = Array(256).join(1).split('');
    var noOfDrops = 25;
    var fallingDrops = [];
    var canvas = document.getElementById('q');

    window.onload = function() {
      for (var i = 0; i < noOfDrops; i++) {
          var fallingDr = new Object();
          fallingDr["image"] =  new Image();
          var imgNum = Math.random();
          fallingDr.image.src = 'img/head.png';
          fallingDr["x"] = Math.random() * width;
          fallingDr["y"] = Math.random() * height * -1;
          fallingDr["speed"] = 3 + Math.random() * 5;
          fallingDrops.push(fallingDr);
      }

      function draw() {
        q.getContext('2d').fillStyle='rgba(0,0,0,.05)';
        q.getContext('2d').fillRect(0,0,width,height);
        q.getContext('2d').fillStyle='#0F0';
        letters.map(function(y_pos, index){
          text = String.fromCharCode(1e3+Math.random()*33);
          x_pos = index * 10;
          q.getContext('2d').fillText(text, x_pos, y_pos);
          letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10;
        });
        if (performance.now() - start >= 3000) {
          for (var i=0; i< noOfDrops; i++) {
            q.getContext('2d').drawImage (fallingDrops[i].image, fallingDrops[i].x, fallingDrops[i].y); //The rain drop
            fallingDrops[i].y += fallingDrops[i].speed; //Set the falling speed
            if (fallingDrops[i].y > height) {  //Repeat the raindrop when it falls out of view
              fallingDrops[i].y = -100 //Account for the image size
              fallingDrops[i].x = Math.random() * width;    //Make it appear randomly along the width
            }
          }
        }
        window.requestAnimationFrame(draw);
      };
      window.requestAnimationFrame(draw);
    }

    window.onresize = function() {
      s = window.screen;
      width = q.width = window.innerWidth;
      height = q.height = window.innerHeight;
    }
  </script>
</body>
</html>