-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
262 lines (248 loc) · 13.9 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
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!DOCTYPE html>
<html>
<!--"FRC robotics team"
Spacing
Font size
mention team name-->
<!--
TODO:
Compress images + other optimizations
Improve mobile view
Add more projects
Derivative calculator
Phys project
State space pathfinding
USR - Vesc translator
Learning model practice
Refine projects? Cut it
Refine writing
Fix Navbar
-->
<head>
<meta name="robots" content="noindex,nofollow" >
<title>Hale Barber - Portfolio</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="main.js"></script>
<!-- <link rel="stylesheet" href="https://pyscript.net/releases/2024.1.1/core.css" /> -->
<!-- <script type="module" src="https://pyscript.net/releases/2024.1.1/core.js"></script> -->
</head>
<body>
<div id="header">
<h1>
Hale Barber
</h1>
<em style="font-size: 14pt;">
</em>
</div>
<div class="main">
<div id="spacer"></div>
<a id="home" class="section">About Me</a>
<div class="elementPair">
<div class="left">
<img src="MeQuizzical.png" alt="PLACEHOLDER" class="inlineImage">
<p style="color: #888888; font-size: small; text-align: center;">Photo by Issac Madsen</p>
</div>
<div class="right">
<p>
Hello! I'm a senior at the Academy for Math, Engineering, and Science in Salt Lake City, Utah. I've lived
in Utah for my whole life, first in Lehi, and now in Salt Lake. I have two brothers and one sibling, all older
than me. I enjoy recreational mathematics, creative writing, video games and game design, music, programming,
teaching, and helping people. I've been fascinated with computer programming and software development from a
young age.
</p>
</div>
</div>
<a id="projects" class="section">Projects</a>
<h3 id="graphing_calculator">
Graphing Calculator
</h3>
<div class="subtitle">
<em>2021</em>
</div>
<div class="elementPair"> <div class="left">
<p>
In this project, I made a graphing calculator for a pair project in my AP CS principles class.
I wrote the parser routine, evaluation routine, and graphing framework. My partner wrote the
app navigation. I used a recursive object structure in JavaScript to represent an expression
typed in by the user, whether on the graphing or evaluation screen. Each object held two other
objects, as well as the operation to combine them with. The objects held could be other expressions,
or a terminating x or constant. The parser would translate a string mathematical expression and use
order of operations to generate an expression object. An expression is evaluated by recursively traversing
the expression object and combining its components using its operation. The calculator is embedded here;
the graphing section takes an expression of x (without f(x) or y) and graphs it.
</p>
</div> <div class="right">
<iframe class="content" width="392" height="620" src="https://studio.code.org/projects/applab/HXjObG3PStOIujBDUVWz4mr5zvdV_zhyO3ls4gtGiyA/embed"></iframe>
</div> </div>
<h3 id="relative_faith">
Relative Faith
</h3>
<div class="subtitle">
<em>2021</em>
</div>
<div class="elementPair"> <div class="left">
<img class="content" src="RelativeFaithScreenshot.png">
</div> <div class="right">
<p>
Relative Faith was a video game I worked on with a group as a part of a game development class. In it,
you platform between planets, with one catch: the speed of light is very low. I wrote the relativistic physics
for this project, which involved making a modular script that would take in data from a game object about its
true velocity and forces, and puppeteer it to the correct position. Not only was this my first Godot project, it
was also my first time working with shader languages. Godot has a shader language similar to GLSL, and I used this
to attempt to implement length contraction, light travel distortion, and the doppler effect, but unfortunately, I
was never able to get it to work properly before reaching the deadline for the project and moving on.
</p>
</div> </div>
<h3 id="wyrm_heart">
Wyrm Heart
</h3>
<div class="subtitle">
<em class="subtitle">2022 —</em>
<a class="subtitle" href="https://replit.com/@HBSCH/Dungeon-Generator-Non-AP">Source code</a>
</div>
<div class="elementPair"> <div class="left">
<p>
For my AP CS principles final project, I created an adventure game taking place in a procedurally
generated maze. The project was written in Python, and I used the object oriented paradigm to organize
the code. The player was a singleton, the enemies were classes extending a base enemy class, and so on
for most elements in the game. It taught me a lot about code organization and problems with python.
If I were to come back to this project, there are quite a few things I would fix, such as a lack of
gameplay diversity, strange pacing, and the amount of grind. Overall, I'm still quite happy with the project.
</p>
</div> <div class="right">
<img class="content" src="WyrmHeartScreenshot.png" width="100%">
<!-- Failed embed: <script type="py" src="Dungeon-Generator-Non-AP/main.py" terminal worker width="100%"></script> -->
</div> </div>
<h3 id="desmos_rendering">
Desmos 3D Rendering
</h3>
<div class="subtitle">
<em class="subtitle">2023</em>
</div>
<div class="elementPair"> <div class="left">
<iframe class="content" style="aspect-ratio: 1;" src="https://www.desmos.com/calculator/4qvuuf0mxg?embed" width="100%" style="border: 1px solid #ccc" frameborder=0></iframe>
</div> <div class="right">
<p>
In this project, I wrote a 3D graphing engine in the 2D graphing calculator Desmos. It taught me a lot about graphics
and rendering. The program in Desmos takes a list of vertices, as well as a list of triangles in terms of the indices
of the relevant vertices, and generates a 2D triangle and color for each that Desmos can plot. I also performed backface
culling, and then sorted the triangles to preserve the correct occlusion of one by another. I enjoy working around
strange restrictions, and Desmos provides plenty of these. For example, there are no nested arrays, 2D arrays, or 3D
points in Desmos. This meant I had to use three lists for the vertices—one for the x, the y, and the z. In addition,
I wrote a small python script to convert a .obj file into the relevant lists in a format I could import into Desmos.
The renderer is embedded here, and is interactive. The link in the lower right can be used to see the source code.
</p>
</div> </div>
<h3 id="derivative_calculator">
Derivative Calculator
</h3>
<div class="subtitle">
<em class="subtitle">2023-2024 —</em>
<a href="https://github.com/Hydro111/derivative-calculator">Source code</a>
</div>
<div class="elementPair"> <div class="left">
<p>
This is a calculator I made while taking Calculus. I realized that the derivative rules we learned were already enough
to determine the derivative with pretty much any function I could write down. I wrote a parser quite similar to the
parser I used for my graphing calculator project, where an expression is converted to a recursive tree of expression
objects, and the class that implemented the Expression interface determined the operation, or if it was a leaf node
(constant or variable). Then, making it calculate the derivative was as easy as writing a derivative function for each
function or operation, and making these use the chain rule. I also made a basic expression simplification algorithm, which
just got rid of redundant information like plus-zero's or times-one's.
</p>
</div> <div class="right">
<img class="content" src="DerivativeCalculator.png" width="100%">
</div> </div>
<h3 id="factorio_computer">
Factorio Computer
</h3>
<div class="subtitle">
<em class="subtitle">2024 —</em>
<a href="https://docs.google.com/spreadsheets/d/1tIw5-ecpbyrZvkn-K3zCDcKsB-J4TjwdBEMLxwch8Nw/edit?usp=sharing">Instruction set</a>
</div>
<div class="elementPair"> <div class="left">
<img class="content" src="InstructionTable.png" width="100%">
</div> <div class="right">
<p>
Although it's not traditional computer programming, I'd like to share the fully functional, Turing complete computer I built in the
video game Factorio. Factorio is a game about making factories, and includes some simple logic operations for controlling machines.
This project taught me a lot about computer architecture, and I ended up coming up with a weird, unique CPU
design for it. The computer has three parts: the instruction ROM, where the program is stored and sent out from; the ALU, where computations
are done; and the register array, where all data is stored. In my architecture, all of the parts can send out instructions on a
central bus. For example, if an "AddReg" instruction
is sent out, the register will read this, and read the two registers specified to be added in the instruction. Then, an "Add" instruction
will be sent by the register to the ALU, which will do the addition, and send a "Set" instruction back to the register, which will store the result.
Finally, the register will send a "Done" instruction, so the ROM knows to send out the next instruction in the program. This means the
CPU doesn't have a definite clock speed; it depends on what instructions are being executed. Finally, I wrote a basic assembler to turn
text describing the instructions into a blueprint which can be pasted into the game and run.
</p>
</div> </div>
<h3 id="phys_project">
Electromagnetic Simulation
</h3>
<div class="subtitle">
<em class="subtitle">2024 —</em>
<a href="https://github.com/Hydro111/maximillion">Source code</a>
</div>
<div class="elementPair"> <div class="left">
<p>
I wrote a simulation of Maxwell's equations for a physics class project. The full paper I wrote about it is included
on the right, (with a Github link at the bottom) but the general concept of how it works follows. The mathematical foundation
is just that the differential form of Maxwell's equations have derivatives for the electric and magnetic fields tied up
with some other stuff that can be calculated if you know the field values at every point. If we pick a discrete time step,
we can just calculate the derivative, multiply by the time step to get the difference, and repeat to simulate over time.
This project was my first project mainly in Rust, and so I learned a lot from making it. I originally planned to have the simulation
run on the GPU to increase speed, which would have allowed for exponentially better time and space step sizes. Unfortunately,
the package I planned to use for GPU computation didn't work, and so I had to just write CPU code.
</p>
</div> <div class="right">
<embed src="U_Phys_Project_2_FINAL.pdf" width="100%" type="application/pdf" style="aspect-ratio: 8.5/9;">
</div> </div>
<h3 id="state_space_pathfinding">
State Space Pathfinding
</h3>
<div class="subtitle">
<em class="subtitle">2024 —</em>
<a href="https://github.com/Hydro111/state-space-pathfinding">Source code</a>
</div>
<div class="elementPair"> <div class="left">
<img class="content" src="StateSpacePathfinding.png" width="100%">
</div> <div class="right">
<p>
Once, when thinking about control theory and differential equations (as one does) I came up with an idea: pathfinding in regular
Euclidean space is a really well explored domain, but there's no reason you couldn't treat velocity or rotation as a physical dimension
and pathfind in <em>state</em> space instead. Nodes could be generated by simulating what will happen a small time step in the future
with various control inputs, and the generated tree is easy to pathfind on. I decided to make a sample implementation of this idea for
a pendulum with a motor at its pivot. I wrote down the differential equation describing the change in velocity and position, and implemented
the aforementioned technique using a sort of A*. I say "sort of" because the heuristic I used (Euclidean distance between a simulated point
a bit in the future and the target point) often would overestimate the cost (time) required to reach a point. The program I wrote is just a prototype,
but you can see the path it chose in state space on the left here. The red
dots are a random sample of all the points it considered. The x axis is position, and the y axis is velocity. The arrows show how the
system would evolve if left to its own devices. I wrote the program in C#, but I did the visualization in Desmos, because
it was easy to do.
</p>
</div> </div>
<div class="subtitle", style="width:60%; padding: 0% 20%;">
<p>
The above is the work I'm most proud of, but I've done many smaller, less impressive, or half-baked projects.
Some of those others can be found <a href="https://github.com/Hydro111?tab=repositories">on my GitHub profile</a>,
and the work of my robotics team can be found <a href="https://github.com/orgs/AMES-Robotics-3243-Amperes/repositories">on its organization page</a>.
</p>
</div>
</div>
<div class="sidenav">
<ul>
<li><a href="#home">About Me</a></li>
<li><a href="#graphing_calculator">Graphing Calculator</a></li>
<li><a href="#relative_faith">Relative Faith</a></li>
<li><a href="#wyrm_heart">Wyrm Heart</a></li>
<li><a href="#desmos_rendering">Desmos 3D Rendering</a></li>
<li><a href="#derivative_calculator">Derivative Calculator</a></li>
<li><a href="#factorio_computer">Factorio Computer</a></li>
<li><a href="#phys_project">Electromagnetic Simulation</a></li>
<li><a href="#state_space_pathfinding">State Space Pathfinding</a></li>
</ul>
</div>
</body>
</html>