Hello! I'm Alex Coulcher. This is my portfolio site of stuff I've made and helped to make.
Seems like everyagency I go to need a social monitoring tool...
Built on top of Nodejs, MongoDB and Redis, this tool allows for a more experimental approach to social monitoring. Built to support multiple sources (currently only twitter), scr33ns provides users with a backend dashboard that allows them to chain sources and rules together in order to produce reports. An example chain i.e. Trending Tweets, would look like this: 'select tweets that have over 5 retweets, perform sentiment analysis on them, flag as 'rising' recheck them in an hour, if the retweet count is over 50% of the last value, recheck in an hour (loop) other wise remove the flag'. The reports can then be visualised in the dashboard, i.e. line graph representing retweets per hour for tweets flagged 'rising'.
The tool can also be used to delay the search results. This enables the tweet to 'mature', capturing a good ammount of engagement with the tweet (such as retweet, favourite etc) rather than popping it off twitter as soon as its sent.
The reports are currently displayed on a large screen designed to be used in a meeting providing voice control to allow users to switch views, change data limits and ranges as well as bespoke commands that are module specific (i..e change a specific graph axis on a specific page). This modularity allows future modules to easily integrate into the system by a hook based API.
Concepted and built in 1.5 days for a Pizza Hut pitch (that we won :D), this prototype was a Google Cardboard based ordering site.
The Glasses themselves were made from a Pizza Hut box, allowing the user to simply slip in their smartphone. Using an RFID sticker, the phone would then popup the mobile site allowing the user to view the app. Once there, they can browse the Pizza Hut delivery menu by rotating their head to look around the circular 'gallery'. To make a selection, the user simply nodded their head and it was added to their basket.
The site was build using 3.js and its 'Stereo' camera.
We were initially approached by Xchanging to create a generative installation for their brand new office in London.
I worked very closely with the designers at Digit on this project thoughtout the coarse of it. Starting with experimentating with what was possible and and learning from each other by making additional itterations to the visual style and overall story of the peice.
The application was developed in c++/OpenFrameworks and served as an 'engine' that was utilied to create two different outputs. The first was a huge installation, spread across 5 1080p screens in the main reception area of Xchanging. The installation took the user through a custom built 3D particle system, flying from world perspectives though country and regional spaces. Each region of the world represented Xchanging offices and interweved messaging that focused on what the offices specialised in, with nodes and connecting 'networks' representing the relationships between the organisation and its customers.
Being a generative peice, we wanted to have some control over how and where the flights went, including specifics on office size and count. This was aceived though an XML 'timeline' approach specifiying how large and complex a region should be, what messaging is displayed and where as well as the overall flight and 'stop-off regions' it should make.
The second output of the enngine was used for messaging on 10 1080p screen in the corridor. These screens showed very similar visuals but moved between regions in a less extreme way allowing for long-content messaging.
The project was gret fun to build from start to finish and definately surpased all client expectations.
Created a birthday card for my girlfriend <3
The project is actually two parts. A bookmarklet (pictured) and a webpage.
Being an ASOS fan, the bookmarklet can be used when she is browsing for her next peice of clothing that will probably be returned. Once clicked, it takes every image on the page and replaces the faces of the models with random pictures of her :)
The web page serves up the bookmarklet as well as providing the birthday message. The background of the site is a live stream of instagram images tagged with the hashtag #selfie. The backend service takes these images and replaces the faces of people in the selfies with more photos of her.
The facial detection is all done through OpenCV and uses HTML5 canvas on the backend to place the photos on each image. If the face detection fails or cannot find an face, it uses a bank of other random photos of her and overlays the image.
M0ppy is a 'Social Jukebox' build on top of Mopidy, and MPD server that plugs into Spotify and Soundcloud to access remote content. M0ppy itself is a server and frontend, providing an additional layer of functionality to the existing Mopidy server. This functionality includes user login, the ability to like and hate tracks, as well as compiling detailed analytics on how the jukebox itself is used. The project consists of 2 main systems. A Nodejs server which acts as a middleman between the UI and Mopidy. Built using a custom MVC architecture, the server itself is built to run ontop of a Mongo database and utilises websockets for live connectivity between it and the UI. Based on Backbone, the user interface utilises a customised version of backbone.iobind and is served up from the server. The UI itself is currently temporary as I have worked on the full stack, however as the project grows, the UI will be taken over by a collegue. The whole project currently runs in the studio at Digit and is hosted on a RaspberryPI.
At the moment, the project is at v1, with a huge ammount of additional functionality to be included for v2. While it already provides quite a novel social jukebox, these additional features will transform it into a truely origional jukebox, focused around the social aspects of playing music.
To celebrate the launch of the customers new brand, I created this app to allow photographers at conferences around the world use a smartphone to capture pictures of people attending and upload to FlickR. The app (running on an Amazon EC2 server) takes these photos and attempts to detect faces, find points of interest and identify depth in order to find the most plain parts of an image. The reason for this is the size and shape of the branding, by finding large plain and 'less interesting' places, the app can be pretty sure that when it adds the branding to the Photos, it does not overlay it over something important in the photo, like a happy smiling CEO.
The app itself uses OpenCV for the image analysis and Canvas and EaselJS to perform color processing and drawing on the image. Once the images are complete, they are then uploaded back to FlickR for the visitors to see.
A simple app that auto-majically shows you relevant clutter and noise from Twitter based on the websites you visit...
Basically an HTTP proxy/desktop application that categorises every web page that goes through it.
It uses various techniques to calculate weight, sentiment and entity categorisation from big blocks of text that it scrapes from the HTTP response.
The app also factors in data it can extract from the page itself such as Meta and OpenGraph elements. It then uses this categorisation and weighting data to search Twitter for related status updates.
The tweets are presented in the standalone app and attempt to capture the most used colour on the page, applying it to the styling of the tweets. This allows the app to display tweets from multiple websites and be identifiable (i.e. browsing using tabs).
The proxy also allows works for applications other than web browsers, such as screens etc. (results vary... ;D)
To celebrate the aniversay of DDay. Digit created the web site of 'multi-screen' Channel4 show called DDay7.
I worked as a backend developer on this project alongside a project lead. The site was built using his custom PHP framework (now called Croissant) and used Amazons RDS database.
While working on the project, I also contributed to Croissant in the form of its Redis adapter.
An HTTP proxy that replaces images with photoshopped pictures of Nicolas Cage.
Built for lolz (and to play a prank on the intern by setting his system wide HTTP proxy to it...remotely...). The project also has a glitching funcionality that can be swapped out. When enabled, the proxy will manipulate the image and then return it to the client which renders a broken looking image.
Some early experiments into keyword based sentiment tracking on social networks, exploring NLP in a more twitter related way…
Thats all I can say
Some early experiments into collecting musical and instrumental data as well as storing and interpreting it in interesting ways…
The images on the left are taken from various sensing apps for auio and visual built in OpenFrameworks/c++ as well as audio storage in a graph DB.
Visualising a brand experience…
A custom built web application that allows the creation of graphic SVG charts based on rating of a brand. Built using PHP and CodeIgniter. My involvement consisted of BE development including JS and some front end development. The application also supports exporting SVG based graphs to png, pdf or eps.
Thats all I can say
A Christmas card from Digit… and instagr.am…
Instagrammers battle unknowingly to claim Christmas Number One to please recipients of the christmassy URL. It’s Cat vs Dog, Harrods vc Selfridges, lol vs fail as instagram users upload their christmas tagged images. The moment they are uploaded, the moment they are live on our card, so chances are if you took a picture of your cat this christmas, tagged it with Christmas and Cat, chances are u are one of the thousands of photos we have on christmas cat pictures. As likes and comments on the images increase, the photo’s christmassy clout is calculated, rocketing, or stagnating them on the Christmas Top of the Pops. Each categories charts are presented side by side, showing the Christmas countdown… The site also shows photos as they come in LIVE!
The whole backend of the project was built in Node.JS. The server itself consumed the live instagram feed, filtering and storing at very high rates. The server also used the Instagram API to update values for every photo collected including comment and like values. It also removed BAD INSTGRAMMER that flood their photos with popular christmassy tags, then remove them all later, just to get GIRLS… goodbye. The front end was a very straight forward HTML build with all communications between it and the server made over Websockets and falling back to older technologies if not present (Socket.IO). This live link allowed for the front end to constantly update with live photos that were being tagged. All data was storage and caching was done with Redis.
Yea… it’s another URL shortener… woo.
Built for Digit, this shortener has a super kool extra feature… hardware integration. The app itself consists of a complete backend interface allowing users to add new URL’s, as well as view in depth analytics regarding other generated links including geographic lookup data, referral pages and click-through timelines. The shortener also has its own Google Chrome extension, allowing users to add and create URL’s on the fly by simply clicking one button. The additional hardware feature allows the app to ‘push’ client statistics live to a listening hardware interface allowing it to react when someone clicks on one of our shortened URLs. Additional data is sent to the hardware device allowing it to be fully customised and tied to specific URLs. While the actual hardware hasn’t been built yet, I have a few idea’s for it, including bubbles, orange liquid and lots of translucent pipes…
The whole app has been built in NodeJS utilising my own Express/MVC skeleton. It is backed by a Mongo and utilises Passport for authentication and Mongoose for ORM.
This was a very quick and small brief to create an immersive way of experiencing the Illustrative work of Si Scott.
It was part of a gallery setup by Digit and The Brand Union, showcasing the illustrators unique style for Clerkenwell Design week, enticing passers by to come and visit a small exhibition of his work.
The theme of the exhibition was ‘Inifinite Possibilities’. Utilising Si’s artwork, we created an interactive kaleidoscope that would be projection mapped onto the ceiling and two sides of a tunnel leading to the gallery, allowing visitors to be completely immersed in the illustration work and control the millions of possibilities that could be achieved by simply moving though the tunnel.
The main display work was produced in as3/AIR and would simply switch between different images and an idle screen. The interactivity was achieved using a webcam and OpenCV image processing/motion tracking. This data was simply sent via UDP to the AIR app running a Datagram socket. The actual motion tracking engine was built upon a program that I have had knocking around for a while in c++ and OpenFrameworks.
The main idea behind the City Peaks was to get Digit moving in the new year. By simply taking the stairs up to the office, Digit folk compete in a company wide race to climb the stairs of actual buildings around London. Users can also track their progress on a more personal level, plotting the distance they have climbed against mountains across the world. “Scaled k2 at work today, like a boss”.
Read more about City Peaks here:
And some more here:
Woo! On creative applications too!!!
Trying not to use the term ‘Mashup’, this is a convergence of idea’s, namely DildoTweet and Squeezify.
The script allows you to use twitter to send messages to (AIS…’s) squeezebox players. By sending a tweet in the formats listed below, a PHP script, polling the public timeline will pick it up, manipulate and send to the player. If there are any problems along the way (i.e. spelling mistakes, no tracks found etc) a tweet is sent back to the requester.
Random track by an artist (Floor 4):
Specific Track (Floor 2):
#squeezeme2 Slackers Have the Time
Spotify URI (Floor 4):
A couple of days ago, Floor 4 at AIS… were blessed with a brand spanking new Squeezebox player.
There were a couple of problems that I instantly found with it. The web UI was clumsy, the 1 hard-wired remote control served around 20 people and very powerful server settings were left exposed (due to the Web UI). The server itself features a full API (socket api, they also have an undocumented JSON RPC) which can be used to control the players.
Squeezify is a Flash based web application, built in PureMVC, that controls a squeeze server via this API. It’s completely dynamic and relies on the server to enumerate the available players, meaning that players can be added and integrated with the app effortlessly. The user can then search Spotify for tracks, albums etc and the results are then displayed where they are able to add a track to the playlist. The app then sends a command to the squeezebox player to add the track using a modified SpotifyURI. This particular functionality of squeezebox was undocumented and relied on me reverse engineering parts of the JSON RPC API (what the web UI uses) to see how these Spotify URI’s are formatted.
Due to a very restrictive firewall, all the outbound calls to search Spotify (META API) are proxied through a custom PHP script residing on this server (safe zone to the firewall).
While it probably would have been better and easier to write an AIR client for the server, a web application was the only way due to IT restrictions on app installation. This meant that I also had to use a custom c# policy file server to dish out a crossdomain XML file to Flash web clients.
A recent addition to the client is RTMFP messaging. This is a Flash protocol which uses p2p mesh techniques to send messages accross a network. When the user chooses a player, the client joins a group specific to that player and send messages to others connected when users connect or songs are added (as in the picture). It will also send a message if a user attempts to add a blocked artist.
Another recent addition was a blocked artist XML file ;D
Everyone hates Flash banners. This one however is not just crappy old groupon spam or an iPhone shooting competition.
I quite liked the idea behind this project. It’s pretty much just the O2 blueroom… but a lite version. It’s dispatched in the same way as any other Banner add (and is currently built to be served by the FlashTalking platform) and allows a user to search, register and purchase (via an external site) tickets for gigs and events.
The client is built around an AIS…/O2Priority REST API which provides data and functionality to the website itself, as well as various other app’s that use it too. It was built using PureMVC and is pretty powerful for its 300×250 size. The API uses a sophisticated authorization methods which required hashing per request using HTTP headers. One problem that we had to overcome was Flash’s restriction on sending header files with a POST request. To get round this, we simply forced all POST requests to be GET”s and appended an ‘X-Method-Override’ header which included the correct method that was then handled by the API. I wrote a complete library for the API while at AIS… and has been used by me on other Flash banners (one of which showed the latest Arsenal game on an LED board), as well as a web app and AIR application by other developers. It is also fully-ish documented in ASDOC. ;D
See whats Steve has been logging for months.
This app allows you to view all the iPhone/iPad location data that your device has been collecting since you purchased it. It firstly looks through your library folder for devices and puts them into a list. Once you have selected your device, the app then scans through every file in this directory for an SQLLite file that contains the stalker data. It then captures all this data and animates it on a google map for you.
The app is only for experimentation purposes so dont blame me if it doesn’t work for you.
Requires Adobe AIR 2.5 & OSX
Currently a work in progress, this project attempts to visualise your internet journey creating blocks and skyscrapers based on various http requests your browser makes.
It was originally started for a small exhibition on interactivity and is part of a series of visualisations that show requests and files that are transfered to and from your computer when using the web. As you surf, a flashing cursor constantly progresses through the empty world. As you visit sites, towers smoothly build (as they are downloaded) representing various files that you access. The colours represent SWF’s, Images, JS, XML, HTML and others. The user is able to mouse over the towers and get various download information as well as access the file in a new tab.
It’s built in Flash AIR and acts as a proxy server that can be placed between your browser and your network interface, capturing and then forwarding on requests as a normal proxy would, yet logging and recording all the data that is captured. The application also geolocates the source server of each individual file that is requested using a free API. All of this data is then collected and displayed using an Isometric drawing library for as3 called… as3IsoLib… I’m sadly a big fan of working with networking and protocols, so this project was pretty kool as I got to get pretty dirty with HTTP and proxy programming. It also allowed me to experiment with as3IsoLib and working with movement, tweening and user interaction.
üBer l33t glitch0rz shiZZ.
This was part of an ongoing quest into screwing up images. I wanted to try and experiment with THE most basic ways of corrupting images without ruining them completely. Using simple methods of removing, adding and duplicating bytes and null bytes as well as more primitive methods such as converting to UTF strings for manipulation then re-encoding for display. I originally created the piece in PHP to work as an “Image corrupter proxy” which would work along side a client side proxy, redirecting image requests through this PHP proxy to be downloaded, corrupt and sent back to the browser.
The Flash version, as shown here, was originally a quick tool for lulz just to quickly make 3D style images. It simply separated images into RGB channels and allows the user to reposition each channel and manipulate its opacity and blend style. I then bolted on a process that glitched each layer independently which started making some crazy images. It was a very hefty bit of processing however and probably could of been optimised with some further investigation into the low level details of JPEG encoding.
This was a project for Skoda’s ‘Made of meaner stuff’ campaign. It featured a high profile television campaign, as well as online material, including a Flash microsite which I worked on.
An interesting feature of the site was the competition. This was a Flash swf that extracted user data from the Facebook API and calculated a score that determined how mean or lovely a user was. These tests include examining likes, photos, status updates, inboxes and lots more, it even examines profile picture pixel data.
The application itself was built using Flex and PureMVC and used the Facebook Graph API methods as well as FQL to extract data from the users profile. Due to the amount of data the application parses, I used FQL where possible to limit the amount of processing done in the client.
In the final version, it begins with the user allowing the Facebook application access to their profile. Once this is complete, the test begins and the app performs all of the calculations, while this happens, a video plays that shows the two cars morphing, with messages commenting on how the test is going. Once the test is complete, a mean or lovely video outro is played and the user is then taken to the league table. Here they can scroll through a league table of mean and lovely users. The user can also then rate their friends giving them mean/lovely points, affecting their overall score.
This project was a Flash based Charades game for Sky Movies featuring Richard E. Grant and Alison Steadman… and lots of knitwear.
The game started by selecting and actor and listening to an optional video introduction to the game. The user then had to guess 4 different charades correctly before they could enter into a competition. The charades worked by firstly playing a video of the actor performing the charade type and word count. Once the video finished, they are taken to the guessing screen, with an input field and video thumbnail popping up for each word. The user could then click on a thumbnail to popup an overlayed video player that played the word they had to guess. This window also had an input to allow users to make a guess. When they submitted, a smaller video player was overlayed to play a correct, close or incorrect video response to the guess. They could also get a clue video, skip the word, replay or give up, taking them back to the start to change actors. Once the correct guess had been made the over closed and the word is displayed.
When each charade was complete, an outro video was displayed, and after four guesses, a simple form allowed them to be entered into a competition.
Everyone loves to be famous.
With this project, I looked at the thrill of being popular on Twitter. While only having 26 followers, it’s always nice to see that someone read, replied and even passed on my thoughts to the random unknown, so others can hear my spam and know my username and possibly even follow me. This ego-boost-deriving warm-feeling-creating experience was way to big for yet another data visualisation on Twitter made out of balls, lines and neon colours, so a dildo seemed like the obvious choice. This physical expression of the data produced by Twitter allows the user to feel extra enjoyment from the buzz… they are creating.
To make it all happen, a script constantly monitors tweets that mention or retweet our infamous username. Every time a matching tweet is found or someone follows us, a signal is sent to a dildo, allowing a user to experience a more amplified thrill from the fame.
I’ve used Phirehose, a PHP CLI library that provides functionality to connect to Twitters streaming API to find tweets involving a user, as well as their new followers. The script is designed to run remotely as a service, using TCP sockets to connect to the dildo component. This part is an Arduino board with an Ethernet shield which runs a socket server that listens for incoming connections from the remote PHP script. It is also responsible for controlling the dildo and making magic happen.
When the script is started, a socket connection is established between it and the dildo server. Each time we find a matching Tweet (one that contains a certain username), we parse the message calculating a character length which controls the amplitude of the vibrations, and an array of syllables that are extracted from each word in the tweet. When the socket server in the Arduino board receives this message, it uses a PWM signal to control the dildos external power supply creating pulses in accordance with the amplitude and vowels in the message making it seemingly speak out the message. For follower notifications, a single, ramped and extended buzz is produced.
There are some extra features to the ‘twitter fame dildo’ (needs a name) that were added for pure lolz. When a tweet is received, a small tone generator plays a familiar doorbell chime, this is optional depending on the users needs. There is also a way of customising the length each syllable received for extra enjoyment. The server constantly buffers messages received too, allowing tweets to queue up and be executed sequentially, so no enjoyment is ever missed. This queue can be reset if you become too famous/excited at work.
A friend mentioned the word ‘Teledildonics‘ in reference to a completely different subject shortly after completing the project. So after reading that particular wikipedia entry I realised that there was quite a lot of commercial scope for a phase 2. These added features included wifi, admin interface, an interchangeable fleshlight extension for the gentleman… you’ll find out the rest when it hits the shops.
My old flat was perfect. 2 floor terrace, wooden floorboards, a 8×8′ garden, a chicken shop next door… It was so nice, that a small mouse (Mus musculus) came to live with us. His name was Mikhael.
The project was centered around the torment, deception and chaos that Mikhael introduced into mine and my flatmates heavenly paradise. Built in Flash/AIR, the application was designed to be left to run overnight, utilising the webcam on my Laptop to facilitate motion detection/tracking techniques to capture Mikhael in as he did his nocturnal bidding. The motion detection was done using image comparison techniques, updating the base image (which live images were compared too) every so often to take into account any objects that moved or subtly changing light conditions. When the app detected motion, in our case, Mikhael, it would take photographic evidence of the intruder. As the aforementioned intruder scurried around, the app would take further photos. Once all the movement had stopped (there was a 10 minute time out), each of the photo’s would be overlayed onto a picture of the whole scene, drawing crop marks, a timestamp and a path of motion linking each image/sighting.
To express the anguish that Mikhael brought upon the household, I set up a dedicated Facebook user for him. During the image capture, the app would post messages to mine and my flatmates wall, belittling us. The app also uploaded the captured images to a PHP system which were used in the wall posts too to add to the torment.
Unfortunately, Mikhaels antics were too much to bear, and his domination over the house hold was thwart with a swift blow from an old Ikea wardrobe railing. This untimely death didnt coincide with the projects launch date, so our portagonist never got to be the first mouse on facebook.
RIP Mikhael. You will always be remembered.
Web interface based on the interactions of a hand