hannah-kilbyPortfolio

Portfolio



Hello, my name is Hannah Kilby. I’m a student at the Univer-
sity of Winchester in my final year of study for my BSc Hons

in Digital Media Development.

This portfolio contains the final outcomes of my two major
projects completed during the first semester of my third and

final year.

This year, I have begun my focus in visuals for audio, as well
as generally building up my skillset in order to promote my-

self.

I hope you enjoy :)

hannah-kilby.co.uk

Rendezvous Interactive Visual Display

After experimenting with developing interactive visuals to accompany audio using HTML, CSS and JavaS-
cript, along with implementing resting and streaming API, I got the opportunity to develop this further into a
working product. My interactive visual display was showcased live at Vodka Nightclub in Winchester for the
Thursday night event, Rendezvous.

This project involved keeping on brand with the original motion graphics that were displayed on the tv screens
around the club, then adding further to them using interactive techniques.

The final outcome features the existing logo with a broken circle design that grows and moves to the beat of
the music. Current tweets from @RendezWinch appear over this visual, giving both client and user, a way
of interacting with the display. The client can use it as a way interact with users for example sharing drinks
deals. The user can use it to interact with the club for example giving a birthday shoutout or asking for a song
request.

My intention was for this to be something that could be run with a very simple set up i.e. open up the link to the
website in a browser. During the projects development however, google chrome declared the getUserMedia
function, which allows access to the microphone and use the audio as an input, to be deprecated on unsecure
origins i.e. not supported unless on a secure origin, for example http.

As I currently do not have access to a server with a secure origin, the project has to be run through a local
server to work correctly or on firefox where other bugs appear. Hopefully in the future, this can developed
further and perhaps have the potential to be launched as a product/service.

4 Hannah Kilby



Redezvous Interactive Visual Display - Research

From my researh, I found a number of demos that featured various forms of visuals respondant to audio.
The examples that featured live media were generally made to be more functional, displaying visual informa-
tion representative to the input such as pitch detection or frequency levels. Examples that featured the input

of a preloaded song were much more artistic, displaying shapes and patterns in rhythym to the audio.
I understand that the reasoning for this is becuase the highly artistic demos tend to max out the Graphics
Processing Unit (GPU). Adding to this by inputting live audio and analysing it would really push the limits of

any modern day laptop.
Many of these demos also specified that they only worked in chrome, or sometimes, some worked in firefox

too. This is because many of the functions are not supported in other browsers.
Most used the HTML5 canvas tag to draw the visuals using Javascript.

When developing my own interactive visual display, I took this into consideration.

6 Hannah Kilby

Frequency visualiser live audio input
http://web-apprentice-demo.craic.com/tutori-

als?tutorial=36&demo=1

Pitch detection live audio input Volume visualiser live audio input
https://webaudiodemos.appspot.com/pitchdetect/index.html https://webaudiodemos.appspot.com/volume-meter/index.html

Visualiser of preloaded audio Visualiser of preloaded audio
http://w-labs.at/experiments/audioviz/ h t t p : / / w w w. m i c h a e l b r o m l e y. c o . u k / e x p e r i m e n t s / s o u n d -

cloud-vis/#atoma-records/simon-hell-light

Visualiser of preloaded audio Visualiser of preloaded audio
https://www.airtightinteractive.com/demos/js/noise-ribbons/ https://uberviz.io/viz/nero/

Redezvous Interactivev Visual Display - Live Audio Input Experiments
(Frequency)

As one of the example that I found in my research came complete with a tutorial (http://web-apprentice-demo.
craic.com/tutorials?tutorial=36), I tried to follow it along and rebuild the exisitng demo.

This was really useful in understanding how the getUserMedia function worked in JavaScript, to take in the
audio from the users microphone and analyse it.

As the code producing the display was very mathmatically heavy, I struggled to understand it as much. As it
was also more for a funational piece showing the frequency level, I felt I needed to find a different way to then

produce the artistic visuals.

8 Hannah Kilby



Redezvous Interactive Visual Display - Tweet Experiments

My lectuer Steve sent me some script to set up my twitter API.
After it sucessfully implemented the tweets, I then began playing around with making it look pretty.
Initally I tried to move the tweet in using Javascript, however it did’t seem to work. Instead, I found a way to

animate it using CSS3 animations.

10 Hannah Kilby



Redezvous Interactive Visual Display - Prototype

After confirming Rendezvous as my client, I wanted to show them my
idea but hadn’t quite got the grasp of being able to fully code it with the

live audio input.
Using the code from one of the demos found in my research, I was able

to input a song instead of using the live audio detection.
I did try and take this demo and mash it up with the test using the fre-

quency visualiser, however I couldn’t quite get it to work.

12 Hannah Kilby



Redezvous Interactive Visual Display - Live Audio Input Experiments
(Volume)

After getting stuck in a rut with trying to combine the two demos I had
found, I decided to take a clean slate and go back to the drawing board.
I scored the internet and found a very simple demo. User the getUser-
Media function, it analysed the volume to produce a number. It then took

this number to make a shape move to the audio.
Perfect!

Using the HTML5 canvas tag, the shape was drawn in the browser.
Something I had seen but not necessarily used before so thought it

would be fun experimneting and learning how to use it.
I took the code from the demo and played around with doing differnet
things with shapes and colours usng the volume number to alter their

appearance.

14 Hannah Kilby















Hannah-Kilby.co.uk Portfolio Website

To promote myself and my work, I began my first digital portfolio whilst doing my A Levels. This was in the form of a
tumblr blog and was used to as part of my interview at the University of Winchester in order to get onto the degree that
I’m currently in my final year of. Now that I am coming towards the end of my degree, I feel that the latest version of my

hand coded portfolio website, truly shows my progression of skill in the digital media industry.

My current portfolio website has really stepped up in comparison to previous versions. Features now include a section
displaying my work in an interactive way using mysqli queries in PHP, and can also be regularly updated through the
setup of a database. A fun introduction to the site and a reflection of my personality is achieved through the use of par-
allax scrolling. Looking at it from a design perspective, the site has become simplified with a consistent use of branding

throughout, and a more fluid user experience.



Hannah-Kilby.co.uk Portfolio Website

In a similar way to how an e-commerce site is setup, I decided to give the option for visiters to my site, to be able to filter the projects on my portfolio
site by the focus they have. This was done using mysql database. This feature also means it is much easier for myself to add projects to my site,

as I can simply enter the information into the database instead of coding it in.

Another feature I added to this that may not be seen is the order in which my projects are displayed. One of the fields in the table of my projects, is
a rating given by myself. The projects are then displayed with the highest rated projects going at the top.



Hannah-Kilby.co.uk Portfolio Website

Focus filter selection navbar php code

Projects displayed in order of rating php code



Project page php code

Main na
Collapases on scroll an

avigation bar HTML code
nd burger button is displayed on smaller

screens

Parrallax scr
Uses JavaSc

Adapted fr
callmenick.com/pos

rolling-

rolling HTML
cript and CSS
rom demo
st/simple-parallax-sc
-effect

Footer HTML