examples/tree.html at master · chinhdo/examples · 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>P5.js recursive tree</title>
    <meta
      name="description"
      content="Recursive tree using P5.js (based on P5's recursive tree example)"
    />
    <meta name="author" content="Chinh Do" />
    <link
      href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"
      rel="stylesheet"
    />
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js"></script>
    <style>
      /* RESET */
      /* Box sizing rules */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      html,
      body {
        font-family: "Roboto", sans-serif;
        margin: 0;
        background-color: #222222;
        color: white;
        text-align: center;
      }

      li {
        padding: 2px;
      }

      h1 {
        font-size: 1.5rem;
      }

      .container {
        padding: 5px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <h1>Recursive tree using P5.js</h1>
    </div>
    <script>
      let theta;
      let x = 250;
      let goRight = true;

      function setup() {
        createCanvas(window.innerWidth, window.innerHeight * 0.75);
      }

      function draw() {
        if (goRight) {
          x++;
        } else {
          x--;
        }

        if (x > 700) {
          goRight = false;
        }

        if (x < 0) {
          goRight = true;
        }

        background("#222222");
        frameRate(30);
        stroke(255);

        let a = (x / width) * 90;

        let weight = 10;

        // Convert it to radians
        theta = radians(a);
        // Start the tree from the bottom of the screen
        translate(width / 2, height);
        // Draw a line 120 pixels
        strokeWeight(weight);
        line(0, 0, 0, -(height * 0.25));
        // Move to the end of that line
        translate(0, -(height * 0.25));
        // Start the recursive branching!
        branch(width / 4, weight);
      }

      function branch(h, w) {
        // Each branch will be 2/3rds the size of the previous one
        // h *= 0.66;
        h *= 0.64;

        // All recursive functions must have an exit condition!!!!
        // Here, ours is when the length of the branch is 2 pixels or less
        if (h > 2) {
          push(); // Save the current state of transformation (i.e. where are we now)
          rotate(theta); // Rotate by theta
          strokeWeight(Math.max(1, w));
          line(0, 0, 0, -h); // Draw the branch
          translate(0, -h); // Move to the end of the branch
          branch(h, w * 0.5); // Ok, now call myself to draw two new branches!!
          pop(); // Whenever we get back here, we "pop" in order to restore the previous matrix state

          // Repeat the same thing, only branch off to the "left" this time!
          push();
          rotate(-theta); // Rotate by theta
          strokeWeight(w);
          line(0, 0, 0, -h);
          translate(0, -h);
          branch(h, w * 0.5);
          pop();
        }
      }
    </script>
  </body>
</html>