Skip to content
Permalink
Browse files

use headings more

  • Loading branch information...
Benjamin Elder Benjamin Elder
Benjamin Elder authored and Benjamin Elder committed Mar 9, 2019
1 parent 8d6a71b commit 39e8436c85de969e2a78829ba5a9c503b1d80c78
@@ -31,6 +31,13 @@ body {
flex-direction: column;
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1.12em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }

#content {
background-color: white;
/*min-height: calc(100vh - 8.5em);*/
@@ -372,10 +379,6 @@ a.white:focus,
padding-top: .5em;
}

#content .page-title:first-of-type {
margin-top: -.08em;
}

.tile>.full-bleed,
.card>.full-bleed {
display: block;
@@ -465,11 +468,17 @@ img.with-border {

.tile .page-title,
.card .page-title {
font-size: 1.65em;
margin: 0 auto;
margin-top: -.1em;
text-align: center;
line-height: 1.2;
}
.tile p.page-title,
.card p.page-title{
font-size: 1.65em;
line-height: 1.3;
}

.tile .title,
.card .title {
font-size: 130%;
@@ -4,7 +4,7 @@ type: misc
title: About
---
<div class="tile">
<p class="page-title">About</p>
<h1 class="page-title">About</h1>
<hr class="full-bleed">
<p class="">I finished my B.S. in Computer Science at
<a href="http://www.gatech.edu/">Georgia Tech</a> in the Spring of 2017 with
@@ -4,7 +4,7 @@ type: misc
title: KubeLife
---
<div class="tile">
<p class="page-title">KubeLife</p>
<h1 class="page-title">KubeLife</h1>
<div class="full-bleed" style="margin-top: 0;margin-bottom: 0.25em; padding: 0">
<canvas id="kubelife-canvas" height="1632" width="1632" class="full-bleed" style="width: 100%">
<div class="centered-text title white" style="background-color: black; padding: 1em">This automaton requires that you <a href="http://www.enable-javascript.com/">enable JavaScript</a>.</div>
@@ -14,13 +14,13 @@ categories:
<p></p>
<hr class="clear"/>
<p></p>
### Cellular Automata
## Cellular Automata
<a href="https://en.wikipedia.org/wiki/Cellular_automaton">Cellular automata</a> are a simple class of automata consisting of a grid of cells where each cell represents some state that is updated every iteration. While not-necessarily particularly useful, some cellular automata display fascinating repetitive patterns or are even <a href="https://en.wikipedia.org/wiki/Turing-complete">Turing-complete</a>. It is also worth noting that some patterns in nature have been observed that appear to be generated by natural cellular automata. In particular the <a href="https://en.wikipedia.org/wiki/Conus_textile">Conus textile sea snail</a>'s shells display pigment patterns similar to a cellular automaton.
<p></p><br/>
<p class="no-margin">Below are some examples of cellular automata with live JavaScript demos using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">HTML5 Canvas</a>.</p>
<p></p>
<hr/>
### Conway's Game of Life
## Conway's Game of Life
<p><a href="https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life">Conway's Game of Life</a> is a cellular automata created by <a href="https://en.wikipedia.org/wiki/John_Horton_Conway">John Conway</a> where all cells are `live` or `dead`. Conway's Game of Life updates with the following rules:</p>
1) A `live` cell with less than two `live` neighbours dies (as if by loneliness)\
@@ -51,7 +51,7 @@ NOTE: The colors in this demo are inverted from the standard style for
aesthetic purposes.

<hr/>
### Wireworld
## Wireworld

<a href="https://en.wikipedia.org/wiki/Wireworld">Wireworld</a> is a cellular automata created by <a href="hhttps://en.wikipedia.org/wiki/Brian_Silverman">Brian Silverman</a>.
While relatively simple, it is easy to construct logic circuits in and
@@ -90,7 +90,7 @@ At the top left and just below are two clocks, circles of `Conductor` around
and <a href="http://karlscherer.com/Wireworld.html">karlscherer.com</a>.

<hr/>
### Rule 110
## Rule 110

<p><a href="https://en.wikipedia.org/wiki/Rule_110">Rule 110</a> is an
<a href="https://en.wikipedia.org/wiki/Elementary_cellular_automaton">elementary cellular automata</a>, meaning that it is a one-dimensional / single-row ceullar automata. With only two states (`0` and `1`) and eight rules, this simple automata is interesting because it because it produces intricate patterns and is the only Turing-complete elementary cellular automata. Cells in Rule 110 update based on their current value and that of their left and right neighbors according to the following rules:</p>
@@ -118,7 +118,7 @@ For more on elementary cellular automata visit
<a href="http://mathworld.wolfram.com/ElementaryCellularAutomaton.html">The Wolfram Mathworld Entry</a>.

<hr/>
### Other Automata
## Other Automata
There are many, many other automata - there are 256 elementary cellular automata
alone (!) Some other notable automata include:

@@ -18,14 +18,14 @@ I've set up a public <a href="/projects/coffee">live status page</a>* displaying
\* As of September 2018 I've migrated to static site hosting and taken this page down for the moment.
<hr>

### Background
## Background

This might look a little ridiculous, but deploying (and debugging!) software updates to my coffeepot with `kubectl` has been *fantastic*.

If you know me then you know that I'm not a morning person and that I tend to sleep in more on the weekends, so a simple same-time-every-day alarm clock type coffee maker simply wasn't cutting it. When I needed to build a "smart device" for a college course (CS 3651 *Prototyping Intelligence Appliances*) I created the original incarnation of this based around an [Mbed](https://www.mbed.com/en/) and an old Android phone I had on hand. The phone since died, so I finally decided to fix this up and upgrade to a full Linux box, and here we are.


### Getting the Raspberry Pi Into my Cluster
## Getting the Raspberry Pi Into my Cluster

Installing Kubernetes / `kubeadm` was straightforward enough, I just followed [the official instructions](https://kubernetes.io/docs/setup/independent/install-kubeadm/). However I hit a few small roadblocks related to multi-architecture support:

@@ -39,7 +39,7 @@ I solved this by editing the existing DaemonSet to have a `nodeSelector` for `be

These two rough spots are definitely not ideal, but also weren't particularly difficult to work around. Hopefully [we'll fix #2 in particular](https://github.com/kubernetes/kubeadm/issues/51) by publishing all of the core components with multi-architecture images.

### Leveraging Kubernetes
## Leveraging Kubernetes

I use Kubernetes to:

@@ -52,7 +52,7 @@ I use Kubernetes to:
- conveniently and securely access the service(s) from anywhere with `kubectl proxy`


### Safety ⚠️
## Safety ⚠️

It's worth noting that I did take a number of safety precautions when connecting an electric heater to the internet, Kubernetes powered or otherwise:

@@ -68,7 +68,7 @@ Similarly the heater is explicitly disabled on boot, and every time one second p

5) The original power switch is still part of the circuit, which can be shut off manually and has a visible light when power is flowing.

### Conclusion
## Conclusion

Using Kubernetes standardizes deploying software, managing network services, and monitoring applications. It turns out all of these things are very handy for over-re-engineering your $18 coffee maker.

@@ -13,7 +13,7 @@ categories:
I wanted to build something similar for fun and try out golang's [Go mobile](https://github.com/golang/mobile)
project as well, so over the break between semsters I took a little time to write one.

### gomobile
## gomobile

The first thing I did was get gomobile up and running, and create a basic main loop to handle events and draw a
quad to the screen during paint events.
@@ -33,7 +33,7 @@ One interesting effect of using gomobile is that CreatureBox should work on Wind
\


### The Simulation
## The Simulation
The next thing I did was layout the project structure, divided into the application layer, the simulation, and the
simulation further divided into the simulation logic and the "Brain" logic.

@@ -45,15 +45,15 @@ The simulation uses <a href="https://github.com/llgcode">llgcode</a>'s awesome [
touch a wall or a moving obstacle.


### "Brains"
## "Brains"
I then implemented the "brains" for the creatures, mimicing the design described in the studio otoro blog post.
Each creature has a fully connected two layer (input and output) neural network. Most of the outputs are recurrent like
the studio otoro demo. Each creature receives a number of "distance to edge or obstacle" inputs in
evenly distributed directions about them as well as the previous output for the recurrent nodes, and produces a turn
and move output used for turning left/right and moving forward/backwards every frame. These are then scaled, and applied.
You can see which way a creature is facing by the white dot drawn on them towards their current "forward" direction.

### Evolution
## Evolution
Lastly I implemented the key component (evolution) by adding logic to track the number of frames each creature has been
"alive" for, storing the weights of the best creatures. I also performed a finalpass over the logic to optimize things
a little bit (mainly minimizing un-necessary allocations).\
@@ -66,7 +66,7 @@ Every n-th frame a number of new creatures are spawned, some of which have brain
\
The color of each creature is based on the average of their brain weights divided into 3 chunks for the RGB channels allowing some limited visualization of similarity between creatures ("clones" will be the same color for example).

### Wrap-Up:
## Wrap-Up
All told, this project was pretty fun to work on.\
Here's two a gifs of the result running on my laptop (the second gif has more evolved creatures):

@@ -44,7 +44,7 @@ After the B.E.T.A. my interest fell off quickly as the locations and quests fail
<div id="map" style="margin: 0 auto;"></div>
</div>

<p class="title" style="font-weight: bold">October 30th <a href="https://bethesda.net/en/article/XUtJrgiCgU6WqMASW8w0I/fallout-76-our-future-begins-together-in-beta">B.E.T.A.</a> (Break-It Early Test Application)</p>
## October 30th [B.E.T.A.](https://bethesda.net/en/article/XUtJrgiCgU6WqMASW8w0I/fallout-76-our-future-begins-together-in-beta) (Break-It Early Test Application)
<hr>

During the first B.E.T.A. some places I discovered along my travels were:
@@ -127,7 +127,7 @@ to the previous crash.
</div>


<p class="title" style="font-weight: bold; margin-top: .25em;">November 1st B.E.T.A.</p>
## November 1st B.E.T.A.

<hr>

@@ -168,7 +168,7 @@ station, with two cars there.
</div>


<p class="title" style="font-weight: bold; margin-top: .25em;">Notes</p>
## Notes
<hr>

- Crashed planes are definitely a thing in Appalachia, there are a _lot_ of
@@ -188,7 +188,7 @@ Proximity voice chat also led to some ... interesting moments, including a
ringing iPhone and a McDonalds order placed from the wastelands of West
Virginia <span class="emoji" style="background-image:url(/images/emoji/emoji_u1f914.png)" title=":thinking:">:thinking:</span>

<p class="title">Acknowledgements</p>
## Acknowledgements
<hr>

- Interactive map built with [Leaflet](https://leafletjs.com) and [Leaflet.fullscreen](https://github.com/Leaflet/Leaflet.fullscreen).
@@ -21,7 +21,7 @@ If not, you should probably start with the rust [book](http://doc.rust-lang.org/

__________________________________________________________________________

### Project setup
## Project Setup


First we'll set up a folder to develop from:
@@ -60,7 +60,7 @@ dynamic library.

__________________________________________________________________________

### Code
## Code


Next we'll need our library source, this is the part we will swap out at runtime.
@@ -114,7 +114,7 @@ In anycase, it's a cool trick.
<br>

----------------------
### Full Source
## Full Source

<div class="tile no-padding sourceCode"><div class="details">src/main.rs <span style="float: right">Rust</span></div></div>

@@ -4,7 +4,7 @@ type: misc
title: Projects
---
<div class="tile">
<p class="page-title">Projects</p>
<h1 class="page-title">Projects</h1>
<hr class="full-bleed">
<p class="big bold section-title centered-text" style="">This list is incomplete, see also <span class="inline-block"><a href="http://github.com/BenTheElder">my GitHub profile</a> <span class="emoji" style="background-image:url(/images/GitHub-Mark-120px-plus.png)" title=":github:">:github:</span></span></p>
<hr>
@@ -2,7 +2,7 @@
{{ partial "navbar.html" . }}
<div id="content">
<div class="tile">
<p class="page-title">Posts</p>
<h1 class="page-title">Posts</h1>
<hr class="full-bleed" />
{{ range $i, $post := .Pages.ByDate.Reverse }}
{{ if .Params.prerelease }}{{ else }}
@@ -2,7 +2,7 @@
{{ partial "navbar.html" . }}
<div id="content">
<div class="tile blog-content">
<p class="page-title">{{if .Params.htmlTitle}}{{.Params.htmlTitle | safeHTML}}{{else}}{{.Title}}{{end}}{{if .Params.subtitle }}<span class="inline-block not-bold">:</span> <span class="inline not-bold"> {{.Params.subtitle}} </span>{{end}}</p>{{range .Params.Categories}}<span class="category">{{. | safeHTML}}</span>{{end}}
<h1 class="page-title">{{if .Params.htmlTitle}}{{.Params.htmlTitle | safeHTML}}{{else}}{{.Title}}{{end}}{{if .Params.subtitle }}<span class="inline-block not-bold">:</span> <span class="inline not-bold"> {{.Params.subtitle}} </span>{{end}}</h1>{{range .Params.Categories}}<span class="category">{{. | safeHTML}}</span>{{end}}
{{ $date := .Date.Format "January 2SUFFIX, 2006" }}
{{ $day := .Date.Format "2" }}
{{ $suffix := "th" }}

0 comments on commit 39e8436

Please sign in to comment.
You can’t perform that action at this time.