-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
82 lines (81 loc) · 5.11 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>Fractals on <canvas></title>
<meta charset="utf-8">
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
(function($) {
$(document).ready(function () {
$('#slider').slider({
min: stepsPerSecond,
max: 1000,
slide: function (e, ui) {
stepsPerSecond = ui.value;
$('.ui-slider-handle')
.css('text-decoration', 'none')
.css('text-align', 'center')
.css('padding', '3px')
.css('width', 'auto')
.css('height', 'auto')
.text(ui.value);
}
});
$('input[name=simulation-type]:radio').change(function() {
if ($(this).is(':checked')) {
simulationType = SimulationType[$(this).val()];
resetSim();
$('#controls').show();
}
})
.change(); // Trigger a change
});
})(window.jQuery);
</script>
<script src="js/fractals.js"></script>
<style type="text/css">
#main div { margin-bottom: 13px; }
#controls { padding: 7px; }
#controls span { padding: 3px; }
</style>
</head>
<body>
<div id="main">
<h1>Fractals on html canvas</h1>
<p>Simple simulations of <a href="http://en.wikipedia.org/wiki/Diffusion-limited_aggregation">Diffusion-limited aggregation</a> fractals. There are a couple of different variations of the same simulation below.</p>
<p>Tested in Google Chrome and Firefox.</p>
<h4>Controls</h4>
<div>
<input id="rd" type="radio" name="simulation-type" value="Random" checked><label for="rd">Random particle walk - normal fractal</label><br>
<input id="rdb" type="radio" name="simulation-type" value="RandomBound"><label for="rdb">Random particle walk - bounded fractal</label><br>
<input id="db" type="radio" name="simulation-type" value="DeterminedBound"><label for="db">Determined particle walk - bounded fractal</label>
</div>
<div id="controls" style="display:none;">
<span><a href="#" onclick="startSim(); return false;">Start</a></span>
<span><a href="#" onclick="pauseSim(); return false;">Pause</a></span>
<span><a href="#" onclick="resetSim(); return false;">Reset</a></span>
<p>Set number of particle movements per animation cycle:</p>
<div id="slider" style="width: 400px;"></div>
</div>
</div>
<div id="fractal">
<canvas id="fractal-canvas" width="400" height="400">Unfortunately, your browser does not support the canvas element. Get the newest Firefox, Chrome, Opera or Safari.</canvas>
</div>
<div id="footer">
<h2>Descriptions</h2>
<p>Here is a short description of the different simulations.</p>
<ul>
<li><strong>Random walk normal fractal</strong>. All particles are randomly located and walk randomly. Therefore, the creation of the fractal takes longer time.</li>
<li><strong>Random walk bounded fractal</strong>. New particles appear when previous particles walk a certain distance away from the evolving fractal. The larger the fractal becomes, the more particles join the party. Each particle walks randomly.</li>
<li><strong>Determined-particle bounded fractal</strong>. New particles appear when previous particles walk a certain distance away from the evolving fractal. The larger the fractal becomes, the more particles join the party. Each particle walk in a predetermined direction.</li>
</ul>
<h2>Code</h2>
<p>Grab the <a href="https://github.com/dlebech/Fractals-on-html-canvas">source code here</a>.</p>
<h2>Why</h2>
<p>A good friend of mine, a PhD student in Physics, Rick Montgomery, inspired me to create this little simulation of <a href="http://en.wikipedia.org/wiki/Diffusion-limited_aggregation">Diffusion-limited aggregation</a>.</p>
<p>What fascinated me was the simplicity of the simulation where over time, random walks of randomly located particles turn into a nice fractal. The particles stop when they hit a stationary particle. Initially, there is only one stationary particle.</p>
</div>
</body>
</html>