add square binary clock

README.md

@@ -6,7 +6,21 @@ Displays hours, minutes and seconds in binary as rows of filled circles. The exa
 
 ![](demo/binary_clock.png)
 
-### interactive_game_of_life
+### binary_clock_square.glsl
+Divides the day into 65536 beats, roughly 1.3 seconds each, and displays the time in a 4x4 grid as binary. The least significant bit is to the bottom right, increasing left first then up.
+
+The example below is showing the time `1101 1110 0011 1001` or `DE39`in hexadecimal (one digit per row of dots), which is equivalent to about `20:50:00`.
+
+![](demo/binary_clock_square.png)
+
+Formula for converting a time to beats: `(hours * 3600 + minutes * 60 + seconds) / 86400 * 65536`
+
+And to convert back to hours, minutes and seconds:
+- `seconds = int((beats * 86400 / 65536) % 60)`
+- `minutes = int((beats * 86400 / 65536) / 60 % 60)`
+- `hours   = int((beats * 86400 / 65536) / 3600)`
+
+### interactive_game_of_life.glsl
 A rainbow-coloured simulation of [Conway's Game of Life](https://conwaylife.com/wiki/Conway%27s_Game_of_Life). The edges of the screen are randomised so that the pattern never stabilises. Pressing on the screen will turn on cells in a small radius.
 
 ![](demo/game_of_life.png)

binary_clock_square.glsl

@@ -0,0 +1,31 @@
+#version 300 es
+#ifdef GL_FRAGMENT_PRECISION_HIGH
+precision highp float;
+#else
+precision mediump float;
+#endif
+
+uniform vec2 resolution;
+uniform vec4 date;
+
+out vec3 col;
+
+void main() {
+	vec2 uv = gl_FragCoord.xy / resolution.x;
+	uv.x = 1.0 - uv.x;
+	uv.y -= (resolution.y / resolution.x) * 0.5 - 0.5;
+
+	int x = int(uv.x * 4.0);
+	int y = int(uv.y * 4.0 + 1.0) - 1;
+	col = vec3(0.1, 0.1, 0.1);
+	if (y < 4 && y >= 0) {
+		vec2 c = vec2(x, y) / 4.0 + 0.125;
+		float r = length(c - uv);
+		float seconds = date.w;
+		int time = int(seconds / (3600.0 * 24.0) * 65536.0);
+		int bit = y * 4 + x;
+		bool state = ((time >> bit) & 1) == 1;
+		if (r < 0.05 && (r > 0.04 || state))
+			col = vec3(0.1, 1, 1);
+	}
+}