Code
Open-source teaching and demo projects. Click any preview to explore live.
Shepard Tone Generator
If you've noticed the constantly drooping sound in the background of Soft Cell's Tainted Love you've heard a Shepard Tone. This app makes them - they're weird.
CSS Adapt
Think of it as the ultimate dark-or-light mode — total camouflage mode, letting your page blend in with its surroundings.
Segmented
Distinct segmented circles that appear to overlap and intersect — an optical illusion built entirely in HTML and CSS.
Illusion
An optical illusion delivered entirely in HTML and CSS — no scripts, no video.
Grid BG
A grid illusion built using only CSS.
Penrose Tri
A Penrose triangle built using CSS.
ViddyBG
Underlay a live webcam feed into any HTML page.
Smooth DOM Sort
CSS transforms used to animate a sort algorithm live in the DOM.
IMG-melt
A custom HTML element that melts images pixel by pixel.
Canvas Circle
How to draw a circle using Sine and Cosine, illustrated step by step.
Cistercian Numerals
Convert from decimal to Cistercian numerals — a system invented by medieval monks.
UoP3D
UoP logo in 3D using three.js and WebGL.
Snake
A game of Snake using only DOM elements and JS events — no canvas.
Xmas Tree
A Christmas tree that uses only CSS perspective transformation.
Countdown
The Countdown numbers game, built in around six hours during a one-day programming course in 2019 based on audience suggestion.
Covid Message
COVID-19 podium poster generator.
WordCount
A tiny word count app.
Drag-a-Cat
A multi-page drag and drop UI demo.
Drag and Drop File Inspector
Demo of how to cope with multiple files being dropped on a web page.
Hallmarks
A responsive website reminding us what the hallmarks of our graduates are.
CSSPixEd
A pixel editor that uses CSS box-shadows to render the canvas. Try drawing something.
Xmas 2017
A Star Wars advent calendar built with students in 2017.
Xmas 2016
Built in a lecture in under 50 minutes, based on audience suggestions — a revision session for the first 12 weeks of learning.
Structured Start Tab
Make your browser start tab useful with structured links to your most-used pages. A Chrome extension.
Parkrun Event Summary
A Chrome extension that adds an infographic to parkrun pages summarising the results of an event.
Ransom Note
A Chrome extension that reimagines any web page as a 1960s ransom note. Wholly pointless. Built for fun during a hackday.
DCalc
A degree calculator app built live across several lectures, modelling the three degree classification methods the university applies.