Following some research for a dropped work project involving a potential travel update display, I took the knowledge I gained from the TFL api to create a very rude travel update for the London underground network. Working in London as a commuter, I know my frustrations with train companies, and hear the same level of frustrations from users of the underground network.
So when something goes wrong, this project will give an alternative update, using colourful language we say quietly in our minds or out loud when we miss that appointment, that all important meeting, or just simply getting into work late. I have some plans to extend this project further, and possibly some other projects using the similar data available. Applications and skills used during the project: HTML, CSS, JSON, Javascript, and the TFL api.
Over the years learning javascript, I’ve played around with a few experiments online using various weather api’s. LIke any designer that uses Slack, I couldn’t help but be wowed by the infinite amount of gifs on GIPHY, there to be used for quick replies to work colleagues. Soon my love for Giphy extended when I discovered they have an api to collect random gifs based on a search term. So with that in mind, I developed a quick idea for the browser to be a very retro weather tv screen, showing a few details about the local weather, displaying a full screen gif as a background to match the current weather, along with a few css tricks like interlacing the screen.
With the build working identically on mobile, Weathered Gifs could be used as an alternate weather update to what is usually on iOS and Android. Applications and skills used during the project: HTML, CSS, JSON, Javascript, GIPHY api, and Weather Underground api. UPDATE - Sadly the weather api I originally used seems to have stop working, so random values are added to demo how it previously worked.
After countless experiments with Actionscript and a few large online projects, I never got the chance to make a game because of the focus moving away from Flash over to HTML5 at the time. With my time spent learning HTML, CSS, and Javascript I decided back in 2013 this would be the perfect time to push my skills in developing a game for an experiment. Gameplay involves navigating through the portals to progress to further levels, eventually having to defeat enemies through battles involving paper / rock / scissors.
Part maze, part adventure, and my attempt at an RPG was good experience in further learning web development away from Flash. My only regret with the project, relying on jQuery for the whole build, maybe one day I’ll rewrite this project to run smoother on today’s modern browsers. Applications and skills used during the project: Photoshop, and Illustrator. HTML, CSS, JSON, and Javascript.
One day while using Safari, I noticed the icon used for missing images was very close to the item blocks in just about all the Nintendo Mario games. For a bit of fun I worked out the pixel grid of the famous mario sprite, and then rendered this within the page using javascript. Gradually with a delay, each block would run a basic css transition, changing the broken link into the correct pixel colour.
When finally complete the sprite would explode randomly in a mass of colour blocks. Tapping any one of these will rebuild the sprite, rewinding the effect. Applications and skills used during the project: Photoshop. HTML, CSS, and Javascript.
In the past I had seen many graphical clocks online, built in either Flash or HTML5. I looked into an idea for one that was interactive. In past to keep an old watch or antique clock running, the user would have to wind the mechanism. I decided to create a clock that required feeding to display the time correctly.
Pressing the monkey’s nose would ensure a steady stream of bananas, supplying them energy to wake them up. As each monkey falls asleep the scene gradually forms into night with a gentle transition. Instructions are also supplied in a novel way to be sure the clock works as desired. Applications and skills used during the project: Illustrator. HTML, CSS, and Javascript.
Extending my interest in experimenting with HTML / CSS / Javascript led to a fictional web app called the God of Wind. Used to detect if a huge wind god would fall within your area and give you time to reach safety! The app would first detect where the user was situated, use this data to retrieve the weather at that given moment via an api, and check the wind speed to decide the outcome.
A windy day would result in a prefered safe ending, while a warm day in the summer could be very dangerous. To add to the novelty, a google map is displayed showing the shadow of the god falling amongst clouds and other animation effects. Applications and skills used during the project: Photoshop, and Illustrator. HTML, CSS, and Javascript.
Throughout my career generally my portfolios had been built using Flash, this was to be the first to move away from that trend, and to finish off the Jackdaw trilogy theme with side projects. The project allowed me to realise just how much I could do with css animations and having these run on a phone and tablet was very exciting at the time and generated lots of ideas.
The moon within the minimal scene that sits above the branches, will show its correct phase using data from the system clock. Applications and skills used during the project: Photoshop. HTML, CSS, and Javascript.
I wanted my portfolio to do more, so experimented by allowing the user being to wander around the environment, controlling one of the many jackdaws sitting within the scene. Ideas kept coming through the build process, even the inclusion of a secret level, only accessed by talking to certain birds. Controls were kept simple to the arrow keys, up to jump, and down to chirp.
Users had the option to skip between the levels too using default mouse controls. Controlling sound and adding random noises helped to create a very dense atmosphere. To optimise performance leaving the window will cause the flash player to run at a very low frame rate, returning bumps the refresh rate back to 50. Applications and skills used during the project: Photoshop, Illustrator, and Flash. Actionscript 3.0, and XML.
This project started in 2009 and went on through design and development into the autumn of 2010. Despite the time spent on this side project, I learnt so much about programming and at that point in time, it was the most advanced project I’d ever undertaken. I wanted to have three scenes to resemble hours, minutes, and seconds. Looking at either scene at different times of the day would result in a scene to match.
Users were presented a sunrise sky, or bright stars at night, a whole day captured within a webpage. Users had the option to fast forward through the day light settings, and even change the weather using the overlay menu. Early in the project’s life, it was linked up to an XML weather feed from the BBC to adjust the scene on the data it received. Applications and skills used during the project: Photoshop, Illustrator, and Flash. Actionscript 2.0, and XML.
I was asked out of the blue by two filmmakers about redesigning their site for a freelance job, at the time they were working with Billy Bob Thornton on a film called The Astronaut Farmer. Using influences from their films mainly Northfork, I focused on pages that made use of the wide space and gentle use of typography, all with a printed texture applied on top. Applications and skills used during the project: Photoshop, Illustrator. HTML.
One of my final projects at University, I worked closely with a fellow student in creating a little world that can be manipulated by elements. We split the workload in half, and my task focused on character design, their animation, and interactivity within the environments. Throughout we worked together to ensure everything was compatible when we merged our files to create the final outcome. Applications and skills used during the project: Freehand, SoundEdit, and Flash. Actionscript 1.0.
My answer to a University brief on Beat culture and movement, involved the creation of an online fanzine focused on nuclear disarmament. It was a rewarding challenge in trying to get the pamphlet to look as real as possible within a webpage. I experimented heavily with textures and layering within photoshop, and adding ambient background music for each section. And yes... that is Neil from The Young Ones! Applications and skills used during the project: Photoshop, Freehand, Illustrator, Flash, and SoundEdit.