forked from andrewfarm/andrewfarm.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdev.html
More file actions
195 lines (194 loc) · 15.6 KB
/
Copy pathdev.html
File metadata and controls
195 lines (194 loc) · 15.6 KB
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
<!DOCTYPE html>
<html>
<head>
<title>Andrew Farm - Development</title>
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
<h1 class="site-title"><a href="index.html">andrew <span class="color">o</span>. farm</a></h1>
<div style="width: 75%; height: 1px; margin: auto; background-color: #ff4400"></div>
<div>
<h2>About</h2>
<p>My name is Andrew Farm. I grew up in Maine, where I discovered my love of computer scieblah blah blah. Let's get to the good parts.</p>
<p>I'm currently in university, majoring in CS and minoring in being an unmotivated blob (prospective employers please read: a hardworking and enthusiastic job candidate).</p>
<p>Like most people (although they wouldn't admit it), I'm making this up as I go along. Having a professional website seems like a developer-y thing to do. Did you see the transition from the landing page to this development page? Yeah, that's right. Niiiice and developer-y. There are some <a href="photography.html"><span class="anim-underline">pretty pictures</span></a> I've taken over the years as well, so check those out too. Or don't. I haven't figured out yet how to force my website visitors to appreciate my work. (Maybe python?)</p>
<p>On the off-chance that you want to know something useful about me and what I do, maybe you'd be interested in some of my past <a class="anim-underline" href="#project-demos">projects</a> and my <a class="anim-underline" href="#resume">résumé.</p>
</div>
<div id="resume">
<h2>Résumé</h2>
<p><a class="anim-underline" href="resume.html">Interactive version</a> *NOT REALLY INTERACTIVE (yet)*</p>
<p><a class="anim-underline" href="resume.pdf" target="_blank">Printable version</a></p>
</div>
<div>
<h2>Skills</h2>
<!--TODO flesh out / redesign skills section AND move to resume page-->
<ul>
<li>Java</li>
<li>C++</li>
<li>HTML</li>
<li>CSS</li>
<li>Spanish</li>
<li>JavaScript / jQuery</li>
<li>Python</li>
<li>Design work: <span style="font-family: Comic Sans">I have years of experience hating Comic Sans.</span></li>
</ul>
</div>
<div id="project-demos">
<h2>Projects</h2>
<ul class="projects">
<li><a href="#galaxies"><div>
<img src="images/projects/thumbnails/galaxies-thumbnail.png"/>
<h6>Galaxies</h6>
</div></a></li>
<li><a href="#boids"><div>
<img src="images/projects/thumbnails/boids-thumbnail.png"/>
<h6>Boids</h6>
</div></a></li>
<li><a href="#visualizer"><div>
<img src="images/projects/thumbnails/visualizer-thumbnail.png"/>
<h6>Visualizer</h6>
</div></a></li>
<li><a href="#electrocity"><div>
<img src="images/projects/thumbnails/electrocity-thumbnail.png"/>
<h6>Electrocity</h6>
</div></a></li>
<li><a href="#scrobble"><div>
<img src="images/projects/thumbnails/scrobble-thumbnail.png"/>
<h6>Scrobble</h6>
</div></a></li>
<li><a href="#edge"><div>
<img src="images/projects/thumbnails/edge-thumbnail.jpg"/>
<h6>Edge</h6>
</div></a></li>
<li><a href="#triremes"><div>
<img src="images/projects/thumbnails/triremes-thumbnail.png"/>
<h6>Multiplayer Triremes</h6>
</div></a></li>
<li><a href="#zen"><div>
<img src="images/projects/thumbnails/zen-thumbnail.png"/>
<h6>Zen Physics</h6>
</div></a></li>
<li><a href="#qubism"><div>
<img src="images/projects/thumbnails/qubism-thumbnail.png"/>
<h6>Qubism</h6>
</div></a></li>
<!--
<li><a href="#hangman"><div>
<img src="images/projects/thumbnails/hangman-thumbnail.png"/>
<h6>Reverse Hangman</h6>
</div></a></li>
-->
<li><a href="#ci"><div>
<img src="images/projects/thumbnails/ci-thumbnail.png"/>
<h6>Circle Invasion</h6>
</div></a></li>
<li><a href="#lindenmayer"><div>
<img src="images/projects/thumbnails/lindenmayer-thumbnail.png"/>
<h6>Lindenmayer</h6>
</div></a></li>
<li><a href="#flying"><div>
<img src="images/projects/thumbnails/flying-thumbnail.png"/>
<h6>Flying</h6>
</div></a></li>
<li><a href="#mandelbrot"><div>
<img src="images/projects/thumbnails/mandelbrot-thumbnail.png"/>
<h6>Mandelbrot</h6>
</div></a></li>
<!-- <li><a href="#ambience"><div>-->
<!-- <img src="images/projects/thumbnails/ambience-thumbnail.jpg"/>-->
<!-- <h6>Ambience</h6>-->
<!-- </div></a></li>-->
</ul>
</div>
<div id="project-descriptions">
<div class="fullwidth black" id="galaxies">
<img src="images/projects/galaxies.png"/>
<h3 class="project-logo" style="font-family: Catalina Script">galaxies</h3>
<p>A real-time simulation of tens of thousands of stars, forming galaxies that swirl and collide majestically in 3D.</p> </div>
<div class="fullwidth orange" id="boids">
<img src="images/projects/boids.png"/>
<h3 class="project-logo" style="font-family: Typo Round">boids</h3>
<p>A real-time simulation of fish-like creatures schooling. An immersive, yet minimalistic world of predator and prey, interactive plants, and realistic behavior based on the original <a href="https://en.wikipedia.org/wiki/Boids" target="_blank"><span class="anim-underline">Boids</span></a> algorithm by Craig Reynolds.</p>
</div>
<div class="fullwidth white" id="visualizer">
<img src="images/projects/visualizer.png"/>
<img src="images/projects/visualizer-spectrogram.png"/>
<h3 class="project-logo" style="font-family: Westminster;">visualizer</h3>
<p>A simple but elegant visualizer for audio, which also includes a real-time spectrogram. I'm currently trying to use the spectrogram data to transcribe music, so we'll see how that goes?</p>
</div>
<div class="fullwidth black" id="electrocity">
<img src="images/projects/electrocity.png"/>
<h3 class="project-logo">electrocity</h3>
<p>A real-time simulation (god, another one?) of electrically charged objects interacting. This was atually the first simulation I wrote, and comes with visual features such as field lines (shown here), field-tracing particles and color map.</p>
</div>
<div class="fullwidth orange" id="scrobble">
<img style="width: 500px" src="images/projects/scrobble.png"/>
<h3 class="project-logo" style="font-family: Baskerville; font-style: italic">SCROBBLE</h3>
<p>A game which is definitely completely my own invention, <em>SCROBBLE</em> is a crossword game - but instead of playing against you, it plays <em>for</em> you, intelligently finding the best possible play on any given turn.</p> </div>
<div class="fullwidth white" id="edge">
<img id="edgedemo" src="gallery/nature/Water Lily 4.jpg"/>
<h3 class="project-logo" style="font-family: Modern Edge">edge</h3>
<p>An edge detector. Nothing fancy, I suppose, but one of my first experiments with image processing.</p>
<p>Hover over the image on the left to see the effect!</p>
</div>
<div class="fullwidth black" id="triremes">
<img style="width: 600px" src="images/projects/triremes.png"/>
<h3 class="project-logo">
<span style="font-size: 16pt">MULTIPLAYER </span>
<span style="font-family: Herculanum">Triremes<span>
</h3>
<p>The game is simple: ram the other player's boat. What's special about it? It is playable over a LAN, and was my first experiment with networked games. It is functional with any number of players and is actually quite addicting.</p>
<p>This was a collaboration with my brother, Ian.</p>
</div>
<div class="fullwidth orange" id="zen">
<img src="images/projects/zen.png"/>
<h3 class="project-logo">Zen Physics</h3>
<p>Balls. Bouncing betwixt boundaries. Making mellow music, necessitating nice noises. 'Nuff said.</p>
</div>
<div class="fullwidth white" id="qubism">
<img src="images/projects/qubism.png"/>
<h3 class="project-logo" style="font-family: Cubic">Qubism</h3>
<p>Random cubist-y art! Braque's got nothing on me.</p>
</div>
<!--
<div class="fullwidth black" id="hangman">
<h3 class="project-logo">Reverse Hangman</h3>
<p>In this take on hangman, you come up with a word and the computer guesses! It's quite good at winning. (If you want to win, though, pick, like, a three-letter word with an O in the middle - there are a million of those, and it'll never guess the right one. That's how I lost a bet last year.)</p>
</div>
-->
<div class="fullwidth orange" id="ci">
<img style="width: 500px" src="images/projects/ci.png"/>
<h3 class="project-logo" style="font-family: Matisse ITC">Circle Invasion!</h3>
<p>A classic arcade-style game. A square, who must fight against the advancing circles. Why does he fight? He does not know. There is no other way. There is only the crippling ennui that shrouds his limited existence. With each new wave the circles come with an increased will to live, which will be torn from them only seconds later. So has it been, and so will it continue, as ammunition depletes and the square and circle draw nearer both to the void. The square screams.</p>
</div>
<div class="fullwidth white" id="lindenmayer">
<img src="images/projects/lindenmayer-plant.gif"/>
<h3 style="font-size: 48pt" class="project-logo">Lindenmayer</h3>
<p>Fractals!</p>
<p style="font-size: 16pt"><a href="https://en.wikipedia.org/wiki/L-system" target="_blank"><span class="anim-underline">https://en.wikipedia.org/wiki/L-system</span></a></p>
</div>
<div class="fullwidth black" id="flying">
<img src="images/projects/flying-1.png"/>
<img src="images/projects/flying-2.png"/>
<img src="images/projects/flying-3.png"/>
<h3 class="project-logo">Flying</h3>
<p>An increasingly difficult mobile-style game. (I say mobile-<em>style</em> because I haven't gotten around to porting it to Android yet.)</p>
<p style="font-size: 10pt">Also, yes, those are watermarks on the background. Don't judge me! I didn't have a design budget!</p>
</div>
<div class="fullwidth orange" id="mandelbrot">
<img src="images/projects/mandelbrot.png"/>
<img src="images/projects/mandelbrot-detail-1.png"/>
<img src="images/projects/mandelbrot-detail-2.png"/>
<h3 class="project-logo">Mandelbrot</h3>
<p>Painstakingly rendered in eye-popping <nobr>2-D!</nobr>
<p style="font-size: 16pt"><a href="https://en.wikipedia.org/wiki/Mandelbrot_set" target="_blank"><span class="anim-underline">https://en.wikipedia.org/wiki/Mandelbrot_set</span></a></p>
<p style="font-size: 16pt">(Yes, I <em>know</em> the first image looks similar to the one on the wikipedia page, but these images are copyright © moi.)</p>
</div>
<!-- <div class="fullwidth white" id="ambience">-->
<!-- <h3 class="project-logo">Ambience</h3>-->
<!-- </div>-->
</div>
<script src="jquery-3.1.0.min.js"></script>
<script src="dev-edge.js"></script>
</body>
</html>