-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
76 lines (76 loc) · 4.64 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tile Tectonics</title>
<style> * {font-family:sans-serif;} </style>
</head>
<body>
<h1>Tile Tectonics</h1>
<button type="button" id="gen3">Generate standard map</button>
<button type="button" id="gen2">Generate small map</button>
<button type="button" id="genl">Generate large map</button>
<button type="button" id="genr">Generate rectangular map</button>
<button type="button" id="genc">Generate from map code</button>
<br><br>
<button type="button" id="move">Move plates</button>
<button type="button" id="resolve">Resolve tiles</button>
<button type="button" id="fast">Move and resolve</button>
<br><br>
<canvas id="art"></canvas>
<script src="./simulation.js"></script>
<p id = "round"> </p>
<p id = "code"> </p>
<h2>About</h2>
<p>This program is a basic plate tectonics simulator. You can generate a new planet
with neat rectangular plates, and watch as those plates change shape through
interactions resembling those found in real life. Try generating a map and clicking
the 'Move and resolve' button a few times to see what happens!</p>
<h3>How it works</h3>
<p>When you generate a map, what you see is a grid of tiles. Tiles within a black
outlined region belong to a single tectonic plate, and move together around the map.
Plates that are green, yellow, or orange are continental, while plates that are blue,
purple, or pink are oceanic. Note that the tile grid wraps around on itself, so tiles
on the left edge share a border with tiles on the right edge, and tiles on the top
row are next to those on the bottom row.</p>
<p>When you click the 'Move plates' button, every plate moves in a certain direction
that is randomly selected when you generate the map. (This direction can change from
round to round.) However, this will cause plates to overlap, creating a convergent
boundary, which is indicated by the tiles in conflict turning red. It will also cause
gaps to appear between plates, creating a divergent boundary, which is indicated by
the empty tiles turning grey. In real life, there are no gaps between tectonic plates,
so these conflicts and empty tiles need to be resolved.</p>
<p>Clicking the 'Resolve tiles' button will resolve these conflicts and empty tiles
following a set of predictable rules. Tiles will try to join the neighboring plate
with the most tiles around that tile. If there's a tie, tiles will check which plates
are the most prominent in their neighboring tiles and join the smallest one, though
tiles in conflict will preference continental plates over oceanic plates, while empty
tiles will preference oceanic plates over continental plates. This is because oceanic
plates tend to subduct under thicker continental plates when they converge, and
oceanic plates tend to expand when they diverge through the process of seafloor
spreading.</p>
<p>The standard way to interact with this program is alternate between clicking 'Move
plates' and 'Resolve tiles' to see what happens in every round of the simulation. But
you can speed up the process by clicking the 'Move and resolve' button, which will do
both actions at once. Repeatedly clicking 'Move and resolve' will effectively animate
the simulation, and the results can look quite cool. (Try to avoid clicking 'Move
plates' multiple times in a row, as that can make things behave incorrectly.)</p>
<p>This simulation is in no way realistic, as the plates tend to reach an equilibrium
after a while, which doesn't happen in real life. In addition, transform faults aren't
modeled at all, and plates can easily disappear from the map. But it does show some of
the basic interactions of plate tectonics.</p>
<h3>Other notes</h3>
<p>You can use map codes to save plate simulations for viewing again. A map code will
be generated with each map, and will appear below it. The code starts with the first
number and ends with the last letter. By clicking the 'Generate from map code' button
and pasting in the code, a particular map can be simulated exactly the same as it was
originally. The code consists of numbers for the width and height of the map in tiles,
the number of columns and rows of plates, and the size of the tiles, followed by
letters for the type of each plate (continental or oceanic), followed by letters for
the sequence of directions each plate moves in. By changing these values, it's
possible to create maps with custom sizes and movement patterns.</p>
<p>The source code for this program can be found <a href="https://github.com/GusEvans/
TileTectonics">here</a> if you want to see how it works. Other coding projects of mine
can be found <a href="https://gusevans.github.io/">here</a>.</p>
</body>
</html>