-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
110 lines (110 loc) · 7.95 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
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
<!doctype html>
<html>
<head>
<title>Starherd</title>
<meta charset=UTF-8>
<meta name=description content="An interactive, evolving H-R diagram">
<meta name=keywords content=astronomy>
<meta name=author content=Xing>
<meta name=viewport content="width=device-width, initial-scale=1">
<link rel=stylesheet href=style.css>
<meta property="og:title" content="Starherd">
<meta property="og:site_name" content="Xing’s funny doings">
<meta property="og:url" content=https://x-ing.space/starherd>
<meta property="og:description" content="An interactive 3D Hertzsprung-Russell stellar evolution diagram">
<meta property="og:type" content="website">
<meta property="og:image" content="https://x-ing.space/starherd/render.jpg">
<meta name="twitter:card" content="summary_large_image">
<link rel="shortcut icon" type=image/png href="https://x-ing.space/starherd/favicon.png">
<script src="js/twgl-full.module.js" type="module"></script>
<script src="js/stats.min.js"></script>
<script src="js/math.js"></script>
<script src="js/shaders.js" type=module></script>
<script src="js/crunch.js" type="module"></script>
</head>
<body>
<main id="main">
<canvas class="screen" id="canvas"></canvas>
<svg class="screen" id="axes"></svg>
<div class="screen" id="board">
<section id="info">Tap on a star to inspect it!</section>
</div>
<form id="controls" autocomplete="off">
<label title="slower">
<input id="slower" type="button">
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M808-273 545-455q-14-9-14-25t14-25l263-182q15-11 31-2.5t16 26.5v366q0 18-16 26.5t-31-2.5Zm-402 0L143-455q-14-9-14-25t14-25l263-182q15-11 31-2.5t16 26.5v366q0 18-16 26.5t-31-2.5Z" fill="#fff"/></svg>
</label>
<label title="play/pause">
<input id="time-pause" type="checkbox">
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M615-200q-24.75 0-42.375-17.625T555-260v-440q0-24.75 17.625-42.375T615-760h55q24.75 0 42.375 17.625T730-700v440q0 24.75-17.625 42.375T670-200h-55Zm-325 0q-24.75 0-42.375-17.625T230-260v-440q0-24.75 17.625-42.375T290-760h55q24.75 0 42.375 17.625T405-700v440q0 24.75-17.625 42.375T345-200h-55Z" fill="#fff"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M366-232q-15 10-30.5 1T320-258v-450q0-18 15.5-27t30.5 1l354 226q14 9 14 25t-14 25L366-232Z" fill="#fff"/></svg>
</label>
<label title="faster">
<input id="faster" type="button">
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M151-273q-15 11-31 2.5T104-297v-366q0-18 16-26.5t31 2.5l263 182q14 9 14 25t-14 25L151-273Zm407 0q-15 11-31 2.5T511-297v-366q0-18 16-26.5t31 2.5l263 182q14 9 14 25t-14 25L558-273Z" fill="#fff"/></svg>
</label>
<label title="restart">
<input id="restart" type="button">
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960
960 960" width="48"><path d="M480-160q-133 0-226.5-93.5T160-480q0-133 93.5-226.5T480-800q85 0 149 34.5T740-671v-99q0-13 8.5-21.5T770-800q13 0 21.5 8.5T800-770v194q0 13-8.5 21.5T770-546H576q-13 0-21.5-8.5T546-576q0-13 8.5-21.5T576-606h138q-38-60-97-97t-137-37q-109 0-184.5 75.5T220-480q0 109 75.5 184.5T480-220q75 0 140-39.5T717-366q5-11 16.5-16.5t22.5-.5q12 5 16 16.5t-1 23.5q-39 84-117.5 133.5T480-160Z" fill="#fff"/></svg>
</label>
<label id="time">
<label>
<input id="time-number" type="number" min="0" max="1e6" value="1e-2" step="1">
million years
</label>
<input id="time-slider" type="range" min="0" max="6" value="0" step="1e-5">
</label>
<label>
<select id="quality-select">
<optgroup label="Quality">
<option value=0>🌘</option>
<option value=1>🌗</option>
<option value=2 selected>🌕</option>
</optgroup>
</select>
</label>
<label title="fullscreen">
<input id="fullscreen" type="checkbox">
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M230-200q-12.75 0-21.375-8.625T200-230v-133q0-12.75 8.675-21.375 8.676-8.625 21.5-8.625 12.825 0 21.325 8.625T260-363v103h103q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T363-200H230Zm-.175-367Q217-567 208.5-575.625T200-597v-133q0-12.75 8.625-21.375T230-760h133q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T363-700H260v103q0 12.75-8.675 21.375-8.676 8.625-21.5 8.625ZM597-200q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T597-260h103v-103q0-12.75 8.675-21.375 8.676-8.625 21.5-8.625 12.825 0 21.325 8.625T760-363v133q0 12.75-8.625 21.375T730-200H597Zm132.825-367Q717-567 708.5-575.625T700-597v-103H597q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T597-760h133q12.75 0 21.375 8.625T760-730v133q0 12.75-8.675 21.375-8.676 8.625-21.5 8.625Z" fill="#fff"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M362.825-200Q350-200 341.5-208.625T333-230v-103H230q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T230-393h133q12.75 0 21.375 8.625T393-363v133q0 12.75-8.675 21.375-8.676 8.625-21.5 8.625ZM230-567q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T230-627h103v-103q0-12.75 8.675-21.375 8.676-8.625 21.5-8.625 12.825 0 21.325 8.625T393-730v133q0 12.75-8.625 21.375T363-567H230Zm366.825 367Q584-200 575.5-208.625T567-230v-133q0-12.75 8.625-21.375T597-393h133q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T730-333H627v103q0 12.75-8.675 21.375-8.676 8.625-21.5 8.625ZM597-567q-12.75 0-21.375-8.625T567-597v-133q0-12.75 8.675-21.375 8.676-8.625 21.5-8.625 12.825 0 21.325 8.625T627-730v103h103q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T730-567H597Z" fill="#fff"/></svg>
</label>
</label>
</main>
<aside id="aside">
<h1>Starherd</h1>
<p>
An interactive Herzsprung–Russell digram for visualizing stellar
evolution, based on
<a href="https://arxiv.org/abs/astro-ph/0001295">“Comprehensive
analytic formulae for stellar evolution as a function of mass and
metallicity”</a>
by Hurley, Pols & Tout, and
<a
href="https://ui.adsabs.harvard.edu/abs/1996MNRAS.281..257T/abstract">“Zero-age
main-sequence radii and luminosities as analytic functions of mass and
metallicity”</a>
by Tout, Pols, Eggleton, & Han.
<p>
These simulated stars were all born at the same time into the <a href="https://en.wikipedia.org/wiki/Main_sequence">Main Sequence</a>,
but differences in initial mass and chemical composition lead them to very different lives.
<p>
The biggest ones exhaust their core hydrogen fuel the fastest, and turn into immense giants who linger for a cosmically brief moment
before ultimately becoming stellar remnants.
<p>
Designed and programmed by
<a href="https://x-ing.space">Xing</a> in 2023, with help from the
<a href="https://shadertoy.com">Shadertoy</a> community.
Read <a href="https://github.com/flyorboom/starherd">my spaghettified code</a> at your own risk.
<p>
Warning: Although I’m quasi-confident about the accuracy of the main sequence through the asymptotic
giant phases, I have yet to implement
the stellar remnants (white dwarfs, neutron stars, and black holes)
equations, so any of these occuring should be treated as BS.
<p>
<button id="debug">debug button for NERDS</button>
</p>
</aside>
<script src="js/render.js" type="module"></script>
</body>
</html>