recursion-visually/visuals.js at main · soloiaros/recursion-visually · 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
import generateFibonacci from "./fibonacci.js";


export default function displaySequence(n) {

  const canvas = document.getElementById('canvas');
  const canvasHeight = canvas.height;
  const context = canvas.getContext('2d');
  context.reset();

  const sequence = generateFibonacci(n).reverse();

  context.lineWidth = 2;
  context.fill = 'black';
  context.font = "152px sans-serif";
  context.textAlign = "center";
  context.textBaseline = "middle";

  context.strokeRect(0, 0, canvasHeight, canvasHeight);
  context.fillText(
        sequence[0],
        canvasHeight * 0.5,
        canvasHeight * 0.5
      )
  let lastCoords = [0, 0, canvasHeight, canvasHeight];
  let newCoords;

  for (let i = 1; i < sequence.length; i++) {
    if (i % 4 === 1) {
      newCoords = [
        lastCoords[0] + lastCoords[2],
        lastCoords[1],
        canvasHeight * sequence[i] / sequence[0],
        canvasHeight * sequence[i] / sequence[0]
      ];
      context.strokeRect(...newCoords);
    } else if (i % 4 == 2) {
      newCoords = [
        lastCoords[0] + (lastCoords[2] - canvasHeight * sequence[i] / sequence[0]),
        lastCoords[1] + canvasHeight * sequence[i - 1] / sequence[0],
        canvasHeight * sequence[i] / sequence[0],
        canvasHeight * sequence[i] / sequence[0]
      ];
      context.strokeRect(...newCoords);
    } else if (i % 4 == 3) {
      newCoords = [
        lastCoords[0] - canvasHeight * sequence[i] / sequence[0],
        lastCoords[1] + (lastCoords[3] - canvasHeight * sequence[i] / sequence[0]),
        canvasHeight * sequence[i] / sequence[0],
        canvasHeight * sequence[i] / sequence[0]
      ];
      context.strokeRect(...newCoords);
    } else {
      newCoords = [
        lastCoords[0],
        lastCoords[1] - canvasHeight * sequence[i] / sequence[0],
        canvasHeight * sequence[i] / sequence[0],
        canvasHeight * sequence[i] / sequence[0]
      ];
      context.strokeRect(...newCoords);
    }
    context.font = `${128 * sequence[i] / sequence[0]}px sans-serif`;
    context.fillText(
        sequence[i],
        newCoords[0] + canvasHeight * sequence[i] / sequence[0] * 0.5,
        newCoords[1] + canvasHeight * sequence[i] / sequence[0] * 0.5
      )
    lastCoords = newCoords;

  }

}