Using some Java libraries (Jenetics, Swing), I took a dataset and implemented both a 

. I gained experience creating fitness functions, choosing appropriate algorithms to suit specific problems, 

  models to classify data, using tools to visualise the data, and finally produce reports.

Visualising machine learning

I created a software rasteriser from scratch in C++, demonstrated through a space-themed scene. I wrote the logic for all necessary aspects of the rendering pipeline, taking primitives from the camera matrix transformations between local-world-camera space to the z-buffer and finally blitting them to a window.

I gained experience applying fundamental graphics programming theory, and memory-management in C++.

A software rasteriser from scratch

As part of a ‘System & Network Security’ module at University, I conducted several practical attacks within a virtual environment, and furthermore produced a risk analysis for a given scenario.

In practical sessions, using Kali Linux for learning purposes, I exploited malicious code execution attacks such as ‘buffer overflow’ (against TLS versions), XSS (cross-site-scripting) and SQL injection. Additionally, I explored the decryption of programs, DNS spoofing and phishing scams.

To assess the theoretical underpinnings of the module, using Microsoft’s FAIR model, I identified a potential STRIDE categorisation for a hypothetical vulnerability and attack.

In the practical sessions, the goal was always to uncover some information, and disrupt an element of the CIA (confidentiality-integrity-availability) triad. From the perspective of somebody defending against attack, I was taught to change a user’s behaviour by altering the opportunity and motivation behind being security-conscious. Resultantly, I'm now familiar with packet-filtering rules, and role/attribute-based access-control strategies, which have enlightened aspects of previous projects that contained such elements.

Some aspects were covered theoretically, which helped provide greater context to the current state of security in-industry. During analysis of threats, the 

was suggested. These were placed into a lifespan that always considered the real-world implications of an attack, which ranged from mundane ‘shoulder-surfing’ to man-in-the-middle attacks against insecure/inappropriate policies.

These activities were congruent with the module’s content. By exploring topics such as the need for security, cryptography, and privacy along with their human elements, I was introduced to the need for security in many components of a computer system, along with an understanding of their practical implementation.

In future, I am confident that I can be critical of the security of my own systems, in addition to designing something that is secured appropriately.

Network risk analysis

I made a tool which provides a generic template for producing risk analyses according to a combination of statistical, mathematical and computational heuristics. It is intended to be used by teams wishing to increase awareness of security issues arising from technical debt. The motivation came from designing a replacement to a system under a DDoS attack, and a need to provide stakeholders with a summary of technical risks involved in undertaking the project.

, and produces Markdown which is malleable enough to be used as documentation.

To follow up, I delivered a lightning talk about the STRIDE model and conducted sessions with team members whenever we uncovered a potential threat to systems when refactoring in the future.

A tool to model system & network security threats

My contract was to deliver extensions to academic database software (RED Cap) to enable the localisation of medical surveys for the Institute of Genetic Medicine. My key responsibilities were to deliver working additions to the software, the lack of which were preventing members of staff from adopting newer versions.
My key responsibilities were:


The project was a success – I was able to fix their issue, and gain experience consulting and working remotely.

Fixing bugs in open-source software

I produced two tongue-in-cheek games using – a 

 for both, which was a good way to break-up the time.

The game runs until the timer runs out, which can be replenished by shooting the person distracting you. I originally encountered a bug that would spawn multiple people, and decided to keep it as a random chance. An unintended but nonetheless interesting strategy that emerged was that you could shoot through multiple people with a single dart, meaning the game actually became easier the longer you survived.

In this game, you have to solve simple logic puzzle as quickly as possible - if you make a mistake, it sets you back. I modelled the constraints of each puzzle such that I could generate new ones in a pseudo-random fashion, meaning each play-through is slightly different.

It was rewarding to see people trying for the highest-scores in real-time, and fun to create workable assets rapidly from photographs (of my hands and Nerf gun). Creating Flash-esque online games is somewhat of a rite-of-passage, so I’m happy to keep them online.

Designing an ode to Flash games in WebGL

We were given the brief of designing an online portal for a real fitness programme "KeepFit" intended to promote exercise in local school children. The end result was a simple, geographical portal to data of fitness activities in schools, with light gamification elements to provide a connected context. The interface had a consideration for user privacy, with levels of role-based access to certain screens, and clear presentation for children.

To create the prototype, I interviewed teachers and a fitness coach at the Newcastle United Foundation in order to produce personas. From this I produced a guided process to address the problems they presented, placing emphasis on the user journeys inside and outside of the context of the proposed interface. I iterated based on live user feedback from 

, and justified my design decisions against academic writing.

Human-computer interaction research

Missing old text adventure books, I created a Facebook Messenger chat-bot to deliver a dynamic, branching-story game experience to users – with persistent state. This entailed writing a 10,000 word space-themed narrative, painting around 50 unique art assets, and reading a lot of API documentation. At the time, I believe it was one of the only games written for Facebook Messenger.


The first bit was the fun bit. I used my whiteboard to map out an entire story plan geographically. Taking inspiration from Bethesda’s game-guides, the result was something akin to a huge, sloppy finite-state-machine. Everything should start on a white-board. It stayed stuck on my wall like a big billboard, a constant reminder that for the next few days it was going to be my job to bring it to life.

Next, I wrote and illustrated the story. I had visions of a space janitor – an unknown protagonist forced to clean a pirate ship, who one day decides enough is enough. Plenty of clichés, coffee, and an entire day later, and, somewhat dazed, I had chunked it into JSON (the fields describing a complex connected node graph).

With content ready, it was time to write the engine. This consisted of two main parts: the client and the game. The client aspect required that responses be constructed to align with the Messenger API, and also the semantic flow of interactions. This entailed dealing with errors such as the inability to understand the user’s intent, select a story to play, and converting elements of the model (such as the current story node) into a rich response. To this end, a series of utility functions were produced to reduce the higher-level game loop to a more manageable sequence of sub-routines. The main benefit of the rich messages (‘bubbles’) was that users needn’t manually type responses – they could tap a button, and the ‘postback’ payload would contain the button’s ID. Additional functions such as ‘help’ exist to counteract variance across devices, and are mapped to from user input using simple string-contains checks. The deliverable from the programming phase of this project was a flow that receives user messages, checks their current state within the system, and then responds with more content.

As for the engine itself, while traversing between nodes was relatively simple given there were no errors in the data (and there were!), edge cases arose through the format of the platform. For example, since nothing prevented users from scrolling up and hitting the buttons of a previous choice again, mitigations had to be put in place to record a user’s history throughout the story. Furthermore, items (or other ‘flags’) collected through events had to be zeroed appropriately if the story were to be reset. Therefore, the most complicated aspect of the engine was ensuring that the user’s current memory/expectations of their story aligned with the model described by MongoDB.

Although conceptually the tasks involved to deliver this project were not incredibly complicated, I had worked to simplify aspects of the interactions, and wanted to share this. With this presently data-agnostic boilerplate, I used Bootstrap to produce a generic bot-generator site. A huge amount of work was undertaken to make the interface malleable. The mobile-friendly page included:

The welcome and error messages were provided as staple (with optional exclusion), however the triggers were the interesting part. A trigger event could react to either the user’s text containing an activation string (e.g. ‘buy’), a specific person’s name, or a postback ID (ergo a specific ‘button’). A sequence of response events (separate messages) of either plain-text or ‘structured content’ could then be added. These structured responses could provide images, links, buttons etc. Finally, when the user is satisfied that their bot encompasses all intended interactions, they could click a button to download the JavaScript to run via NodeJS. I shared this on the web development subreddit to a modest amount of positive reception. It was not intended to be fully featured, but rather provide a functioning springboard, similar to a seed project.

Finally, I set up a Facebook page to facilitate my grand design. I created an avatar with some personality, however the rest was not so simple. When linking its responses to the hosted Node app, Facebook itself was rather particular – it needed to receive responses over HTTPS in a timely manner, and it needed a hosted privacy policy and accompanying video demonstration. At the very least, there were a set of features available to trusted accounts representing ‘developers’, so I was able to enrol the help of some friends for testing purposes until I was ready to publicise it (and ergo tackle their requirements in steps). Being a cheapskate, I ended up using a free domain provided by the government of Mali to route messages through. I set up a DigitalOcean instance with ‘Let’s Encrypt’ and NGINX, and ran my node application.

Once the page was live, it was magical. This is because I could actually see people interacting with it in real-time. Even now, I receive daily messages, and watch people go on their own adventure. In the future, I would love to write more stories, and use analytics to map people’s preferred routes through the trees – this may lead to insights into where my design-abilities shine or falter. Something I didn’t anticipate were the jibes from my friends – their feedback mainly highlighted plot-holes and the need for extra features – one of which immediately implemented was the ability to check your inventory, and another to restart the game if lost.

A text-adventure chat-bot on social media

I designed an online game to pitch to the 

 to raise awareness about endangered species' and and their shrinking habitats. The premise was a 

 game in which players strategise taking territory from an opposing species in real-time. Each round, you contend for hexagonal tiles connected to your habitat, gaining extra moves the more you control - your moves are unknown to your opponent and vice versa, and resolved every few seconds. It borrows elements from the board game 

, and I ran play-tests some friends for design feedback and to work out the kinks.

I started by writing a short design document and researching similar games.

Then, I got it working, leaving visual polish for later and opting to focus on aspects that would allow me to tweak the game design rapidly. For example, I designed the artwork for four species so I could experiment with the number of concurrent players, and wrote a tool to design and load an arbitrary map.

Then, I created the scaffold for client-server communication. The connection-oriented aspect was handled by WebSockets, for which I wrote a thin wrapper to handle validation of messages. This allowed me to fill-in elements of the UI.

Through play-testing, I determined that two biggest obstacles to fun were:

The real-time nature meant that new players were thrown in blind, felt pressure, and ultimately lost momentum to any that already understood the rules. Additionally, I decided to make affordances for the losing player so that it would be more possible for them to make a comeback.

I also added spectator support, so that others could follow along the process, reducing the need for recordings.

Designing an online strategy game

I created a mobile VR game using Unity and Blender. I’d been given a Google Cardboard at a conference, and wanted to try their SDK and learn how to make low-poly models for future games. I made a short game called Winterlight where you walk around a frozen lake, looking up at the sky and sticking your tongue out with the action button to collect falling snowflakes on your tongue. I published it on both the Apple and Google Play app stores for free.

I distinctly remember sitting up on my bed in the dark at 2 a.m. after exhaustedly exporting my 

, and crying in delight as I looked up at the snow through the lens.

Designing a mobile VR experience

I created a tool for visualising HTML DOM elements as exploded-diagrams, inspired by a defunct 

. With my product design background, I found it useful to grouping and differentiating elements in this way as it creates a more physical representation on the screen that can be inspected. We were in the middle of a project at work that was creating novel UI that had become harder to demonstrate, and I thought this may help provide clarity and spark more interest.

We used the tool at work to visualise our product, and the library has had thousands of downloads. Interestingly, the parameters can also be set to create a 2D parallax effect, which has been a recurring design trend in web design.

Blog

Technological tattle, design documents, and miscellaneous musings written during various projects

It's dusty over here... 🤧