Final film clip

https://vimeo.com/52660495

Settings

This is an example of the kind of setting I want my character to walk along on her journey from te aro to kelburn, the setting will be simple but different so she is obviously walking forwards to something. I also wil make them all static so the girl is the only thing moving on the settings making her walk more obvious

My character

I wanted to make the characters I use in my film have a quriky slightly alice in wonderland theme to them to make the kind of theme that my app has.

This is a picture of my two main characters. I wanted the helper character (the boy) who gives the girl the app to appear as if he could be a student but with a few quirks about him that make him seem unusual - the giant bowtie and hat

Painting on people

To develop my idea to draw on live people further i decided to paint my app onto them as well. My film zooms into to show what is happening on the screen of the iphone, this is when the painted people are used. I decided to paint them because my app is made by using real people to show the way, and by  making people physically become the app it is literally made by real people.

Here is an example of one of the painted people and the original picture of my app. obviously the people will be simplified as it is very difficult to paint on people!

I also wanted to paint on people to keep my style consistant throughout my app, if i zoomed in and used my original photoshop version I feel as though it is not organic enough to be used with my hand drawn animation

Final Mouse Toy

These are screen shots from my final code. I a very happy with how it has turned out, I like that it is simple but still engaging and has a very distinct fun/cute vibe to it that attracts the audience to play.
As a whole I think the combination of the simplicity of the interactions, the sound effects,  graphics and ideas behind my game create a fun, very easy to use and highly highly addictive application which is exactly the kind of results I was looking to get out of my game.

In one of the first lectures we were asked to consider what the user will learn from our game and if it will still be fun to use once they have learnt it or does it quickly become repetitive and boring? I constantly asked myself this throughout the designing process to make sure that my game kept the user entertained for more than ten seconds.
I think that although it comes clear quite quickly everything my game has to offer, the variation in the interaction (never knowing when they will pop back to full size or what direction the critters will go in) and the fact that it is impossible to get them all small at the same time keeps the user entertained and addicted and it is easy to become mesmerized and keep playing without even really realizing!

BIG development

The main thing i didnt like about my idea for the interim storyboard is how I felt it wasn't pushing the boundaries enough, it was to predictable of the style of app i was using that I would go down the animated hand drawn route. To try and break out of the molde i saw myself in I tried to think what it was that most made my app unique, which i concluded was how it relise of the use of other live people, and how could i apply this idea to my film to tie them together.

The idea that came to me was that I wanted to make my film so that is also had a reliance on live people, thus sprang the decision to use real people as the canvas for my film rather than paper. I would hand draw a stop motion animation but make it come to life by drawing it on real people torsos and arms.

Interim Presentation

To try and create a film that is unique rather than just an advertsiment or tutorial of my i phone app, I really want to stick with the colourful, carnival like style that i developed within my app. I really wanted to expolre the idea of using Alice in Wonderland to loosley base my film around ao that it becomes more of a story where the app features as an element of what the story is based around. I also want to incorporate the quirky, fanasty elements of both carnivals an wonderland to make my app appealing to students becuase it looks fun and stands out

Although my storyboard/idea only shows one of the features of my app, because it is the main one and the others features such as the 'lead' and 'messages' options are very similar and branch off the same concept, i think it is acceptable that not everything is shown.

Adding Sound

I think because I have minimized the amount of interactions, adding sound as an extra element would be perfect in creating the fun, silly theme I have for my game.

To apply to my underwater theme the sounds I have chosen are a background noise of a sort of submerged recording of lots of bubbles that will play quietly and constantly in my code to set the deep sea mood.

This is the source of the sound I am thinking about using:

 http://www.freesound.org/people/digifishmusic/sounds/45521/

The other sound I want to use is to emphasize my main interaction which is the shrinking and re growing of the sea critters. To do this I want to incorporate a cute bubble popping kind of noise for when the critters pop back to full size.

Source to the sound I think I will use:

http://www.freesound.org/people/BMacZero/sounds/96125/

Hopefully sound will give more life to my application and my characters.

Symbols and Sound

This is a screen shot of some of the symbols I am using in my design, the feet and hands replace dots and arrows. I have made this decision because (as i have mentioned before) the main idea of my interface is live/real people. Using little things like hands and feet help to emphasize this point and also fit nicely into the style of my screens.

Unfortunately I couldn't get sound to end up working on my final flash application (though not from lack of trying) which was a real shame as for a small time I had the classic human crowd "ooooo's" and "aaaaaaaah's" going along with the clicking of some of my buttons to give it yet another element of being an application full of life.

5 Images of my Application

I chose this as one of my 5 images as I think it nicely represents the 4 main settings to my system. Although it can often seem like there are lots of bits and pieces and hundreds of smaller components going on in my system such, back up plans,  different style maps, a points system ect, everything can be filed under these 4 groups.

I also thought this was a good representation of the kind of style I have given my system, where everything is very simple but has a bit of flair to it.

This picture is from under my info setting and shows they kind of statistics that would be made avaliable to the viewer. I chose this shot as I think the my info part is one of the elements that makes app more than just a glorified gps, this gives a personal element to the whole system by showing how you can use the app for so much more than just getting directions.

I am particuarlly fond of the 'messages' element of my app because there is nothing more frustrating than trying to track down a tutor or lecturer at uni. Its one thing to try and find a static room let alone a mobile person. The messages function allows students to exchange information on the last known whereabouts of staff members. I also like that this almost serves as a reminder that this app is all about other people, its a interactive system.

This photo shows a map depicting the most popular route of the users direction request. This is what the user is given is no live 'guide' is going the same way to provide live directions. This shows how the app has back up options and alternatives. I have tried to spend alot of time thinking of all scenarios that could occur with this app and coming up with solutions such as this.

Finally, this is a close up map of the users location and other online users they could follow for directions. Although all my maps have a few issues with readability and clarity i think this one is definitely the easiest to follow and read, probably down to the simplicity and road names. All my maps could use some refining to make my app more user friendly.

200 words describing my app

‘Find and Follow’

My navigation system centers around the idea of multiple users all logged in to one app to help each other find their way around. Essentially users can play two roles; follower or guide. The follower logs in with their current and desired location and the app finds guides (other users) who have logged in that they are going the same way. The app then tracks the guide’s phones in order to presents the follower with a map that allows them to literally follow the guides footsteps. Using real time and real life people to give direction allows for the best possible change of avoiding unexpected obstacles that can occur, such as construction. If no one is going to the desired location of the follower at that moment in time, they are given an alternative map showing the most popular route taken to that location over the past 10 days giving them the next best chance of avoiding obstacles. If the user wishes to find a staff member such as a tutor or lecturer (rather than a specific location) there is the ‘message’ option where users can ask or answer text-like messages about peoples whereabouts. As incentive to log in as a guide where you are providing the service rather using it, there is a points system that awards you for every trip you make. This also brings in a fun, competitive element between the other users as there is a public leader board of who has the most points. Every user can be both a follower and a guide they do not always have to log in as one or the other.  A ‘my info’ page that displays the users total points, number of trips made, average time it takes to walk 500m etc to allow the user to keep track of progress within the app.

Adding Background

Finally got around to adding a photo background into my game, I had already decided on a underwater photo so all I had to do was import it into my code. This turned out to be more difficult that I thought as once the image was in the screen it froze up all the interaction for some reason however managed to get it fixed and love the way it looks, i think having a photo rather than a blue screen really brings about a much more realistic and interesting setting for my game to fill my under the sea aesthetic.

Final Colour Schemes/ Colour effects

I wanted to try and make it so when the critters popped back to full shape they would change colour however I couldnt get the timing right on my code so instead the colours change randomly every so often.
I actually prefer this as it is much more subtle so it takes awhile for the user to realize that it is happening but it make the critters have a bit more life of there own and stops them from being so static.


I then had to decide on the colour scheme of my code. Originally I wanted to stick to 5 or 6 bright coral colours however by adding the random changing colour element it meant that I ended up getting heaps of colours i didn't want because I had no control over what random colours were selected.

This is a screen shot of when I made the colour range values from 0 to 255 on all RGB meaning there 'random' function had free range to create any colour:

Although I do like that the colours emphasize the cartoon like features of my game, i wanted my application to have more of a theme and not seem so random, I thought that this made the features seem less linked.

To fix this I changed my code to a greeney/blue colour scheme that still allowed for a lot of variation but kept to the underwater critters effect from my original idea.

This is the kind of colours that are produced :

I like the way these critters seem to sync with the background and appear to have more of a purpose.

More Style Development

(unfortunately stretched)

This is a screen shot of a development in style I tired using the pictures I found as a loose precedent. Using 'old fashioned' transport as symbols within my design was an idea I considered as the app is about travelling from one place to another however I decided there would probably be enough going on in each frame without using pictures that aren't strictly necessary. I also gave more 'grundgy' layering a go but decided it was to all over the show and un-purposeful.  Although I dont want my end design to look crisp and structured I still want it to serve the purpose of highlighting the point of the application.

This is the final style and colour pallet i have decided on to use for my whole flash application. ( I love the way it has a slight circus reference to it - a very people orientated event!) I am happy with the colour pallet choice as I think it is attention grabbing but not because it is overly loud or because it clashes. I also like that it doesn't appear to femminne, which was always a concern of mine as I find my work often appears very obviously female. Because this app is aimed at students I am most happy with how, is this title page is anything to judge off, my app appears fun and easy to use which is all anyone really wants.

Interim Reflection

The main feedback I got from the interim presentation was to make sure I was very critical when its comes to finalizing and refining my work. Because I have so many interactions planned for my final piece I think I will find that many will change or be left behind as I go depending on how effective each one is and what it brings to the game. I have put in a lot of ideas for interactions my game has, however sometimes simple is effective. Overall, my idea seemed to get a good response, i think the 'cute' cartoon factor i proposed is what made it most unique and will be a feature I need to maintain in my final.

Where to Next?

What will make my application FUN TO USE?

To try and make my app stand out, grab the audiences attention and maintain it I am incorportating a lot of different interactions. Although most of them are very simple because there are so many it should take the user some time to work them all out, plus the user will then want to try out certain actions again and again (eg. exploding one of the sea critters to make lots of little ones) which will keep them enteratined.
The life given to the critters as well should add to the fun element by creating a cute cartoony app has a lot of visual elements such as bright colours for the benefit of the user plain gemoetric shapes and colours, this way it also gives the interactions more meaning. Ie. without the critters there would seem to be no purpose to why they shy away from the mouse.


Next Steps....
Will be to work out how to put a timer on the sucked in critters to get them to randomly pop out again. Also to work out how to make all the circles different colours that possibly change when they bump into one another. Next step will be adding the running away from mouse effect I have on one circle to multiple circles. Once I have all of these effects down I want to start adding the characteristics to my critters; shape, eyes etc. Finally I want to add the shaking into exploding more critters effects to complete my coding.
As I do struggle with code, drawing up a step by step diagram of what to do will be the best option to get down exactly what needs to happen when and how.

Digital Application (photoshop storyboard)

 This is a small summary of some of the elements I hope to include in my final application (at this stage)

Below is an example of what I want my sea critters to look like at full size and when sucked in..

                     

Below is a basic example and diagram of one of the interactions I hope to achieve... 

Below is a digital photoshopped image of a hypothetical screen shot of my application.

In this shot I have tried to incude a visual representation of all the interactions I hope to occur. In the lower left hand area is an example of a critter that has just exploded because the user has shaken on of the critters, creating many new small critters.

The arrow in the bottom left corner represents the curser, the fact that no critters are near by represents how they are repealed by the cursor.

The other critters around the screen are examples of critters at full size and fully sucked it.

The different colours used also represet that the colour will change randomly to one of the 6 designated colours when they bump into each other.

The background used in this shot is the same picture I hope to use in my code, I think it is effective at bringing the critters to life, it gives them a habitat.

Colour Scheme and Background

These are a couple of pictures of coral reefs that I want to use as the precedents for my colour scheme. This fits in with the underwater/sea theme of my game but allows me to incorporate much more eye catching colours than the typical blues associated with water.

Below is the background I want to use in my sketch. I think using a photo such as this will bring an extra element to the design rather than using a plain blue background. The live photo hopefully will stop the sketch appearing so flat without having to use 3D animation techniques.

I also like that it is a dark blue so I can use bright coral colours such as orange, pink, turquoise and purple as the colours of my sea 'critters'. This way they will really stand out and hopefully create a vibrant and appealing looking game to draw in the user.

Run-Away Shrinking Circle

Created a piece of coding where a circle not only shrinks when touched by the mouse but also runs away from the curser so you have to chase it across the page making its a lot more interactive and fun. (unfortunately does not look like much through screen shots)

I now need to translate this code to apply to multiple circles (such as my circle grid) and make them all go off in different directions rather than move as one. Also need to add in boundaries so circles have to come back rather than be chased out of the screen and disappear.

Shrinking Circle Grid

This is a grid of circles I created (my first ever attempt at using an aray), where each circle shrinks independently when the mouse hovers over it. As can be seen by the pictures the grid begins with all the circles being the same shape then different patterns can be created by making all the circles different sizes.

The next step will be to develop on this to code to make each circle a different colour and make the circles pop back out to a full sized circle once it has been made a small as possible.

Interim Advice and Reflection

I got some great feedback from the interim presentation that should definitely help with development of my idea. One of the best ideas was to further develop my idea of using a points system as an incentive to make people providing the directions rather than following them log on and allow their phones to be tracked. It was mentioned that I could somehow make them relate to vic plus awards which would definitely be a great idea to look into.

Other ideas were to add features such as timers or counters that measure the approx distance your journey will be and the approx it time it should take you. I think this is an excellent way to add more elements into my design.

Finally, the design and style of my design seemed to be liked for its playfulness and almost cartoonish characteristics making it seem fun and lively, however I should try out a few styles before I committ to one as hand drawn and digital translate very differently.

Creating Critters

To bring my application more to life, I want my cicles to start to take on personality and a life of there own to try and loose some of the 'control' element they have quite a lot of at the moment.

To do this I want to transform my circles into sea "critters" - still using sea urchins as a precedent - by adding elements that make them appear more as individual thinking creations rather than programmed reactants.

So far my ideas are...
- add eyes that follow the curser around the screen - this is to induce the idea that the critters are nervous of the mouse.
- have the critters move away from the mouse when it comes close as it they are scared, also makes it unpredictable as to which direction each critter will jump away from the mouse in,
- adjust the shape so that when the critter sucks in it is a circle but when it it fully out it is a unique shape (possibly spikey)

I have found inspiration to develop my critters from http://www.rmx.cz/monsters/  

- this is a website for 'processing monsters', I want to adapt some of the code on here such as eyes moving to use in my own design.

Above is a screen shot of some of the monsters found on the monster processing site. I thought this was a good example of how just adding eyes and an interesting body shape already makes them appear more alive and FUN!

Developing Style

This is mock up of what the style of my app would appear like if i stuck to the trend and colour scheme I used in my interim wire frame mock up. Orignially I really like this style for the bright coulours, simplicity and the way it catches your eye however I think I prefered it for my interim as the hand done look it better suited the colours than the perfect rectangles and straight lines that are created when it is translated into digital form, it is to static and I want my design to appear lively and liked through more than a bright colour scheme which is what would happen here.

Colour Scheme and Influence

These are a couple of pictures of images I found on google that represent the kind of STYLE i am now looking to use. The slightly vintage, brightly coloured, flat but layered graphic design is perfect bring an extra element to my interface. I think this style is fun and eye catching because of the colours but also has a simplistic element to it that would makes it very flexible end would be able to be used across a whole range of elements that would come with an navigation app, all the way from menus to maps.

Although I would make some adjustment, I also like many elements of both the colour schemes in these photos, the contrast between pale browns and creme with bright blues and reds creates an aesthetic of livelyness that cannot be ignored - as the main focus of my app is that it relies on live people, it is really important to me to capture a sense of life and movement within my design - I want to go in the complete opposite direction to the setrile 'grey' nature modern technology often has.

Interim Wire Frame Diagram

This is my wire diagram representing my navigation system. Developing on my idea of following other people to find places I have produced four main tasks that the app will involved;

Follow - in this setting you are able to log in you location and destination and the app will find you other users who are going the same way you are able to follow through tracking their phones. (represented in red on diagram)

Lead - this is when you log in your location and destination to allow other users to track your phone and follow in your footsteps (you are expected to know where you are going to use this setting)

(represented in orange on digram)

Messages - this is my solution to when the desired destination is actually a person rather than room/ building/startionary object. In this setting you are able to send messages to other users asking if they know anything of the persons whereabouts. Message will be sent to all users who all have the option to either reply or delete. 

(represented in purple on diagram)

My Status - this is setting is where all your statistics, action within the app etc are stored. It lets you know how many trips you have main, your average time over 500m and so on, this is the personal part of the app.

(represented in blue)

Basics for Code (developments continued)

(unfortunately photo has been stretched)

This is a compilation of  screen shots showing my successful coding attempt at making a circle shrink by hovering over it with the mouse. I then was able to reverse the code to make the circle grow.

The trickiest part of the code was working out how to set parameters so that the circle didn't continue increasing forever to the point that it took up the entire screen, also had to work out how to stop the circle disappearing altogether.

I also was able to adjust the speed at which the circle decreased increased. If it was super fast the whole thing sucked in within a second of the mouse hovering over it, if it was slow you could stop/start making the circle gradually smaller by moving the mouse on and off the circumference.

The next step is how to combined the two so that when the circle reaches its minimum point (sucks fully in) it then pops back out to full size.

To do this in the 'sea urchin' way I am aiming for I will need to include some kind of TIMER so they circles randomly pop out after reaching minimum size, not straight away.

Concepts

With the up and coming interim I am starting to narrow down on a few concepts that I think I could work with to develop into a full idea.
The two I am thinking about at the moment are:

1. Using vibrations from a phone (or possible futuristic device) that guides the user through speed or rhythm into going the right way - this concept has come about from the idea that people dont like to appear they are lost or dont know their way. Often people will refuse to ask for directions or even admit they are lost all it an be seen as an embarrassment. Using vibrations from an everyday object such as a phone or ipod is a way for people to be subtly getting directions without appearing to be lost (ie they will not need to be staring at a map or have an unusual piece of equipment on them). The downside of this idea is that it could be very hard to make it clear what it wanted using only vibrations, there is only so much you can do with them.

2. My second idea is loosely based on the iphone app 'Find a Friend' where users add friends to their profile meaning they can then trace where there friends are through their phone and 'find' each other.
I am thinking about a creating something along these lines where users phones are traced so people can use them to get directions if they are going to the same place. It would be completely annoymous (to avoid any claims of the app having a 'stalker'-like nature) but would be a perfect way to avoid unexpected road blocks as a live person is the best way of knowing if something is in the way. This idea would need some serious development and refinement to work out issues such as why people would offer to let people track their phones? however I like that it is a simple idea with ALOT of potential

Development - creating the coding 'foundations'

This is a sequecne of screen shots to show what happens when I tried to make a circle shrink when touched by the mouse. Because I didnt refresh the background each time this was the effect I got instead where the circle slowly fills up with thousands of smaller circles, each with a different colour stroke.

 Although it was not what I inteneded I really liked the effect that was created and thought about ways I could possibly include this in my application. Perhaps the circles must be filled fully before they can start to shrink?

This is the same effect just playing with adjusting colour and size to the scope I might have.

Kelburn Scavenger Hunt

After the room/piano hunt we went on around Kelburn it is clear that finding rooms you have no idea about location wise is a lot lot harder than you would expect, where you would think it would mostly just be logic you can never be to sure, room 15 in the hunter building was accesible only through room 19 with nothing but a note the size of a post it to let you know.

It is also interesting how much of a difference having a vague idea of somethings whereabouts is than not having a clue. It would possibly be a way to look at this project from the different points of view of each as the level of instructions and detail needed in describing a locations whereabouts is significantly less if you have some idea where you may be heading.

It was also hard trying to write down and describe the directions we took to get places. Having to explain things like a slight turn or which door to walk through proved a lot harder than I thought it will be. Even reading back over the instructions we wrote they seemed very vague and unhelpful. This will definitely be something to keep in mind when designing my interface, clarity and being specific in directions.

Playing with Basic Animation

These are some screen shot of my first attempt at playing with basic animation.

Although it is hard to see this is an extremely simple sequence of code I wrote that creates a line that is fixed in the top right hand corner but rotates and stretches to follow the mouse around the screen.

This is an example of an application that uses control more than interaction, although the line respondes to the mouse it is completely predictable about what it is going to do.

A way to make this sketch more fun an interactive could be to make the line unfixed so it can chase the mouse across the screen rather than follow it. Also could add more lines so more is occurring and there is more to focus on.

Story Boarding

These are some storyboards I have drawn up pof my ideas so I have a clear idea of what I am trying to translate into my code.

I have done this detalied board of my idea based of my precedent image (sea uchins), however I drew up the other 2 simpler boards as backup idea's if I found problems with my first idea...

Group Discussions

Some great points were bought up in tutorial while having a group discussion to try and generate some solid ideas preparing for the interim,

As always the ever present question of what do you do if you reach a road block/ how do you avoid road blocks?
Personally I think this is a huge issue that need addressing in order to separate from a standard GPS or computer system that cant think for itself. How can my app offer different options when the user comes to a road block or better yet, how can it avoid the road block in the first place before it becomes an issue?


Can multipul people use your app/technology at the same time?
i.e cannot light up a building as a way of showing somewhere where to go HOWEVER you can give them technology that lights up the building for their eyes only such a pair of glasses. This is a perfect example of how the most outrages ideas can be made into reality thriugh refinement.
Personally I want to design an app that works for multipul users and as general a group as possibly, ie. at this stage I am not looking at doing anything designe for a specific target audience, eg just females or males.

This tut really made me broaden my thinking of this project to include ideas such as does the app/technology have to be something you operation through your hands or can it be smell, or sound based, the more creative the better!
 I now need to start generating/ developing 2-3 solid ideas to find my final one.

Precedent Image

I decided to develop my 'sea urchin' idea as after consideration to the idea of INTERACTION over CONTROL i think this idea could be developed to have the most unpredictable interaction to create fun.

The very basic precedent behind my mouse toy is the idea of a 'spikey' sea urchins that suck back into a ball when touched.

I want to work with this idea as my beginning point starting with the idea of circles that shrink in when touched/hovered over by the mouse.

The circles will then randomly 'pop' back out to full size

As I develop my code I will keep expanding on this idea to add more elements such a color and possibly an action that occurs when you click, this is just the very basic first layer of my design. 

The images below show a sea urchin both with spikes out and sucked in as a small example of what I am thinking....

Initial Ideas

After reading the brief these are some of my very first ideas (to be very developed) that came to mind ....

Balloons  - mouse hovers over them and they fill with air then randomly pop leaving an 'explosion' of more little balloons

kite - mouse is the wind, blows the kite around by the kite flying away from the mouse. Maybe develop a way to change the colour/pattern of the kite

'Metal' wire - wires make up a grid that mouse puts dents by touching it to make different shapes and sculptures.

Sea Urchins - mouse touches one and it 'sucks' in to a small circle then pops back out again

Notes on pictures/screen shots

Unfortunately images put it the setting 'original size' will not show up on the actual blog post so all the screen shots I have used on my blog are slightly stretched as it is the only way they will show up.

Final Image

This is my final 4 panel all placed together showing the change from structure to noise. My idea is based on the concept of looking at something under a microscope. This is what has inspired my colour pallette as i wanted it to look cold and sterile and artificial (like its in a laboratory). I have also used this idea to inspire how across the board it is as though the 'object' is being more and more zoomed in on as more details can be seen but the form starts to be lost. My form is made by having layers and layers of circles drawn by circles then adjusting the variables like width, height and amount of small circles in each big circle etc

Playing with Size

Below is a picture of my final pannel where the only thing i have adjusted is the width and height of the BIG circles (that are made up by the little ones) so that all the layers of circles are the same size. I think it is amazing what a difference it makes, how my 'noise' panel can instantly be turned back into structure with such a straightforward adjustment.

Playing with Stroke

I have experimented with my almost finalized panels by adding a stroke to the outside of some of the circles. I have done this to see what it adds to my design and see if it builds upon the texture or detracts from it.

PANNEL 1 - STROKE

 NO STROKE

PANNEL 2 - STROKE

 NO STROKE

PANEL 3 - STROKE

 NO STROKE

PANEL 4 -  STROKE

NO STROKE

This is probably the only panel i am sure that i prefer the stroke on rather than off, without is the background become blurry and appears almost pixelated, the stroke helps to add depth and layering to the 'chaos' emphasizing the idea of structure and noise.

I also like how it fits the idea the 'microscope' zooming in closer to the form so we start to see more detail (i.e the outline of the shapes) but at the same time the symmetrical structure starts to become lost.

I think i would like to slowly bring in a stoke across my panels to build up more of a contrast between pannel one and pannel 4.