Add Projects page

content/projects/index.md

@@ -0,0 +1,65 @@
+---
+title: Projects
+layout: page
+---
+
+This is a list of projects that I've worked on over the years, in no particular
+order.
+
+### 64squares
+
+![Screenshot of 64squares.club, partway through a game](images/chess.png)
+
+[64squares](https://64squares.club) is an online, multiplayer chess game written
+in Elixir and Phoenix, with a React front end (although I'm partway through
+refactoring this into LiveView). It uses websockets via Phoenix channels to
+broadcast moves back and forth between players and implements a complete chess
+rules engine. The source code is [available on
+GitHub](https://github.com/danbee/chess).
+
+I wrote a [blog post about implementing some of the chess rules engine](/2018/08/10/chess-and-recursion-part-1).
+
+### Persephone
+
+![Screenshot of Persephone](https://persephone.fm/images/screenshot-dark.png)
+
+[Persephone](https://persephone.fm) is an MPD (Music Player Daemon) client for macOS, written in
+Swift/AppKit.
+
+### Ping Pong Scoreboard
+
+![Photo of the ping pong table with paddles, and the scoreboard iPad behind it](images/pingpong-table.jpg)
+
+In 2016, during a thoughtbot London hackathon, myself and my collegue Damien
+Tanner [implemented a scoreboard system for our ping pong table](https://thoughtbot.com/blog/building-a-ping-pong-scoreboard).
+This involved a nice mix of hardware hacking, [hardware code](https://gist.github.com/danbee/820a17d0aa75f8900250),
+and [simple web development](https://github.com/danbee/scoreboard).
+
+### Invaders
+
+![Screenshot of Invaders](images/invaders.png)
+
+[Invaders](https://invaders.danbee.in) was written in JavaScript using Phaser.js
+for a New Bamboo hack day in 2014. The source is [available on GitHub](https://github.com/danbee/invaders/tree/master).
+
+### My Images
+
+![Screenshot of my-images](images/my-images.png)
+
+[My Images](https://github.com/danbee/my-images) is a simple image storage
+application built in Rails with Dragonfly for image storage/processing. The
+current version uses Clarifai to automatically tag images using AI.
+
+### Mandelbrot Shader
+
+<figure>
+  <canvas class="glslCanvas shader" data-fragment-url="lib/mandelbrot.frag" width="1200" height="675"></canvas>
+</figure>
+
+I've long been interested in fractals, particularly the Mandelbrot set. I used
+to spend hours playing with Fractint on early PC's. A few years ago I realised
+that GPU hardware would be ideal for calculating fractals due to the massive
+paralellism they offer. This was my attempt to implement that with a [GLSL
+shader](https://github.com/danbee/shaders/blob/master/mandelbrot.frag).
+
+<script type="text/javascript" src="/js/glsl-canvas.js"></script>

content/projects/lib/mandelbrot.frag

@@ -0,0 +1,93 @@
+// Author: Daniel Barber
+// Title: Mandelbrot
+
+#ifdef GL_ES
+precision highp float;
+#endif
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_time;
+
+const int max_i = 750;
+
+// x -0.922947648473392 y 0.29140221214586537
+// zoom 0.0001120703125
+
+const vec2 centre = vec2(0.0,0.0);
+const float radius = 2.0;
+
+const vec2 z_centre = vec2(-0.813118939, 0.203263184);
+//const vec2 z_centre = vec2(-0.811709827, 0.202253267);
+//const vec2 z_centre = vec2(-0.776592847, 0.136640848);
+//const vec2 z_centre = vec2(-0.922947648473392, 0.29140221214586537);
+//const vec2 z_centre = vec2(-2.0,-2.0);
+const float z_radius = 0.00025;
+//const float z_radius = 0.2;
+
+float doubleExponentialSigmoid (float x, float a) {
+  float epsilon = 0.00001;
+  float min_param_a = 0.0 + epsilon;
+  float max_param_a = 1.0 - epsilon;
+  a = min(max_param_a, max(min_param_a, a));
+  a = 1.0-a; // for sensible results
+  
+  float y = 0.0;
+  if (x<=0.5){
+    y = (pow(2.0*x, 1.0/a))/2.0;
+  } else {
+    y = 1.0 - (pow(2.0*(1.0-x), 1.0/a))/2.0;
+  }
+  return y;
+}
+
+vec3 hsb2rgb(in vec3 c) {
+    vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),
+                             6.0)-3.0)-1.0,
+                     0.0,
+                     1.0 );
+    rgb = rgb*rgb*(3.0-2.0*rgb);
+    return c.z * mix(vec3(1.0), rgb, c.y);
+}
+
+void main() {
+    float exp_step = 1.0-exp(
+        exp(sin(u_time / 10.0))
+    ) / 14.0 + 0.1032;
+    
+    float step = doubleExponentialSigmoid(exp_step, 0.4);
+    vec2 i_centre = centre - ((centre - z_centre) * step);
+    float i_radius = radius - ((radius - z_radius) * step);
+    
+    vec2 st = gl_FragCoord.xy / u_resolution.xy;
+    float ratio = u_resolution.x / u_resolution.y;
+    st.x *= ratio;
+    
+    vec2 mandel = (st - vec2(0.5 * ratio, 0.5)) * (i_radius * 2.0) + i_centre;
+    
+    int i;
+    float x;
+    float y;
+    
+    float result;
+    vec4 colour;
+    
+    for(int n = 1; n < max_i; n++) {
+        float xtemp = x*x-y*y+mandel.x;
+        y = 2.0*x*y+mandel.y;
+        x = xtemp;
+        
+        if (x*x+y*y >= 2.0*2.0) {
+        	result = float(n) / 100.0;
+          	break;  
+        };
+    };
+    
+    if (result == 0.0) {
+        colour = vec4(0.0,0.0,0.0,1.0);
+    } else {
+        colour = vec4(hsb2rgb(vec3(result + (u_time / 100.0),1.0,1.0)),1.0);
+    }
+
+    gl_FragColor = colour;
+}

layouts/_default/page.html

@@ -0,0 +1,9 @@
+{{ define "main" }}
+  <article class="post container">
+    <header>
+      <h2 class="post__title">{{.Title}}</h2>
+    </header>
+
+    {{.Content}}
+  </article>
+{{ end }}