-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtree.html
100 lines (78 loc) · 4.43 KB
/
tree.html
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
<!DOCTYPE HTML>
<html>
<head>
<title>毕达哥拉斯树</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/addons/p5.sound.min.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<a href="index.html" class="logo">Back</a>
</header>
<!-- Nav -->
<nav id="nav">
<ul class="links">
<li><a href="index.html">Menu</a></li>
<li class="active"><a href="tree.html">Fractal Tree</a></li>
<li><a href="randomwalk.html">Random Walk</a></li>
<li><a href="gasdiffusion.html">Gas Diffusion</a></li>
<li><a href="dla.html">Diffusion-limited aggregation</a></li>
</ul>
<ul class="icons">
<li><a href="https://github.com/poetntowncrier/PhysicsSimulation" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
</ul>
</nav>
<!-- Main -->
<div id="main">
<!-- Post -->
<section class="post">
<header class="major">
<h1>
fractal tree</h1>
<p> In simple terms, a fractal is a geoetric shape containing self-similar and never-ending patterns.
</p>
</header>
<div class="image fit"><img style="display: block;
margin-left: 4rem;
margin-right: 4rem;
width: 80%;" src="images/pic02.jpg" alt="" />
</div>
<p style="text-align: center; font-size: 5pt">Fractal Tree<br />Image from
<a href="https://blog.ploeh.dk/2017/06/06/fractal-trees-with-purescript/">https://blog.ploeh.dk/2017/06/06/fractal-trees-with-purescript/</a></p>
</p>
<p> The DLA model is a typical exmaple of fractal. A fractal tree is a basic example.
This is a fractal tree, where each branch will stop growing at a certain ratio of the length of the previous one (e.g., 0.618) and rotate its direction by an angle to grow the next branch.
This process can be iterated to produce a fractal tree as shown in the simulation, where each small branch can be regarded as a reduced version of the whole tree, i.e., satisfying the fractal requirements.
Move the two sliders to see the effect of branch rotation angle and branch length on the appearance of the fractal tree.
</p>
<div class="p5" id="tree">
</div>
</section>
</div>
<!-- Copyright -->
<div id="copyright">
<ul><li>Powered by Mingyi Shao, Template from HTML5 UP, Library from p5.js & MathJax</li></ul>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/gas1.js"></script>
<script src="assets/js/p5.sound.min.js"></script>
<script src="assets/js/sketchtree.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</body>