Polyrhythms_JavaScript_Project/index.html at main · muskanqed/Polyrhythms_JavaScript_Project · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PolyRhythms</title>
  </head>
  <body>
    <div style="display: flex; flex-direction: column">
      <div style="display: flex; justify-content: center">
        <h1>PolyRhythms</h1>
      </div>
      <div style="display: flex; justify-content: center">
        <canvas id="myCanvas" style="background-color: black"></canvas>
      </div>
    </div>
    <script src="sound.js"></script>
    <script src="track.js"></script>
    <script src="ball.js"></script>

    <script>
      const size = 800;
      myCanvas.width = size;
      myCanvas.height = 400;
      const ctx = myCanvas.getContext("2d");

      const trackCenter = { x: size / 2, y: size / 2 };
      const trackMinRadius = 50;
      const trackStep = 15;
      const ballRadius = 6;
      const ballMinSpeed = 0.01;
      ballSpeedStep = -0.0001;

      const soundFrequencies = [
        1760, 1567.98, 1396.91, 1318.51, 1174.66, 1046.5, 987.77, 880, 783.99,
        698.46, 659.25, 587.33, 523.25, 493.88, 440, 392, 349.23, 329.63,
        293.66, 261.63,
      ];

      const tracks = [];
      const balls = [];
      const N = 20;

      for (let i = 0; i < N; i++) {
        const trackRadius = trackMinRadius + i * trackStep;
        const ballSpeed = ballMinSpeed + i * ballSpeedStep;
        const ballSoundFrequencies = soundFrequencies[i];
        const hue = (i * 360) / N;
        const track = new Track(trackCenter, trackRadius, hue);
        const ball = new Ball(
          track,
          ballRadius,
          ballSpeed,
          ballSoundFrequencies,
          hue
        );
        tracks.push(track);
        balls.push(ball);
      }
      animate();

      function animate() {
        ctx.clearRect(0, 0, size, size);
        tracks.forEach((track) => track.draw(ctx));
        balls.forEach((ball) => ball.move());
        balls.forEach((ball) => ball.draw(ctx));
        requestAnimationFrame(animate);
      }
    </script>
  </body>
</html>