Loading Gif

Labs

See how the Pixel Ninja bends technology with only his mind... and also a computer

Below you will find a selection of experiments by me at varying stages of complexity and functionality. They are mainly first drafts of finished projects. The experiments I do to find out if something if possible before I pitch it to clients. This of the following pages as a web developers sketchbook.

Disclaimer: Some will only work in the newest browsers and some may be buggy.

  • 17May2015

    Create a HTML5 game tutorial - Part 1

    This is part 1 of a set of tutorials that will hopefully give you an insight of how to go about creating a HTML5 game. This tutorial came about as my brother wanted to piss off his mate by creating a game where you have to shoot sausages at his head! He’s from Cumberia you see. So it makes perfect ...

    Read more
  • 09Feb2015

    Canvas game engine experiment using JAWS.js

    This is a small test I put together when I was researching different javascript game engines for a game I was planning to create. It has a couple of bugs but I thought I would post it for future reference. It uses the JAWS engine. I also looked at ImpactJS but JAWS was free so I experimented with that first. ...

    Read more
  • 09Feb2015

    jQuery gyroscope mobile viewer using three.js

    This is a 3D viewer I was experimenting with. It was made with Homebuilders / Realestate agents in mind. It uses the phones screen like a window to another room/environment. It is the first time I experimented with the new “deviceorientation” and “devicemotion” api’s availavble to javascript. Obviously it works best on a phone but I created a draggable ...

    Read more
  • 08Feb2014

    jQuery speech bubble plugin

    This is a little experiment I did to make the 404 page of my last site a touch more interesting. It involved an angry server that had a rant at you for requesting a page that didn’t exitst. The [url here] it the text was populated by the uri of the page that didnt exist. The plugin will take any ...

    Read more
  • lab-header
    08Feb2013

    jQuery dragging with collision detection example

    Drag an item onto the timeline (the grey box) to create an instance of it. If you release the mouse and the pointer is not over the grey box or there is already an item in that slot then the item will return to its original position. This example was written in responce to the stack overflow question posted here ...

    Read more
  • lab-header
    23Nov2012

    Simple jquery canvas paint app

    This is a quick experiment I put together when I was learning about the canvas tag. As I learn better by doing than reading I thought I would see how long it would take to create a simple paint app with a save function. Turns out not very long. Did this in about 10 mins. I know its ugly. But this ...

    Read more
  • lab-header
    08Feb2012

    Interactive css3 radial gradient background

    This is a project I did for a bit of fun. Just to see if I could. Move your mouse over the screen then click to activate and proceed to wave your mouse around like a crazed fool. The radial gradient is created using css3 and jQuery. It changes color based on mouse position and size based on mouse speed. ...

    Read more
  • lab-header
    08Feb2012

    Hide div on window resize

    This is obviously a very simple example and with the introduction of media queries it is almost obsolete. It was written in answer to a stack overflow question where a guy was asking how to make a single media query he had work in old versions of ie. Normally I would recommend using respond.js but for a single media query that method seems a bit bloated.

    Read more
  • lab-header
    08Jan2012

    jQuery Paralax website example

    This is a jQuery paralax plugin with an extremely basic example. I wrote it as all other plugins around at that time required you to build a website with a absolute positioned layout. I wrote this one to work with any website built with any layout. You can build the website using the normal float and padding/margin methods and ...

    Read more