Need a pattern for a design project you’re working on? Need it quick? LitPattern is a webapp generating repeating patterns using typographic characters. I built LitPattern in JavaScript using some lesser known properties of svg graphics to create repeating pattern swatches which can be downloaded as vector graphics or embedded into a webpage as css styling. This post is the first part of my write-up, covering the project backgrpund and some initial experiments.

BreakBuilder is a simple web application which works as a score tracker in the game of snooker. The BBC sometimes show an interesting score graphic alongside their snooker coverage on TV; the purpose of this is to show how many points a player has scored, the maximum number of points they could score, and the minimum number of points they need to win. This is all useful information, but I’ve always found the score bar hard to interpret because it only ever appears as a static graphic at random points during a game. In snooker, a player can choose from multiple scoring options while they are playing the game, and every choice they make has an effect on the overall game state, so to reflect this I’ve tried to make a dynamic score bar where it’s possible to see the graphic update in real time as a player accumulates points.

Pint Pedant is a web app that calculates how much froth is in your beer by modelling your beer glass as a truncated cone. Here’s some background on the project, followed by a more detailed development walkthrough with coding examples.

I’ve been spending some time working through problem solving challenges on HackerRank; here’s one I really enjoyed. It seemed easy to solve at first glance, but it threw up some interesting edge cases, and after a good start it took me a while longer to write a comprehensive function which would handle all the test inputs.

Recursive functions can be a bit mindbending when you first encounter them. As part of my process to understand them better I looked at some simple examples and tried to step through each function stage by stage to get an idea of how the seemingly paradoxical process of a function calling itself can actually return a result. My intial way into this was through the “bubbling up” analogy, which really intuitive and easy to grasp. Once that makes sense, there’s a refinement to the analogy which looks at the way the call stack manages function calls when a script is being run in browser.

I built the EnigMemulator a loose clone of the Enigma code machine which was used by the German military to send encrypted messages during World War II. I’ve been looking for a project to bed in some of the Javascript fundamentals I’ve learnt, and this has been super fun to work on. The Wikipedia page on the Engima machine is brilliant, so I recommend reading more there if you’re interested, but I’ve tried to give a little flavour below of how the original machine worked before jumping into some details of the coding.

I was looking for a Javascript project which I could complete in a few hours, so I decided to have a go at the classic challenge of building a calculator from scratch. To avoid making this project over-complex I decided from the outset that it would be a good idea to set limits, which meant only building in basic arithmetic, and no fancy features like memory/recall. Setting a realistic scope from the outset was probably the biggest timesaver of all while making this, since adding extended functionality would have rapidly expanded the complexity of the program.

CSS animation methods are quite basic, but they are really intuitive to use and can be combined to create really nice graphics. As a challenge I made an animation to show why day lengths change so much throughout the year when close the earth’s poles.

My friend Lucie pointed out earlier this week that 2021 is a rare year whose value is the product of two consecutive primes. Apparently this hasn’t happened since 1763 and won’t happen again until 2491. Clearly this has great cosmological significance, so I decided to check the figures in case of any awkward mistakes.

Here’s a very simple game which plays a little bit like Snake … without the snake. You play as the white dot, chasing a static enemy around the play area, and every time you catch the enemy it respawns in a random location. This is still trivial at the moment, since there’s no additional gameplay element to add increasing interest or difficulty. For now the limiting factor is simply your own endurance or boredom!

Just a test post to try out my new blog. I’m hosting it on GitHub and generating it using Jekyll.