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