-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
367 lines (329 loc) · 15.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
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Portfolio - Colin Davidson</title>
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap" rel="stylesheet">
<script>
function fill_email() {
var addr = "Y29scmRhdmlkc29uQGdtYWlsLmNvbQ==";
let slots = ["emaila", "emaila2"];
for (let i = 0; i < slots.length; i++) {
document.getElementById(slots[i]).innerHTML = atob(addr);
document.getElementById(slots[i]).href = "mailto:" + atob(addr);
}
}
</script>
</head>
<body id="page-top" onload="fill_email()">
<nav class="navbar">
<div class="navbar-header">
<a class="navbar-logo" href="#">Pentaquine</a>
</div>
</nav>
<section id="about" class="about-section">
<div class="container header-box">
<div class="mugshot-box">
<div class="mugshot-header">
<h2>Colin Davidson</h2>
<h3>Embedded/Systems Software Engineer</h3>
<a id="emaila"></a>
<a class="img-row" href="https://github.com/colrdavidson">
<img src="octocat.png" alt="github-link" class="octocat-link">
Github Portfolio
</a>
<a href="resume.pdf">Resume</a>
</div>
<img src="mug2.png"></img>
</div>
<div class="skills-summary">
<h4 class="header">Skill Summary</h4>
<ul class="skills-list">
<li>production experience with C, Odin, Python, Go, and JS</li>
<li>embedded/networking dev in kernel and userspace</li>
</ul>
</div>
</div>
<div class="link-block">
<h2 class="title">Spotlight Projects</h2>
<div class="link-row">
<a href="#spall">
<img class="pixel-img" src="spall.png" alt="spall">Spall
</a>
<a href="#debug">
<img class="pixel-img" src="debug.png" alt="debug">Debug
</a>
<a href="#snowfort">
<img class="pixel-img" src="snowfort.png" alt="Snowfort">Snowfort
</a>
<a href="#Q8">
<img src="tile.png" alt="Q8">Q8
</a>
<a href="#kern">
<img src="nolli.png" alt="Nolli">Nolli
</a>
<a href="#rain">
<img src="cube.png" alt="Rain">Rain
</a>
<a href="#zala">
<img src="zala_term.png" alt="Zala">Zala
</a>
<a href="#snow">
<img src="snow_cube.jpg" alt="Snow">Snow
</a>
</div>
</div>
</section>
<section id="spall">
<div class="container">
<div class="section-header">
<img class="pixel-img" src="spall.png" alt="spall">
<h1>Spall</h1>
</div>
<div class="sub-header">
<h4>Fast, Simple, Easy Profiling</h4>
<ul>
<li> full 165+ fps zoom and pan with billions of events </li>
<li> incredibly zippy file loadtimes </li>
<li> both web and native support </li>
</ul>
<a href="https://gravitymoth.com/spall" class="sub-link">Play with Spall-Web</a>
<a href="https://github.com/colrdavidson/spall" class="sub-link">Spall-Web on Github</a>
<a href="https://gravitymoth.itch.io/spall" class="sub-link">Buy Spall Native</a>
<a href="https://vimeo.com/776796857" class="sub-link">Watch the Conference Demo</a>
</div>
<p>Spall is an easy-to-learn tracing profiler. It supports the chrome://tracing JSON format,
to ease the learning curve for existing profiler users, along with a custom binary format for faster,
more compact and accurate traces, when users are ready to integrate the spall tracing library directly.
Spall loads very large JSON and binary files, ingesting about 4 million events (500 MB) of JSON in 4 seconds,
or half a second for the same file in the binary format.</p>
<div class="video-wrapper">
<video autoplay loop muted playsinline>
<source src="../spall.mp4" type="video/mp4">
</video>
</div>
<p>Spall has been wildly educational for me, I've gotten a chance to dig into deep into PDB and DWARF, debug formats
that describe symbols and line info for programs, I've dug into the weird odds and ends of the TSC, trying to eek out
better timing info, and I've had to fuss with making cross-compiler compatible C/C++, fighting weird behaviors across
clang, gcc, and msvc.</p>
</div>
</section>
<section id="debug">
<div class="container">
<div class="section-header">
<img class="pixel-img" src="debug.png" alt="Debug">
<h1>Debug</h1>
</div>
<div class="sub-header">
<h4>Linux x64 Binary Debugger</h4>
<ul>
<li> context-aware variable watchpoints </li>
<li> fast program iteration times </li>
<li> AST-like code layout breakdowns </li>
</ul>
<a href="https://github.com/colrdavidson/debug" class="sub-link">Debug Github</a>
</div>
<p>Debug is a learning exercise to understand DWARF and ELF better that turned into a real
project. The intent of the project is to bring full-fat, quality GUI/TUI debugging, ala
RemedyBG to Linux, with integrations for high-detail profiling, system-level eBPF
latency measurements, and custom binary dissassembly integration for live network protocol
debugging.</p>
<img src="debug_use.gif" class="thumbnail" alt="AST dump" width="100%" height="auto" style="display: block; margin-left: auto; margin-right: auto;">
<p>Debug is currently a work in progress, with short-term upcoming features including
binary disassembly and support for simple C expressions</p>
</div>
</section>
<section id="snowfort">
<div class="container">
<div class="section-header">
<img class="pixel-img" src="snowfort.png" alt="Snowfort">
<h1>Snowfort</h1>
</div>
<div class="sub-header">
<h4>Enhanced IRC-like Server and Client</h4>
<ul>
<li> full user-permissions model </li>
<li> message history for channels and DMs </li>
<li> Easy UTF-8 and SSL support, right out of the box </li>
</ul>
<a href="https://github.com/colrdavidson/snowfort" class="sub-link">Snowfort Github</a>
</div>
<p>Snowfort is an experiment, designed to challenge the way interviews are done in the tech space.
Snowfort was built to handle client implementations at several different steps in the web stack,
testing candidate's abilities to write low-level network calls, or design a nice looking interface,
according to intended position. Each candidate is provided with an appropriate client
stub and RFC, they flesh it out and customize it, allowing them to flex their job-specific skills.</p>
<img src="snowfort_use.png" class="thumbnail" alt="Snowfort Example" width="100%" height="auto" style="display: block; margin-left: auto; margin-right: auto;">
<p>After completion,
day-to-day engineering chat would be done via their own custom client, giving the tool and interview
task some purpose and meaning. On job day one, every new onboardee has a great icebreaker
showing off what they did with their client, and giving immediate traction to launch into internal
dev workflow improvements, getting to know the team better in the process.</p>
</div>
</section>
<section id="Q8">
<div class="container">
<div class="section-header">
<img src="tile.png" alt="Quine8">
<h1>Quine8 (Q8)</h1>
</div>
<div class="sub-header">
<h4>Interactive Bytecode VM</h4>
<ul>
<li> complete program runtime visualization </li>
<li> full system documentation </li>
<li> memory access pattern heatmap </li>
</ul>
<a href="https://colrdavidson.github.io/Q8/index.html" class="sub-link">Q8 Live</a>
<a href="https://github.com/colrdavidson/Q8" class="sub-link">Q8 Github</a>
</div>
<p>Q8 is an educational tool, designed to show the users a simplified view of what really
goes on under the hood of their computer. Using a grid of tiles, it renders the state of
the program in memory live, highlighting I/O operations as they occur. With a comprehensive
suite of example programs, puzzles, and intro tutorials, users can quickly get a feel for
working with a machine on one of the lowest levels, bytecode. Without the abstractions of
higher-level languages or even assembly, it provides an interface to make low-level computing
building blocks tractable.</p>
<img src="mult.gif" class="thumbnail" alt="Multiplication Program" width="60%" height="auto" style="display: block; margin-left: auto; margin-right: auto;">
<p>Q8 provides only the most basic of operations, giving new users lots of runway to grow.
Need multiplication? Discover the joys of writing it yourself using addition and a loop,
and learn a lot about programming as you go.</p>
</div>
</section>
<section id="kern">
<div class="container">
<div class="section-header">
<img src="nolli.png" alt="Nolli">
<h1>Nolli</h1>
</div>
<div class="sub-header">
<h4>Hobby Kernel</h4>
<ul>
<li> x86 homebrew kernel </li>
<li> Custom bootloader </li>
<li> Identity Mapped Paging </li>
</ul>
<a href="https://github.com/colrdavidson/nolli_os" class="sub-link">Nolli Github</a>
</div>
<p>Nolli is a tiny hobby kernel that runs on x86. It has a two stage bootloader that pulls
it from the primordial 16 bit start state up to a slightly less archaic 32 bits, heroically
saving the poor processor from the horrors of the segment registers.</p>
<img src="nolli.png" class="thumbnail" alt="PCI List" width="75%" height="auto" style="display: block; margin-left: auto; margin-right: auto;">
<p>As a learning project
primarily, the kernel regularly suffers bouts of triple fault fever, getting better
over time as I work out some of the nasty issues. It currently supports basic interrupts
and catches some faults; It responds to keyboard input, page faults appropriately on invalid
accesses, and can scan the pci bus for attached devices. Nolli can output over both serial
and vga, using the BIOS configured VGA mmio at 0xB8000 to draw ascii symbols in various colors.</p>
<p>The bootloader is simple, using bios int calls to build a map of memory, load the kernel
from disk, configure the gdt, and transition into 32 bit mode.</p>
</div>
</section>
<section id="rain">
<div class="container">
<div class="section-header">
<img src="cube.png" alt="Rain">
<h1>Rain</h1>
</div>
<div class="sub-header">
<h4>Isometric Squad Tactics Game</h4>
<ul>
<li> SDL2 2.5D isometric engine </li>
<li> pathfinding, fog of war, and tactical AI systems </li>
<li> dynamic user input handling </li>
</ul>
<a href="https://github.com/colrdavidson/rain" class="sub-link">Rain Github</a>
</div>
<p>Rain's rendering engine positions and draws 2D tiles to give it a 2.5D isometric feel. In order to support camera rotation, the engine selects pre-made tiles from
each tile type's palette. To simplify mouse detection while my grid placement and block size were still undetermined, I constructed a screenspace to worldspace map so that
mouse clicks would map perfectly onto tile pixels, regardless of orientation.</p>
<img src="click_buffer.png" class="thumbnail" alt="Mouse Click Detection" width="80%" height="auto" style="display: block; margin-left: auto; margin-right: auto;">
<p>Rain uses a breadth-first search pathfinder to move the player characters around the map. The player can then select enemies to attack, assuming the player
characters can see them. To manage vision, each entity adds the surrounding circle of tiles into their team's visible tile list.</p>
<img src="rainue.gif" class="thumbnail" alt="Rain Menu" width="80%" height="auto" style="display: block; margin-left: auto; margin-right: auto;">
</div>
</section>
<section id="zala">
<div class="container">
<div class="section-header">
<img src="zala_term.png" alt="Zala">
<h1>Zala</h1>
</div>
<div class="sub-header">
<h4>Space Programming Game</h4>
<ul>
<li> 2D OpenGL rendering engine </li>
<li> 2D physics with timestepping </li>
<li> Real-time pseudo-CPU emulation </li>
<li> Assembler to bytecode to runtime toolchain</li>
</ul>
<a href="https://github.com/colrdavidson/zala" class="sub-link">Zala Github</a>
</div>
<p>Zala is a side-project that I developed over a period of time after wanting to see a solid space
programming game similar to Mojang's 0x10c. Zala has an in-game console and assembler, using an emulated
CPU to process instructions. The player can open doors, fire turrets, and fly the ship with
a simplified assembly language.</p>
<img src="zala.gif" class="thumbnail" alt="Zala Term" width="80%" height="auto" style="display: block; margin-left: auto; margin-right: auto;">
<p>To support a live programming/runtime environment I had to encapsulate the emulator, running it
at a fraction of the framerate and sending it a reset flag when new code was available. I created a
little messaging system to report errors and CPU output back to the game.</p>
<p>As part of the game, I had to lay out a very simple set of assembly instructions, creating an
easier, programmer friendly environment. The assembler allowed for jumping to labels and
all the opcodes had one distinct function.</p>
</div>
</section>
<section id="snow">
<div class="container">
<div class="section-header">
<img src="snow_cube.jpg" alt="Snow">
<h1>Snow</h1>
</div>
<div class="sub-header">
<h4>Voxel Terrain Engine</h4>
<ul>
<li> powerful 3D OpenGL voxel engine </li>
<li> instanced rendering </li>
<li> hulled terrain mesh to lighten GPU load </li>
<li> fast, efficient ambient occlusion </li>
<li> procedurally generated mountains and plains to explore </li>
</ul>
<a href="https://github.com/colrdavidson/snow" class="sub-link">Snow Github</a>
</div>
<p>Snow was an experiment into procedural terrain generation and 3D rendering using OpenGL. While learning to render tons of 3D models each frame, I picked
through several techniques, trying to get the smoothest framerate for the largest visible number of voxels. I tried using the CPU to create a mesh containing
only the visible faces of the terrain, but quickly discovered that doing that created a large amount of vertex processing on the component not designed to
handle it. I found that instanced rendering of full cubes moved the vast majority of processing to the gpu instead, and the only work the cpu had to do
was to compile a list of cube centers for the hulled mesh.</p>
<img src="blocks.gif" class="thumbnail" alt="Terrain Huller" width="80%" height="auto" style="display: block; margin-left: auto; margin-right: auto;">
<p>Using perlin noise, I rapidly generated interesting terrain for the player to explore. Interesting terrain gave me a strong reason to work
on the hull meshing. I wanted more to explore and see from a distance.</p>
<p>One of the biggest issues with voxels, especially non-textured voxels, is the need to differentiate between flat surfaces and edges. I wrote an edge detector
that processed vertices and applied lighting modifiers when appropriate, emulating ambient occlusion.</p>
<div class="snow-pictures">
<img src="snow_topography.jpg" class="thumbnail" alt="No Ambient Occlusion">
<img src="snow_ao.jpg" class="thumbnail" alt="Ambient Occlusion">
<img src="naive_ao.png" class="thumbnail" alt="Alternate Ambient Occlusion">
<img src="mesh_shapes.jpg" class="thumbnail" alt="Terrain Meshing">
</div>
</div>
</section>
<section>
<div class="hire-card">
<div class="text-column">
<h1>Hire Me!</h1>
<p>If you think my projects are interesting, I may be a good fit for your company.</p>
<a id="emaila2"></a>
</div>
<img src="mug2.png"></img>
</div>
</section>
</body>
<footer></footer>
</html>